var contentWidth = 600;
var columnWidth = 100;
var heightDiff = 100;
var heightStart = 150;
var columns;
var angles;
var frontId;
var thumbsDir = "thumbs/";

function setup()
{
	// browser detect/warn--we don't render properly on IE for windows
	var browser = navigator.appName;
	if (browser == "Microsoft Internet Explorer")
		alert("It looks like you're running Internet Explorer.  This site may not display properly due to Internet Explorer's lack of support for web standards.  If the site does not display properly, please try another browser, such as Firefox.  I apologize for the inconvenience.");

	columns = document.getElementsByName("column");
	t = document.getElementsByTagName("div");
	columns=[];
	for(var i = 0; i < t.length; i++) 
		if (t[i].className == "column")
		{
			t[i].style.position = "absolute";
			columns.push(t[i]);
		}
	angles = new Array(columns.length);
	var randomOffset = Math.random() * Math.PI * 2;
	for(var i = 0; i < columns.length; i++)
	{
		angle = randomOffset + 2*Math.PI * (i / columns.length);
		angles[i] = angle;
	}
	moveToAngles(angles);
	var deep = 0;
	for(var i = 0; i < columns.length; i++)
	{
		if (columns[i].style.zOrder > deep)
		{
			deep = columns[i].style.zOrder;
			frontId = columns[i].id;
		}
	}
	document.getElementById(frontId).style.backgroundColor = "#90909F";
}

function moveToAngles(angleArray)
{
	for(var i = 0; i < columns.length; i++)
	{
		left = contentWidth / 2 - columnWidth / 2;
		angle = angleArray[i];
		left += .5*(contentWidth - 2*columnWidth) * (Math.sin(angle));
		topPx = heightStart;
		depth = Math.cos(angle);
		topPx += heightDiff * depth;
		columns[i].style.left = (left + "px");
		columns[i].style.top = (topPx + "px");
		columns[i].style.opacity = (depth+1)/2;
		if (columns[i].style.opacity < .1)
			columns[i].style.opacity = .1;
		columns[i].style.zOrder = (depth+1)/2 * columns.length;
	}
}

function moveToAnglesWithRadii(angleArray, radii)
{
	for(var i = 0; i < columns.length; i++)
	{
		left = contentWidth / 2 - columnWidth / 2;
		angle = angleArray[i];
		left += .5*(contentWidth - 2*columnWidth) * (Math.sin(angle) * radii[i]);
		topPx = heightStart;
		depth = Math.cos(angle);
		topPx += heightDiff * depth * radii[i];
		columns[i].style.left = (left + "px");
		columns[i].style.top = (topPx + "px");
		columns[i].style.opacity = (depth+1)/2;
		if (columns[i].style.opacity < .1)
			columns[i].style.opacity = .1;
		columns[i].style.zOrder = (depth+1)/2 * columns.length;
	}
}

var targetArray;
var animateFrontLength = 750;
var frontStartTime = 0;
var percent = -1;
var bringToFrontTimer = null;
var frontDoneTime = 0;
var frontGracePeriod = 1500;
function animateFront()
{
	var now = (new Date).getTime();
	percent = (now - frontStartTime) / animateFrontLength;
	if (percent >= 1)
	{
		percent = -1;
		clearInterval(bringToFrontTimer);
		bringToFrontTimer = null;
		angles = targetArray;
		frontStartTime = 0;
		moveToAngles(angles);
		frontDoneTime = (new Date).getTime();
		document.getElementById(frontId).style.backgroundColor = "#90909F";
		return;
	}
	// cosine interpoliation
	percent = .5 - (.5 * Math.cos(Math.PI * percent));
	var percents = new Array(columns.length);
	for(var i = 0; i < columns.length; i++)
	{
		percents[i] = (now - frontStartTime) / animateFrontLength;
	}
	var angleArray = new Array(columns.length);
	var radii = new Array(columns.length);
	for(var i = 0; i < columns.length; i++) {
		angleArray[i] = targetArray[i] * percents[i] + angles[i] * (1.0 - percents[i]);
	//	radii[i] = Math.abs(2*(percents[i]));
	}
	//moveToAnglesWithRadii(angleArray, radii);
	// keep this for rotation, not center/disperse
	moveToAngles(angleArray);
	
}

