﻿////////////////////
// init 
////////////////////

////////////////////
function init() {
	// show category/item
	var myCategory = getUrlCategory();
	var myItem = getUrlItem();
	showCategory(myCategory);
	if (myItem != null) {
		if (categories[myCategory].indexOf(myItem) != -1 ) {
			showItem(myItem);
		}
		else {
			// the items in not in its own category, so it's latest news on the home page
			showItem(myItem, true); 
		}
	}

	//initKeys();
}


////////////////////
// keyboard navigation
////////////////////
function initKeys() {
	document.onkeyup = detectEvent;
}

function detectEvent(e) {
	var evt = e || window.event;
	//alert(evt.type);
	//alert('keyCode is ' + evt.keyCode);
	//alert('charCode is ' + evt.charCode);
	
	switch (evt.keyCode) {
		case 27:
			hideItem();
			break;
		case 38:
			navItem(-1);
			break;
		case 40:
			navItem(+1);
		case 37:
			showPrevImage();
			break;
		case 39:
			showNextImage();
			break;
	}

}


////////////////////
// url
////////////////////

////////////////////
function getParameter(name) {
	name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
	var regexS = "[\\?&#]" + name + "=([^&#]*)";
	var regex = new RegExp(regexS);
	var results = regex.exec(window.location.href);
	if (results == null) {
		return null;
	}
	else {
		return results[1];
	}
}

////////////////////
function getUrlCategory() {
	var urlCategory = getParameter('c');
	if (urlCategory == "thesis") {
		urlCategory = "unready";
	}
	if (categories[urlCategory] == undefined) {
		urlCategory = "work";
	}
	return urlCategory;
}

////////////////////
function getUrlItem() {
	var urlItem = getParameter('i');
	urlItem = decodeURI(urlItem);
	if (items[urlItem] == undefined) {
		return null;
	}
	else {
		return urlItem;
	}
}



////////////////////
// latest news
////////////////////

////////////////////
function showLatestNews() {
	setHTML('latest', categories["latest"]);
	show('latest');
}

////////////////////
function hideLatestNews() {
	hide('latest');
}


////////////////////
// category
////////////////////

// needed for navigation update
var currentCategory;
var currentItemList;
var latestNewsShowing = false;

////////////////////
function navOn(navID) {
	var navObject = $("" + navID);
	navObject.src = navObject.src.replace("-off", "-on");
}

////////////////////
function navOff(navID, force) {
	if ((navID != currentCategory) || (force)) {
		var navObject = $("" + navID);
      navObject.src = navObject.src.replace("-on", "-off");
	}
}

////////////////////
function showCategory(category) {
	track(category);

	// update nav
	if (currentCategory != undefined) {
		navOff(currentCategory, true);
	}
	currentCategory = category;
	navOn(category);


	// news or work
	var myHTML = ''; 
	if ((category == 'work') || (category == 'news')) {
		
		// get list of items
		var myItems = categories[category];
		for (var i in myItems) {
			// get item id
			var myItemID = myItems[i];
			// get item data
			if (myItemID != "") {
				var myItem = items[myItemID];
				var myName = myItem.name;
				
				var myDir = myItem.dir;
				var myCover = myItem.cover;

				if ((myCover != '')) { 
					myCover += ".jpg";
					myCover = myDir + "/" + myCover;
				}
				myHTML += '<div class="item" onMouseOver="itemOn(' + "'" + myItemID + "'" + ');" onMouseOut="itemOff(' + "'" + myItemID + "'" + ');" onclick="showItem(' + "'" + myItemID + "'" + ');" ><div class="item-img"><img src="' + myCover + '"></div><span class="item-txt" id="' + myItemID + '-txt">' + myName + '</span></div>';
			}
			else {
				// empty block
				myHTML += '<div class="item_empty"><div class="item-img"></div><span class="item-txt">&nbsp;</span></div>';
			}
		}
		setHTML('content', myHTML);
	}
	// about or unreadymades
	else if ((category == 'about') || (category == 'unready')) {
		setHTML('content', categories[category]);
	}

	if (category == 'work') {
		showLatestNews();
	}
	else {
		hideLatestNews();
	}
}

////////////////////
function itemOn(itemID) {
	setClass(itemID + '-txt', 'item-txt-hilight');
}

