$(document).ready(init);

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

/**
 *	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");
	currentCoordinates = $("img").filter("#coordinates_1");
	previousCoordinates = $("img").filter("#coordinates_1");
	setupBackgroundSlider();
	setInfoText();
}

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

/**
 *	Performs sliding transition animations
 */
function animateTransition() {
	$("img").filter("#bg_"+currentID).animate({"left":"0px"}, "slow", "linear");
	$("img").filter("#bg_"+previousID).animate({"left":"2000px"}, "slow", "linear", function(){$(this).css({'left':'-2000px'})});
	$("div").filter("#sliding_content_"+currentID).css({'z-index':'3000'}).animate({"left":"0px"}, "slow");
	$("div").filter("#sliding_content_"+previousID).css({'z-index':'2000'}).animate({"left":"-469px"}, "slow");
	$("img").filter("#coordinates_"+currentID).css({'z-index':'300'}).animate({"top":"0px"}, "normal", "linear");
	$("img").filter("#coordinates_"+previousID).css({'z-index':'200'}).animate({"top":"17px"}, "normal", "linear", function(){$(this).css({'top':'-17px'})});
	setInfoText();
}

function setInfoText() {
	element = $('.infopanel span').each(function(){
		$(this).hide();
	});
	$(element[currentID - 1]).show();
}