var imgYears = new Array("1995", "1996 (1)", "1996 (2)", "1997 (1)", "1997 (2)", "1998", "1999",
				 "2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007");

var imgSrc = new Array("drundle_1995.jpg", "myworld_1996.jpg", "unityv1_1996.jpg", "unityvx_1997.jpg", 
			  "saf_1997.jpg", "safnet_1998.jpg", "safnet_1999.jpg", "safnet_2000.jpg", "safnet_2001.jpg", 
			  "safnet_2002.jpg", "safnet_2003_2.jpg", "safnet_2004.jpg", "safnet_2005.jpg",
			  "safnet_2006.jpg", "safnet_2007.jpg");

var imgWidth = new Array(500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500);

var imgHeight = new Array(397, 455, 497, 500, 416, 375, 474, 601, 387, 377, 435, 362, 435, 350);

// caption, left, top, width, height
var captions = new Array(
	new Array(
		new Array(""drundle head" was an inside joke.", 190, 30, 120, 30),
		new Array("The background was lovingly handcrafted in Photoshop 3.0. "Peppermint" I called it, and I sure was proud of it. In 1995 anyway =).",  356, 300, 125, 75),
		new Array("Hard to see my semi-skater cut here. And Don Mattingly shirt and hand-made necklace.", 33, 298, 146, 50),
		new Array("Sum total of other people I knew with web sites of any kind.", 340, 180, 147, 30)
	),
	new Array(
		new Array("I wonder how many sites had the name \"My World\"?", 190, 40, 120, 30),
		new Array("The emboss filter in Photoshop was very popular back then.", 100, 120, 120, 45),
		new Array("More fun with Photoshop filters. I believe each image herein was hand-crafted (not borrowed from another site, as was the popular thing to do).", 350, 380, 150, 75),
		new Array("")
	),
	new Array(
		new Array("\"Unity\" has always been a motif in my life — it is the hallmark of the Bahá'&iacute Faith (unity of religions, humanity), and describes my approach to knowledge and wisdom (wisdom deriving from knowledge unified across domains).", 1, 1, 150, 120),
		new Array("I didn't back up my work very well =(.", 365, 165, 120, 30),
		new Array("<i>A New Day</i> was my first collection of essays, very new age-y I suspect.", 55, 175, 120, 50),
		new Array("Internet Explorer was not yet a competitor, so apparently I put this in here because of the use of new HTML extensions in Netscape 2.0.", 292, 380, 160, 65)
	),
	new Array(
		new Array("Starting to see some more sophistication in the design...", 20, 20, 140, 30),
		new Array("These buttons were fun to create!", 90, 250, 100, 30),
		new Array("\"Mindscapes\" is probably not much more unique than \"My World\" was.", 265, 284, 130, 45),
		new Array("This shot doesn't show the frames. As with many other designers, I quickly abandoned the use of frames.", 320, 410, 150, 60)	
	),
	new Array(
		new Array("What a quantum leap in design!", 50, 10, 100, 30),
		new Array("Still one of the most interesting pieces of Photoshoping I've done.", 330, 120, 120, 45),
		new Array("My first \"non-personal\" sites...", 400, 380, 100, 30),
		new Array("")
	),
	new Array(
		new Array("Unfortunately I cannot find any inner pages from this era.", 30, 210, 120, 45),
		new Array("1998 brought my first paid-for sites, for Quick-to-Fix Foods, Inc. and Fuqua &amp; Eyre, Inc.", 240, 50, 150, 45),
		new Array(""),
		new Array("")
	),
	new Array(
		new Array("Much better than 1998.", 50, 10, 120, 15),
		new Array("My first link rollovers (in JavaScript).", 260, 290, 100, 30),
		new Array(""),
		new Array("")
	),
	new Array(
		new Array("Trying to reduce the number of clicks to access inner content.", 290, 390,  120, 45),
		new Array(""),
		new Array(""),
		new Array("")
	),
	new Array(
		new Array("First complex CSS-only, table-free design.", 20, 20, 120, 30),
		new Array("Continuing the movement to bring meaningful content back to the front page.", 290, 260, 130, 45),
		new Array(""),
		new Array("")
	),
	new Array(
		new Array("My most artistic presentation yet. No rollovers, back to no content, just links to inner pages.", 200, 10, 140, 45),
		new Array("Gradient effect on plain text (not an image) achieved by simply changing the color for each letter.", 20, 310, 240, 30),
		new Array("First attempt (successful!) at cropping out an image background in Photoshop.", 340, 280, 120, 45),
		new Array("")
	),
	new Array(
		new Array("I added the border to create a more slide-like presentation.", 10, 10, 120, 45),
		new Array("Each link has its own psuedo-background image (i.e. the dragon carving).", 175, 155, 120, 45),
		new Array("View the inner <a href=\"evolution/safnet_2003_3.png\" target=\"_blank\">resume</a> or <a href=\"evolution/safnet_2003_4.png\" target=\"_blank\">portfolio</a>.", 290, 280, 160, 15),
		new Array("")
	),
	new Array(
		new Array("Whilst job-hunting after moving to Minnesota, I felt the need to bring content front and center.", 5, 5, 140, 45),
		new Array("I employed a simple Javascript stylesheet switcher to show the page's design versatility. See the 2005 and 2005 redesigns for later styles applied to the same HTML.", 360, 130, 120, 80),
		new Array("This site was serviceable and good looking, but not very <i>inspiring</i>.", 130, 230, 120, 35),
		new Array("")
	),
	new Array(
		new Array("This stylesheet brought much-needed vivacity to the site, though I still found it rather boring to <i>look</i> at.", 280, 30, 140, 45),
		new Array("No other site changes at this time.", 260, 230, 120, 30),
		new Array(""),
		new Array("")
	),
	new Array(
		new Array("This design did not bring any more life to the site, but did prove the versatility of a pure CSS layout: except for the content itself (RSS headlines from 3 blogs), the HTML was unchanged from the previous two versions.", 210, 90, 160, 80),
		new Array(""),
		new Array(""),
		new Array("")
	),
	new Array(
		new Array("A bold leap ahead from 2006, at least for me. Not many opportunities for exercising web design creativity in 2007, so this was a fun exercise."	, 290, 220, 160, 15),
		new Array("Self portrait", 350, 165, 100, 30),
		new Array("Lilly from the front yard", 60, 30, 140, 100),
		new Array("")
	)	
);


