var totalphotos = 0;
var currentphoto = 0;
$(document).ready(function(){
	
	$("table.ZIEZOSLIDESHOW tr").css("display", "none");
	$("table.ZIEZOSLIDESHOW").wrap("<div class='slideshow'></div>");
	$("div.slideshow").html($("div.slideshow").html() + "<div class=\"image\"></div><div class=\"title\"></div><div class=\"control\"><div class=\"controls\"></div><div class=\"number\"></div></div>")
	
	totalphotos = $("table.ZIEZOSLIDESHOW tr").length;
	currentphoto = 1;
	
	$("div.slideshow div.controls").html("<div class=\"prev\"><a href=\"#\" id=\"ss_prev\">vorige</a></div><div class=\"start\"><a href=\"#\" id=\"ss_start\" class=\"started\">pauze</a></div><div class=\"next\"><a href=\"#\" id=\"ss_next\">volgende</a></div>");
	
	$("div.slideshow div.number").html(currentphoto + "/" + totalphotos);
	$("div.slideshow div.control").append("<br style=\"clear: both\"/>");
	
	$("a#ss_start").click(function(){
		$(this).toggleClass("started");
		if($(this).hasClass("started")){
			$(this).text("pauze");
		}else{
			$(this).text("start");
		}
		TimedSlideshow();
		return false;
	});
	
	$("a#ss_prev").click(function(){
		SS_StopSlideshow();
		SS_Prev();
		return false;
	});
	
	$("a#ss_next").click(function(){
		SS_StopSlideshow();
		SS_Next();
		return false;
	});
	
	//UpdateSlideshow();
	currentphoto = 0;
	TimedSlideshow();
})

function SS_Prev()
{
		currentphoto--;
		if(currentphoto<1)
			currentphoto = totalphotos;
		UpdateSlideshow(true);
}

function SS_Next()
{
		currentphoto++;
		if(currentphoto>totalphotos)
			currentphoto = 1;
		UpdateSlideshow(false);
}

function SS_StopSlideshow(){
	$("a#ss_start").removeClass("started");
	$("a#ss_start").text("start");
}

function UpdateSlideshow(left){
	
	$("div.slideshow div.control div.number").html(currentphoto + "/" + totalphotos);

	var html_new = $("table.ZIEZOSLIDESHOW tr:eq('"+(currentphoto-1)+"') td:eq('0')").html();
	var html_old = $("div.slideshow div.image div.img_left").html();
	
	$("div.slideshow div.image").html("<div class=\"scroller\"><div class=\"img_left\"></div><div class=\"img_middle\"></div><div class=\"img_right\"></div></div>");	
	if(html_old){
		var leftMargin = "-980px";
		if(left)
		{
			leftMargin = "0px";
		}
		
		$("div.slideshow div.image div.scroller div.img_middle").html(html_old);
		$("div.slideshow div.image div.scroller div.img_left").html(html_new);
		$("div.slideshow div.image div.scroller div.img_right").html(html_new);
		$("div.slideshow div.image div.scroller div.img_middle").animate({ 
			opacity: 0
		}, 1500 );
		
		$("div.slideshow div.image div.scroller").animate({ 
			marginLeft: leftMargin
		}, 1500 );
		
	}
	else{
		$("div.slideshow div.image div.img_middle").html(html_new);
		$("div.slideshow div.image div.img_left").html(html_new);
		$("div.slideshow div.image div.img_right").html(html_new);
		
		//window.setTimeout(3000);
	}
	
	$("div.slideshow div.title").html($("table.ZIEZOSLIDESHOW tr:eq('"+(currentphoto-1)+"') td:eq('1')").html());
}

function TimedSlideshow()
{
	if($("a#ss_start").hasClass("started"))
	{
		setTimeout ("TimedSlideshow();", 4000);
		SS_Next();
	}
}