/***************************************************************
 * EpicSlideshow n-s.net version
 * By Natalie Sklobovskaya (natalie-star.net)
 * This version does *NOT* work outside this site!
 * Please see /downloads/epicslideshow to download this script.
 **************************************************************/

/******** Configuration & Settings *********/

var slideshowURL = "";					// Link the slideshow anywhere upon clicking it? (Leave blank for no link)
var loop = 1;							// 1 will loop the slideshow. 0 will not loop, unless randomized (below) is 1
var randomize = 1;						// 1 will randomize the slides' display, 0 will display them in order
var firstSlide = 1;						// Slide number at which to start
var randomizeFirst = 1;					// Ignores the above firstSlide setting, and randomly select the first slidevar thumbImages = 0;
var thumbHighlight = "color";			// zoom or color
var thumbImages = 0;

var slidesDirectory = "/slideshow";		// Path to slides. Include any slashes, such as "/slideshow"
var slideshowDivId = "slideshow";		// Create a div with this id wherever you want to place the slideshow.
var slideshowWidth = 768;				// Slideshow width, in pixels
var slideshowHeight = 450;				// Slideshow height, in pixels

var speed = 4000;						// Time to display each slide in milliseconds (1000 ms = 1 second)
var ssFadeSpeed = 150;					// Slide fade time period in milliseconds
var ssFreq = 30; 						// How many frames in slide fade time period
var ssFadeOutFreq = ssFreq;				

var infoFadeSpeed = 200;				// Info/caption box fade time period in milliseconds
var infoFreq = 5; 						
var infoFadeOutFreq = infoFreq;			
var infoOpacity = 0.65;					// Opacity of each slide's caption box.

var thumbSize = 12;						
var thumbZoom = thumbSize+2;						
var thumbSpacing = 5;					
var thumbZoomSpeed = 200;
var thumbFreq = 8;
var thumbBgColor = "#2a2a2a";
var thumbHighlightColor = "#1B4E5F";
var thumbBorderColor = "#444";
var currentThumbBorderColor = "#fff";
var currentThumbBgColor = "#444";

var slides = [];
var slideObjects = [];
var numLoaded = 0;
var slidesLoaded = 0;
var slideTimeout = null;
var currentSlide = null;
var lockedInfo = null;
var thumbStep = parseFloat((thumbZoom-thumbSize) / thumbFreq);

var paused = 0;

$(document).ready(function() {	
	initialize();
	getSlides();		
});

function initialize() {
	var container = document.getElementById(slideshowDivId);
	container.style.width = slideshowWidth + "px";
	container.style.height = (slideshowHeight+40) + "px";
	
	var link = "<a href=\"" + slideshowURL + "\">";
	var linkEnd = "</a>"
	
	if (slideshowURL.length < 3) {
		link = "";
		linkEnd = "";
	}
	
	container.innerHTML= "<div id=\"ssLoader\" style=\"text-align: center; z-index: 5; position: relative; padding: 10px; top: " + ((slideshowHeight/2)-20) + "px; background: url('images/ssLoader.gif') no-repeat 300px center; color: #555; font-weight: bold;\"> Loading... <span id=\"ssLoadProgress\"></span></div>";
	container.innerHTML = container.innerHTML + link + "<div id=\"ss\" style=\"width: " + slideshowWidth + "px; height: " + slideshowHeight + "px;\"></div>" + linkEnd + "<div id=\"ssNav\" style=\"position: absolute; z-index: 1; display: none; -moz-border-radius-bottomleft: 0px; -moz-border-radius-bottomright: 0px; width: " + (slideshowWidth-6) + "px; height: " + (thumbSize+6) + "px; padding: 3px; text-align: center; background: #1a1a1a url('images/slideshownavbg2.jpg') repeat-x; color: #fff; margin: 0 0 0 0;\"></div>";
}

