getQueryVariable = function(variable) {
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
    if (pair[0] == variable) {
      return pair[1];
    }
  } 
}

openPortfolio = function(target) {
  target.className = "active";
  var parentid = target.parentNode.getAttribute("id");
  if (target.parentNode.className == "client"){
    newtitle = document.createElement('H5');
    newtitlecontent = document.createTextNode(target.childNodes[0].nodeValue);
    newtitle.appendChild(newtitlecontent);
    target.parentNode.insertBefore(newtitle, target.parentNode.childNodes[0]);	
    newimg = document.createElement('img');
    newimg.setAttribute("id", "portfolioImage");
    newimg.src="/images/portfolio/"+parentid+"/screen1.jpg";
    document.getElementById("portfolio").appendChild(newimg);
    target.parentNode.className = "client active";
  }
}

closePortfolios = function() {
  var portfolioImage = document.getElementById("portfolioImage");
  if (portfolioImage) 
    portfolioImage.parentNode.removeChild(portfolioImage);
  var portfolios = document.getElementsByClassName("active");
  for (var i = 0, portfolio; portfolio = portfolios[i]; i++)
    portfolio.className = "client";    
}

initPortfolioEntries = function() { 
  var portfolios = document.getElementsByClassName("client");
  for (var i = 0, portfolio; portfolio = portfolios[i]; i++) { 
    var headers = portfolio.getElementsByTagName("H4");
    header = headers[0];
    header.onmouseover = function() {this.className = "hover";}
    header.onmouseout = function() {this.className = "";}
    header.onclick = function() {
      closePortfolios();
      openPortfolio(this);
    } 
  }

	var first = portfolios[0];
  	if (getQueryVariable('client')) 
  		first = document.getElementById(getQueryVariable('client'));		
 
 	for( var j = 0, x; x = first.childNodes[j]; j++)
    	if (x.nodeName == "H4")
    		first = x; 
			
  	openPortfolio(first);
	 
  var thumbcontainers = document.getElementsByClassName("thumbnails");
  for (var i = 0, thumbcontainer; thumbcontainer = thumbcontainers[i]; i++)  {
    var thumbs = thumbcontainer.getElementsByTagName("img");
    for (var j = 0, thumb; thumb = thumbs[j]; j++)  {
      thumb.onclick = function() {
	var portfolioImage = document.getElementById("portfolioImage");
	if (portfolioImage)  {
	    portfolioImage.parentNode.removeChild(portfolioImage);
	    newimg = document.createElement('img');
	    newimg.setAttribute("id", "portfolioImage");
	    newimg.src =  this.src.replace("thumb","screen");
	    document.getElementById("portfolio").appendChild(newimg);
	}
      }
    }
  }
}
  

  addEvent(window,"load",initPortfolioEntries);