// Project Image Viewer --------------------

// Declare variables:

var mainImage = "projectImage";
var imgLoad = new Image();
imgLoad.src = "/img/load.gif";
var photo = 0;
var lastPhoto = (projectImages.length-1);
var opacity = 100;

// Load the image and display it:

function imgLoader(imgName){
	var auxIm = new Image();
	auxIm.src = ""+imgName+"";
	opacity=0;
	document.images[mainImage].src = auxIm.src;
	setTimeout("document.getElementById(mainImage).style.visibility = 'visible'",5);	
}

// Image fade in:

function setOpacity(){
	opacity = opacity+(100-opacity)/20;
    changeOpac(opacity, mainImage);
}

//change the opacity for different browsers:
 
function changeOpac(opacity, id) { 
    var object = document.getElementById(id).style; 
    object.opacity = (opacity / 100); 
    object.MozOpacity = (opacity / 100); 
    object.KhtmlOpacity = (opacity / 100); 
    object.filter = "alpha(opacity=" + opacity + ")";	
}

// Cycle through images:

function imgChange(imgOption){
	if(imgOption=="next"){
		photo++;
	}else if(imgOption=="previous"){
		photo--;
	}
	if (photo < 0){
		photo=lastPhoto;
	} else if (photo>lastPhoto){
		photo=0;
	}
	opacity=0;
	document.getElementById(mainImage).style.visibility = 'hidden';
	document.images[mainImage].src = imgLoad.src;	
	setTimeout("imgLoader(projectImages[photo])",5);
}

// Image preloader function:

function imgPreload(){
	var i;
	var projectImagesPreLoader = new Array(lastPhoto);
	for (i=0; i<=lastPhoto; i++) {
		projectImagesPreLoader[i] = new Image()
		projectImagesPreLoader[i].src = projectImages[i];
	}
}

// Create portfolio image navigation for Javascript users:

function setPortfolioImageNavigation(){
  if (projectImages.length>1){                	
  	ul = document.createElement("ul");
    ul.setAttribute("id", "imageMenu");
    li1 = document.createElement("li");
    li1.setAttribute("id", "imageMenu-01");
    li1.setAttribute("title", "Previous");
    li1.setAttribute("onclick", "imgChange('previous');");
    a1 = document.createElement("a");
    a1.setAttribute("href", "javascript:imgChange('previous')");
    a1.setAttribute("title", "Previous");
    span1 = document.createElement("span");
    text1 = document.createTextNode("Previous");
    ul.appendChild(li1);
    li1.appendChild(a1);
    a1.appendChild(span1);
    span1.appendChild(text1);
    li2 = document.createElement("li");
    li2.setAttribute("id", "imageMenu-02");
    li2.setAttribute("title", "Next");
    li2.setAttribute("onclick", "imgChange('next');");
    a2 = document.createElement("a");
    a2.setAttribute("href", "javascript:imgChange('next')");
    a2.setAttribute("title", "Next");
    span2 = document.createElement("span");
    text2 = document.createTextNode("Next");
    ul.appendChild(li2);
    li2.appendChild(a2);
    a2.appendChild(span2);
    span2.appendChild(text2);
    document.getElementById("portfolioImage").appendChild(ul);
    
    // Set events for IE
    
    if(!(window.addEventListener)){
      function imgChangePrevious(){imgChange('previous');}
      document.getElementById('imageMenu-01').attachEvent('onclick', imgChangePrevious);
      function imgChangeNext(){imgChange('next')};
      document.getElementById('imageMenu-02').attachEvent('onclick', imgChangeNext);
    }
    
    // End set events for IE
    
  }
}

// Launch image opacity fade loop and make image visible:

function initiateOpacityLoop(){
  setInterval("setOpacity()",5);
  document.getElementById(mainImage).style.visibility = 'visible';
}

// OnLoad Functions:

libJS.addEvent(window,'load',imgPreload);
libJS.addEvent(window,'load',setPortfolioImageNavigation);
libJS.addEvent(window,'load',initiateOpacityLoop);