function setProgressBar(numLoaded) {
	var progress = document.getElementById('ssLoadProgress');
	progress.innerHTML = Math.round(numLoaded/slides.length*100) + "%";		
}

function loadSlides() {
	var i = slides.length;
		
	while (i > 0) {
		slideObjects[i - 1] = loadSlide(i);
		//document.getElementById('slideImage' + i).src = slideObjects[i-1].src;
		
		numLoaded = slides.length - i + 1;
		//alert(numLoaded + "/" + slides.length);	
		setProgressBar(numLoaded);		
		
		while (slideObjects[i - 1] == null) {
			// wait for slide to load
		}
		
		slideObjects[i-1].onLoad=i--;
		
	}
	slidesDoneLoading();
	return;
}

function loadSlide(i) {	
	var ssNav = document.getElementById('ssNav');
	var ssDiv = document.getElementById('ss');
	var slideInfo = slides[i-1].split("|");
		
	var filename = slideInfo[0];	
	var preview = slideInfo[1];	
			
	var focus = slideInfo[3].split(' ');
	var focusX = focus[0];
	var focusY = focus[1];

	if (focusX == "")
			focusX = "center";
	else
		if (!isNaN(focusX))
			focusX = focusX + "%";							

	if (focusY == "")
			focusY = "33%";
	else
		if (!isNaN(focusY))
			focusY = focusY + "%";
			
	var usePreview = slideInfo[4];
	if (usePreview == '1')
		filename = preview;
		
	var slideObject = new Image();
	slideObject.src = filename; // load slide into cache
		
	var thumb = slideInfo[2];
		if (thumb.length < 4);
			thumb = filename;
	
	var title = slideInfo[5];
	
	var medium = slideInfo[6];
	var date_temp = slideInfo[7].split("-");
	var date = date_temp[0];
	
	var portfolioId = slideInfo[8];
	var portfolioLink ="";
	var portfolioLinkEnd = "";
	
	if (portfolioId != null && portfolioId != "") {
		portfolioLink = "<a href=\"#\" onClick=\"viewSlide('" + portfolioId + "');\" title=\"Click to view '" + title + "' in Portfolio\">";		
	}
	else {
		portfolioLink = "<a href=\"#\" onClick=\"togglePauseAndPlay();\" title=\"Click to pause on '" + title + "'; click again to play.\">";
	}
	portfolioLinkEnd = "</a>";

	ssDiv.innerHTML = ssDiv.innerHTML + "<div id=\"slideInfo" + i + "\" style=\"font-family: Arial, Helvetica, sans-serif; width: " + (slideshowWidth - 20) + "px; padding: 10px; background: #000; color: #fff; position: absolute; z-index: 2; display: none; opacity: 0;\" onMouseover=\"lockCaptionDisplay('" + i + "');\" onMouseout=\"unlockCaptionDisplay('" + i + "'); hideSlideInfo('" + i + "');\"><div style=\"color: #777; float: right;\">" + i + " of " + slides.length + " images</div><b style=\"font-size: 140%;\">" + title + "</b><div>" + medium + ", " + date + "</div></div>";
	ssDiv.innerHTML = ssDiv.innerHTML + portfolioLink + "<div style=\"background-image: url(" + filename + "); background-repeat: no-repeat; background-position: " + focusX + " " + focusY + "; position: relative; z-index: 1; width: " + slideshowWidth + "px; height: " + slideshowHeight + "px; position: absolute; display: none;\" onMouseover=\"showSlideInfo('" + i + "');\" onMouseout=\"hideSlideInfo('" + i + "');\" id=\"slide" + i + "\"></div>" + portfolioLinkEnd;
	
	if (thumbImages) {
		ssNav.innerHTML = "<div id=\"slideThumb" + i + "\" style=\"display: block; float: left; margin: 3px " + thumbSpacing + "px 3px 0px; position: relative; z-index: 10; width: " + thumbSize + "px; height: " + thumbSize + "px; border: 1px solid " + thumbBorderColor + "; -moz-border-radius: 0px; position: relative; background: url('" + thumb + "') no-repeat " + focusX + " " + focusY + ";\" onMouseover=\"highlightThumb('" + i + "', 1);\" onMouseout=\"unhighlightThumb('" + i + "', 1);\" onClick=\"displaySlide('" + i + "');\"></div>" + ssNav.innerHTML;
	}
	else {
		ssNav.innerHTML = "<div id=\"slideThumb" + i + "\" style=\"display: block; float: left; margin: 3px " + thumbSpacing + "px 3px 0px; position: relative; z-index: 10; width: " + thumbSize + "px; height: " + thumbSize + "px; border: 0px solid " + thumbBorderColor + "; -moz-border-radius: 0px; position: relative; background: " + thumbBgColor + ";\" onMouseover=\"highlightThumb('" + i + "', 1);\" onMouseout=\"unhighlightThumb('" + i + "', 1);\" onClick=\"displaySlide('" + i + "');\"></div>" + ssNav.innerHTML;						
	}
	
	return slideObject;				
}

