//var totalitems =0;
//var currentitem = 0;
//var timer = null;
//var autoqueue = true;

var portlets = [];

$(document).ready(function(){

	portlets = $("div.uitgelicht");
	
	for(var i=0;i<portlets.length;i++)
	{
		var object = $("div.uitgelicht:eq("+i+")");
		$(object).attr("index", i);
		portlets[i] = object;
		portlets[i].totalitems = $("div.lijst ul li",object).length;
		portlets[i].index = i;
		portlets[i].currentitem = 0;
		portlets[i].autoqueue = true;
		var roulationspeed = $(object).attr("roulationspeed");
		portlets[i].roulationspeed = (roulationspeed ? roulationspeed : 10000);
		
		//totalitems = $("div.uitgelicht div.lijst ul li").length;
		SetActivePicture(portlets[i]);
		$("div.uitgelichtitem div.title",portlets[i]).hover(function(){
			var object = $(this).parents("div.uitgelicht:first");
			var portletindex = $(object).attr("index");
			object = portlets[portletindex];
			object.currentitem = $("div.title",object).index(this);
			clearTimeout(object.timer); 
			object.timer = null;
			object.autoqueue = false;
			SetActivePicture(object);
		}, function()
		{
			var object = $(this).parents("div.uitgelicht:first");
			var portletindex = $(object).attr("index");
			object = portlets[portletindex];
			object.autoqueue = true;
			if(object.timer!=null) clearTimeout(object.timer);
			object.timer = setTimeout(function(){SetActivePicture(object)}, object.roulationspeed);
		//}).prepend("<img class=\"uitgelichtitem_hover\" src=\"../gfx/uitgelichtitem_hover.png\"/>");
		}).prepend("<div class=\"uitgelichtitem_hover\"></div>");		
		
	}


	
});

function SetActivePicture(o)
{

	$("div.active",o).removeClass("active");
	$("div.uitgelichtitem:eq("+o.currentitem+")",o).addClass("active");

	var thumb = $("div.uitgelichtitem:eq("+o.currentitem+") div.thumbnail",o);//.attr("src");
	var headline = $("div.uitgelichtitem:eq("+o.currentitem+") div.headlinetext",o).html();
	//$("div.image",o).html("<img  src=\""+thumb+"\" />");
	$("div.image",o).html(thumb.html());
	$("div.headline",o).html(headline);
	if((o.currentitem+1)<o.totalitems)
		o.currentitem = o.currentitem +1;
	else
		o.currentitem = 0;


	if(o.autoqueue)
	{
		if(o.timer!=null) clearTimeout(o.timer);
		o.timer = setTimeout(function(){SetActivePicture(o)}, o.roulationspeed);
	}

}
