var containerId = "portfolioPreview";
var displayTime = 3500;
var fadeTime = 300;
var fps = 50;
      
var fadeAmount;
var frameDisplayTime;
var images;
var currentIndex;
var paused = false;

window.addEventListener ? 
  window.addEventListener( "load", start, false ) : 
  window.attachEvent( "onload", start );
 
function populateContainer( container ) {
  if ( container.hasChildNodes() )
  {
    while ( container.childNodes.length >= 1 )
    {
        container.removeChild( container.firstChild );       
    } 
  }  
  
  for( var id in portfolioData.portfolio ) {
    var a = document.createElement( "a" );
    a.href = "portfolio.html#" + id;
   
    var img = document.createElement( 'img' );
    img.src = "portfolio/" + id + ".jpg";
    img.alt = portfolioData.portfolio[ id ] + " Website";
    
    a.appendChild( img );

    //hack
    if( id != 'crewForums' ) {    
      container.appendChild( a );
    }
  }
}  
  
function start() {
  var frameCount = ( fadeTime / 1000 ) * fps;
  fadeAmount = 1 / frameCount;
  frameDisplayTime = fadeTime / frameCount;

	var container = document.getElementById( containerId );
  
  populateContainer( container );
  
  images = container.getElementsByTagName( "img" );

  currentIndex = 0; 

	for( i = 0; i < images.length; i++ ){
    if( i == currentIndex ) {
    	images[ i ].style.display = "block";
	    images[ i ].normalisedOpacity = 1;
    } else {
      images[ i ].style.display='none';
      images[ i ].normalisedOpacity = 0;
    }
  }
 	
	setTimeout( crossFade, displayTime );
}

function crossFade() {
  if( !paused ) {
	  var currentOpacity = images[ currentIndex ].normalisedOpacity;
    var nextIndex = currentIndex + 1 == images.length ? 0 : currentIndex + 1;
    var nextOpacity = images[ nextIndex ].normalisedOpacity;
	
	  currentOpacity -= fadeAmount; 
	  nextOpacity += fadeAmount;
	
	  images[ nextIndex ].style.display = "block";
	  images[ currentIndex ].normalisedOpacity = currentOpacity;
	  images[ nextIndex ].normalisedOpacity = nextOpacity;
	
	  setOpacity( images[ currentIndex ] ); 
	  setOpacity( images[ nextIndex ] );
	
    if( currentOpacity <= 0 ) {
		  images[ currentIndex ].style.display = "none";
		  currentIndex = nextIndex;
  		setTimeout( crossFade, displayTime );
	  } else {
		  setTimeout( crossFade, frameDisplayTime );
  	}
  }
}

function pause() {
  var nextIndex = currentIndex + 1 == images.length ? 0 : currentIndex + 1;

	images[ currentIndex ].normalisedOpacity = 1;
	images[ nextIndex ].normalisedOpacity = 0;

	setOpacity( images[ currentIndex ] ); 
  setOpacity( images[ nextIndex ] );

  paused = true;
}

function resume() {
  paused = false;
  
  setTimeout( crossFade, displayTime );
}

function setOpacity( element ) {
  var opacity = element.normalisedOpacity;
  var style = element.style;
   
  //ensure opacity stays within bounds 0-1  
  opacity = opacity < 0 ? 0 : opacity > 1 ? 1 : opacity;  
  
	style.opacity = opacity;
	style.filter = "alpha(opacity=" + ( opacity * 100 ) + ")";
}