window.addEventListener ? 
  window.addEventListener( "load", init, false ) : 
  window.attachEvent( "onload", init );

var pageContent;
var thumbs;
var thumbLinks;
var portfolioItems;
var lastHash;
 
function init() {
  pageContent = document.getElementById( 'pageContent' );
  thumbs = pageContent.getElementsByTagName( 'ul' )[ 0 ];
  
  thumbs.className += " last";
  
  thumbLinks = thumbs.getElementsByTagName( 'a' );
  portfolioItems = getElementsByClassName( pageContent, "div", "portfolioItem" );

  setupThumbLinks();
  hideTopLinks();
  setupPortfolioItems();
 
  window.setInterval( "checkHash()", 100 );
}  

function setupThumbLinks() {
  for( var i = 0; i < thumbLinks.length; i++ ) {
    var thumbLink = thumbLinks[ i ];
    thumbLink.addEventListener ? 
      thumbLink.addEventListener( "click", thumbClick, false ) : 
      thumbLink.attachEvent( "onclick", thumbClick );    
  }
}

function hideTopLinks() {
  var topLinks = getElementsByClassName( pageContent, "p", "top" );
  for( var i = 0; i < topLinks.length; i++ ) {
    topLinks[ i ].style.display = "none";
  }
}

function setupPortfolioItems() {
  for( var j = 0; j < portfolioItems.length; j++ ) {
    var portfolioItem = portfolioItems[ j ];
    var h2 = portfolioItem.getElementsByTagName( 'h2' )[ 0 ];

    if( portfolioItem.className == "portfolioItem" ) {
      portfolioItem.className = "portfolioItem last";
    }
    
    var nav = document.createElement( "div" );
    nav.className = "subNavigation";

    var previous;
    if( j == 0 ) {
      previous = document.createElement( "span" );
    } else {
      previous = makeLink( portfolioItem, portfolioItems[ j - 1 ] );
    }    

    var previousText = document.createTextNode( "< Previous Site" );
    previous.appendChild( previousText );
    nav.appendChild( previous );    
    
    var thumbIndex;
    thumbIndex = document.createElement( "a" );
    thumbIndex.href = "#";
    thumbIndex.senderId = portfolioItem.id;
    thumbIndex.addEventListener ? 
      thumbIndex.addEventListener( "click", showThumbs, false ) : 
      thumbIndex.attachEvent( "onclick", showThumbs );     
    
    var thumbText = document.createTextNode( "Portfolio Index" );
    thumbIndex.appendChild( thumbText );
    
    nav.appendChild( thumbIndex );
    
    var next;
    if( j == ( portfolioItems.length - 1 ) ) {
      next = document.createElement( "span" );
    } else {
      next = makeLink( portfolioItem, portfolioItems[ j + 1 ] );
    }
    
    var nextText = document.createTextNode( "Next Site >" );
    next.appendChild( nextText );
    nav.appendChild( next );
    
    portfolioItem.insertBefore( nav, h2 );
  }
}

function makeLink( currentElement, newElement ) {
  var link;
  link = document.createElement( "a" );
  link.senderId = currentElement.id;
  link.newId = newElement.id;
  link.href = "#" + link.newId;
  link.addEventListener ? 
    link.addEventListener( "click", changePortfolioItem, false ) : 
    link.attachEvent( "onclick", changePortfolioItem );       
  
  return link;
}

function checkHash() {
  if( location.hash != lastHash ) {
    for( var j = 0; j < portfolioItems.length; j++ ) {
      var portfolioItem = portfolioItems[ j ];
    
      if( location.hash == "#" + portfolioItem.id ) {
        portfolioItem.style.display = "block";
        thumbs.style.display = "none";
      } else {
        portfolioItem.style.display = "none";
      }
    }
    if( location.hash == "" || location.hash == "#"  ) {
      thumbs.style.display = "block";
    }
    lastHash = location.hash;
  }
}

function thumbClick( object ) {
  var sender = object.target ? object.target : window.event.srcElement;

  var tagname = sender.tagName;
  var id = sender.id;
  if( tagname.toUpperCase() == "IMG" ) {
    id = sender.parentNode.id;
  }
  var divId = id.substr( 0, id.length - 4 );
  thumbs.style.display = "none";
  var portfolioItem = document.getElementById( divId );
  portfolioItem.style.display = "block";
  return false;
}

function showThumbs( object ) {
  var sender = object.target ? object.target : window.event.srcElement;
  var senderId = sender.senderId;
  var senderDiv = document.getElementById( senderId );

  thumbs.style.display = "block";
  senderDiv.style.display = "none";
  return false;
}

function changePortfolioItem( object ) {
  var sender = object.target ? object.target : window.event.srcElement;
  var newId = sender.newId;
  var newItem = document.getElementById( newId );
  var senderId = sender.senderId;
  var senderDiv = document.getElementById( senderId );

  newItem.style.display = "block";
  senderDiv.style.display = "none";
  return false;
}

/*
	Written by Jonathan Snook, http://www.snook.ca/jonathan
	Add-ons by Robert Nyman, http://www.robertnyman.com
*/

function getElementsByClassName(oElm, strTagName, strClassName){
	var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
	var arrReturnElements = new Array();
	strClassName = strClassName.replace(/\-/g, "\\-");
	var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
	var oElement;
	for(var i=0; i<arrElements.length; i++){
		oElement = arrElements[i];
		if(oRegExp.test(oElement.className)){
			arrReturnElements.push(oElement);
		}
	}
	return (arrReturnElements)
}