// JavaScript Document
var currentImageID;
var loadedImages;
var totalWidth;
var slides;
var arrowsIntervalLeft;
var arrowsIntervalRight;
var arrowOverLeft = false;
var arrowOverRight = false;


//slideshow anlegen
var slideShowElements = new String();
slideShowElements = "<div id = 'slideshowWrapper' class='rounded-corners'>";
slideShowElements += "<div id='slideshowOverlayNav'><div class = 'prevImage' id= 'prevImageOverlay'></div><div class = 'nextImage' id= 'nextImageOverlay'></div></div>";
slideShowElements += "<div id = 'slideshowClip'><p id='loading'>loading...</p><ul id = 'slideshow'></ul></div>";
slideShowElements += "<div id = 'arrowLeft' class = 'arrow rounded-corners prevImage'><div></div></div><div id = 'arrowRight' class = 'arrow rounded-corners nextImage'><div></div></div>";
slideShowElements += "<div id = 'counter' class='rounded-corners'><p></p><span></span></div>";
slideShowElements += "<div class = 'thumbToggle'>Thumbs<span id='arrowThumb' class='arrowThumbOpen'></span></div>";
slideShowElements +=  "<div id = 'thumbsWrapper'><ul id = 'thumbs'></ul></div>";

//single Image
var singleImageElements = new String();
singleImageElements = "<div id = 'singleImageWrapper' class='rounded-corners'>";
singleImageElements += "<div id = 'slideshowClip'><p id='loading'>loading...</p><ul id = 'slideshow'></ul></div>";
singleImageElements += "<div id = 'counter' class='rounded-corners'><p></p><span></span></div>";

function createSlideshow(images){

	//slideshow anlegen falls keine vorhanden ist
	if($('#contentWrapper').find('#slideshowWrapper').length == 0) {
		$('#contentWrapper').children().remove();
		$('#contentWrapper').append(slideShowElements);
	}
	setCategory(slideshows[id][0]);
	
	//werte für neue slideshow reseten
	loadedImages = 0;
	totalWidth = 0;
	currentImageID = 0;
	slides = new Array();
	slides = images;
	$('#slideshowOverlayNav').hide();
	$("#arrowLeft, #arrowRight").hide();
	$('#counter').children().hide();
	
	$('#slideshow li').remove();
	$('#thumbs li').remove();
	$('#slideshow').stop();
	$('#slideshow').css({left: 0});
	
	$('#loading').css('top', '300px');
	$('.thumbToggle').css({opacity: 0});
	loadPhoto();
	createThumblist();
}

function randomImage(){
	
	if($('#contentWrapper').find('#singleImageWrapper').length == 0) {
		$('#contentWrapper').children().remove();
		$('#contentWrapper').append(singleImageElements);
	
		$('#loading').css('top', '300px');
		$('#slideshow li').remove();
		
		var randomSlideShow = slideshows[Math.floor(Math.random()*slideshows.length)][1];
		var randomPic = randomSlideShow[Math.floor(Math.random()*randomSlideShow.length)];
		
		
		var img = new Image();
		$(img).load(function(){
			setCategory("Home // Random Image");
			$('#slideshow').append("<li><p class='credits'>"+randomPic[1]+"</p></li>");
			$('#slideshow li').prepend($(this));
			
			$('#slideshow img').hide();
			$('#slideshow img').fadeTo(700, 1);
			
			$('.credits').hide();
			
			$('#slideshow img').fadeTo(700, 1);
			
			$('#loading').css('top', '-4000px');
		
			$('.credits').fadeTo(700, 1, function(){
				$(this).css('filter','');
			});
		});	
		
		$(img).attr('src', 'photos/'+randomPic[0]);
		}
}

function loadPhoto()
{
	var img = new Image();
	var image = slides[loadedImages][0];
	$(img).load(function(){
		//gesamtlänge der Slideshow
		totalWidth += this.width;
		
		$('#t_'+loadedImages).fadeIn();
		
		//geladenes foto einbinden
		$('#slideshow').append("<li><p class='credits'>"+slides[loadedImages][1]+"</p></li>");
		if(loadedImages == 0) $('.credits').css({opacity: 0});
		
		//anzahl der list elemente abfragen
		num = $('#thumbs li').size();

		//$('#thumbs li:last > img').fadeTo(0);
		
		if(loadedImages == 0)
		{
			$("#t_0 > img").fadeTo(700, 1);
		}else{
			$("#t_"+loadedImages+" > img").fadeTo(400, 0.3);
			
		}
		thumbsClick($("#t_"+loadedImages));
		
		$('#slideshow li:last').prepend($(this));
		if(loadedImages == 0) $(this).css({opacity: 0});
		
		$(this).attr("id", "image"+loadedImages);
		
		$('#slideshow').css({'width': totalWidth});
		
		//position des fotos abspeichern
		slides[loadedImages][3] = $(this).position().left;
		loadedImages++;
		
		
		/*nächstes photo laden
		if(loadedImages < slides.length) { 
			loadPhoto();
		} else { 
			startSlideShow();
		};*/
		
		//nächstes photo laden
		if(loadedImages < slides.length) { 
			loadPhoto();
			if(slides.length >=3 && loadedImages == 3){

				startSlideShow();
			}
		}else{ 
			if( slides.length <=3){
				
				startSlideShow();
			}
		};
	});
	
	$(img).attr('src', 'photos/'+image);
}

function createThumblist(){
	var i = 0;
	var thumblist = new String();
	for(i; i < slides.length; i++){
		thumblist += "<li id='t_"+i+"'><img alt="+slides[i][0]+" width='70px' height='47px' src=photos/t_"+slides[i][0]+" /></li>";
	}
	$('#thumbs').append(thumblist);
	$('#thumbs li img').hide();
}

