var c_layer = null;
var imageview = null;
var layers = new Array(4);
var d = document;

function init()
{
  layers['home'] = new Layer('home');
  layers['photography'] = new Layer('photography');
  layers['programs'] = new Layer('programs');
  layers['websites'] = new Layer('websites');
  attachLayerEvents();
  attachImgEvents();
  imview = d.getElementById('imageview');
  imview.style.display='block';
  imview.style.display='none'; 
  imview.timer = null;
	imview.mouseOverHandler = clearImageTimer;
	imview.mouseOutHandler = hideImageTimed;
	imview.clickHandler = hideImage;
	dispatch( imview, "mouseover", "mouseOverHandler" );
	dispatch( imview, "mouseout", "mouseOutHandler" );
	dispatch( imview, "click", "clickHandler" );
}

function dispatch( targetElement, eventName, handlerName )
{ 
  var originalHandler;
	if (targetElement.addEventListener) {targetElement.addEventListener(eventName, function() { return targetElement[handlerName](); }, false)}
	else if (targetElement.attachEvent) {targetElement.attachEvent("on" + eventName, function() { return targetElement[handlerName](); })}
	else 
	{ 
    originalHandler = targetElement["on" + eventName];
    if (originalHandler) {targetElement["on" + eventName] = function() { originalHandler(); return targetElement[handlerName](); }}
		else {targetElement["on" + eventName] = function() { return targetElement[handlerName](); }}
  }
}

function collectionToArray(col) {
	var a = new Array(col.length);
	for (var i = 0; i < col.length; i++)
		a[i] = col[i];
	return a;
}

/* Begin layer animation code */

function Layer( id )
{
  this.div = d.getElementById(id);
  this.style = this.div.style;
  this.pW = this.div.style.width;
}

Layer.prototype.hideContent = function()
{
  var divs = this.div.getElementsByTagName('div');
  for(var i = 0; i<divs.length; ++i)
  {
		divs[i].style.display = "none";
  }
}

Layer.prototype.showContent = function()
{
  var divs = this.div.getElementsByTagName('div');
  for(var i = 0; i<divs.length; ++i)
  {
		divs[i].style.display = "block";
  }
}

Layer.prototype.expand = function()
{
	l = Number(this.style.left.substr(0, this.style.left.length-1));
  w = Number(this.style.left.substr(0, this.style.left.length-1));
  this.style.width = (99 - l) + '%';
  this.showContent();
}

Layer.prototype.collapse = function()
{
  this.style.width = this.pW;
  this.hideContent();
}

function show()
{
	var id = this.id;
	if(layers[id] == c_layer) {return}
  layers[id].expand();
  if(c_layer) {c_layer.collapse()}
	c_layer = layers[id];
  window.offsetHeight; // force a redraw in FF
}

function attachLayerEvents()
{
	for(var i in layers)
	{
		layers[i].div.mouseOverHandler = show;
		dispatch(layers[i].div, 'mouseover', 'mouseOverHandler');
	}
}

/* End layer animation code */

/* Begin image show code */

function attachImgEvents()
{
	var photodiv = d.getElementById('photography');
	var progdiv = d.getElementById('programs');
	var webdiv = d.getElementById('websites');
	var elements1 = collectionToArray(photodiv.getElementsByTagName('img'));
	var elements2 = collectionToArray(progdiv.getElementsByTagName('img'));
	var elements3 = collectionToArray(webdiv.getElementsByTagName('img'));
	var elements = elements1.concat( elements2 ).concat( elements3 );
	for (var i = 0; i < elements.length; i++) {
      elements[i].mouseMoveHandler = showImage;
      elements[i].mouseOutHandler = hideImageTimed;
      dispatch(elements[i],'mousemove', 'mouseMoveHandler');
      dispatch(elements[i],'mouseout','mouseOutHandler');    
	}
}

function showImage()
{
	if(imview.style.display == 'none' || imview.timer)
	{
		clearImageTimer();
		var imsplit = this.src.split('/');
		var fn = imsplit[imsplit.length-1];
			
		var imbig = '/';
		for(var i=3; i<imsplit.length-2; ++i)
		{
			imbig += imsplit[i] + '/';
		}
		imbig += 'hover/'+fn;
    if(d.images) {var p = new Image; p.src=imbig}
    var html = '<img alt="" src="' + imbig + '" ';
    if(p.width > 0) 
    {
      html += 'width="' + p.width + '" height="' + p.height + '" ';
      imview.style.width = p.width + 'px';
      imview.style.height = p.height + 'px';
    }
    html += '/>';
		imview.innerHTML = html;		
	}
								
	imview.style.display = 'block';
}

function hideImage()
{
	imview.style.display = 'none';
  imview.style.width = '';
  imview.style.height = '';
}

function hideImageTimed()
{
	imview.timer = setTimeout(hideImage, 100);
}

function clearImageTimer()
{
	if(imview.timer) clearTimeout(imview.timer);
}

/* End image show code */