/*
	Lightbox Slideshow by Matthew Chang
	for use on the Westlake Featherduster website
	
	Requires the jQuery javascript module
*/

var loadingImage = "slideshow/loading.gif";
var parsingScript = "slideshow/parseConfig.php";
var slideshowImages = new Array();
var slideshowCaptions = new Array();
var thumbOffset=0;
var slideshowPosition=0;
var animationTime = 400;
var lightboxImagesLoaded = 0;
var topOffset = 0;

function pause(millis){
	var date = new Date();
	var curDate = null;

	do { curDate = new Date(); }
	while(curDate-date < millis);
} 

function showOverlay() {
	var loadingLeft = ($(window).width() / 2) - ($("#loadingImage").attr("width") / 2);
	var loadingTop = ($(window).height() / 2) - ($("#loadingImage").attr("height") / 2);
	loadingTop += topOffset
	$("#loadingImage").css("left", loadingLeft);
	$("#loadingImage").css("top", loadingTop);
	$("#overlay").height($(document).height());
	$("#loadingImage").fadeIn("fast");
	$("#overlay").fadeIn("fast");
}

function showLightBox() {
	$("#lightbox").fadeIn("slow");
}

function hideOverlay() {
	$("#overlay").fadeOut("slow", function() {
		showHidden();
	});
	$("#loadingImage").fadeOut("fast");
}

function hideLightBox() {
	$("#lightbox").fadeOut("fast", function() {
		$("#lightboxThumbs").html("");
	});
}

function addThumb(url) {
	$("#lightboxThumbs").append("<li></li>");
	$("#lightboxThumbs li:last").each(function() {
		$(this).css("background", "url("+url+")");	
		$(this).css("background-position", "center center");
		$(this).mouseover(function() {
			$(this).css("opacity", "1");
		});
		$(this).bind("mouseleave", function() {
			$(this).css("opacity", "0.5");
		});
		
		$(this).click(function() {
			slideshowPosition = $("#lightboxThumbs li").index($(this));
			updateSlideShow();
		});

	});
	thumbPosition++;
}

function updateSelected() {
	$("#lightboxThumbs li.selected").each(function () {
		$(this).css("opacity", "0.5");
		$(this).mouseover(function() {
			$(this).css("opacity", "1");
		});
		$(this).bind("mouseleave", function() {
			$(this).css("opacity", "0.5");
		});
		$(this).click(function() {
				slideshowPosition = $("#lightboxThumbs li").index($(this));
				updateSlideShow();
		});
	});
	$("#lightboxThumbs li").removeClass("selected");
	$("#lightboxThumbs li:eq(" + slideshowPosition + ")").addClass("selected");
	$("#lightboxThumbs li.selected").each(function () {
		$(this).unbind("mouseover");
		$(this).unbind("mouseleave");
		$(this).unbind("click");
		$(this).css("opacity", "1");
	});
}


