var imageParam;
var categoryParam;
var gallery;
var data;
var categories;
var categoryImages = new Array();
var cookiePrefix = "_mmp_";
var menuPrefix = "menu_";
var pageMenu;

var divHeight = 66;
var divWidth = 100;
var divSpacing = 0;
var divBorderWidth = 1;
var divBorderColorDefault = "#ffffff";
var divBorderColorHilite = "#000000";

var category = "";
var index = 0;
var newIndex = 0;
var visibleImages;
var slideTimer;
var slideshow = false;
var fadeTimer;
var fading = false;
var slideshowDelay = 4000;
var fadeDuration = 1000; //IE only
var fadeStepSize = 3;

var ns4;
var op5;
var op6;
var agt;
var mac;
var ie; 
var mac_ie;

window.onload = load;

function load()
{
	sniffBrowsers();
	updateMenu();
	
	gallery = document.getElementById("gallery");
	
	if (gallery)
	{
		var categoryIndex = 0;
		
		for (i = 0; i < categories.length; i++)
		{
			categoryImages[categories[i].toLowerCase()] = new Array();
			if (categories[i].toLowerCase() == categoryParam) categoryIndex = i;
		}
		
		category = categories[categoryIndex].toLowerCase();

		if (imageParam != "") {
		    for (i = 0; i < data.length; i++) {
		        if (data[i].imageUrl == imageParam) {
		            category = data[i].category.toLowerCase();
		            break;
		        }
		    }
		}
		
		showImages(category);
	}
	
	if (categoryParam != "") pageMenu = categoryParam;
	hiliteMenu(menuPrefix + pageMenu);

	var newVisitor = true;  (getCookie("welcomed") == "");

	if (newVisitor) {
	    setCookie("welcomed", "true");

	    showWelcome(true);
	}
}

function showWelcome(state) {
    var welcome = document.getElementById("welcome");
    if (welcome) {
        setOpacity(welcome, 60);
        if (state == true) welcome.style.visibility = "visible"; else welcome.style.visibility = "hidden";
    }
}

function updateMenu()
{
	for (i = categories.length - 1; i >= 0; i--)
	{
		addMenuItem(categories[i]);
	}
}

function addMenuItem(category)
{
	category = category.toLowerCase();
	
	var menu = document.getElementById("menu");
	var id = menuPrefix + category;
	
	var anchor = document.createElement("a");
	anchor.id = id;
	anchor.href = "javascript:doMenu('" + id + "', '" + category + "')";
	
	var anchorText = document.createTextNode(category);
	anchor.appendChild(anchorText);
	
	var separator = document.createElement("span");
	separator.innerHTML = "&nbsp;|&nbsp;"
	
	var menuItem = document.createElement("span");
	menuItem.appendChild(anchor);
	menuItem.appendChild(separator);
	
	menu.insertBefore(menuItem, menu.firstChild);
}

function doMenu(id, category)
{
	hiliteMenu(id);

	if (gallery) {
	    showImages(category);
	    scroll(-index);
	} else {
	    window.location.href = "default.aspx?category=" + category.toLowerCase();
	}
}

function showImages(newCategory)
{
	if (!gallery) return;
	
	stopSlides();
	
	category = newCategory.toLowerCase();
	
	index = 0;
	var imageCount = 0;
	gallery.innerHTML = "";
	
	for (i = 0; i < data.length; i++)
	{
		var imgFilename = data[i].thumbnailUrl;
		var imgCategory = data[i].category;
		
		if (imgCategory.toLowerCase() == category.toLowerCase())
		{
			if (data[i].imageUrl == imageParam) index = imageCount;
			
			var imgUrl = "images/" + imgFilename.replace(/^\s+|\s+$/g, '');
			
			var img = document.createElement('img');
			img.src = imgUrl;
			
			var div = document.createElement('div');
			div.id = "thumbdiv" + imageCount;
			div.className = "thumbdiv";
			div.style.height = divHeight + "px";
			div.style.width = divWidth + "px";
			div.style.marginBottom = divSpacing  + "px";
			div.style.borderWidth = divBorderWidth + "px";
			
			var evalString = "div.onclick = function () {if (slideshow) {updateFadeTarget(" + imageCount + ");} stopSlides(); scroll(0); selectThumb(" + imageCount + ");};";
			eval(evalString);
			
			var imgTop = -Math.round((img.height - divHeight)/2);
			var imgLeft = -Math.round((img.width - divWidth)/2);
			var imgHtml = "<img src='" + imgUrl + "' id='thumbnail" + imageCount + "' class='thumbnail' style='top: " + imgTop + "px; left: " + imgLeft + "px;' onclick='selectThumb(" + imageCount + ")' title='" + (imageCount + 1) + ".  " + data[i].caption + "' alt='" + (imageCount + 1) + ".  " + data[i].caption + "' />";
			//var imgHtml = "<img src='" + imgUrl + "' id='thumbnail" + imageCount + "' class='thumbnail' style='top: " + imgTop + "px; left: " + imgLeft + "px;' onclick='selectThumb(" + imageCount + ")' alt='" + (imageCount + 1) + ".  " + data[i].caption + "' />";

			div.innerHTML = imgHtml;
			div.fade = null;
			
			gallery.appendChild(div);
			
			categoryImages[category][imageCount] = i;
			imageCount += 1;
		}
	}

	var div = document.createElement('div');
	div.id = "coverdiv";
	div.style.height = divHeight + "px";
	div.style.width = divWidth + "px";
	div.style.border = "0px";
	div.style.backgroundColor = "#ffffff";
	div.style.position = "absolute";
	div.style.top = "1px";
	div.style.left = "1px";
	div.style.zIndex = "1000";
	
	setOpacity(div, 65)
	
	gallery.appendChild(div);
			
	visibleImages = Math.floor(getElementHeight(gallery) / (divHeight + (divSpacing + divBorderWidth) * 2));
	
	selectThumb(index);
}

