/*******************************************************************************

FILE: mud_Scripts.php
REQUIRES: mud_API.js
AUTHOR: Takashi Okamoto mud(tm) - http://www.mudcorp.com/
VERSION: 2.0
DATE: 01/14/2006

--------------------------------------------------------------------------------

This file is part of the MudCorp Website.

	The MudCorp Website itself is NOT free software; however there are many
	components that are free. Please consult the header comments for those files
	for the terms. For any licensing terms, please contact
	us by using the contact form at http://mudcorporation.com/
	
--------------------------------------------------------------------------------

*******************************************************************************/

////////////////////////////////////////////////////////////////////////////////
// GLOBAL VARS

var delay = 5; // autoplay delay
var imgsGallery = new Array();
var proj, index, proj_list;
var selected = 0;

function sendFilter(loc) {
	location.href = "/projects/" + loc + "/";
	return false;
}

function setSelected(newSelected) {
	// unset old
	$('p'+selected).className = "proj_elem";
	$('p'+newSelected).className = "proj_selected";
	selected = newSelected;
}

////////////////////////////////////////////////////////////////////////////////
// MOUSE EVENTS

function setOnMouseClick() {
	var elements = document.getElementsByTagName("a");
	for (var i = 0; i < elements.length; i++) {
		switch(elements[i].className) {
			case "contactForm":
				elements[i].onclick = function() {
					$("contact").style.display = "block";
					return false;
				}
				break;
			case "next":
				elements[i].onclick = function() {
					 var s = proj.nextImg();
					 setSelected(s);
					 if (!index.hidden) {
					 	index.slideStart();
					 }
					 return false;
				}
				break;
			case "prev":
				elements[i].onclick = function() {
					 var s = proj.prevImg();
					 setSelected(s);
					 if (!index.hidden) {
					 	index.slideStart();
					 }
					 return false;
				}
				break;
			case "index":
				elements[i].onclick = function() {
					 index.slideStart();
					 return false;
				}
				break;
			case "close":
				elements[i].onclick = function() {
					 index.slideStart();
					 return false;
				}
				break;
			case "proj_elem":
				elements[i].onclick = function(evt) {
					evt = (evt) ? evt : ((window.event) ? event : null);
					if (evt) {
						var target = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
						if (target.nodeType == 3) target = target.parentNode;
						var imgNumber = parseInt(target.id.substring(1));
						var s = proj.showImg(imgNumber);
						setSelected(s);
					}
					index.slideStart();
					return false;
				}
				break;
			case "proj_selected":
				elements[i].onclick = function(evt) {
					evt = (evt) ? evt : ((window.event) ? event : null);
					if (evt) {
						var target = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
						if (target.nodeType == 3) target = target.parentNode;
						var imgNumber = parseInt(target.id.substring(1));
						var s = proj.showImg(imgNumber);
						setSelected(s);
					}
					index.slideStart();
					return false;
				}
				break;
			case "ap_start":
				elements[i].onclick = function() {
					proj.apStart(delay);
					return false;
				}
				break;
			case "ap_stop":
				elements[i].onclick = function() {
					proj.apStop();
					return false;
				}
				break;
		}
	}
}

