// show buttons if javascript available.
$('#buttons').fadeIn(500);

// pause bool
var paused = false;

// set current slide
var currID = 1;

//get number of buttons
var count = $('#buttons span.fadeBtn').length;

// start the slide show
startFirstTime();


function startFirstTime(){
    
    $(document).oneTime(7000, function(i) {
        fadeIt(currID + 1);
        startTime()
    })
}

// slide show timer
function startTime() {
    $(document).everyTime(10000, 'slideshow', function(i) {
        if (currID < count) {
            fadeIt(currID + 1);
        }
        else {
            fadeIt(1);
        }
    })
}

// bind control click
$('#buttons span.fadeBtn').click(function() {
    var clickedID = parseInt($(this).attr('id'));
    if (clickedID != currID) {
        $(document).stopTime('slideshow')
        fadeIt(clickedID);
        if (!paused) {
            startTime();
        }
    }

})

// bind pause click
$('#pause').toggle(
function() {
$(document).stopTime('slideshow');
$('#pause').addClass('pauseActive');
paused = true;
},
function() {
startTime();
$('#pause').removeClass('pauseActive');
paused = false;
}
)

// the fading function
function fadeIt(fadeID) {
    currID = fadeID;
    $('#fades .fade:visible').fadeOut(1000);
    $('#fade' + fadeID).fadeIn(1000, function() {
        if (fadeID == 2 && !bounced) {
            bounceIn();
        }
    });
    $('#buttons span').removeClass('buttonActive');
    $('#' + fadeID).addClass('buttonActive');
}


// hide bouncing image
$('.shadow, .bounce').hide();

//default easing.
//$.easing.def = "easeOutElastic";

// bounced bool
var bounced = false;

function bounceIn() {
    $('#bounce1').css({ 'top': '-100px' }).show().animate({ 'top': '20px' }, { queue: 'false', duration: 1500, easing: 'easeOutElastic' })
    $('#shadow1').css({ 'top': '300px' }).show().animate({ 'top': '156px' }, { queue: 'false', duration: 1500, easing: 'easeOutElastic' })
    $('#bounce2').css({ 'top': '-100px' }).show().animate({ 'top': '20px' }, { queue: 'false', duration: 2000, easing: 'easeOutElastic' })
    $('#shadow2').css({ 'top': '300px' }).show().animate({ 'top': '156px' }, { queue: 'false', duration: 2000, easing: 'easeOutElastic' })
    $('#bounce3').css({ 'top': '-100px' }).show().animate({ 'top': '20px' }, { queue: 'false', duration: 2500, easing: 'easeOutElastic' })
    $('#shadow3').css({ 'top': '300px' }).show().animate({ 'top': '156px' }, { queue: 'false', duration: 2500, easing: 'easeOutElastic' })
    bounced = true;
}