//this is bad and I am a bad person for putting html in a string. I am truly sorry.
var captions = new Array();
captions["sites"] = "Mouse and <a href=\"http://www.julialemke.com/\" target=\"_blank\">Julia Lemke</a> might make one for you, too";
captions["oddsends"] = "many weird interests produces many weird projects";
captions["contact"] = "get in touch via email: <a href=\"mailto:mouse.reeve@gmail.com\">mouse.reeve@gmail.com</a>";

var links = new Array();
links["roots"] = "http://mousereeve.com/roots";
links["julia"] = "http://www.julialemke.com/";
links["tacokickers"] = "http://www.tacokickers.com/";
links["ao"] = "http://www.augerandore.com/";

links["mandelbear"] = "http://boingboing.net/2009/01/10/mandebrot-the-fracta.html";
links["robot"] = "drawings/robot.png";
links["phone"] = "http://www.instructables.com/id/Adapting-a-Telephone-Handset-to-a-Cell-Phone/";
links["places"] = "placevalues/";
links["jammer"] = "drawings/jammer.png";
links["spbible"] = "http://steampunkbible.com/2011/08/the-h-m-s-chronabelle-continues-introducing-captain-mouse/";

links["email"] = "mailto:mouse.reeve@gmail.com";

var sites = ["roots", "tacokickers", "ao", "julia"];
var oddsends = ["mandelbear", "robot", "phone", "places", "jammer", "spbible"];
var contact = ["email"];

var content = [sites, oddsends, contact];

var type = -1; //sites, oddsends, or contact
var current = 0;//the current item in the list

var taglines = [//"purveyor of hand made languages at reasonable prices",
				"she may not be a robot, but she does love persimmons",
				"Seattle's least intimidating roller derby girl",
				"still waiting for her turn in the TARDIS",
				"made easy to remember by odd hair and a weird name"];

window.onload = function() {
	$("tag-line").innerHTML = taglines[Math.floor(Math.random()*taglines.length)];

	$("right").observe("click", right);
	$("left").observe("click", left);
	
	$("sites").observe("click", category);
	$("oddsends").observe("click", category);
	$("contact").observe("click", category);
	
	new Effect.Move('test', { x: 0, y: 5, mode: 'absolute', duration: 0.7 });
	
	var delay = 700;
	var increment = .35;
	//dear lord, I can't believe I wrote code this redundant. you'd think I'd never seen
	//a loop in my sad little life. excuse: contact jet lag. and I stand by it! the 
	//excuse I mean. not the code. dear lord.
	setTimeout("new Effect.Move('test', { x: 0, y: -10, mode: 'absolute', duration: "+increment+" });", delay);
	setTimeout("$('sites').setStyle({color: '#3c3a38'})", delay);
	delay += increment * 1000;
	setTimeout("new Effect.Move('test', { x: 0, y: 5, mode: 'absolute', duration: "+increment+" });", delay);
	setTimeout("$('sites').setStyle({color: ''})", delay+(increment*1000)/2);
	delay += increment * 1000;
	
	setTimeout("new Effect.Move('test', { x: 0, y: -10, mode: 'absolute', duration: "+increment+" });", delay);
	setTimeout("$('oddsends').setStyle({color: '#3c3a38'})", delay);
	delay += increment * 1000;
	setTimeout("new Effect.Move('test', { x: 0, y: 5, mode: 'absolute', duration: "+increment+" });", delay);
	setTimeout("$('oddsends').setStyle({color: ''})", delay+(increment*1000)/2);
	delay += increment * 1000;
	
	setTimeout("new Effect.Move('test', { x: 0, y: -10, mode: 'absolute', duration: "+increment+" });", delay);
	setTimeout("$('contact').setStyle({color: '#3c3a38'})", delay);
	delay += increment * 1000;
	setTimeout("new Effect.Move('test', { x: 0, y: 5, mode: 'absolute', duration: "+increment+" });", delay);
	setTimeout("$('contact').setStyle({color: ''})", delay+(increment*1000)/2);

}

function flash(item) {
	$(item).setStyle({color: '#3c3a38'});
}

function category() {
	type = this.className;
	current = 0;
	caption(captions[this.id]);
	render();
}

function right() {
	if (current < content[type].length - 1 ) {
		current += 1;
		render();
	}
}

function left() {
	if (current > 0 ) {
		current -= 1;
		render();
	}
}

function caption(text) {
	$("caption").innerHTML = text;
}

function render() {
	if (type >= 0) {
		var itemCount = content[type].length;
		
		$("display").src = "items/"+content[type][current]+".png";
		
		$("display").alt = content[type][current];
		$("display-link").href = links[ content[type][current] ];
		$("display-link").target = "_blank";
		if (itemCount > 1) {
			$("count").innerHTML = (current+1)+"/"+itemCount;
		}
		else {
			$("count").innerHTML = " &nbsp;";
		}
		
		if (current == 0) {
			$("left").src = "images/leftinactive.png";
			$("left").setStyle({cursor: 'auto'});
			$("right").src = "images/rightactive.png";
			$("right").setStyle({cursor: 'pointer'});
		}
		else {
			$("left").src = "images/leftactive.png";
			$("left").setStyle({cursor: 'pointer'});
		}
		
		if (current == itemCount - 1) {
			$("right").src = "images/rightinactive.png";
			$("right").setStyle({cursor: 'auto'});
			if (current != 0) {
				$("left").src = "images/leftactive.png";
				$("left").setStyle({cursor: 'pointer'});
			}
		}
		else {
			$("right").src = "images/rightactive.png";
			$("right").setStyle({cursor: 'pointer'});
		}
	}
}