// JavaScript Document

var data = [];
loadData();

var pics = [];
var bw_pics = [];
var c_pics = [];

preloadMainImage();
preloadLargeImages();
preloadSmallImages();

$(document).ready(function() {
	addText(0);
	for (var i = 1; i <= 9; i++) {
		$('.box'+i+' p').html(data[i][1]);
		$('.box'+i+' .color').attr('src', 'images/'+data[i][0]+'-S-C.jpg');
		$('.box'+i+' .bw').attr('src', 'images/'+data[i][0]+'-S-BW.jpg');
	}
});

function preloadMainImage() {
	pics[0] = new Image(480, 380);
	pics[0].src = "images/"+data[0][0];
}

function preloadSmallImages() {
	for (var i = 1; i <= 9; i++) {
		bw_pics[i] = new Image(100, 100);
		bw_pics[i].src = "images/"+data[i][0]+"-S-BW.jpg";
	}
	for (var i = 1; i <= 9; i++) {
		c_pics[i] = new Image(100, 100);
		c_pics[i].src = "images/"+data[i][0]+"-S-C.jpg";
	}
}

function preloadLargeImages() {
	for (var i = 1; i <= 9; i++) {
		pics[i] = new Image(480, 380);
		pics[i].src = "images/"+data[i][0]+"-L.jpg";
	}	
}

function loadData() {
	for (var i = 0; i <= 9; i++) {
		data[i] = [];
	}
	
	//	Netlight
	//	Senile Grandfather Clock
	//	Fit*ly
	//	
	//	Plant Watering
	//	Motr.me
	//	Vending Machine
	//	
	//	Magic Compass
	//	Dodgebot
	//	Milling Machine

	data[0][0] = 'sign/main_image.gif'; // image stem
	data[0][1] = '9 Projects'; // title
	data[0][2] = 'A few of my projects'; // titleLonger
	data[0][3] = '<p>Here are a few things I made while at ITP.  Click or scroll around for more information.</p><p>Pictured: an LED sign that networked with my other projects, appeared different colors depending on the viewing angle, and took input from the Internet.  Collaboration with Nathan Roth.</p>'; // display text

	data[1][0] = 'netlight/main_image';
	data[1][1] = 'Net Light';
	data[1][2] = 'Net Light: Networked Light Switches';
	data[1][3] = '<p>Originally designed for use in student housing, the Net Lights let users know when their friends were up and active even after \"normal\" social hours.  Part status indicators, part standard light switches, the Net Lights added a social element to the act of turning on a light.  Collaboration with Nathan Roth.</p>';

	data[2][0] = 'motr/main_image';
	data[2][1] = 'Motr.me';
	data[2][2] = 'Motr.me: The Mobile Shuttle Look-up Service';
	data[2][3] = '<p>Motr.me was a mobile service that provided easy access to the NYU shuttle timetables, letting users quickly find the next shuttles coming to a given location.  In addition to having a smartphone interface, Motr.me provided text message responses for users with older phones.  Built in early 2009, collaboration with Nathan Roth.</p>';
	
	data[3][0] = 'clock/main_image';
	data[3][1] = 'Senile Clock';
	data[3][2] = 'The Senile Grandfather Clock';
	data[3][3] = '<p>Unlike other grandfather clocks, this one lacked the typical memory and alertness.  Built by hand and capable of basic speech, the senile grandfather clock would complain that no one came to visit, trail off while telling old stories, and occasionally fall asleep, catching up with the correct time when it woke up.</p>';
	
	data[4][0] = 'watering/main_image';
	data[4][1] = 'Net-Watering';
	data[4][2] = 'Networked Flowerpot: Remote Watering';
	data[4][3] = '<p>This project was built out of necessity to let me water my orchid while home for few weeks at Christmas.  Not wanting to miss the weekly watering ritual, I set up a system that take care of the plant through action on a certain webpage.  The project was later expanded into a Facebook application where my friends could water a different plant via Facebook.</p>';

	data[5][0] = 'dodgebot/main_image';
	data[5][1] = 'Dodgebot';
	data[5][2] = 'Dodgebot (AKA Catchbot)';
	data[5][3] = '<p>Designed as a robot to play catch with and built mainly from re-purposed materials, the \"Catchbot\" uses a camera to find nearby people and toss them a ball that can be tossed back into its collector.  The behavior of finding people and shooting Nerf balls at them led us to call this robot \"Dodgebot\" as well as \"Catchbot.\"  Collaboration with Cameron Cundiff, pictured.</p>';

	data[6][0] = 'vending/main_image';
	data[6][1] = 'ITP Vending';
	data[6][2] = 'The ITP Vending Machine';
	data[6][3] = '<p>This project was created to explore the interaction possibilities of a vending machine.  After I replaced the original electronics with Arduino-controlled elements, the ITP Vending Machine\'s behaviors included among others: taking orders from the Internet and a custom Android app, vocally announcing sales, letting users play games on its light-up buttons, and tweeting.</p>';

	data[7][0] = 'compass/main_image';
	data[7][1] = 'Magic Compass';
	data[7][2] = 'The Magic Compass: Point Towards Home';
	data[7][3] = '<p>Unlike other compasses, the Magic Compass doesn\'t always point north.  Able to orient itself anywhere on the planet, the Magic Compass points the shortest path back to a desired location, be that home or anywhere else.  New locations could be programmed in via radio and specified by the dial around the compass\'s face.</p>';
	
	data[8][0] = 'milling/main_image';
	data[8][1] = 'Milling Machine';
	data[8][2] = 'An Arduino-Controlled Milling Machine';
	data[8][3] = '<p>In this project, I re-designed and replaced the electronics, the firmware, and some mechanical elements of an existing milling machine design.  My work included a Processing sketch to send G-code to the machine and Arduino code to interpret that G-code, increasing the machine\'s ability to cut complex 3d patterns.  The interpreter was based in part on that of the RepRap.</p>';
	
	data[9][0] = 'fitly/main_image';
	data[9][1] = 'FIT*ly';
	data[9][2] = 'FIT*ly: The Habit Tracker';
	data[9][3] = '<p>The idea behind FIT*ly is that by monitoring our habits, we might be able to change them.  The challenge was to create an interface that makes recording these data quick and easy, and thereby practical to record.  FIT*ly consists of a customizable Android app designed for fast recording and a website that automatically visualizes the collected data.</p>';

}