////////////////////////////////////////////////////////////////////////////////
// INIT
function initGallery() {
	// load images

	imgsGallery[0] = new Object();
	imgsGallery[0].title = "Taber Studio (2006)";
	imgsGallery[0].image = "/images/taberstudio.jpg";
	imgsGallery[0].caption = '<em><b>Technology:</b> XHTML, CSS, JavaScript, AJAX, PHP.</em><br />Design and programming for Taber Studio.<br /><a href=\"http://taberstudio.com\" target=\"_blank\">http://taberstudio.com</a>';
	imgsGallery[1] = new Object();
	imgsGallery[1].title = "{XX} Design (2006)";
	imgsGallery[1].image = "/images/xxdesign.jpg";
	imgsGallery[1].caption = '<em><b>Technology:</b> XHTML, CSS, JavaScript, AJAX, PHP, MySQL.</em><br />Design and programming of {XX} Design. Custom content management for easy updates through a web-based interface.<br /><a href=\"http://xxdesign.com\" target=\"_blank\">http://xxdesign.com</a>';
	imgsGallery[2] = new Object();
	imgsGallery[2].title = "Ante Magazine (2005)";
	imgsGallery[2].image = "/images/ante.jpg";
	imgsGallery[2].caption = '<em><b>Technology:</b> XHTML, CSS, JavaScript, AJAX, PHP, MySQL.</em><br />Design and programming of the new site for Ante Magazine, using AJAX to make new data calls.<br /><a href=\"http://antemagazine.com\" target=\"_blank\">http://antemagazine.com</a>';
	imgsGallery[3] = new Object();
	imgsGallery[3].title = "Village Website (2005)";
	imgsGallery[3].image = "/images/vllg.jpg";
	imgsGallery[3].caption = '<em><b>Technology:</b> XHTML, CSS, JavaScript, Perl, PHP, MySQL.</em><br />Design and programming by MudCorp. Complete e-commerce solution, and direct download of font files. Inventory management through custom CMS. Also featuring mudTyper ver1.1, first interactive online type testing tool with support for kerning and full character sets.<br />Expanded site in 10/2005 to include a products section, as Village now carries physical goods for sale.<br /><a href=\"http://www.vllg.com\" target=\"_blank\">http://www.vllg.com</a>';
	imgsGallery[4] = new Object();
	imgsGallery[4].title = "2x4 Website (2005)";
	imgsGallery[4].image = "/images/2x4.jpg";
	imgsGallery[4].caption = '<em><b>Technology:</b> XHTML, CSS, JavaScript, PHP, MySQL.</em><br />Design and programming of the new site for 2x4, Inc. showcasing their new work in an easy to navigate and simple site.<br /><a href=\"http://2x4.org\" target=\"_blank\">http://2x4.org</a>';
	imgsGallery[5] = new Object();
	imgsGallery[5].title = "Stiletto Website (2005)";
	imgsGallery[5].image = "/images/stiletto.jpg";
	imgsGallery[5].caption = '<em><b>Technology:</b> XHTML, CSS, JavaScript, PHP, MySQL.</em><br />Design with Stiletto. Project management through custom CMS.<br /><a href=\"http://stilettonyc.com\" target=\"_blank\">http://stilettonyc.com</a>';
	imgsGallery[6] = new Object();
	imgsGallery[6].title = "Museum of the Moving Image Website (2005)";
	imgsGallery[6].image = "/images/movingimage.jpg";
	imgsGallery[6].caption = 'Designed graphical elements using the new museum identity developed by 2x4, Inc; that is implemented on top of their old site. Done while at 2x4, Inc.<br /><a href=\"http://movingimage.us\" target=\"_blank\">http://movingimage.us</a>';
	imgsGallery[7] = new Object();
	imgsGallery[7].title = "Andrew Zimmerman Website (2004)";
	imgsGallery[7].image = "/images/andrewzimmerman.jpg";
	imgsGallery[7].caption = '<em><b>Technology:</b> XHTML, CSS, JavaScript.</em><br />Design and programming by MudCorp.<br /><a href=\"http://andrewzimmerman.com\" target=\"_blank\">http://andrewzimmerman.com</a>';
	imgsGallery[8] = new Object();
	imgsGallery[8].title = "Cenere Website (2004)";
	imgsGallery[8].image = "/images/cenere.jpg";
	imgsGallery[8].caption = '<em><b>Technology:</b> XHTML, CSS, JavaScript.</em><br />Design by Stiletto, and programmed by MudCorp.<br /><a href=\"http://www.ceneregb.com\" target=\"_blank\">http://www.ceneregb.com</a>';
	imgsGallery[9] = new Object();
	imgsGallery[9].title = "Texelseboys Lunchbox and Global Locator (2003 - now)";
	imgsGallery[9].image = "/images/texelseboys.jpg";
	imgsGallery[9].caption = '<em><b>Technology:</b> XHTML, CSS, JavaScript, PHP, MySQL.</em><br />Design and programming by MudCorp. This is a travelling project of one tin lunchbox to give Texelseboys members a sense of physical connection. The locator has stories and pictures behind all the owners.<br /><a href=\"http://mudcorp.com/texelseboys/\" target=\"_blank\">http://mudcorp.com/texelseboys/</a>';
	imgsGallery[10] = new Object();
	imgsGallery[10].title = "mudOS (2003)";
	imgsGallery[10].image = "/images/mudos.jpg";
	imgsGallery[10].caption = '<em><b>Technology:</b> HTML, JavaScript.</em><br />mudOS is a command line layer that runs over top of a GUI web browser. Using only client-side JavaScript, users can type in commands to control the web browser, and have a command line interface to interact with instead of the conventional graphical interface. Since mudOS is purely client-side JavaScript, it can run on any web browser that has JavaScript and cookies enabled. This makes mudOS a truly cross-platform application mudOS is a command line layer that runs over top of a GUI web browser. Using only client-side JavaScript, users can type in commands to control the web browser, and have a command line interface to interact with instead of the conventional graphical interface. Since mudOS is purely client-side JavaScript, it can run on any web browser that has JavaScript and cookies enabled. This makes mudOS a truly cross-platform application.<br /><a href=\"http://mudcorp.com/products-web/mudos/\" target=\"_blank\">http://mudcorp.com/products-web/mudos/</a>';
	
	proj = new MudFadeGallery('proj', 'proj', imgsGallery, {startNum: 0, preload: true});
	
	// set initial values
	var title = (imgsGallery[0].title) ? imgsGallery[0].title : "No Title";
	var caption = (imgsGallery[0].caption) ? imgsGallery[0].caption : "No caption";
	$("proj_title").innerHTML = title;
	$("proj").src = imgsGallery[0].image;
	$("proj_caption").innerHTML = caption;
	$("proj_number").innerHTML = "1 of " + imgsGallery.length + " projects";
}