function getSlides() {
	var req = "dir=" + slidesDirectory;	
	var xmlHttp = new XMLHttpRequest();		
	xmlHttp.open("POST", "/admin/getslides.php", true);	
	
	var container = document.getElementById(slideshowDivId);	
	
	xmlHttp.onreadystatechange = function() {
		if (xmlHttp.readyState == 4) {	
			if (xmlHttp.responseText.length > 0) {
				var ssNav = document.getElementById('ssNav');
				slides = xmlHttp.responseText.split("[slide]");	
				loadSlides(slides.length, slides);
			}
			else {
				alert("Could not obtain slides. (Returned empty list)");
			}
		}		
	};
		
	xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	xmlHttp.setRequestHeader("Content-length", req.length);
	xmlHttp.setRequestHeader("Connection", "close");
	xmlHttp.send(req);
}

function highlightThumb(slide, level) {
	var thumb = document.getElementById("slideThumb" + slide);
	if (thumbHighlight == "zoom") {		
		var add = level * thumbStep;
		var size = Math.ceil(parseInt(thumbSize) + add);
		
		if (thumb) {
			thumb.style.width = size + "px";
			thumb.style.height = size + "px";
			thumb.style.top = "-" + add + "px";
		}
		
		if (size < thumbZoom) {
			level++;
			setTimeout("highlightThumb('" + slide + "', '" + level + "')", thumbZoomSpeed / thumbFreq);
		}
		else {
			return;
		}
	}
	else {
		thumb.style.background = thumbHighlightColor;
	}	
}

function unhighlightThumb(slide, level) {
	var thumb = document.getElementById("slideThumb" + slide);
	if (thumbHighlight == "zoom") {
		var subtr = parseFloat(level*thumbStep);
		var size = Math.ceil(parseInt(thumbZoom) - subtr);
		
		if (thumb) {		
			thumb.style.width = size + "px";
			thumb.style.height = size + "px";
			thumb.style.top = ((0-(thumbZoom-thumbSize))+subtr) + "px";	
		}
		
		if (size > thumbSize) {
			level++;
			setTimeout("unhighlightThumb('" + slide + "', '" + level + "')", thumbZoomSpeed / thumbFreq);
		}
		else {
			return;
		}
	}
	else {
		if (slide == currentSlide)
			thumb.style.background = currentThumbBgColor;
		else
			thumb.style.background = thumbBgColor;
	}	
}

function highlightButton(obj) {
	obj.style.backgroundColor = "#2a2a2a";
}

function unhighlightButton(obj) {
	obj.style.backgroundColor = "transparent";
}

function showNav() {
	fadeIn("ssNav", 1);
}

function hideNav() {
	fadeOut("ssNav", 1);
}

