/**
 * @author jan
 */

/*
 * 
 * Vb. $.fullscreenSlideshow()
 * parameters
 * 		arrURLs (array van url's met grote foto's) - verplicht
 * 		startIndex (index van eerste foto die moet getoond worden) - optioneel - standaard 0
 * 		seperator (scheidingsteken voor de count van de images) - optioneel - standaard "/";
 * css:
 * 		.fsContainer (klasse voor de container)
 * 		.fsImageContainer (klasse voor de container waar de images in getoond worden)
 * 		.fsPrev (klasse voor de vorige knop)
 * 		.fsNext (klasse voor de volgende knop)
 * 		.fsClose (klasse voor de sluitknop)
 * 		.fsCount (klasse voor het blokje waar het aantal in getoond wordt)
 * 		.fsPreload (klasse voor de preloader)
 * opmerkingen:
 * 		alle elementen hebben standaard al position:absolute
 * dependencies:
 * 		jquery
 * 
 */

var img;

$(document).ready(function(){
	$(document).mousemove(function(e){
      window.mouseXPos = e.pageX;
      window.mouseYPos = e.pageY;
   });
});

jQuery.fullscreenSlideshow = function(arrURLs, startIndex, seperator){
	if(startIndex == undefined){
		startIndex = 0;
	}
	
	if(seperator == undefined){
		seperator = "/";
	}
	
	//create slideshow elements
	
	var container = $("<div></div>").addClass("fsContainer").css("position", "absolute");
	var imageContainer = $("<div></div>").addClass("fsImageContainer").css("position", "absolute");
	var arrowPrev = $("<a href='#'></a>").addClass("fsPrev").css("position", "absolute");
	var arrowNext = $("<a href='#'></a>").addClass("fsNext").css("position", "absolute");
	var close = $("<a href='#'></a>").addClass("fsClose").css("position", "absolute");
	var count = $("<span></span>").addClass("fsCount").css("position", "absolute");
	var preload = $("<span></span>").addClass("fsPreload").css("position", "absolute");
	
	container.append(imageContainer);
	container.append(arrowPrev);
	container.append(arrowNext);
	container.append(close);
	container.append(count);
	container.append(preload);
	
	var currentImage = startIndex;
	
	var loadingImage = false;
	
	var resizeImage = function(){
		if(img != undefined){
			var dimImg = $(img).width() / $(img).height();
			var dimWindow = $(window).width() / $(window).height();
			if(dimWindow > dimImg){
				$(img).css("width", "100%");
				$(img).css("height", "auto");
				$(img).css("top", parseInt(-1 * (window.mouseYPos / $(window).height()) * ($(img).height() - $(window).height())) + "px");
				$(img).css("left", "0px");
			} else if(dimWindow < dimImg) {
				$(img).css("height", "100%");
				$(img).css("width", "auto");
				$(img).css("left", parseInt(-1 * (window.mouseXPos / $(window).width()) * ($(img).width() - $(window).width())) + "px");
				$(img).css("top", "0px");
			}
		}
	}
	
	var imageLoaded = function(){
		img.unbind("load");
		imageContainer.html("");
		imageContainer.append(img);
		img.hide();
		img.css("position", "absolute");
		resizeImage();
		img.fadeIn(500);
		loadingImage = false;
	}	
	
	var loadImage = function(){
		count.text((currentImage + 1) + seperator + arrURLs.length);
		loadingImage = true;
		img = $("<img>");
		img.load(function(){
			imageLoaded();
		});
		img.attr("src", arrURLs[currentImage]);
	}
	
	var nextImage = function(){
		if(!loadingImage){
			if(currentImage < arrURLs.length - 1){
				currentImage++;
			} else {
				currentImage = 0;
			}
			loadImage();
		}
	}
	
	var prevImage = function(){
		if(!loadingImage){
			if(currentImage > 0){
				currentImage--;
			} else {
				currentImage = arrURLs.length - 1;
			}
			loadImage();
		}
	}
	
	var closeSlideshow = function(){
		arrowPrev.unbind("click");
		arrowNext.unbind("click");
		$(window).unbind("resize");
		$(document).unbind("click");
		$(document).unbind("keyup");
		$(document).unbind("mousemove", moveImage)
		container.fadeOut(500, function(){
			$(container).remove();
			$("body>*").fadeIn(500);
		});
	}
	
	var moveImage = function(e){
		if($(img).width() > $(window).width()){
			$(img).css({left : (-1 * (e.pageX / $(window).width()) * ($(img).width() - $(window).width()))});
		} else {
			$(img).css({top : (-1 * (e.pageY / $(window).height()) * ($(img).height() - $(window).height()))});
		}
	}
	
	var initSlideshow = function(){
		//showing slideshow
		count.text((currentImage + 1) + seperator + arrURLs.length);
		$("body").prepend(container);
		container.fadeOut(0);
		if(arrURLs.length < 2){
			arrowPrev.hide();
			arrowNext.hide();
		}
		container.fadeIn(500, function(){
			//add Handlers
			arrowPrev.bind("click", function(e){
				e.stopPropagation();
				prevImage();
			});
			arrowNext.bind("click", function(e){
				e.stopPropagation();
				nextImage();
			});
			loadImage();
		});
		$(document).bind("mousemove", moveImage);
		$(document).keyup(function(e){
			if(e.keyCode == "39"){
				nextImage();
			} else if (e.keyCode == "37") {
				prevImage();
			} else if (e.keyCode == "27"){
				closeSlideshow();
			}
		});
	};
	
	
	$(window).resize(function(){resizeImage()});
	$(document).click(function(){closeSlideshow()});
	
	
	//remove event handlers
	// arrowPrev click, arrowNext click, window resize, document click
	
	//Init slideshow
	
	$("body>*").fadeOut(500);
	
	initSlideshow();
	
	$('html, body').animate({scrollTop:0}, {duration:0});
	
}