var projectsXML;
var categoryArray;
var selectedCategory;
var selectedItem;
var currentImage = 0;
var galleryWidth;

function projectsInit() {
	// load content (1st category)
	loadXML();
	showGreeting();

	window.onresize = sizeGallery;
}

function getResponse(transport) {
	projectsXML = transport.responseXML;
	loadCategories();
}

function getResponseFail() {
}

function loadXML() {
	new Ajax.Request("xml/projects.xml", {method:'get',onSuccess:getResponse,onFailure:getResponseFail});
}

function loadCategories() {
	var topnav = $$("#nav .topnav")[0];
	// topnav.onmouseover = topnavRollOver;
	// topnav.onmouseout = topnavRollOut;
	categoryArray = projectsXML.getElementsByTagName("projects")[0].getElementsByTagName("category");
	var topnavString = "";
	for (var i = 0; i < categoryArray.length; i++) {
		var nameValue = categoryArray[i].getAttribute("name");
		if (i > 0) {
			topnavString += " / ";
		}
		topnavString += "<a href=\"javascript:selectCategory(" + i + ");\">" + nameValue + "</a>";
	}
	topnav.innerHTML = topnavString;
	selectCategory(0);
}

function selectCategory(id) {
	if (!zoomOpen) {
		currentImage = 0;
	
		$$("#projects .gallery")[0].style.marginLeft = "0px";
		
		// remove projects
		while($$("#projects .image").length > 0) {
			$$("#projects .gallery .images")[0].removeChild($$("#projects .image")[0]);
		}
		while($$("#paging ul li").length > 0) {
			$$("#paging ul")[0].removeChild($$("#paging ul li")[0]);
		}
		
		var paging = $$("#paging ul")[0];
		var itemArray = categoryArray[id].getElementsByTagName("item");
		for (var i = 0; i < itemArray.length; i++) {
			var liElement;
			if (browserIsIE && i != 0) {
				liElement = document.createElement("li");
				liElement.innerHTML = "&nbsp;/&nbsp;";
				paging.appendChild(liElement);
			}

			liElement = document.createElement("li");
			if (i == 0) liElement.className = "first";
			var aElement = document.createElement("a");
			aElement.href = "javascript:selectProject(" + i + ");";
			aElement.innerHTML = ((i + 1) < 10) ? "0" + (i + 1) : (i + 1);
			liElement.appendChild(aElement);
			paging.appendChild(liElement);
		}
		
		selectedCategory = id;
		
		var liArray = $$("#nav .topnav a");
		for (var i = 0; i < liArray.length; i++) {
			liArray[i].className = "";
		}
		liArray[selectedCategory].className = "selected";
		
		loadNextImage(0);
	}
}

function loadNextImage(num) {
	if (num != 0) currentImage++;
	var itemArray = categoryArray[selectedCategory].getElementsByTagName("item");
	if (currentImage < itemArray.length) {
		var images = $$("#projects .gallery .images")[0];
		var divElement = document.createElement("div");
		divElement.className = "image";
		if (currentImage == 0) divElement.className += " first";
		var imgElement = document.createElement("img");
		imgElement.onload = sizeGallery;
		imgElement.src = itemArray[currentImage].getElementsByTagName("image")[0].firstChild.nodeValue + ((browserIsIE) ? "?" + new Date().getTime() : "");
		if (imgElement.complete) sizeGallery();
		divElement.appendChild(imgElement);
		images.appendChild(divElement);
		loadNextImage();
	} else if (currentImage == itemArray.length) {
		selectProject(0);
	}
}

function selectProject(num) {
	if (!zoomOpen) {
		selectedItem = num;
		var projectImage = $$("#projects .gallery .images .image")[num];
		if (projectImage == undefined) {
			$$("#projects .gallery")[0].style.marginLeft = "0px";
			galleryWidth = (document.viewport.getWidth() - $$("#projects .gallery")[0].cumulativeOffset()[0]);
			$$("#projects .gallery")[0].style.width = galleryWidth + "px";
		} else {
			var offsetDistance = projectImage.cumulativeOffset()[0] - $$("#projects .gallery")[0].cumulativeOffset()[0];
			new Effect.Morph($$("#projects .gallery")[0], {style:'margin-left:' + (-1 * offsetDistance) + 'px;width:' + (galleryWidth + offsetDistance) + 'px;', duration:0.5});
		}
		// fill in content
		var project = $$("#detail li")[0];
		var about = $$("#detail li")[1];
		var projectContent = categoryArray[selectedCategory].getElementsByTagName("item")[selectedItem].getElementsByTagName("project")[0].firstChild.nodeValue;
		var aboutContent = categoryArray[selectedCategory].getElementsByTagName("item")[selectedItem].getElementsByTagName("about")[0].firstChild.nodeValue;
		if (categoryArray[selectedCategory].getElementsByTagName("item")[selectedItem].getElementsByTagName("detail").length > 0) {
			var detailLinks = categoryArray[selectedCategory].getElementsByTagName("item")[selectedItem].getElementsByTagName("detail");
			for (var d = 0; d < detailLinks.length; d++) {
				var detailLabel = detailLinks[d].getAttribute("label");
				if (!detailLabel) detailLabel = "DETAIL";
				aboutContent += " (<a href=\"" + detailLinks[d].firstChild.nodeValue + "\" class=\"detail\">" + detailLabel + "</a>)";
			}
		}
		project.innerHTML = '<span class="heading">PROJECT:</span> ' + projectContent;
		about.innerHTML = '<span class="heading">ABOUT:</span> ' + aboutContent;
		var liArray = $$("#paging ul li a");
		for (var i = 0; i < liArray.length; i++) {
			liArray[i].className = "";
		}
		liArray[selectedItem].className = "active";
		sizeGallery();
		setupZoom();
	}
}

function sizeGallery() {
	galleryWidth = (document.viewport.getWidth() - $$("#projects .gallery")[0].cumulativeOffset()[0]);
	if (galleryWidth < 843) galleryWidth = 843;
	var imageArray = $$("#projects .image");
	var imagesWidth = 0;
	$$("#projects .gallery")[0].style.width = galleryWidth + "px";
	for (var i = 0; i < imageArray.length; i++) {
		imagesWidth += imageArray[i].offsetWidth;
	}
	$$("#projects .images")[0].style.width = imagesWidth + "px";
}

function showGreeting() {
	if (Cookies.get('greeting') == undefined) {
		Cookies.set('greeting', 'true', 1);
		$$("#greeting img")[0].style.paddingTop = parseInt((document.viewport.getHeight() - $$("#greeting img")[0].offsetHeight) / 2) + "px";
		$$("#greeting")[0].setOpacity(0.8);
		$$("#greeting")[0].style.visibility = "visible";
		try {
			if ($$("#greeting")[0]) {
				new Effect.Opacity($$("#greeting")[0], {duration:1, delay:3, from:0.8, to:0, afterFinish:killGreeting});
			}
		} catch(error) {}
	} else {
		killGreeting();
	}
}

function killGreeting() {
	if ($$("#greeting")[0]) {
		$$("#greeting")[0].parentNode.removeChild($$("#greeting")[0]);
	}
}