//zum vorherigen bild silden
$(".prevImage, #arrowLeft").live('click', function(){
	
	//nur ausführen wenn nicht bereits die slideshow bewegt wird
	if(!$('#slideshow').is(":animated")){
		//letzte position abspeichern
		var currentPosX = slides[currentImageID][3];
		var oldImageID = currentImageID;
		currentImageID--;
		
		//differenz zum letzten bild berechnen
		var diffX;
		if(currentImageID < 0){
			//zum letzten bild sliden
			diffX = -slides[slides.length-1][3];
			currentImageID = slides.length -1;
		}else{
			diffX = Math.abs(currentPosX - slides[currentImageID][3]);
		}
		moveListe(diffX);
		activeThumb(oldImageID, currentImageID);
		updateCounter();
	}
});

//zum nächsten bild silden
$(".nextImage, #arrowRight").live('click', function(){
	
	//nur ausführen wenn nicht bereits die slideshow bewegt wird
	if(!$('#slideshow').is(":animated")){
		//letzte position abspeichern
		var currentPosX = slides[currentImageID][3];
		var oldImageID = currentImageID;
		currentImageID++;
		
		//differenz zum letzten bild berechnen
		var diffX;
		if(currentImageID >= slides.length){
			//wieder zum ersten bild sliden
			diffX = currentPosX;
			currentImageID = 0;
		}else{
			diffX = -Math.abs(currentPosX - slides[currentImageID][3]);	
		}
		moveListe(diffX);
		activeThumb(oldImageID, currentImageID);
		updateCounter();
	}
});


//arrowNav
$(".nextImage").live({
  mouseenter: function() { 
    clearInterval(arrowsIntervalRight);
			$("#arrowRight").fadeTo('fast',1);
  },
  mouseleave: function () {
    clearInterval(arrowsIntervalRight);
	arrowsIntervalRight = setInterval(hideArrowRight, 800);
  }
});

$(".prevImage").live({
  mouseenter: function() { 
		clearInterval(arrowsIntervalLeft);
		$("#arrowLeft").fadeTo('fast',1);
  },
  mouseleave: function () {
		clearInterval(arrowsIntervalLeft);
		arrowsIntervalLeft = setInterval(hideArrowLeft, 800);
  }
});

function hideArrowRight(){
	if(!arrowOverRight){
		$("#arrowRight").stop().fadeOut();
		clearInterval(arrowsIntervalRight);
	}
}

function hideArrowLeft(){
	if(!arrowOverLeft){
		$("#arrowLeft").stop().fadeOut();
		clearInterval(arrowsIntervalLeft);
	}
}

$("#arrowRight").mouseover(function(){
	 arrowOverRight = true;
});

$("#arrowRight").mouseout(function(){
	 arrowOverRight = false;
});

$("#arrowLeft").mouseover(function(){
	 arrowOverLeft = true;
});

$("#arrowLeft").mouseout(function(){
	 arrowOverLeft = false;
});


//thumbs verlinken
function thumbsClick(thumb){
	thumb.click(function(){
		//nur ausführen wenn nicht bereits die slideshow bewegt wird
		if(!$('#slideshow').is(":animated")){
			
			//letzte position abspeichern
			var currentPosX = slides[currentImageID][3];
			
			var oldImageID = currentImageID;
			
			//id speichern
			currentImageID = parseInt(this.id.split("_")[1], 10);
			diffX = currentPosX - slides[currentImageID][3];
			moveListe(diffX);
			activeThumb(oldImageID, currentImageID);
			updateCounter();
		}
	});
	
	//thumbs rollover
	thumb.hover(function() {
		var thumb = $(this);
		var id = parseInt(this.id.split("_")[1], 10);
		if(currentImageID != id){
			thumb.children().stop().fadeTo(200, 0.6);
			
		}
	}, function(){
		var id = parseInt(this.id.split("_")[1], 10);
		if(currentImageID != id){
			thumb.children().stop().fadeTo(200, 0.3);
		}
	});
	
	/*thumb.live('mouseover mouseout', function(event) 
	{
		var id = parseInt(this.id.split("_")[1], 10);
		if(currentImageID != id){
			if (event.type == 'mouseover') {
				$(this).find("img").stop().fadeTo(400, 0.6);
			 } else {
				$(this).find("img").stop().fadeTo(400, 0.3);
			}
		}
	});*/
}


function moveListe(diffX){
	//liste schieben
	$('#slideshow').animate(
		{"left": "+="+diffX},
		{	
			duration: 1200,
			easing: 'easeOutExpo',
			complete: function() { 
			}
		} 
	);
}

function startSlideShow(){
	updateCounter();
	
	$('#slideshowOverlayNav').show();
	
	//preloader verschieben
	$('#loading').css('top', '-4000px');
	
	//slideshow einfaden
	$('#image0').fadeTo(700, 1);
	$('.thumbToggle').fadeTo(700, 1, function(){
		$(this).css('filter','');
	});
	$('.credits').fadeTo(700, 1, function(){
		$(this).css('filter','');
	});
	
	$('#counter').children().fadeTo(700, 1, function(){
		$(this).css('filter','');
	});
	
	//tumbs faden
	//$("#thumbs li:not(:first-child) img").fadeTo(400, 0.3);
	//$("#thumbs li:first-child img").fadeTo(700, 1);
}

function activeThumb(oldImageID, currentImageID){
	$("#t_"+oldImageID).find("img").stop().fadeTo(400, 0.3);
	$("#t_"+currentImageID).find("img").stop().fadeTo(400, 1);
}

function updateCounter(){
	$('#counter span').text(currentImageID+1+"/"+slides.length);
}