// JavaScript Document
var horizProjects = 5;
var numProjects = 10;
var numProjectCategories = 7;

var projectCategories = new Array(numProjectCategories);
var projects = new Array(numProjects);

projectCategories[0] = "3D Animation";
projectCategories[1] = "2D Animation";
projectCategories[2] = "UI Development";
projectCategories[3] = "Hardware";
projectCategories[4] = "Game (Multitouch)";
projectCategories[5] = "Instrument (Multitouch)";
projectCategories[6] = "MEME";

projects[0]  = ["0", "Orange Light",        "orangeLight", "Team-based development of an animation with strong technical elements. Used technical elements include nCloth, mental ray shading, and fluid effects. My primary contribution was in nCloth development for the clothing and hair, as well as team management."];

projects[1]  = ["1", "EternalInsomnia", "eternalInsomnia", "Open-ended animation assignment. Individually developed animation depicting one's endless struggle with insomnia, set to Loituma' Iievan Polkka."];

projects[2]  = ["2", "PlayXpert Armory",      "pxpArmory", "Develop a new user interface in the form of a PlayXpert widget that optimizes its screen real estate so that the WOW Armory can be accessed and used with ease from \"in-game\". Developed while an intern at PlayXpert in Sandpoint, ID."];

projects[3]  = ["0", "Chime",                     "chime", "Individual animation project. A gestural, abstract animation focusing around light and windchimes."];

projects[4]  = ["3", "Multitouch Surface",   "multitouch", " Create a hardware device and supporting software for a camera-based multitouch surface. Developed as a supplement for two class projects: Pebbles and Illuminate. Used a projector, mirror, analog BW security camera, and an IKEA corner desk."];

projects[5]  = ["0", "Cubivore",               "cubivore", "Partnered Stop-frame Animation. A yellow cube is looking for his friend, and in searching for him runs into a red cube. Perhaps the red cube knows where the other yellow cube had gone? In order to simulation the characters' ability to jump, we filmed the entire animation vertically with the camera pointing down."];

projects[6]  = ["4", "Illuminate",           "illuminate", "Using a multitouch interface, developed a game that utilizes the different usability rules. Game Objective: create wells of gravity via contact with the surface to bend light in order to illuminate all of the stars."];

projects[7]  = ["5", "Pebbles",                 "pebbles", "Using a multitouch interface, developed an instrument that reacts visually and audibly. Tones are generated from two octaves of a pentatonic scale, and the timing and activation of those tones are controled by the pebbles and the rules to Conway's Game of Life."];

projects[8]  = ["0", "Ribbon",                   "ribbon", "Generative Infinite Landscape. A collection of ten ribbons are randomly generated as they scroll from right to left. A modification of the algorithm that is used to maintain vertical alignment on rollercoaster simulations allowed the ribbons to twitch occasionally. Over time the sky changes from day to night, and the ribbons take on a complimentary hue."];

projects[9]  = ["6", "Blitzkrieg Pop",    "blitzkriegPop", "Create a collection of videos that would 'dominate Youtube'. Experiencing the hype associated with the Loituma(Bleach) and CaramellDansen(Popotan), I experimented with creating my own."];

function initialize()
{
	var currentProject = 0;
	var replaceString = '';
	replaceString += '<ul>';
	while (currentProject < numProjects)
	{
		replaceString += '<li style="width: 540px;"><ul class="projects">';
		for (var i = 0; i < horizProjects; i++)
		{
			var srcString = 'src="images/' + projects[currentProject][2] + 'Thumb.png"';
			var javString = 'onmouseover="javascript: displayProject(' + currentProject + ');"';
			
			replaceString += '<li id="project' + currentProject + '">';
			replaceString += '<a href="' + projects[currentProject][2] + '.html">';
			replaceString += '<img ' + srcString + ' ' + javString + ' />';
			replaceString += '</a></li>';
			
			currentProject++;
		}
		replaceString += '</ul></li>';
	}
	
	replaceString += '</ul>';
	document.getElementById('projectThumbnails').innerHTML = replaceString;
	
	displayProject(0);
}
window.onload = initialize;

function displayProject(projectId)
{
	document.getElementById('projectTitle').innerHTML = projectCategories[projects[projectId][0]] + ":  " + projects[projectId][1];
	document.getElementById('projectQuickDescription').innerHTML = projects[projectId][3];
	document.getElementById('projectImage').src = 'images/' + projects[projectId][2] + '.png';
}