function scroll(x)
{
	newIndex = index + parseFloat(x);
	var imageCount = categoryImages[category].length;
	
	if (newIndex < 0) newIndex = imageCount - 1;
	if (newIndex >= imageCount) newIndex = 0;
	
	var scrollIndex = newIndex;
	var maxIndex = imageCount - visibleImages;
	if (newIndex > maxIndex) scrollIndex = maxIndex;
	
	var topImage = Math.round(gallery.scrollTop / divHeight);
	var bottomImage = topImage + visibleImages - 1;
	
	var imageVisible = (newIndex >= topImage && newIndex <= bottomImage);
	
	if (!imageVisible) gallery.scrollTop = scrollIndex * (divHeight + (divSpacing + divBorderWidth) * 2);
	
	var coverDiv = document.getElementById("coverdiv");
	coverDiv.style.top = (newIndex * (divHeight + (divSpacing + divBorderWidth) * 2)) + 1 + "px";
}

function selectThumb(newIndex)
{
	var imageCount = categoryImages[category].length;
	var dataOffset = categoryImages[category][newIndex];
	
	document.getElementById("thumbdiv" + index).style.borderColor = divBorderColorDefault;
	document.getElementById("thumbdiv" + newIndex).style.borderColor = divBorderColorHilite;
	document.getElementById("caption").innerHTML = "<h1>" + data[dataOffset].caption + "</h1>";
	document.getElementById("num").innerHTML = (newIndex + 1) + " / " + imageCount;

	//var imgHtml = "<img src='images/" + data[dataOffset].imageUrl + "' title='" + data[dataOffset].caption + "' />";
	var imgHtml = "<img src='images/" + data[dataOffset].imageUrl + "' />";
	
	if (slideshow)
	{
		fade(imgHtml);
	} else {
		document.getElementById("image").innerHTML = imgHtml;
	}
	
	index = newIndex;
}

function fade (newImgHtml)
{
	var imageDiv = document.getElementById("image");
	var faderDiv = document.getElementById("faderImage");

	if (imageDiv.fade == null)
	{
		if (!newImgHtml) return;
		
		if (!ie)
		{
			fading = true;
			imageDiv.fade = 100;
		}
		
		faderDiv.innerHTML = newImgHtml;
	}
	
	if (!slideshow) stopFade();
	
	if (ie)
	{
			imageDiv.style.filter="blendTrans(duration=" + fadeDuration/1000 + ")";
			
			imageDiv.filters.blendTrans.apply();
			imageDiv.style.visibility = "hidden";
			imageDiv.filters.blendTrans.play();
			
			fadeTimer = window.setTimeout("swapImages()", fadeDuration);
	} else {
		if (imageDiv.fade > 0)
		{
			setOpacity(imageDiv, imageDiv.fade);
			setOpacity(faderDiv, 100 - imageDiv.fade);  // <== causes white pixels in IE even when visibility = hidden
			
			fadeTimer = window.setTimeout("fade()", 2);
			
			imageDiv.fade -= fadeStepSize;
		} else {
			stopFade();
			slideTimer = window.setTimeout("showSlides()", slideshowDelay);
		}
	}
}

function stopFade()
{
	var imageDiv = document.getElementById("image");
	var faderDiv = document.getElementById("faderImage");

	if (ie)
	{
		if (imageDiv.filters.blendTrans)
		{
			imageDiv.filters.blendTrans.stop();
			swapImages();
		}
	} else {
		setOpacity(imageDiv, 0);
		imageDiv.innerHTML = faderDiv.innerHTML;
		setOpacity(imageDiv, 100);
		
		setOpacity(faderDiv, 0);
		
		imageDiv.fade = null;
		fading = false;
		
		window.clearTimeout(fadeTimer);
	}
}