function changeThumbnail(yearIndex) 
{
	// Turn on "captions" paragraph
	var pCaptions = document.getElementById("pCaptions");
	pCaptions.style.display = "block";

	// Change the "thumbnail" itself
	var divThumbnail = document.getElementById("divThumbnail");
	
	divThumbnail.style.backgroundImage = "url(/webdesign/evolution/"+imgSrc[yearIndex]+")";
	divThumbnail.style.height = imgHeight[yearIndex] + "px";
	divThumbnail.style.width = imgWidth[yearIndex] + "px";
	
	// Highlight the selected year
	var spanYear = document.getElementById("a"+yearIndex);
	spanYear.style.fontSize = "200%";
	spanYear.style.paddingTop = "1px";
	spanYear.style.paddingBottom = "1px";
	spanYear.style.paddingLeft = "1px";
	spanYear.style.paddingRight = "1px";
	spanYear.style.borderTop = "1px dotted #333333";	
	spanYear.style.borderBottom = "1px dotted #333333";
	spanYear.style.borderLeft = "1px dotted #333333";
	spanYear.style.borderRight = "1px dotted #333333";
	spanYear.style.backgroundColor = "silver";
	
	// Set all the other years back to normal
	for (var i = 0; i < imgYears.length; i++)
	{
		if (i != yearIndex)
		{
			var spanYear = document.getElementById("a"+i);
			spanYear.style.fontSize = "100%";
			spanYear.style.paddingTop = "0px";
			spanYear.style.paddingBottom = "0px";
			spanYear.style.paddingLeft = "0px";
			spanYear.style.paddingRight = "0px";
			spanYear.style.borderTop = "0px dotted #333333";	
			spanYear.style.borderBottom = "0px dotted #333333";
			spanYear.style.borderLeft = "0px dotted #333333";
			spanYear.style.borderRight = "0px dotted #333333";
			spanYear.style.backgroundColor = "transparent";
		}
	}
	
	// Setup commentary divs

	var divCaptions = new Array(document.getElementById("divCaption0"), 
								 document.getElementById("divCaption1"),	
								document.getElementById("divCaption2"),
								document.getElementById("divCaption3")
								);
	
	var yearCaptions = captions[yearIndex];
	if (yearCaptions.length > 0) // ignore empty arrays
	{
		for (var i = 0; i < yearCaptions.length; i++)
		{
			var aCaption = yearCaptions[i];
			if (aCaption.length == 5)
			{
				divCaptions[i].innerHTML = aCaption[0];
				divCaptions[i].style.left = aCaption[1] + "px";
				divCaptions[i].style.top = aCaption[2] + "px";
				divCaptions[i].style.width = aCaption[3] + "px";
				divCaptions[i].style.height = "auto";
				divCaptions[i].style.display = "block";
			}
			else
			{
				divCaptions[i].style.display = "none";
			}			
		}
	}
	
	// turn on captions
	initCaptions();
}


function initYears() 
{
   var inner = "";
   for (var j = 0; j < imgYears.length; j++)
   {
		inner += "<a id=\"a" + j + "\" href=\"#years\" onclick=\"changeThumbnail('" + j + "'); return false\">" + imgYears[j] + "</a> ";
   }	  
   var thumb = document.getElementById("pYears");
   thumb.innerHTML = inner;
}

function captionsOnOff()
{
		var divCaptions = new Array(document.getElementById("divCaption0"), 
								 document.getElementById("divCaption1"),	
								document.getElementById("divCaption2"),
								document.getElementById("divCaption3")
								);
		var aCaptionsOnOff = document.getElementById("aCaptionsOnOff");
		
		for (var i = 0; i < divCaptions.length; i++)
		{
			if (aCaptionsOnOff.innerHTML == "off")
				divCaptions[i].style.display = "none";
			else
				divCaptions[i].style.display = "block";
		}

		if (aCaptionsOnOff.innerHTML == "off")
			aCaptionsOnOff.innerHTML = "on";
		else
			aCaptionsOnOff.innerHTML = "off";
}

function initCaptions()
{
	var aCaptionsOnOff = document.getElementById("aCaptionsOnOff");
	aCaptionsOnOff.innerHTML = "off";
	for (var i = 0; i < divCaptions.length; i++)
		divCaptions[i].style.display = "block";
}