$(document).ready(function() { 

	// setting some vars

	var start = 0;
	var end = total-1;
	var current = 0;
	var play = false;
	
	showcounter();
	
	// Check animation and adjust css if needed
	
	if(animation == 1 && animation == 1){
		$('#presentationcontainer').css({'width': (total * 480) + 'px'});
		$('#presentationcontainer').css({'height': '300px'});
	}
	if(animation == 2){
		$('#presentationcontainer').css({'width': '480px'});
		$('#presentationcontainer').css({'height': (total * 300) + 'px'});
	}
	
	// Keycontrollers 
	
	$(document).bind('keydown', 'right', function(evt){forward();});
	$(document).bind('keydown', 'left',  function(evt){backwards();});
	$(document).bind('keydown', 'up', function(evt){backwards();});
	$(document).bind('keydown', 'down',  function(evt){forward();});
	
	// btncontrollers
	
	$('#goforward').click(function(){
		forward();
	});

	$('#goback').click(function(){
		backwards();
	});

	$('#gotostart').click(function(){
		gotostart();
	});

	$('#gotoend').click(function(){
		gotoend();
	});
		
	// functions
	
	function forward(){
		if(current != end && play == false){
			if(animation == "0" || animation >= "3"){
				l = $('#presentationcontainer').css("left");
				l = parseInt(l) - 480;
				$('#presentationcontainer').css({"left": l +"px" });
				current ++;
			}
			if(animation == "1"){
				play = true;
				l = $('#presentationcontainer').css("left");
				l = parseInt(l) - 480;
				$('#presentationcontainer').animate({"left": l +"px" }, 500, function(){ play = false;});
				current ++;
			}
			if(animation == "2"){
				play = true;
				t = $('#presentationcontainer').css("top");
				t = parseInt(t) - 300;
				$('#presentationcontainer').animate({"top": t +"px" }, 500, function(){ play = false;});
				current ++;
			}
		}
		showcounter();
	}
	
	function backwards(){
		if(current != start && play == false){
			if(animation == "0" || animation >= "3"){
				r = $('#presentationcontainer').css("left");
				r = parseInt(r) + 480;
				$('#presentationcontainer').css({"left": r +"px" });
				current --;
			}
			if(animation == "1"){
				play = true;
				r = $('#presentationcontainer').css("left");
				r = parseInt(r) + 480;
				$('#presentationcontainer').animate({"left": r +"px" }, 500, function(){ play = false;});
				current --;
			}
			if(animation == "2"){
				play = true;
				t = $('#presentationcontainer').css("top");
				t = parseInt(t) + 300;
				$('#presentationcontainer').animate({"top": t +"px" }, 500, function(){ play = false;});
				current --;
			}
		}
		showcounter();
	}
	
	function gotostart(){
		if(animation == "0" || animation >= "3"){
			$('#presentationcontainer').css({"left": "0px" });
			current = 0;
		}
		if(animation == "1"){
			play = true;
			$('#presentationcontainer').animate({"left": "0px" }, 500, function(){ play = false;});
			current = 0;
		}
		if(animation == "2"){
			play = true;
			$('#presentationcontainer').animate({"top": "0px" }, 500, function(){ play = false;});
			current = 0;
		}
		showcounter();
	}
	
	function gotoend(){
		if(animation == "0" || animation >= "3"){
			l = -480*end;
			$('#presentationcontainer').css({"left": l +"px" });
			current = end;
		}
		if(animation == "1"){
			play = true;
			l = -480*end;
			$('#presentationcontainer').animate({"left": l +"px" }, 500, function(){ play = false;});
			current = end;
		}
		if(animation == "2"){
			play = true;
			t = -300*end;
			$('#presentationcontainer').animate({"top": t +"px" }, 500, function(){ play = false;});
			current = end;
		}
		showcounter();
	}
	
	function showcounter(){
		$('#counter').stop();
		$('#counter').html((current+1)+' / '+total);
		$('#counter').css({'display':'block', 'opacity':'1'});
		$('#counter').animate({'opacity':'1'}, 600, function(){
			$('#counter').animate({'opacity':'0'}, 300);
		});
	}
	
});