function bringToFront(id)
{
	if (id == frontId)
		return;
	if (percent != -1)
		return;
	if ((new Date).getTime() - frontDoneTime < frontGracePeriod)
		return;
	document.getElementById(frontId).style.backgroundColor = "transparent";
	unHighlight(highlightElt);
	frontId = id;
	targetArray = new Array(columns.length);
	var percentOffsetMax = 300;
	elt = document.getElementById(id);
	var eltIndex;
	// find our location in the element array
	for(eltIndex = 0; eltIndex < columns.length; eltIndex++)
		if (columns[eltIndex] == elt)
			break;

	var heightDiff = 100;
	var heightStart = 100;
	var randomOffset = 0;//(Math.random() - .5) * (Math.PI) / columns.length;
	var selectArray = new Array(columns.length);
	// determine where each dude is headed
	for(var i = 0; i < columns.length; i++)
	{
		selectArray[i] = i;
	}
	var switchWith;
	for(var i = 0; i < columns.length; i++)
	{
		var pos = Math.floor(Math.random() * selectArray.length);
		if (selectArray[pos] == 0)
			switchWith = i;
		targetArray[i] = randomOffset + 2*Math.PI * (selectArray[pos] / columns.length);
		selectArray.splice(pos, 1);
	}
	// fix the above so the guy we want is actually going to the front
	var temp = targetArray[switchWith];
	targetArray[switchWith] = targetArray[eltIndex];
	targetArray[eltIndex] = temp;
	// so we don't go the long way with the front column (it's confusing!)
	if (angles[eltIndex] - targetArray[eltIndex] > Math.PI)
		targetArray[eltIndex] = 2*Math.PI - targetArray[eltIndex];
	frontStartTime = (new Date).getTime();
	bringToFrontTimer = setInterval("animateFront();", 34);
}

var highlightElt;
var highlightLength = 100;
var highlightStartTime = 0;
var highlightTimer;
function animateHighlight()
{
//	var now = (new Date).getTime();
//	var percent = (now - highlightStartTime) / highlightLength;
//	if (percent >= 1)
//	{
		clearInterval(highlightTimer);
		highlightTimer = null;
		highlightElt.style.fontStyle = "italic";
		return;
//	}
//	highlightElt.style.fontStyle = Math.random() < .5 ? "italic" : "normal";
}

function highlight(elt)
{
	if (bringToFrontTimer != null)
		return;
	if (elt.parentNode.parentNode.id != frontId)
		return;
	if (highlightElt == elt)
		return;
	if (highlightElt != null)
		unHighlight(highlightElt);
	highlightElt = elt;
	highlightStartTime = (new Date).getTime();
	highlightTimer = setInterval("animateHighlight();", 34);
}

function unHighlight(elt)
{
	if (highlightTimer != null)
	{
		clearInterval(highlightTimer);
		highlightTimer = null;
	}
	if (highlightElt == null)
		return;
	highlightElt.style.fontStyle = "normal";
	elt.style.fontStyle = "normal";
	highlightElt = null;
}

var sidebarIndex = 0;
var thumbnailElt = null;
var earlyThumbnailStartTime = 0;
var earlyThumbnailLength = 150;
var earlyThumbnailTimer = null;
var sidebarImageLoaded = 0;
function animateEarlyThumbnail()
{
	var image = document.getElementById("sidebar_image_" + (sidebarIndex - 1));
	var now = (new Date).getTime();
	var percent = (now - earlyThumbnailStartTime) / earlyThumbnailLength;
//	alert((now - earlyThumbnailStartTime) + ", " + percent);
	if (percent >= 1)
	{
		clearInterval(earlyThumbnailTimer);
		earlyThumbnailTimer = null;
		image.style.opacity = 1;
		return;
	}
	image.style.opacity = percent;
}

var thumbnailStartTime = 0;
var thumbnailLength = 500;
var thumbnailTimer = null;
function animateThumbnail()
{
	var now = (new Date).getTime();
	var percent = (now - thumbnailStartTime) / thumbnailLength;
	if (percent >= 1)
	{

		clearInterval(thumbnailTimer);
		thumbnailTimer = null;
		document.getElementById("sidebar_image_0").src = document.getElementById("sidebar_image_1").src;
		document.getElementById("sidebar_image_1").src = document.getElementById("sidebar_image_2").src;
		document.getElementById("sidebar_image_2").src = document.getElementById("sidebar_image_3").src;
		document.getElementById("sidebar_image_link_0").href = document.getElementById("sidebar_image_link_1").href;
		document.getElementById("sidebar_image_link_1").href = document.getElementById("sidebar_image_link_2").href;
		document.getElementById("sidebar_image_link_2").href = document.getElementById("sidebar_image_link_3").href;
		document.getElementById("sidebar_scroller").style.top = "0px";
		document.getElementById("sidebar_image_3").style.display = "none";
		document.getElementById("sidebar_image_3").style.clip = "auto";
		return;
	}
	// cosine interpolation
	percent = .5 - (.5 * Math.cos(Math.PI * percent));
	var offset = -percent * (200);
	document.getElementById("sidebar_image_3").style.clip = ("rect(0px, 180px, " + offset + "px, 0px)");
	document.getElementById("sidebar_scroller").style.top = (offset + "px");
}

