loop = jQuery.runloop();

/*$(document).ready(function () {
    //if ($('#autostart').prop('checked') == true) { animate(); }
});*/

function animate() {
    current = $('#current').val();
    loop = jQuery.runloop();

    // remove old keys
    loop.removeKey('0%');
    loop.removeKey('20%');
    loop.removeKey('40%');
    loop.removeKey('60%');

    // Note: only use 5% intervals (10% for <500ms durations)!
    // Different animations for IE6-8 (no fadeIn/fadeOut which look ugly)
    if (getInternetExplorerVersion() > 5 && getInternetExplorerVersion() < 9) {
        // Bring in logo and reflection
        loop.addKey('0%', function () {
            $('#anim' + current + ' .img').animate({ bottom: '80px' }, 1500, 'easeOutBounce', function () { }); $('#anim' + current + ' .imgreflection').animate({ top: '110px' }, 1500, 'easeOutBounce', function () { });
        });

        // Show bullet one (if it has content)
        loop.addKey('10%', function () {
            if ($('#anim' + current + ' .txt1:first').html().length > 0) { $('#anim' + current + ' .txt1').css('display', 'block'); $('#anim' + current + ' .txt1').animate({ left: '70px' }, 500); $('#anim' + current + ' .tick1').css('display', 'block'); }
        });

        // Show bullet two (if it has content)
        loop.addKey('20%', function () {
            if ($('#anim' + current + ' .txt2:first').html().length > 0) { $('#anim' + current + ' .txt2').css('display', 'block'); $('#anim' + current + ' .txt2').animate({ left: '70px' }, 500); $('#anim' + current + ' .tick2').css('display', 'block'); }
        });

        // Show bullet three (if it has content)
        loop.addKey('30%', function () {
            if ($('#anim' + current + ' .txt3:first').html().length > 0) { $('#anim' + current + ' .txt3').css('display', 'block'); $('#anim' + current + ' .txt3').animate({ left: '70px' }, 500); $('#anim' + current + ' .tick3').css('display', 'block'); }
        });

        // Remove everything (after displaying on screen for a couple of seconds)
        loop.addKey('90%', function () {
            $('#anim' + current + ' .img').animate({ bottom: '200px' }, 200, 'easeInQuad', function () { }); $('#anim' + current + ' .imgreflection').animate({ top: '200px' }, 200, 'easeInQuad', function () { }); $('#anim' + current + ' .txt1').css('display', 'none'); $('#anim' + current + ' .txt2').css('display', 'none'); $('#anim' + current + ' .txt3').css('display', 'none'); $('#anim' + current + ' .tick1').css('display', 'none'); $('#anim' + current + ' .tick2').css('display', 'none'); $('#anim' + current + ' .tick3').css('display', 'none');
        });
    }
    else {
        // Bring in logo and reflection
        loop.addKey('0%', function () {
            $('#anim' + current + ' .img').animate({ bottom: '80px' }, 1500, 'easeOutBounce', function () { }); $('#anim' + current + ' .imgreflection').animate({ top: '110px' }, 1500, 'easeOutBounce', function () { });
        });

        // Show bullet one (if it has content)
        loop.addKey('10%', function () {
            if ($('#anim' + current + ' .txt1:first').html().length > 0) { $('#anim' + current + ' .txt1').fadeIn('800'); $('#anim' + current + ' .txt1').animate({ left: '70px' }, 500); $('#anim' + current + ' .tick1').fadeIn('200'); }
        });

        // Show bullet two (if it has content)
        loop.addKey('20%', function () {
            if ($('#anim' + current + ' .txt2:first').html().length > 0) { $('#anim' + current + ' .txt2').fadeIn('800'); $('#anim' + current + ' .txt2').animate({ left: '70px' }, 500); $('#anim' + current + ' .tick2').fadeIn('200'); }
        });

        // Show bullet three (if it has content)
        loop.addKey('30%', function () {
            if ($('#anim' + current + ' .txt3:first').html().length > 0) { $('#anim' + current + ' .txt3').fadeIn('800'); $('#anim' + current + ' .txt3').animate({ left: '70px' }, 500); $('#anim' + current + ' .tick3').fadeIn('200'); }
        });

        // Remove everything (after displaying on screen for a couple of seconds)
        loop.addKey('90%', function () {
            $('#anim' + current + ' .img').animate({ bottom: '200px' }, 200, 'easeInQuad', function () { }); $('#anim' + current + ' .imgreflection').animate({ top: '200px' }, 200, 'easeInQuad', function () { }); $('#anim' + current + ' .txt1').fadeOut('200'); $('#anim' + current + ' .txt2').fadeOut('200'); $('#anim' + current + ' .txt3').fadeOut('200'); $('#anim' + current + ' .tick1').fadeOut('200'); $('#anim' + current + ' .tick2').fadeOut('200'); $('#anim' + current + ' .tick3').fadeOut('200');
        });
    }

    // play and call checkLoop at end
    //alert (loop.isPlaying);
    loop.play(5000, function () { checkLoop(); });
}



