var timerJT;
var timerAZ;
var nextAnim = 'jt';

$(document).ready(function(){

    // Handle mugshot rotation
    initMugshots();

    // Handle illustration
    initIllustration();

});

function supportsTransform(){
    var p,
        properties = ['transform', 'WebkitTransform', 'MozTransform'],
        el = document.getElementsByTagName('body')[0];
	p = properties.shift();
    while (p) {
        if (typeof el.style[p] != 'undefined') {
            return true;
        }
		p = properties.shift();
    }
    return false;
}

function initMugshots(){
    if (supportsTransform()) {
        $('#mugshots a')
            .hover(shuffleImg)
            .focus(shuffleImg)
            .mouseout(resetImg)
            .blur(resetImg);
    }
}

function initFunnies(el, delay){
    if ((nextAnim == 'jt') && el.hasClass('jt')) {
        timerJT = setTimeout("toppleImg('jt', timerJT)", 500 + delay);
    }
    else if ((nextAnim == 'az') && el.hasClass('az')) {
        timerAZ = setTimeout("unpinImg('az', timerAZ)", 500 + delay);
    }
}

function resetImg(e){
    // If we reset before animation is fired, cancel timers.
    if (typeof timerJT != 'undefined') {
        clearTimeout(timerJT);
    }
    if (typeof timerAZ != 'undefined') {
        clearTimeout(timerAZ);
    }

    if (typeof e == 'string') {
        if (e == 'jt') {
            nextAnim = 'az'; // Now JT anim is done, do AZ next.
        }
        else if (e == 'az') {
            nextAnim = 'jt'; // After AZ anim is done, do JT next again.
        }

        var eLi = $('#mugshots .' + e),
            eImg = $('#mugshots .' + e + ' img');

        eImg.stop(true).animate({rotate: '0', left: '0', bottom: '0'}, function(){
            eImg.removeClass('animating');
            eImg.css({transformOrigin: '50% 50%', zIndex: 1});
        });

        eLi.children('a')
            .hover(shuffleImg)
            .focus(shuffleImg)
            .mouseout(resetImg)
            .blur(resetImg);
    }
    else {
        var eImg = $(this).children('img');

        eImg.stop(true).animate({rotate: '0', left: '0', bottom: '0'}, function(){
            eImg.removeClass('animating');
        });
    }
}

function shuffleImg(){
    var eLi = $(this).parent('li'),
        eImg = $(this).children('img');

    // Don't animate if already animating
    if (!eImg.hasClass('animating')) {
        eImg.addClass('animating')

        // We need to initialise the secondary animations now rather than
        // at the end of the animation, since the first animation may get
        // reset before it has completed, meaning the timer for the 
        // secondary animations may not get cleared. To avoid this while
        // maintain a hold before the secondary animations, we add a delay
        // equal to the animation's length.
        initFunnies(eLi, 750);

        // Undo :hover CSS and animate
        eImg.css({width: '110px', margin: '0'})
            .animate({rotate: '-2deg', bottom: '-5px'}, 500, function(){
                eImg.animate({rotate: '0'}, 250);
            });
    }

}

function shakeImg(person){
    var eImg = $('#mugshots .' + person + ' img'),
        howMuch = 8,
        speed = 150;

    // Animate
    swingLeft();

    function swingLeft(){
        eImg.animate({rotate: '-2deg'}, speed, function(){
                eImg.animate({rotate: '0'}, speed, function(){
                    howMuch--;
                    if (howMuch > 0) {
                        swingRight();
                    }
                });
            });
    }

    function swingRight(){
        eImg.animate({rotate: '2deg'}, speed, function(){
                eImg.animate({rotate: '0'}, speed, function(){
                    howMuch--;
                    if (howMuch > 0) {
                        swingLeft();
                    }
                });
            });
    }
}

function sniggerImg(person){
    var eImg = $('#mugshots .' + person + ' img'),
        howFunny = 8,
        speed = 100;

    // Animate
    swingLeft();

    function swingLeft(){
        eImg.animate({rotate: '-1deg', bottom: '2px'}, speed, function(){
                eImg.animate({rotate: '0', bottom: '-2px'}, speed, function(){
                    howFunny--;
                    if (howFunny > 0) {
                        swingRight();
                    }
                    else {
                        eImg.animate({left: '0', bottom: '0'}, 250);
                    }
                });
            });
    }

    function swingRight(){
        eImg.animate({rotate: '1deg', bottom: '2px'}, speed, function(){
                eImg.animate({rotate: '0', bottom: '-2px'}, speed, function(){
                    howFunny--;
                    if (howFunny > 0) {
                        swingLeft();
                    }
                    else {
                        eImg.animate({left: '0', bottom: '0'}, 250);
                    }
                });
            });
    }
}

function toppleImg(person, t){
    $('#mugshots .' + person + ' a').unbind();

    clearTimeout(t);

    $('#mugshots .' + person + ' img')
        .css({transformOrigin: '0 100%', left: '0', bottom: '-5px', zIndex: 3})
        .animate({rotate: '-90deg', left: '6px', bottom: '-7px'}, 1250, 'easeOutBounce', function(){
            if (person == 'jt') {
                tiptoeImg('jg');
            }
            setTimeout("resetImg('" + person + "')", 3000);
        });
}

function tiptoeImg(person){
    $('#mugshots .' + person + ' img')
        .animate({bottom: '26px'}, 1750, function(){
            sniggerImg('cs');
            var timerAZ = setTimeout("sniggerImg('az')", 150);
            var timerAC = setTimeout("sniggerImg('ac')", 175);
            var timer = setTimeout("$('#mugshots ." + person + " img').animate({bottom: '0'}, 1750)", 1000);
        });
}

function unpinImg(person, t){
    $('#mugshots .' + person + ' a')
        .unbind();

    clearTimeout(t);

    var tweak = $.browser.mozilla ? '0.5px' : '0';

    $('#mugshots .' + person + ' img')
        .css({transformOrigin: '0 100%', left: tweak, bottom: '-5px', zIndex: 3})
        .animate({rotate: '-90deg', left: '4px', bottom: '-5px'}, 3000, 'easeInExpo', function(){
            shakeImg('ac');
            $('#mugshots .' + person + ' img').animate({rotate: '-220deg', left: '6px', bottom: '2px'}, 2500, 'easeOutElastic', function(){
                sniggerImg('cs');
                var timerAC = setTimeout("sniggerImg('ac')", 67);
                var timerJG = setTimeout("sniggerImg('jg')", 133);
                var timerJT = setTimeout("sniggerImg('jt')", 167);
            });
            setTimeout("resetImg('" + person + "')", 3000);
        });
}

function initIllustration(){
    illustrationElement = $('#illustration');
    illustrationPosition = illustrationElement.css('left');
    illustrationElement.dblclick(function(){
        var timerIllustration;
        if ($(this).css('left') == illustrationPosition) {
            $(this).animate({left: "0px"}, 1000);
            clearTimeout(timerIllustration);
            timerIllustration = setTimeout('resetIllustration()', 4000);
        }
        else if ($(this).css('left') == "0px") {
            resetIllustration();
            clearTimeout(timerIllustration);
        }
    });
}

function resetIllustration(){
    illustrationElement.animate({left: illustrationPosition}, 250);
}