var dlog = null;
var design = null;

var scrollbar = null;
var buttonUp = null;
var buttonDown = null;
var knob = null;
var dlogScroll = null;
var sbState = {};


function PageLoad()
{
	var contentNav = document.getElementById('content-nav');
	var contentBody = document.getElementById('content-body');
	
	var dlogAnchor = document.getElementById('dlog-anchor');
	
	var enumerator = [];
	var i = 0;
	
	
	/* Initialize DLOG and design */
	dlog = document.getElementById('dlog');
	design = document.createElement('img');
	
	dlog.style.display = 'none';
	design.style.display = 'none';
	
	design.id = 'design';
	
	design.width = 661;
	design.height = 433;
	
	contentBody.appendChild(design);
	
	/* Set thumbnail behavior */
	var randomIndex = Math.floor(Math.random() * 21);
	
	enumerator = contentNav.getElementsByTagName('a');
	
	for (i = 0; i < enumerator.length; ++i)
	{
		var item = enumerator[i];
		
		if (item.className == 'item')
		{
			item.onclick = function(event)
			{
				Switch(this.href);
				window.location.hash = 'design';
				return false;
			}
			
			if (i == randomIndex)
				design.src = item.href;
		}
	}
	
	/* Set DLOG anchor behavior */
	dlogAnchor.onclick = function()
	{
		Switch('#dlog')
		window.location.hash = 'dlog';
		return false;
	}
	
	/* Set DLOG behavior */
	scrollbar = document.createElement('div');
	buttonUp = document.createElement('div');
	buttonDown = document.createElement('div');
	knob = document.createElement('div');
	dlogScroll = document.getElementById('dlog-scroll');
	
	dlogScroll.style.overflow = 'hidden';
	dlogScroll.style.width = '642px';
	scrollbar.className = 'scrollbar';
	buttonUp.className = 'button-up';
	buttonDown.className = 'button-down';
	knob.className = 'knob';
	
	scrollbar.appendChild(buttonUp);
	scrollbar.appendChild(buttonDown);
	scrollbar.appendChild(knob);
	dlog.appendChild(scrollbar);
	
	sbState = {
		dragging: false,
		moving: false,
		moveSpeed: 0.0,
		top: 0.0,
		y: 0.0
	};
	
	sbState._top = buttonUp.clientHeight;
	knob.style.top = sbState._top + 'px';
	
	EventRegister(knob, "mousedown", function(event)
	{
		EventStopPropagation(event);
		
		sbState.dragging = true;
		sbState.top = parseInt(knob.style.top);
		sbState.y = event.screenY;
		
		ScrollbarUpdate();
	});
	
	EventRegister(document, "mouseup", function(event)
	{
		if (sbState.dragging)
		{
			EventStopPropagation(event);
			
			sbState.dragging = false;

			ScrollbarUpdate();
		}
		
		if (sbState.moveSpeed != 0)
		{
			EventStopPropagation(event);
			
			sbState.moving = false;
			sbState.moveSpeed = 0;
			
			ScrollbarUpdate();
		}
	});
	
	EventRegister(document, "mousemove", function(event)
	{
		if (sbState.dragging)
		{
			EventStopPropagation(event);
			
			var wellSpace = scrollbar.clientHeight - (buttonUp.clientHeight +
				buttonDown.clientHeight + knob.clientHeight);
			var scrollSpace = dlogScroll.scrollHeight - dlogScroll.clientHeight;
			
			var newTop = (sbState.top + event.screenY - sbState.y);
			newTop -= buttonUp.clientHeight;
			
			if (newTop < 0)
				newTop = 0;
			else if (newTop > wellSpace)
				newTop = wellSpace;
			
			dlogScroll.scrollTop = (newTop / wellSpace) * scrollSpace;

			ScrollbarUpdate();
		}
	});

	EventRegister(buttonUp, "mousedown", function(event)
	{
		EventStopPropagation(event);
		
		sbState.moving = true;
		sbState.moveSpeed = -2;
		
		ScrollbarUpdate();
	});

	EventRegister(buttonUp, "mouseout", function(event)
	{
		if (sbState.moveSpeed != 0)
		{
			EventStopPropagation(event);
			
			sbState.moving = false;
			
			ScrollbarUpdate();
		}
	});

	EventRegister(buttonUp, "mouseover", function(event)
	{
		if (sbState.moveSpeed != 0)
		{
			EventStopPropagation(event);
			
			sbState.moving = true;
			
			ScrollbarUpdate();
		}
	});
	
	EventRegister(buttonDown, "mousedown", function(event)
	{
		EventStopPropagation(event);
		
		sbState.moving = true;
		sbState.moveSpeed = 2;
		
		ScrollbarUpdate();
	});
	
	EventRegister(buttonDown, "mouseout", function(event)
	{
		if (sbState.moveSpeed != 0)
		{
			EventStopPropagation(event);
			
			sbState.moving = false;
			
			ScrollbarUpdate();
		}
	});
	
	EventRegister(buttonDown, "mouseover", function(event)
	{
		if (sbState.moveSpeed != 0)
		{
			EventStopPropagation(event);
			
			sbState.moving = true;
			
			ScrollbarUpdate();
		}
	});
	
	EventRegister(dlog, "mousewheel", function(event)
	{
		EventStopPropagation(event);
		
		var delta = 0;
		
		if (event.wheelDelta)
		{
			delta = event.wheelDelta / 120;
			if (!window.opera)
				delta = -delta;
		}
		else if (event.detail)
		{
			delta = event.detail / 3;
		}
		
		dlogScroll.scrollTop += (delta * 5);
		
		ScrollbarUpdate();
	});
	
	window.setInterval("Scroll()", 5);
	
	/* Display either the DLOG or design */
	if (window.location.hash == '#dlog')
	{
		RemoveStyle(dlog, 'display');
		SetOpacity(dlog, 1.0);
		SetOpacity(design, 0.0);
		ScrollbarUpdate();
	}
	else
	{
		RemoveStyle(design, 'display');
		SetOpacity(dlog, 0.0);
		SetOpacity(design, 1.0);
	}
}


