// Variable 
var teaserInterval;
var loopTime;
var espacement;

$(document).ready(function() {
	if(document.getElementById("teaser-etiquette")){
		espacement = 128;
	}else{
		espacement = 28;
	}
});

function toggle_teaser(obj){
	
	window.clearInterval(teaserInterval);
	
	// Remove onclick events
	/*var items = document.getElementById("teaser-menu").getElementsByTagName("div");
	var j;
	for(j in items) {
		items[j].onclick = '';
	}*/
	
	// Reset tease image
	var image = getElementsByClass("teaser-image");
	
	window.setTimeout (function(){
		var i;
		for(i in image) {
			if(image[i].style){
				image[i].style.zIndex = 100;
			}
		}
	}, 150 );
	document.getElementById("teaser-white").style.zIndex = 140;
	
	// Get the item number
	var menu_item = obj.id;
	menu_item = menu_item.replace("menu-item_", "");
	
	// Swap the selected item
	window.setTimeout (function(){
		var selected = getElementsByClass("selected", document.getElementById("teaser-menu"));
		selected.className = selected.className.replace(selected.className.substr(0,selected.className.indexOf(' ')+1), '');
		selected.className = selected.className.replace('selected', '');
		selected.className = selected.className.replace(' ', '');
		obj.className = obj.className;		
	}, 150 );
	
	
	// Move the arrow
	var arrow_top = (92*menu_item)+espacement;
	$(".arrow").animate({"left": "-=25px"}, { queue:true, duration:150 });
	$(".arrow").animate({"top": arrow_top+"px"}, { queue:true, duration:0 });
	$(".arrow").animate({"left": "+=25px"}, { queue:true, duration:150 });
	
	// Swap the teaser image
	$("#teaser-white").animate({opacity: 1.0}, { queue:true, duration:150 } );
	window.setTimeout (function(){
		image[menu_item].style.zIndex = 101;
	}, 150 );
	$("#teaser-white").animate({opacity: 0}, { queue:true, duration:150 } );
	
	// End of animation
	window.setTimeout (function(){
		document.getElementById("teaser-white").style.zIndex = 99;
		//$("#teaser-white").animate({opacity: 1.0}, { queue:false, duration:0 } );
		
		// Place the onclick events
//		var items = document.getElementById("teaser-menu").getElementsByTagName("div");
//		var j;
//		for(j in items) {
//			if(items[j].id!=undefined){
//				items[j].onclick = function(){toggle_teaser(this)};
//			}
//		}
		
		// Set link on item
//		obj.onclick = function(){
//
//			window.location = image[menu_item].getElementsByTagName("a")[0].href;
//
//		};
		
		
	
	}, 1100 );
	
	window.setTimeout (function(){
		
		// Restart the loop
		load_teaser(loopTime, menu_item);
								
	}, 150 );

}

function load_teaser(time, first){
	
	loopTime = time;
	
	obj = document.getElementById("menu-item_"+first);
	var selected_arrow = getElementsByClass("arrow");
	selected_arrow.className = 'arrow a'+obj.className;
	
	obj.className = 's'+obj.className+' selected '+obj.className;
	//obj.className = 'selected';
	
	// Get the item number
	var menu_item = obj.id;
	menu_item = menu_item.replace("menu-item_", "");
	
	// Reset tease image
	var image = getElementsByClass("teaser-image");
	
	for(o=0;o<image.length;o++){
		
		cobj = document.getElementById('menu-item_'+o)
		cobj.onclick = function(){
	
			cobj.className = cobj.className.replace(cobj.className.substr(0,cobj.className.indexOf(' ')+1), '');
			cobj.className = cobj.className.replace('selected', '');
			cobj.className = cobj.className.replace(' ', '');
			cobj.className = cobj.className;

			window.location = image[this.id.replace("menu-item_", "")].getElementsByTagName("a")[0].href;
				
		};
	}
	
	// Set link on item
	obj.onclick = function(){

		obj.className = obj.className.replace(obj.className.substr(0,obj.className.indexOf(' ')+1), '');
		obj.className = obj.className.replace('selected', '');
		obj.className = obj.className.replace(' ', '');
		obj.className = obj.className;
		
		window.location = image[menu_item].getElementsByTagName("a")[0].href;
			
	};
	
	var i;
	for(i in image) {
		if(image[i].style){
			image[i].style.zIndex = 100;
			image[i].getElementsByTagName("img")[0].style.display = 'block';
		}
	}
	image[menu_item].style.zIndex = 101;
	
	var arrow_top = (92*menu_item)+espacement;
	getElementsByClass('arrow').style.top = arrow_top+"px";
	
	
	teaserInterval = window.setInterval (function(){
						
			var current = getElementsByClass("selected", document.getElementById("teaser-menu"));
			var length = getElementsByClass("teaser-image");
			length = image.length;
			current = current.id;
			next = current.replace("menu-item_", "");
			next++;
			if(next==length)
				next=0;
			toggle_teaser(document.getElementById("menu-item_"+next));

	}, time*1000 );
}