function showSlideInfo(slide) {	
	if (slide != lockedInfo) {
		fadeIn("slideInfo" + slide, 1);
	}
}

function hideSlideInfo(slide) {
	setTimeout("hideSlideInfoFinal('" + slide + "')", 200);
}

function hideSlideInfoFinal(slide) {
	if (slide != lockedInfo) {
		fadeOut("slideInfo" + slide, 1);
	}
}

function lockCaptionDisplay(slide) {
	lockedInfo = slide;	
}

function unlockCaptionDisplay(slide) {
	if (lockedInfo == slide)
		lockedInfo = null;
}

function slidesDoneLoading() {
	//alert("loaded " + numLoaded + "/" + slides.length + " slides.")
	slidesLoaded = 1;
	
	var ssNav = document.getElementById('ssNav');
	ssNav.innerHTML = ssNav.innerHTML + "<a href=\"#\" onClick=\"restart();\"><div style=\"background: url(images/ss_play.png) no-repeat center; display: block; float: right; margin: 3px 0; width: " + (thumbSize+2) + "px; height: " + (thumbSize+2) + "px;\" onMouseover=\"highlightButton(this);\" onMouseout=\"unhighlightButton(this);\"></div></a><a href=\"#\" onClick=\"pause();\"><div style=\"background: url(images/ss_pause.png) no-repeat center; display: block; float: right; margin: 3px 0; width: " + (thumbSize+2) + "px; height: " + (thumbSize+2) + "px;\" onMouseover=\"highlightButton(this);\" onMouseout=\"unhighlightButton(this);\"></div></a>";
	ssNav.innerHTML = ssNav.innerHTML + "<a href=\"http://natalie-star.net/downloads/epicslideshow\"><div style=\"background: url(images/ss_logo.png) no-repeat center; display: block; float: right; margin: 3px 0; width: 80px; height: " + thumbSize + "px;\"></div></a><div id=\"ssStatus\" style=\"color: #444; text-transform: uppercase; display: block; float: right; font-size: 90%; margin: 1px;\"></div>";
	
	start();
}

function start() {
	if (slidesLoaded) {
		document.getElementById('ssLoader').style.display = "none";
		
		if (randomizeFirst) 
			showSlide(chooseRandomSlide(), 0);
		else 
			showSlide(firstSlide, 0);
		
		setTimeout("showNav()", ssFadeSpeed - infoFadeSpeed);
		document.getElementById('searchSite').innerHTML = "<div id=\"search2\" class=\"off\" onMouseout=\"fadeOutSearch();\"><input type=\"text\" id=\"siteSearch\" onFocus=\"focusSearch('siteSearch');\" onBlur=\"blurSearch('siteSearch');\" value=\"Search...\" onKeyUp=\"search(this.value);\"></div><div id=\"search\" class=\"on\"></div>";
	}
}

function pause() {
	paused = 1;
	window.clearTimeout(slideTimeout);
	document.getElementById('ssStatus').innerHTML = "Paused";
}

function togglePauseAndPlay() {
	if (paused)
		restart();
	else
		pause();
}

function restart() {
	paused = 0;
	showSlide(getNextSlide(), 0);	
	document.getElementById('ssStatus').innerHTML = "";
}

function chooseRandomSlide() {
	var rand = Math.random();
	return Math.round(rand * (slides.length-1))+1;
}

function displaySlide(slide) {
	if (slide != currentSlide) {
		window.clearTimeout(slideTimeout);
		showSlide(slide, 1);
	}
}