////////////////////
function itemOff(itemID) {
	setClass(itemID + '-txt', 'item-txt');	
}

////////////////////
// item
////////////////////

// needed for images
var currentItem;
var currentItemID = -1;
var currentImageCount;


////////////////////
function getCurrentItemPos() {
	currentItemList = categories[currentCategory];
	
	// ie does not implement indexOf
	if(!Array.indexOf){
		for (var i=0; i<currentItemList.length; i++){
			if(currentItemList[i]==currentItemID){
	      	return i;
	       }
	    }
	    return -1;
	}
	else  {
		return currentItemList.indexOf(currentItemID);
	}
}

////////////////////
function navItem(direction) {
	if (latestNewsShowing) {
		return;
	}
	
	currentItemPos = getCurrentItemPos();
	do {
		currentItemPos = currentItemPos + direction;

		if (currentItemPos >= currentItemList.length) {
//			currentItemPos = 0;
			return;
		} 
		else if (currentItemPos < 0) {
//			currentItemPos = currentItemList.length -1;
			return;		
		}
			
		newItemID = currentItemList[currentItemPos];
	} while (newItemID == "");

	clearImage();
	showItem(newItemID);
}

////////////////////
function showItem(itemID, latestNews) {
	if (latestNews==undefined) {
		latestNews = false;
	}
	latestNewsShowing = latestNews;

	track(currentCategory, itemID);
	
	// get item data
	var myItem = items[itemID];
	var myName = myItem.name;
	var myText = myItem.text;
	var myDir = myItem.dir;
	var myPics = myItem.pics;

	currentItem = myItem;
	currentItemID = itemID;
	currentImageCount = myPics.length;

	// set text
	if (latestNewsShowing) {
			myName = "news - " + myName;
	}
	setHTML('popup-name', myName);
	setHTML('popup-description', myText);

	// set item nav
	var myHTML = "";
	if (!latestNewsShowing) {
		currentItemPos = getCurrentItemPos();
		prevItem = currentItemList[currentItemPos -1 ];
		if (prevItem != "") {
			myHTML += "<a href='javascript:navItem(-1);'>&lt;&lt;</a>"
		}
		else {
			myHTML += "&lt;&lt;";
		}
	
		myHTML += "&nbsp;";
		if (currentItemPos < currentItemList.length - 1) {
			myHTML += "<a href='javascript:navItem(+1);'>&gt;&gt;</a>";
		}
		else {
			myHTML += "&gt;&gt;";
		}
		myHTML += "&nbsp;"
	}
	else {
		//myHTML = "news:";
	}
	setHTML('popup-item-nav', myHTML);
	
	// set thumbnails
	myHTML = "";
	if (currentImageCount > 1) {
		for (var i = 0; i < currentImageCount; i++) {
			var myImage = myPics[i];

			// full
			myImage = myDir + "/thumbs/" + myImage + ".jpg";
			//myImage = myDir + "/" + myImage + ".jpg";
			myHTML += "<img onclick='showImage(" + i + ");' onMouseOut='thumbnailOff(" + i + ");' onMouseOver='thumbnailOn(" + i + ");' class='popup-thumb-img' id='thumb-" + i + "' src='" + myImage + "'/>";
		}
	}
	setHTML('popup-thumb-list', myHTML);
	
	showImage(0, true);
	preloadImages();

	// show popup
	show('popup');
	show('backdrop');
}

////////////////////
function hideItem() {
	clearImage();
	hide('popup');
	hide('backdrop');
	currentItemID = -1;
	updateURL(currentCategory);
	
}



////////////////////
function thumbnailOn(thumbNr) {
	// no thumbnails if only one image
	if (currentImageCount <= 1) return;

	setClass('thumb-' + thumbNr, 'popup-thumb-img-hilight');
}

////////////////////
function thumbnailOff(thumbNr, force) {
	// first time
	if (thumbNr == undefined) return;

	// no thumbnails if only one image
	if (currentImageCount <= 1) return;

	if (force || (thumbNr != currentImageNr)) {
		setClass('thumb-' + thumbNr, 'popup-thumb-img');
	}
}

////////////////////
// image
////////////////////

// needed for image nav
var currentImageNr;

function showLoading() {
	show('popup-image-loading');
}

function hideLoading() {
	hide('popup-image-loading');
}