function lightUp (targets) {
	for (var j = 1; j <= 9; j++) {
		var boxname = ".box"+j;
		var found = false;
		for (var v = 0; v < targets.length; v++) {
			if (j == targets[v]) {
				found = true;
			}
		}
		if (found) {
			//alert(boxname+" img"+"h");
			$(boxname+" .text").css('visibility', 'visible');
			$(boxname+" .text").css('opacity', '0.8');
			$(boxname+" .text").css('-webkit-transform', 'scale(1.1) translateY(4px)');

			$(boxname+" .bw").css('visibility', 'hidden');
			$(boxname+" .bw").css('opacity', '0');

			$(boxname+" .color").css('visibility', 'visible');
			$(boxname+" .color").css('opacity', '1');
			$(boxname+" .color").css('-webkit-transform', 'scale(1.1)');

		} else {
			$(boxname+" .text").css('visibility', 'hidden');
			$(boxname+" .text").css('opacity', '0');
			$(boxname+" .text").css('-webkit-transform', 'scale(1) translateY(0px)');

			$(boxname+" .bw").css('visibility', 'visible');
			$(boxname+" .bw").css('opacity', '0.5');

			$(boxname+" .color").css('visibility', 'hidden');
			$(boxname+" .color").css('opacity', '0');
			$(boxname+" .color").css('-webkit-transform', 'scale(1)');
		}
	}
}

function addText (result) {
	lightUp([result]);
	$('#highlighters li').attr('onMouseOut', '');
	if (result == 0) {
		image_stem = data[result][0];
		title = data[result][1];
		titleLonger = data[result][2];
		text = data[result][3];
		$('#displayTitle h1').html(titleLonger);
		$('#displayBox img').attr('src', 'images/'+image_stem);
		$('#displayBox img').attr('alt', title);
		$('#displayText').html(text);
	} else if (result > 0 && result <= 9 && data[result].length > 0) {
		image_stem = data[result][0];
		title = data[result][1];
		titleLonger = data[result][2];
		text = data[result][3];
		$('#displayTitle h1').html(titleLonger);
		$('#displayBox img').attr('src', 'images/'+image_stem+'-L.jpg');
		$('#displayBox img').attr('alt', title);
		$('#displayText').html(text);
	} else {
		image_stem = 'largeColor';
		title = 'Another Project';
		titleLonger = 'Another Project';
		text = 'This was an excellent project.';
	}
}

function highlight(subject) {
	switch(subject) {
		case 'web':
			lightUp([2,4,9,6]);
			break;
		case 'mobile':
			lightUp([2,9,6]); 
			break;
		case 'pcomp':
			lightUp([1,3,4,6,7,8,5]);
			break;
	}
}