function showSlide(slide, fast) {
	
	unlockCaptionDisplay(currentSlide);
	hideSlideInfo(currentSlide);
	
	if (slide > slides.length) {
		if (!loop && !randomize) 
			return;
		else {
			slide = 1;
		}
	}
	
	prevSlide = currentSlide;
	currentSlide = slide;
	
	if (currentSlide == 1) 
		prev = null;
	else 
		prev = prevSlide;
	
	if (document.getElementById("slideThumb" + prevSlide)) {
		document.getElementById("slideThumb" + prevSlide).style.backgroundColor = thumbBgColor;
	}
	if (document.getElementById("slideThumb" + currentSlide)) {
		document.getElementById("slideThumb" + currentSlide).style.backgroundColor = currentThumbBgColor;
	}
	
	fadeSlides("slide" + slide, "slide" + prev, 1, fast);
	
	var nextSlide = getNextSlide();
		
	if (!paused) {
		slideTimeout = window.setTimeout("showSlide('" + nextSlide + "', '" + fast + "')", speed);
	}
}

function getNextSlide() {
	var nextSlide, rand;
	
	if (randomize) {
		nextSlide = currentSlide;
		while (nextSlide == currentSlide) {
			nextSlide = chooseRandomSlide();		
		}	
	}
	else 
		nextSlide = parseInt(currentSlide) + 1;
		
	return nextSlide;
}

function fadeSlides(fadeInId, fadeOutId, level, fast) {	
	var opacity = parseFloat(1/ssFreq) * level;
	var inverseOpacity = 1-(parseFloat(1/ssFadeOutFreq) * level);	
	var fadeIn = document.getElementById(fadeInId);
	var fadeOut = document.getElementById(fadeOutId);

	if (fadeIn) {
		if (opacity > '0') 
			fadeIn.style.display = "block";
				
		fadeIn.style.opacity = opacity;
		fadeIn.style.filter = "alpha(opacity = " + (opacity * 100) + ")";
	}
	if (fadeOut) {
		fadeOut.style.opacity = inverseOpacity;
		fadeOut.style.filter = "alpha(opacity = " + (inverseOpacity * 100) + ")";
	}
	
	if (level < ssFreq) {
		var nextLevel = parseInt(level) + 1;
		var speed;
		
		if (fast == 1)
			speed = parseInt(ssFadeSpeed/3);
		else
			speed = ssFadeSpeed;
			
		setTimeout("fadeSlides('" + fadeInId + "', '" + fadeOutId + "', '" + nextLevel + "', '" + fast + "')", speed/ssFreq);
	}
	else {		
		if (fadeOut) {	
			fadeOut.style.display = "none";
		}
		return;
	}
}

function fadeIn(id, level) {
	var opacity;
	if (id == 'ssNav')
		opacity = parseFloat(1 / infoFreq) * level;
	else
		opacity = parseFloat(infoOpacity / infoFreq) * level;
	var fadeIn = document.getElementById(id);
	
	if (fadeIn) {
		if (opacity > '0') 
			fadeIn.style.display = "block";
		
		fadeIn.style.opacity = opacity;
		fadeIn.style.filter = "alpha(opacity = " + (opacity * 100) + ")";
	}
	
	if (level < infoFreq) {
		var nextLevel = parseInt(level) + 1;
		setTimeout("fadeIn('" + id + "', '" + nextLevel + "')", infoFadeSpeed / infoFreq);
	}
	else {
		return;
	}	
}

function fadeOut(id, level) {
	var inverseOpacity;
	if (id == 'ssNav')
		inverseOpacity = 1 - (parseFloat(1 / infoFadeOutFreq) * level);
	else
		inverseOpacity = 1 - (parseFloat(infoOpacity / infoFadeOutFreq) * level);
	var fadeOut = document.getElementById(id);
	
	if (fadeOut) {
		fadeOut.style.opacity = inverseOpacity;
		fadeOut.style.filter = "alpha(opacity = " + (inverseOpacity * 100) + ")";
	}
	
	if (level < infoFreq) {
		var nextLevel = parseInt(level) + 1;
		setTimeout("fadeOut('" + id + "', '" + nextLevel + "')", infoFadeSpeed / infoFreq);
	}
	else {
		if (fadeOut)
			fadeOut.style.display = "none";
		return;
	}	
}