$(document).ready(initialise);

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

function initialise() {
	currentBackground = $("img").filter("#image1");
	currentContent = $("div").filter("#panel1");
	previousBackground = $("img").filter("#image1");
	previousContent = $("div").filter("#panel1");
	setTimeout("autoScroll()",15000);	
	setupBackgroundSlider();
}

function autoScroll() {
	previousID = currentID;
	if(currentID < 4) {
		currentID = currentID + 1;
	}
	else {
		currentID = 1;
	}
	animateTransition();
	setTimeout("autoScroll()",15000)
}

function setupBackgroundSlider() {
	$("a.show1").click(function(event){
		event.preventDefault();
		previousID = currentID;
		currentID = 1;
		animateTransition();
	});

	$("a.show2").click(function(event){
		event.preventDefault();
		previousID = currentID;
		currentID = 2;
		animateTransition();
	});

	$("a.show3").click(function(event){
		event.preventDefault();
		previousID = currentID;
		currentID = 3;
		animateTransition();
	});

	$("a.show4").click(function(event){
		event.preventDefault();
		previousID = currentID;
		currentID = 4;
		animateTransition();
	});
}

function animateTransition() {
	$("img").filter("#image"+currentID).stop().animate({"left":"0px"}, 600, "swing");
	$("img").filter("#image"+previousID).stop().animate({"left":"985px"}, 600, "swing", function(){$(this).css({'left':'-985px'})});
	$("div").filter("#panel"+currentID).css({'z-index':'3000'}).stop().animate({"left":"0px"}, 600, "swing");
	$("div").filter("#panel"+previousID).css({'z-index':'2000'}).stop().animate({"left":"-535px"}, 600, "swing");
}