// JavaScript Document
//you must include jquery for use defil and a specific css 
/* example css 
#blocdroit1 {
  position: relative; <- !! 
  overflow: hidden; <- !! 
   height: 250px;
   width: 300px
}


.scrollable {
   position: absolute; <- !!
   top: 260px; <- hide whith 'overflow: hidden;' 
   height: 240px;
   width:300px;
}
*/
var headline_count;
var headline_interval;
var current_headline = 0;
var old_headline = 0;
$(document).ready(function () {
	headline_count = $("div.scrollable").size(); //count all occurence of class scrollable
	$("div.scrollable(" + current_headline + ")").css("top", "5px"); //set top of the first scrollable
	headline_interval = setInterval(headline_rotate, 5000); //execute headline_rotate evry 5000 milliseconds
	$("#blocdroit1").hover(function () { 
		clearInterval(headline_interval); // on mouse hover don't defil
	}, function () {
		headline_interval = setInterval(headline_rotate, 5000); //after hover reset heamine_hover 
	});
});
function headline_rotate() {
	if (headline_count > 1) { //switch headline only if are more than one
		current_headline = (old_headline + 1) % headline_count; // get next headline
		$("div.scrollable:eq(" + old_headline + ")").animate({top:-265}, "slow", function () {//hide old_headline with beautiful effect of jquery
			$(this).css("top", "265px");
		});
		$("div.scrollable:eq(" + current_headline + ")").show().animate({top:5}, "slow"); //show current_headline
		old_headline = current_headline; //save current to old. 
	}
}