﻿$(document).ready(function () {
    loadFancy();
});

var thisID = 0;

img1 = new Image();
img1.src = '/images/OuterLimitsOnly.png';
img1 = new Image();
img1.src = '/images/error.jpg';

function loadFancy() {
    $("a.fancybox").fancybox({
        'transitionIn': 'elastic',
        'transitionOut': 'elastic',
        'speedIn': 300,
        'speedOut': 200,
        'overlayShow': false,
        'hideOnContentClick': true,
        'cyclic': true,
        'overlayShow': true,
        'overlayOpacity': 0.7,
        'overlayColor': '#000',
        'titlePosition': 'over',
        'transitionIn': 'elastic',
        'transitionOut': 'elastic'
    });
}

function loadGallery() {
    $('#gallery').galleria({
        transition: 'fade',
        autoplay: 5000,
        lightbox: true,
        debug: false
    });
}

var isStudioShown = 0
var isArtistShown = 0

function studioSelect(elmID, stuID, hideArt) {
    var l = '0';
    var t = '-150';
    if (elmID == 0) {
        l = '0';
    };
    $('#studioImg' + elmID).animate({
        left: l,
        top: t
    }, 1000, function () {
        // Put it back
        $('#studioImg' + elmID).css('left', '-=' + l);
        $('#studioImg' + elmID).css('top', '-=' + t);
    });
    $('#headingLogo').fadeOut(300, function () {
        $('#headingLogo').css('width', 502);
        $('#headingLogo').html('<img src="/images/OuterLimitsOnly.png" onclick="showAllStudios();" alt="Outer Limits Tattoo and Piercing" />').fadeIn(300);
    });
    $('#studioSel').animate({ opacity: 0 }, 300, function () {
        $.ajax({
            url: '/getStudio.aspx?id=' + stuID,
            success: function (data) {
                if (data != '') {
                    $('#studioSel').hide();
                    $('#studio').hide().html(data).css('opacity', 100).fadeIn(300);
                    loadFancy();
                } else {
                    alert('Whoops!');
                }
                isStudioShown = 1;
            }
        });

        $.ajax({
            url: '/getArtistList.aspx?id=' + stuID,
            success: function (data) {
                if (data != '') {
                    $('#artistAll').fadeOut(500, function () {
                        if (hideArt != 1) {
                            $('#artists').hide().html(data).fadeIn(500);
                        } else {
                            $('#artists').hide().html(data);
                        }
                        loadFancy();
                    });
                } else {
                    alert('Whoops!');
                }
            }
        });
    });
}



function showAllStudios() {
    $('#headingLogo').fadeOut(300, function () {
        $('#headingLogo').css('width', 706);
        $('#headingLogo').html('<img src="/images/OuterLimitsIntroLogo.png" alt="Outer Limits Tattoo and Piercing" />').fadeIn(300);
    });
    $('#studio').animate({ opacity: 0 }, 300, function () {
        $('#studioSel').hide().css('opacity', 100).fadeIn(300);
        $('#studio').html('');
        isStudioShown = 0;
    });
    $('#artistAll').hide().css('opacity', 100).fadeIn(300, function () {
        $('#artists').hide();
        $('#artists').html('');
        $('#artist').hide();
        $('#artist').html('');
        $('#portfolio').hide();
        $('#portfolio').html('');
    });
}


function artistSelect(elmID, artID, stuID) {
    if (isStudioShown == 0) {
        studioSelect(elmID, stuID, 1);
    }
    $('#artistAll').animate({ opacity: 0 }, 300, function () {
        $.ajax({
            url: '/getArtist.aspx?id=' + artID,
            success: function (data) {
                if (data != '') {
                    $('#artists').hide();
                    $('#artist').hide().html(data).css('opacity', 100).fadeIn(300);
                    loadFancy();
                } else {
                    alert('Whoops!');
                }
                isArtistShown = 1;
            }
        });
        $.ajax({
            url: '/getPortfolio.aspx?id=' + artID,
            success: function (data) {
                if (data != '') {
                    $('#portfolio').hide().html(data).fadeIn(500);
                    loadGallery();
                } else {
                    alert('Whoops!');
                }
            }
        });
    });
}

function showAllArtists() {
    $('#artists').hide().css('opacity', 100).fadeIn(300, function () {
        $('#artist').hide();
        $('#artist').html('');
    });
    $('#portfolio').fadeOut(300);
    $('#portfolio').html('');
}

function getPorts(id, t) {
    $.ajax({
        url: '/getPortfolio.aspx?id=' + id + '&t=' + t,
        success: function (data) {
            if (data != '') {
                $('#portfolio').hide().html(data).fadeIn(500);
                loadGallery();
            } else {
                alert('Whoops!');
            }
        }
    });
}

var sendIt = function(){
    var email = $(this).children('form').children('#email').val();
    var message = $(this).children('form').children('#message').val();
    var name = $(this).children('form').children('#name').val();
    $.fallr('hide', function () {
        $.ajax({
            url: '/sendMail.aspx?id=' + thisID + '&m=' + message + '&name=' + name + '&mail=' + email,
            success: function (data) {
                $.fallr('show', {
                    content: '<p>They have received your message!</p>'
                });
            }
        });
    });
}


function sendEmail(id) {
    thisID = id;
    $.fallr('show', {
        icon        : 'mail',
        width       : '500px',
        content     : '<h4>Send '+ $('#thisArtistName').html() +' A Message</h4>'
                    + '<form>'
                    +     'Your Name: <input type="text" name="name" id="name" />'
                    +     'Your Email: <input type="text" name="email" id="email" />'
                    +     'Your Message: <textarea name="message" id="message"></textarea>'
                    + '</form>',
        buttons : {
            button1 : {text: 'Send Message', danger: true, onclick: sendIt},
            button4 : {text: 'Cancel'}
        },
    });
}
