$(document).ready(function(){
	newsPage = false; //this one is needed because for newspages we got a different picture path
	current  = 1;
	button   = 1;
	width    = 580;
	
	//on init we have to do some basic actions
	$('#p1').animate({"left": "0px"}, 400, "swing");
	$('#b1').css("backgroundPosition", "left bottom")
	$('#b1 b').css("color","#fff");
	changeSlogan(current);
	/////
	
	
	$("#nextContent").click(function() {
		button = current;
		current++
		
		//reset current
		if (current == (images+1)) {
			current = 1;
		}
		
		changeSlogan(current);
		animateLeft(current,button)
	});
	
	
	$("#previousContent").click(function() {
		button = current;
		current--
		
		//reset current
		if (current == 0 ){
			current = images;
		}

		changeSlogan(current);			
		animateRight(current,button)
	});
	
	
	function changeSlogan(current){
		sloganName = $('#p'+current).attr("lang");
		
		//if there is no slogan name the current page is probaly
		//a page without any slides!
		if (sloganName){
			if(newsPage){
				$('#slogan').html('<img src="'+sloganName+'" />');
			} else {
				$('#slogan').html('<img src="images/content/slogan/'+sloganName+'" />');
			}	
		}
	}
	
	
	function animateLeft(current,button) {
		$('#p'+current).css("left",width +"px");
		$('#p'+current).animate({"left": "0px"}, 400, "swing");
		$('#p'+button).animate({"left": -width+"px"}, 400, "swing");
		setbutton()
	}
	
	
	function animateRight(current,button) {
		$('#p'+current).css("left",-width+"px");
		$('#p'+current).animate({"left": "0px"}, 400, "swing");
		$('#p'+button).animate({"left": width+"px"}, 400, "swing");
		setbutton()
	}
	
	
	function setbutton () {
		$('#b'+button).css("backgroundPosition", "left top")
		$('#b'+button+' b').css("color","#16a");
		$('#b'+current).css("backgroundPosition", "left bottom")
		$('#b'+current+' b').css("color","#fff");
	}
});