var isHover = false;
var masterTimeout;
var count;
$(document).ready(function(){	
	//Change Scene every 5 seconde
		$(".scrobbler").css("marginTop", - ($(".viewer").height()));
		setInterval("ChangeScene();", 5000);
	//Don't do animation when mouse is over...
		$(".pics").hover(function(){isHover = true;}, function(){isHover = false;});
});
	 
//Animate the scenes from right to left	 
	function ChangeScene(){
		if (!isHover) {	
			var scenes = $(".scrobbler");	
			var currentMargin = parseInt(scenes.css("marginTop").replace("px", ""));
			if (count == null)
			{						
				var marAndPad_V = parseInt($(".scrobbler .pics").css('padding-bottom'))+parseInt($(".scrobbler .pics").css('padding-top'))+parseInt($(".scrobbler .pics").css('margin-top'))+parseInt($(".scrobbler .pics").css('margin-bottom'));
				count = $(".scrobbler .pics").size() - Math.floor((( $(".viewer").height()))/($(".scrobbler .pics").height()+marAndPad_V));	
                //count =4;
if (0) {
    console.log("count = "+(( $(".viewer").height()))+"/"+($(".scrobbler .pics").height()+"+"+marAndPad_V));
    console.log("pic number = "+($(".scrobbler .pics")).size())
}
			}		
			scenes.animate({
				"marginTop": (0)
			}, 4000, switchScenes);
		}
	}

//Take the first 5 scenes and put it at the end. 
	function switchScenes(){
if (0) {
     console.log("marginTop : "+(- $(".viewer").height())) ;
}
		$(".scrobbler").css("marginTop", - ($(".viewer").height()));
		$(".scrobbler .pics:eq("+count+")").prependTo(".scrobbler");
		$(".scrobbler .pics:gt("+count+")").prependTo(".scrobbler");	
	}