function initIndex() {
	proj_list = "";
	for (var i = 0; i < imgsGallery.length; i++) {
		var p_name = imgsGallery[i].title
		if (p_name.length > 64) p_name = p_name.substring(0, 64) + "...";
		if (i == 0) proj_list += '<a id="p' + i + '" href="#" class="proj_selected">' + (i+1) + '. ' + p_name + '</a><br />';
		else proj_list += '<a id="p' + i + '" href="#" class="proj_elem">' + (i+1) + '. ' + p_name + '</a><br />';
	}
	proj_list += '<a href="#" class="close">close</a>';
	$("index").innerHTML = proj_list;
	
	//MudPopContent(id, showX, showY, hideX, hideY, width, height)
	var index_dimensions = Element.getDimensions('index');
	index = new MudPopContent('index', 0, 0, 0,  -index_dimensions.height, index_dimensions.width, index_dimensions.height);
	$('index').style.top = -index_dimensions.height + "px";
}

function setIndexSize() {
	if (/MSIE/.test(navigator.userAgent) && !/Mac/.test(navigator.userAgent)) {
		var h = (document.documentElement.clientHeight) ? document.documentElement.clientHeight : document.body.clientHeight;
		$('index-wrapper').style.height = h + "px";
	}
	else {
		var h = Element.getHeight('index');
		$('index-wrapper').style.height = h + "px"
	}
}

function init() {
	initGallery();
	initIndex();
	setIndexSize();
	setOnMouseClick();
}

////////////////////////////////////////////////////////////////////////////////
// EVENTS

Event.observe(window, 'load', init, false);