function updateSlideShow() {
	$("#loadingImage").fadeIn("fast");
	$("#lightboxContent").hide();
	$("#lightboxThumbs li").show();
	
	var url = slideshowImages[slideshowPosition].src;
	var caption = slideshowCaptions[slideshowPosition];
	var leftArrow = false;
	var rightArrow = true;
	var arrowWidth = 0;
	updateSelected();

	if(slideshowPosition == 0) {
		$("#lightboxLeftArrow").css("display", "none");
	} else {
		$("#lightboxLeftArrow").css("display", "block");
		arrowWidth += 54;
		leftArrow = true;
	}
	if(slideshowPosition == slideshowImages.length - 1) {
		$("#lightboxRightArrow").css("display", "none");
	} else {
		$("#lightboxRightArrow").css("display", "block");
		arrowWidth += 54;
		rightArrow = true;
	}

	var owidth = $("#lightbox").width();
	var oheight = $("#lightbox").height();
	var wait = setInterval(function() {
		if(lightboxImagesLoaded >= slideshowImages.length) {
			clearInterval(wait);
			var img = slideshowImages[slideshowPosition];
			$("#loadingImage").fadeOut("fast");
			$("#lightboxImage").attr("src", url);
			$("#lightboxCaption").text(caption);		
			$("#lightboxContent").css("display", "block");
			$("#lightbox").css("width", img.width);
			$("#lightbox").css("height", "auto");
			var diff =0;
			if(img.width < arrowWidth + $("#lightboxThumbs > li").size()*86) {
				diff  = (arrowWidth + $("#lightboxThumbs > li").size()*86) - img.width;
				diff = Math.ceil(diff/86);
				var index = slideshowPosition;
				var middle = ($("#lightboxThumbs > li").size()-1)/2;
				if(index > middle) {
					for(var i = 0; i < diff; i++) {
						$("#lightboxThumbs li:eq(" + i + ")").hide();
					}
				} else {
					var thumbIndex = $("#lightboxThumbs > li").size() - 1;
					for(var i = thumbIndex; i > thumbIndex - diff; i--) {
						$("#lightboxThumbs li:eq(" + i + ")").hide();
					}
				}
			}
			var nleft = (img.width / 2) - (39 * ($("#lightboxThumbs li").size()-diff));
			$("#lightboxThumbs").css("margin-left", nleft+ "px");	
			var nheight = $("#lightbox").height();
			$("#lightboxContent").css("display", "none");
			var imgLeft = ($(window).width() / 2) - (img.width / 2) - 20;
			var imgTop = ($(window).height() / 2) - (nheight / 2) - 20;
			imgTop = (imgTop < 0) ? (imgTop = 0) : (imgTop);
			imgTop += topOffset;
			if(imgTop + nheight > $(document).height()) {
				imgTop = $(document).height() - (nheight+20);
			}
			$("#lightbox").css({width: owidth, height: oheight});
			$("#lightbox").animate({width: img.width, 
				height: nheight,
				left: imgLeft,
				top: imgTop}, animationTime, function() {
					$("#lightboxContent").fadeIn("fast");
				});
		}
	}, 100);
}

/*function openSlideShowPos(config, pos) {
	$("a[rel=hideLightbox]").css("visibility","hidden");
	showOverlay();
	slideshowImages = new Array();
	slideshowCaptions = new Array();
	thumbPosition = 0;
	slideshowPosition = pos;
	lightboxImagesLoaded = 0;
	var loadImages = function(data) {
		var lines = data.split("\n");
		for(var i = 0; i < lines.length; i += 2) {
			if(lines[i] != "") {
				slideshowImages.push(new Image());
				slideshowCaptions.push(lines[i+1]);
				addThumb(lines[i]);
				slideshowImages[i/2].onload = function() {
					lightboxImagesLoaded++;
				}
				slideshowImages[i/2].src = lines[i];
			}
		}
		updateSlideShow();
	}
	$.post(parsingScript,{file: config}, loadImages, "text");
}*/

function openSlideShow(config, caption) {
	var scrollTop = document.body.scrollTop;
	if (scrollTop == 0) {
		if (window.pageYOffset)			
			scrollTop = window.pageYOffset;			
		else			
			scrollTop = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;			
	}
	topOffset = scrollTop;
	$("a[rel=hideLightbox]").css("visibility","hidden");
	showOverlay();
	slideshowImages = new Array();
	slideshowCaptions = new Array();
	thumbPosition = 0;
	slideshowPosition = 0;
	lightboxImagesLoaded = 0;
	if(config.match(".conf")) {
		var loadImages = function(data) {
			var lines = data.split("\n");
			for(var i = 0; i < lines.length; i += 2) {
				if(lines[i] != "") {
					slideshowImages.push(new Image());
					slideshowCaptions.push(lines[i+1]);
					addThumb(lines[i]);
					slideshowImages[i/2].onload = function() {
						lightboxImagesLoaded++;
					}
					slideshowImages[i/2].src = lines[i];
				}
			}
			updateSlideShow();
		}
		$.post(parsingScript,{file: config}, loadImages, "text");
	} else if(caption) {
		slideshowImages.push(new Image());
		slideshowImages[0].onload = function() {
			lightboxImagesLoaded++;
		}
		slideshowImages[0].src = config;
		slideshowCaptions.push(caption);
		updateSlideShow();
	}
}