////////////////////
function showNextImage() {
	if (currentImageCount == 1) return;
	
	if ((currentImageNr + 1) < currentImageCount) {
		showImage(currentImageNr + 1);
	}
	else {
		showImage(0);
	}
}

function showPrevImage() {
	if (currentImageNr > 0) {
		showImage(currentImageNr - 1);
	}
	//else {
	//	showImage(currentImageCount-1);
	//}
}

function preloadImages() {
    if (document.images) {
		var myItem = currentItem;
		var myDir = myItem.dir;
		var myPics = myItem.pics;
	
		var imageObj = new Image();
	
		for(i=0; i<=myPics.length-1; i++) {
			var myImage = myPics[i];
			myImage = myDir + "/" + myImage + ".jpg";
			imageObj.src = myImage;
		}
	}
}

////////////////////
function clearImage() {
	$('popup-image').src = "images/px.gif";
	showLoading();
}

////////////////////
function showImage(imageNr, noTracking) {
	
	imageNr = parseInt(imageNr, 10);
	if ((imageNr >= currentImageCount) || (imageNr < 0)) {
		return;
	}

	if (noTracking == undefined) {
		noTracking = false;
	}
	if (!noTracking) {
		track(currentCategory, currentItemID, imageNr);
	}

	// update hilight
	thumbnailOff(currentImageNr, true);
	currentImageNr = imageNr;
	thumbnailOn(imageNr);

	// get image data
	var myItem = currentItem;
	var myDir = myItem.dir;
	var myPics = myItem.pics;
	var myImage = myPics[imageNr];

	myImage = myDir + "/" + myImage + ".jpg";

	showLoading();
	var loadingImage = $('popup-image');
	// once fully loaded
	$(loadingImage).onload = function() {
		hideLoading();
	};
	$(loadingImage).src = myImage;
	
	// nav
	var myHTML = ""
	if (currentImageCount > 1) {
		if (imageNr > 0) {
			myHTML += "<a href='javascript:showImage(" + (imageNr - 1) + ");'>&lt;&lt;</a>";
		}
		else {
			//myHTML += "&nbsp;&nbsp;";
			myHTML += "&lt;&lt;";
		}
		myHTML += "&nbsp;";

		/*
		for (i = 0; i < numPics; i++) {
		if (imageNr == i) {
		popupNav.append(i + 1 + "&nbsp");
		}
		else {
		popupNav.append("<a href='javascript:showImage(" + i + ");'>" + (i + 1) + "</a>&nbsp");
		}
		}
		*/

		if (imageNr < (currentImageCount - 1)) {
			myHTML += "<a href='javascript:showImage(" + (imageNr + 1) + ");'>&gt;&gt;</a>";
		}
		else {
			myHTML += "&gt;&gt;";
		}
		myHTML += "&nbsp;&nbsp;";

	}
	setHTML('popup-img-nav', myHTML);
}


/////////////////////
// google tracking
/////////////////////
function track(category, item, imageNr) {
	updateURL(category, item, imageNr);
	
	var myUrl = "/" + category;

	if (item != undefined) {
		myUrl += "/" + item;
	}
	if (imageNr != undefined) {
		myUrl += "/" + imageNr;
	}

	//console.log(myUrl); 
	pageTracker._trackPageview(myUrl);
}

function download(item) {
	track("download", item);
}

function email() {
	track("about", "email");
}



////////////////////
// url updater
// allows bookmarking current page on single page site
////////////////////
function updateURL(category, item, imageNr) {
	hash = "c=" + category;
	if (item != undefined) hash += "&i=" + item;
	//if (imageNr != undefined) hash += "&n=" + imageNr;

	window.location.hash = hash;
}


////////////////////
// helper
////////////////////
function $(el) {
	if (typeof el == 'string') el = document.getElementById(el);
	return el;
}
 
function getHTML(item) {
	text = $(item).innerHTML;
	return text;
}

function setHTML(element, text) {
	var el = $(element);
	if (el) el.innerHTML = text;
}
	

function hide(element) {
	var el = $(element);
	if (el) {
		el.style.display = 'none';
		el.style.visibility = 'hidden';
	}
}

function show(element) {
	var el = $(element);
	if (el) {
		el.style.display = 'block';
		el.style.visibility = 'visible';
	}
}

function setClass(element, newClassName) {
	var el = $(element);
	if (el) el.className = newClassName;
}


