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

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 = "Ante Magazine (2005)";
	imgsGallery[1].image = "/images/ante.jpg";
	imgsGallery[1].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[2] = new Object();
	imgsGallery[2].title = "Village Website (2005)";
	imgsGallery[2].image = "/images/vllg.jpg";
	imgsGallery[2].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[3] = new Object();
	imgsGallery[3].title = "2x4 Website (2005)";
	imgsGallery[3].image = "/images/2x4.jpg";
	imgsGallery[3].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[4] = new Object();
	imgsGallery[4].title = "Stiletto Website (2005)";
	imgsGallery[4].image = "/images/stiletto.jpg";
	imgsGallery[4].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[5] = new Object();
	imgsGallery[5].title = "Museum of the Moving Image Website (2005)";
	imgsGallery[5].image = "/images/movingimage.jpg";
	imgsGallery[5].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[6] = new Object();
	imgsGallery[6].title = "Endeavor Screensaver (2004)";
	imgsGallery[6].image = "/images/endeavor.jpg";
	imgsGallery[6].caption = 'Designed and programmed a flash based screen saver. Runs on computers in the endeavor office, done for 2x4, Inc.';
	imgsGallery[7] = new Object();
	imgsGallery[7].title = "Prada — SoundWave (2004)";
	imgsGallery[7].image = "/images/prada_soundwave.gif";
	imgsGallery[7].caption = '<em><b>Technology:</b> Processing, Java, XML.</em><br />Processing applet that displays the sound spectrum of ambient noise. Installation work for Prada Epicenter L.A. done for 2x4, Inc.';
	imgsGallery[8] = new Object();
	imgsGallery[8].title = "Prada — MostWantedCombo (2004)";
	imgsGallery[8].image = "/images/prada_mostwantedcombo.gif";
	imgsGallery[8].caption = '<em><b>Technology:</b> Processing, Java, XML.</em><br />Processing applet that displays the characteristics of the FBI\'s 10 most wanted, mixed in with dating profiles of a popular dating site. Installation work for Prada Epicenter L.A. done for 2x4, Inc.';
	imgsGallery[9] = new Object();
	imgsGallery[9].title = "Prada — MostWanted (2004)";
	imgsGallery[9].image = "/images/prada_mostwanted.gif";
	imgsGallery[9].caption = '<em><b>Technology:</b> Processing, Java, XML.</em><br />Processing applet that displays the list of FBI\'s 10 most wanted. This applet was designed in a way that if you feed in a text file, it will print the contents of the text file line by line, much like a dot matrix printer, but on screen. Installation work for Prada Epicenter L.A. done for 2x4, Inc.';
	imgsGallery[10] = new Object();
	imgsGallery[10].title = "Prada — AllNames (2004)";
	imgsGallery[10].image = "/images/prada_allnames.gif";
	imgsGallery[10].caption = '<em><b>Technology:</b> Processing, Java, XML.</em><br />Processing applet that displays many combinations of common first and last names. Installation work for Prada Epicenter L.A. done for 2x4, Inc.';
	imgsGallery[11] = new Object();
	imgsGallery[11].title = "mudHeart (2004)";
	imgsGallery[11].image = "/images/heart.gif";
	imgsGallery[11].caption = '<em><b>Technology:</b> Processing.</em><br />Java applet of randomly drawn hearts with shivers down the spine. Perfect for Valentine’s day.<br /><a href=\"http://mudcorp.com/applets/mudHeart/\" target=\"_blank\">http://mudcorp.com/applets/mudHeart/</a>';
	imgsGallery[12] = new Object();
	imgsGallery[12].title = "Andrew Zimmerman Website (2004)";
	imgsGallery[12].image = "/images/andrewzimmerman.jpg";
	imgsGallery[12].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[13] = new Object();
	imgsGallery[13].title = "Texelseboys Lunchbox and Global Locator (2003 - now)";
	imgsGallery[13].image = "/images/texelseboys.jpg";
	imgsGallery[13].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[14] = new Object();
	imgsGallery[14].title = "Tshirt — Giraffe (2003)";
	imgsGallery[14].image = "/images/tshirt-giraffe.jpg";
	imgsGallery[14].caption = 'Giraffe tshirt, silk screened by hand. Edition of 10. <em>Sold out.</em>';
	imgsGallery[15] = new Object();
	imgsGallery[15].title = "Tshirt — Mudtallica (2003)";
	imgsGallery[15].image = "/images/tshirt-mudtallica.jpg";
	imgsGallery[15].caption = 'Mudtallica logotype tshirt, silk screened by hand. Edition of 20. <em>Sold Out.</em>';
	imgsGallery[16] = new Object();
	imgsGallery[16].title = "mudOS (2003)";
	imgsGallery[16].image = "/images/mudos.jpg";
	imgsGallery[16].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>';
	imgsGallery[17] = new Object();
	imgsGallery[17].title = "Mudtallica (2003)";
	imgsGallery[17].image = "/images/mudtallica.jpg";
	imgsGallery[17].caption = 'Logotype. Protest against corporate crap rock.';
	
	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);