var clipNum
var newProject
var opac = 100
var animating = false





// this routine is called after ajax loads xml file and completes parsing


function populatePage()
{ buildList()
  buildImage()
  refreshContent(getQuery())
}






// create portfolio list and spacer holder image


function buildList()
{ list = document.getElementById("portfolioList")
  outerUL = document.createElement("ul")
  outerUL.id = "portfolioListUL"
  for (i=0;i<numProjects;i++)
  { innerLI = document.createElement("li")
    innerA = document.createElement("a")
    innerLItext = document.createTextNode(projects[i].client)
    innerA.appendChild(innerLItext)
    innerA.setAttribute("href","javascript:showProject(" + i + ")")
    innerA.onfocus = function(){this.blur();}
    innerLI.appendChild(innerA)
    outerUL.appendChild(innerLI)
  }
  list.appendChild(outerUL)
}

function buildImage()
{ node = document.getElementById("portfolioImage")
  portImg = "<a href='#' target='_blank'><img src='images/portfolio/spacer.gif' width='350' height='200' alt='' /></a>"
  node.innerHTML = portImg
}






// routine that calls animation and refreshes portfolio content


function showProject(i)
{ if (!animating)
  { animating = true
    newProject = i
    clipNum = 350
    hideOld()
  }
}

function refreshContent(i)
{ node = document.getElementById("portfolioImage").firstChild.firstChild
  node.setAttribute("src","images/portfolio/" + projects[i].image)
  
  node = document.getElementById("portfolioImage").firstChild
  node.setAttribute("href",projects[i].current)
  
  node = document.getElementById("portfolioClient")
  node.innerHTML = projects[i].client

  node = document.getElementById("portfolioEmployer")
  node.innerHTML = "<b>Employer:</b> " + projects[i].employer

  node = document.getElementById("portfolioLocation")
  if (projects[i].original == projects[i].current)
  { label = "Location: "
  }
  else
  { label = "Original Location: "
  }  
  node.innerHTML = "<b>" + label + "</b> " + "<a href='" + projects[i].current + "' target='_blank' onfocus='this.blur()'>" + projects[i].display + "</a>"

  node = document.getElementById("portfolioText")
  node.innerHTML = projects[i].description

  markSelected(i)
}






// highlights proper project in list with caret


function markSelected(which)
{ num = document.getElementById("portfolioListUL").getElementsByTagName("li").length
  for (i=0;i<num;i++)
  { if (i == which)
    { document.getElementById("portfolioListUL").getElementsByTagName("li")[i].className="selected"
    }
    else
    { document.getElementById("portfolioListUL").getElementsByTagName("li")[i].className=""
    }
  }
}






// animation from one project to another


function hideOld()
{ opac += -5
  
  if (opac >= 0)
  { document.getElementById("portfolioWrap").style.opacity = (opac/100)
    document.getElementById("portfolioWrap").style.filter = "alpha(opacity=" + opac + ")"
    setTimeout("hideOld()",30)
  }
  else
  { node = document.getElementById("portfolioImage").firstChild.firstChild
    node.setAttribute("src","images/portfolio/spacer.gif")
    setTimeout("transition()",200)
  }
}

function transition()
{ refreshContent(newProject)
  opac = 0
  showNew()
}

function showNew()
{ opac += 5
  
  if (opac < 100)
  { document.getElementById("portfolioWrap").style.opacity = (opac/100)
    document.getElementById("portfolioWrap").style.filter = "alpha(opacity=" + opac + ")"
    setTimeout("showNew()",30)
  }
  else
  { animating = false
  }
}






// get query string for a particular project


function getQuery()
{ addr = "" + this.location
  loc = addr.indexOf("?")
  if (loc == -1)
  { return (0)
  }
  else
  { return (addr.substr(loc+6))
  }
}