function updateFadeTarget(newIndex)
{
	var dataOffset = categoryImages[category][newIndex];
	//var imgHtml = "<img src='images/" + data[dataOffset].imageUrl + "' title='" + data[dataOffset].caption + "' />";
	var imgHtml = "<img src='images/" + data[dataOffset].imageUrl + "' />";
	var faderDiv = document.getElementById("faderImage");
	
	faderDiv.innerHTML = imgHtml;
}

function swapImages()
{
	window.clearTimeout(fadeTimer);
	
	var imageDiv = document.getElementById("image");
	var faderDiv = document.getElementById("faderImage");
	
	imageDiv.innerHTML = faderDiv.innerHTML;
	imageDiv.style.visibility = "visible";
	
	if (slideshow) slideTimer = window.setTimeout("showSlides()", slideshowDelay);
}

function setOpacity(element, value)
{
	element.style.opacity = (value / 100);
	element.style.MozOpacity = (value / 100);
	element.style.KhtmlOpacity = (value / 100);
	element.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=" + value + ")" ;
}

function getElementHeight(element) {
	if (ns4) {
		return element.clip.height;
	} else {
		if (op5) { 
			return element.style.pixelHeight;
		} else {
			return element.offsetHeight;
		}
	} 
}

function sniffBrowsers() {
	ns4 = document.layers;
	op5 = (navigator.userAgent.indexOf("Opera 5")!=-1) 
		||(navigator.userAgent.indexOf("Opera/5")!=-1);
	op6 = (navigator.userAgent.indexOf("Opera 6")!=-1) 
		||(navigator.userAgent.indexOf("Opera/6")!=-1);
	agt=navigator.userAgent.toLowerCase();
	mac = (agt.indexOf("mac")!=-1);
	ie = (agt.indexOf("msie") != -1); 
	mac_ie = mac && ie;
}

function toggleSlideshow(element)
{
	if (slideshow) {stopSlides(element);} else {showSlides(element);}
}

function showSlides()
{
	slideshow = true;
	scroll(1);
	selectThumb(newIndex);
	
	var link = document.getElementById("slideshowlink");
	
	link.innerHTML = "stop";
	link.setAttribute ("title", "stop slide show");
}

function stopSlides()
{
	window.clearTimeout(fadeTimer);
	window.clearTimeout(slideTimer);
	
	slideshow = false;
	stopFade();
	
	var link = document.getElementById("slideshowlink");
	
	if (link)
	{
		link.innerHTML = "slideshow";
		link.setAttribute ("title", "start slide show");
	}
}

function previousSlide()
{
	stopSlides();
	scroll(-1);
	selectThumb(newIndex);
}

function nextSlide()
{
	stopSlides();
	scroll(1);
	selectThumb(newIndex);
}

function hiliteMenu(thisMenuId)
{
	var thisMenu = document.getElementById(thisMenuId);
	
	if (thisMenu)
	{
		var lastMenu;
		var lastMenuId = getCookie("menuId");

		if (lastMenuId != "" && lastMenuId != null) lastMenu = document.getElementById(lastMenuId);
		
		if (lastMenu)
			{
				lastMenu.className = "link_normal";
			}

		thisMenu.className = "link_selected";

		setCookie("menuId", thisMenuId);
	}
	
	return true;
}
	
function getCookie(cookieName)
	{
		cookieName = cookiePrefix + cookieName;
		
		var allCookies = document.cookie;
		var pos = allCookies.indexOf(cookieName);

		if (pos >= 0)
			{
				var start = pos + cookieName.length + 1;
				
				var end = allCookies.indexOf(";", start);
				if (end == -1) end = allCookies.length;
				
				return unescape(allCookies.substring(start, end));
			} else {
				return "";
			}
	}
	
function setCookie(cookieName, text)
	{
		var nextYear = new Date();
		nextYear.setFullYear(nextYear.getFullYear() + 1);
		
		setCookieValues(cookiePrefix + cookieName, text, nextYear, false, false, false);
	}

function setCookieValues(name, value, expires, path, domain, secure)
{ 
	var curCookie = "";
	curCookie += name + "=" + escape(value); 
	curCookie += ((expires) ? "; expires=" + expires.toGMTString() : "");
	curCookie += ((path) ? "; path=" + path : "");
	curCookie += ((domain) ? "; domain=" + domain : "");
	curCookie += ((secure) ? "; secure" : "");
		
	document.cookie = curCookie; 
}