$(document).ready(init);

var currentBackground;
var currentContent;
var previousBackground;
var previousContent;
var currentID = 1;
var previousID = 1;
var play = null;

/**
*	Initializes the page
*/
function init() {
    currentBackground = $("img").filter("#bg_1");
    currentContent = $("div").filter("#sliding_content_1");
    previousBackground = $("img").filter("#bg_1");
    previousContent = $("div").filter("#sliding_content_1");
    setupBackgroundSlider();

    rotateSwitch(); //Run function on launch
}

/**
*	Sets up the background animation events
*/
function setupBackgroundSlider() {
    // slide 1
    $("a").filter(".slide_1").click(function(event) {
        clearInterval(play);
        event.preventDefault();
        previousID = currentID;
        currentID = 1;
        animateTransition();

        rotateSwitch();
    });

    // slide 2
    $("a").filter(".slide_2").click(function(event) {
        clearInterval(play);
        event.preventDefault();
        previousID = currentID;
        currentID = 2;
        animateTransition();

        rotateSwitch();
    });

    // slide 3
    $("a").filter(".slide_3").click(function(event) {
        clearInterval(play);
        event.preventDefault();
        previousID = currentID;
        currentID = 3;
        animateTransition();

        rotateSwitch();
    });
}

/**
*	Performs sliding transition animations
*/
function animateTransition() {
    $("img").filter("#bg_" + currentID).animate({ "left": "0px" }, 500, "linear");
    //$("img").filter("#bg_" + currentID).animate({ "left": "0px" }, "slow", "linear").fadeIn();
    //$("img").filter("#bg_" + previousID).animate({ "left": "481px" }, "slow", "linear", function() { $(this).css({ 'left': '-481px' }) });
    $("img").filter("#bg_" + previousID).fadeOut("slow", function() { $(this).css({ 'left': '-481px' }) }).fadeIn();
    $("div").filter("#sliding_content_" + currentID).css({ 'z-index': '3000' }).animate({ "left": "0px" }, "slow");
    $("div").filter("#sliding_content_" + previousID).css({ 'z-index': '2000' }).animate({ "left": "-230px" }, "slow");
}

//Rotation  and Timing Event
rotateSwitch = function() {
    play = setInterval(function() { //Set timer - this will repeat itself every 5 seconds
        previousID = currentID;
        currentID++;
        if (currentID > 3) { //If paging reaches the end...
            currentID = 1; //go back to first
        }
        animateTransition(); //Trigger the paging and slider function
    }, 7000); //Timer speed in milliseconds (7 seconds)
};