function ScrollbarUpdate()
{
	var wellSpace = scrollbar.clientHeight - (buttonUp.clientHeight +
		buttonDown.clientHeight + knob.clientHeight);
	var scrollSpace = dlogScroll.scrollHeight - dlogScroll.clientHeight;
	
	if (scrollSpace > 0)
	{
		RemoveStyle(scrollbar, 'display');
		var top = dlogScroll.scrollTop * (wellSpace / scrollSpace);
		knob.style.top = (top + buttonUp.clientHeight) + 'px';
	}
	else
	{
		scrollbar.style.display = 'none';
	}
}


function Scroll()
{
	if (sbState.moving)
	{
		dlogScroll.scrollTop += sbState.moveSpeed;
		
		ScrollbarUpdate();
	}
}


var switchId = 0;

function Switch(url, id)
{
	var fade = 0.05;
	var length = 10;
	
	var source = null;
	var destination = null;
	
	var currentUrl = '';
	
	if (!id)
		id = (switchId = ++switchId % 9999);
	else if (id != switchId)
		return;
	
	
	if (dlog.style.display == 'none')
	{
		currentUrl = design.src;
		source = design;
	}
	else
	{
		currentUrl = '#dlog';
		source = dlog;
	}
	
	if (url == '#dlog')
		destination = dlog;
	else
		destination = design;
	
	
	if (currentUrl == url)
	{
		if (destination.opacity < 1.0)
		{
			SetOpacity(destination, destination.opacity + fade);
			/* Only needed once, but can be repeated without harm. */
			ScrollbarUpdate();
		}
		else
		{
			SetOpacity(destination, 1.0);
			return true;
		}
	}
	else
	{
		if (source.opacity > 0.0)
		{
			SetOpacity(source, source.opacity - fade);
		}
		else
		{
			SetOpacity(source, 0.0);
			
			if (source != destination)
			{
				source.style.display = 'none';
				RemoveStyle(destination, 'display');
			}
			
			if (destination.tagName == 'IMG')
			{
				design.onload = function() { Switch(url); };
				design.src = url;
				return true;
			}
		}
	}
	
	window.setTimeout('Switch("' + EscapeString(url) + '", ' + id + ')', length);
	return true;
}


function SetOpacity(element, opacity)
{
	if (opacity < 0.0)
		opacity = 0.0;
	
	element.opacity = opacity;
	
	if (opacity < 1.0)
	{
		element.style.opacity = opacity;
		element.style.MozOpacity = opacity;
		element.style.filter = "alpha(opacity=" + (opacity * 100) + ")";
	}
	else
	{
		RemoveStyle(element, 'opacity');
		RemoveStyle(element, 'MozOpacity');
		RemoveStyle(element, 'filter');
	}
}


function RemoveStyle(element, style)
{
	if (element.style.removeAttribute)
		element.style.removeAttribute(style);
	else if (element.style.removeProperty)
		element.style.removeProperty(style);
	else if (style == 'display')
		element.style[style] = 'block';
}


function EscapeString(string)
{
	var escapedString = string;
	
	escapedString = escapedString.replace('\b', '\\b');
	escapedString = escapedString.replace('\f', '\\f');
	escapedString = escapedString.replace('\n', '\\n');
	escapedString = escapedString.replace('\0', '\\0');
	escapedString = escapedString.replace('\r', '\\r');
	escapedString = escapedString.replace('\t', '\\t');
	escapedString = escapedString.replace('\v', '\\v');
	escapedString = escapedString.replace('\'', '\\\'');
	escapedString = escapedString.replace('"', '\\"');
	escapedString = escapedString.replace('\\', '\\\\');
	
	return escapedString;
}


function EventRegister(object, eventName, handler)
{
	if (object.addEventListener)
		object.addEventListener(eventName, handler, false);
	else if (object.attachEvent)
		object.attachEvent('on' + eventName, handler);
}


function EventUnregister(object, eventName, handler)
{
	if (object.removeEventListener)
		object.removeEventListener(eventName, handler, false);
	else if (object.detachEvent)
		object.detachEvent('on' + eventName, handler);
}


function EventStopPropagation(event)
{
	if (event.stopPropagation)
		event.stopPropagation();
	else
		event.cancelBubbel = true;
	
	if (event.preventDefault)
		event.preventDefault();
	else
		event.returnValue = false;
}