var isEarlyThumbnail;
var waitingOnThumbnailLoad;
function beginAnimateThumbnail(which)
{
	if ((isEarlyThumbnail && (which != sidebarIndex-1)) || (!isEarlyThumbnail && (which != sidebarIndex)))
		return;
	waitingOnThumbnailLoad = 0;
	if (isEarlyThumbnail) {
		earlyThumbnailStartTime = (new Date).getTime();
		earlyThumbnailTimer = setInterval("animateEarlyThumbnail();", 34);
	}
	else {
		thumbnailStartTime = (new Date).getTime();
		thumbnailTimer = setInterval("animateThumbnail();", 34);
	}
		
}

function viewThumbnail(elt)
{
	if (bringToFrontTimer != null)
		return;
	if (elt.parentNode.parentNode.id != frontId)
		return;
	if (elt == thumbnailElt)
		return;
	if (earlyThumbnailTimer != null)
		return;
	if (thumbnailTimer != null)
		return;
	if (waitingOnThumbnailLoad)
		return;
	waitingOnThumbnailLoad = 1;
	isEarlyThumbnail = 0;
	thumbnailElt = elt;
	imagePath = (thumbsDir + thumbnailElt.parentNode.parentNode.id + "/" + thumbnailElt.id + ".jpg");
	url = ("/" + thumbnailElt.parentNode.parentNode.id + "/" + thumbnailElt.id);
	sidebarImageLoaded = 0;
	// special case for filling in the first 3 dudes (no scrolling needed)
	if (sidebarIndex < 3)
	{
		isEarlyThumbnail = 1;
		image = document.getElementById("sidebar_image_" + sidebarIndex);
		image.style.display = "block";
		image.style.opacity = 0;
//		image.src = "";
		image.src = imagePath;
//		alert("status is:" + image.readystate);
		document.getElementById("sidebar_image_link_" + sidebarIndex).href = url;
		sidebarIndex++;
//		earlyThumbnailStartTime = (new Date).getTime();
//		earlyThumbnailTimer = setInterval("animateEarlyThumbnail();", 34);
		return;
	}
	document.getElementById("sidebar_image_3").style.display = "block";
	document.getElementById("sidebar_image_3").src = imagePath;
	document.getElementById("sidebar_image_link_3").href = url;
//	thumbnailStartTime = (new Date).getTime();
//	thumbnailTimer = setInterval("animateThumbnail();", 34);
}

var imHighlightElt;
var imHighlightTimer = null;
var imHighlightStartTime;
var imHighlightLength = 100;
function animateImHighlight(highlighting)
{
	var now = (new Date).getTime();
	var percent = (now - thumbnailStartTime) / thumbnailLength;
	if (percent >= 1)
	{
		if (!highlighting)
			imHighlightElt = null;
		clearInterval(imHighlightTimer);
		imHighlightTimer = null;
	}
	// cosine interpoliation
	percent = .5 - (.5 * Math.cos(Math.PI * percent));
	bodyBG = document.getElementByTag("body").backgroundColor;
	// OOPS there is no way to vary the opacity on a color!!	
}

function imUnHighlight(elt)
{
	if (imHighlightElt == null)
		return;
	if (imHighlightTimer != null)
		return;
	imHighlightStartTime = (new Date).getTime();
	imHighlightTimer = setInterval("animateImHighlight(0);", 34);
}

function imHighlight(elt)
{
	if (imHighlightTimer != null)
		return;
	if (imHighlightElt == elt)
		return;
	if (imHighlightElt != null)
		imUnHighlight(imHighlightElt);
	imHighlightElt = elt;
	imHighlightStartTime = (new Date).getTime();
	imHighlightTimer = setInterval("animateImHighlight(1);", 34);
}