function openSlideShowArr(pics, captions) {
	var scrollTop = document.body.scrollTop;
	if (scrollTop == 0) {
		if (window.pageYOffset)			
			scrollTop = window.pageYOffset;			
		else			
			scrollTop = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;			
	}
	topOffset = scrollTop;
	$("a[rel=hideLightbox]").css("visibility","hidden");
	showOverlay();
	slideshowImages = new Array();
	slideshowCaptions = new Array();
	thumbPosition = 0;
	slideshowPosition = 0;
	lightboxImagesLoaded = 0;

	for(var i = 0; i < pics.length; i++) {
		if(pics[i] != "") {
			slideshowImages.push(new Image());
			slideshowCaptions.push(captions[i]);
			addThumb(pics[i]);
			slideshowImages[i].onload = function() {
				lightboxImagesLoaded++;
			}
			slideshowImages[i].src = pics[i];
		}
	}
	updateSlideShow();
}

function closeSlideShow() {
	hideOverlay();
	hideLightBox();
}

function showHidden() {	
	$("a[rel=hideLightbox]").css("visibility", "visible");
}

function slideshowRight() {
	if(slideshowPosition < (slideshowImages.length - 1)) {
		slideshowPosition++;
		updateSlideShow();
	}
}

function slideshowLeft() {
	if(slideshowPosition > 0) {
		slideshowPosition--;
		updateSlideShow();
	}
}


/* Generates HTML at the top of the page that looks like this:	
	<img id="loadingImage" />
	<div onClick="closeSlideShow()" id="overlay"></div>
	<div onClick="closeSlideShow()" id="lightbox">	
		<img id="lightboxImage" />
		<div id="lightboxData">
			<div id="lightboxCaption"></div>			
			<div id="lightboxLeftArrow"></div>
			<div id="lightboxThumbs"></div>
			<div id="lightboxRightArrow"></div>
		</div>
	</div>
*/
function insertCode() {
	$("body").prepend("<div id=overlay></div>");
	$("#overlay").click(closeSlideShow);
	
	var imgPreloader = new Image();
	imgPreloader.onload = function() {
		$("#overlay").before("<img id=\"loadingImage\" />");		
		$("#loadingImage").attr("src", loadingImage);
	}
	
	imgPreloader.src = loadingImage;
	
	$("#overlay").after("<div id=\"lightbox\"></div>");
	$("#lightbox").prepend("<div id=\"lightboxContent\"></div>");
	var lboxLeft = $(window).width() / 2;
	var lboxTop = $(window).height() / 2;
	$("#lightbox").css({left: lboxLeft, top: lboxTop});
	$("#lightboxContent").prepend("<img id=\"lightboxImage\" />");
	$("#lightboxImage").click(closeSlideShow);
	$("#lightboxContent").append("<div id=\"lightboxData\"></div>");	
	$("#lightboxData").prepend("<div id=\"lightboxCaption\"></div>");
	$("#lightboxCaption").after("<div id=\"lightboxThumbs\"></div>");	
	$("#lightboxThumbs").before("<div id=\"lightboxLeftArrow\"><img src=\"slideshow/leftArrow.png\" /></div>");
	$("#lightboxData").append("<div id=\"lightboxRightArrow\"><img src=\"slideshow/rightArrow.png\" /></div>");
	$("#lightboxRightArrow").click(slideshowRight);
	$("#lightboxLeftArrow").click(slideshowLeft);
}

//initializes the slideshow data
function initSlideShow() {
	$(document).ready(function() {
		$("a[rel=slideshow]").each(function () {
			var config = $(this).attr("href");
			if(config.match(".conf")) {
				$(this).click(function() {
					openSlideShow(config);
				});
			} else if($(this).attr("title")) {
				$(this).click(function() {
					openSlideShow(config, $(this).attr("title"));	
				});
			}
			$(this).removeAttr("href");
		});
		insertCode();
	});
}

//Adds a new function to be executed when the window finished loading
function addOnLoad(func) {
	if(typeof window.onload != 'function'){
    	window.onload = func;
	} else {
		var currentOnLoad = window.onload;
		window.onload = function(){
			currentOnLoad();
			func();
		}
	}
}

initSlideShow();