function disappear() {
    $('#anim' + current + ' .img').animate({ top: '-85px' }, 200, 'easeInQuad', function () { });
    $('#anim' + current + ' .imgreflection').animate({ bottom: '-85px' }, 200, 'easeInQuad', function () { });
    $('#anim' + current + ' .txt1').fadeOut('200'); $('#anim' + current + ' .txt2').fadeOut('200');
    $('#anim' + current + ' .txt3').fadeOut('200'); $('#anim' + current + ' .tick1').fadeOut('200');
    $('#anim' + current + ' .tick2').fadeOut('200'); $('#anim' + current + ' .tick3').fadeOut('200');
}



function pauseanim() {
    loop.pause();
}



function resetanim() {
    //loop.pause();
    //loop.reset();
    current = $('#current').val();
    $('#cont img').stop(true, true);
    $('#cont span').stop(true, true);
    $('#cont .img').css('bottom', '200px');
    $('#cont .imgreflection').css('top', '200px');
    $('#cont .txt1').css('display', 'none');
    $('#cont .txt1').css('left', '120px');
    $('#cont .txt2').css('display', 'none');
    $('#cont .txt2').css('left', '120px');
    $('#cont .txt3').css('display', 'none');
    $('#cont .txt3').css('left', '120px');
    $('#cont .tick1').css('display', 'none');
    $('#cont .tick2').css('display', 'none');
    $('#cont .tick3').css('display', 'none');
    //$('#play').removeAttr('disabled'); 
}



function stopanim() {
    loop.pause();
    loop.reset();
    resetanim();
    //loop = null;
}



function nextanim(resetLoop) {
    if (resetLoop == true) {
        stopanim();
    }
    count = parseInt($('.anim').length);
    current = parseInt($('#current').val());
    if (current < count) {
        current = current + 1;
    }
    else {
        current = 1;
    }
    $('#current').val(current);
    if (!loop.isPlaying) {
        animate();
    }
}



function prevanim(resetLoop) {
    if (resetLoop == true) {
        stopanim();
    }
    count = parseInt($('.anim').length);
    current = parseInt($('#current').val());
    if (current > 1) {
        current = current - 1;
    }
    else {
        current = count;
    }
    $('#current').val(current);
    if (!loop.isPlaying) {
        animate();
    }
}



function checkLoop() {
    /*if ($('#loop').prop('checked') == true) {
        resetanim();
        nextanim(false);
        animate();
    }*/
    resetanim();
    nextanim(false);
    animate();
}


function getInternetExplorerVersion() {
    var rv = -1; // Return value assumes failure.
    if (navigator.appName == 'Microsoft Internet Explorer') {
        var ua = navigator.userAgent;
        var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
        if (re.exec(ua) != null)
            rv = parseFloat(RegExp.$1);
    }
    return rv;
}