// JavaScript Document
//ReahNorman.com
//Javascript Photo Gallery
//Created by: Tiina Vuorenmaa
//versatii.com
//Updated: 9/25/2009

///set up variables
//alert ("checking");
var mainImage;
var mainImageDiv;
var captionDiv;
var mainImageWidth = 400;
var mainImageHeight = 300;
var newWidth = 0;
var newHeight = 0;
var caption1;
var caption2;
var caption3;
var caption1Text;
var caption2Text;
var caption3Text;
var caption1TextNode;
var caption2TextNode;
var caption3TextNode;
var thumbnails;
var currentBrowser;
var imagePath;
//alert ("checking");

addLoadEvent(checkBrowser);
//alert ("checking");

/****************************************************************/
//http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

/****************************************************************/
function checkBrowser() {
	//alert ("checking");
	//check to make sure javacript works
	if (!document.getElementsByTagName) return false;	
	if (!document.getElementById) return false;	
	if (!document.getElementById("thumbnails"))return false;
	if (!document.getElementById("mainImageBkg"))return false;
	//alert ("all good");
	currentBrowser = detectBrowser();
	setUpMainArea();
}

/****************************************************************/
function detectBrowser()
{
var browser=navigator.appName;
var b_version=navigator.appVersion;
var version=parseFloat(b_version);
var thisBrowser="";
if ((browser=="Microsoft Internet Explorer") && (version>=4))
  {
 // alert("ie");
  thisBrowser="IE";
  return thisBrowser;
  }
else
  {
   thisBrowser="notIE";
  return thisBrowser;
  }
}
/****************************************************************/
function setUpMainArea() {

	//create the main image
	mainImage = document.createElement("img");
	mainImage.id = "mainImage";
	mainImage.width = mainImageWidth;
	mainImage.height = mainImageHeight;
	//mainImage.setAttribute("id","mainImage");
	mainImage.setAttribute("alt","Photo Styling by Reah Norman");
	mainImage.setAttribute("src","../images/fashion/victoria_samurai_2.jpg");
	
	//alert(mainImage.width);
	if (currentBrowser == "IE") {
		mainImage.filters.alpha.opacity = 100;		
	}
	else {
		mainImage.style.MozOpacity = 1;	
	}
	//put the image in the div
	mainImageDiv = document.getElementById("mainImageBkg");
	mainImageDiv.appendChild(mainImage);
	mainImageDiv.style.width = mainImageWidth + "px";
	mainImageDiv.style.height = mainImageHeight + "px";
	alert(mainImageDiv.style.height);
	//creates the paragraph tag
	captionDiv = document.getElementById("captionDiv");
	//alert(captionDiv);
	//creates the text to put in the paragraph tag
	caption1Text = "Click on a thumbnail to the right to view an image above.";
	caption2Text = " ";
	caption3Text = " ";
	caption1TextNode = document.createTextNode(caption1Text);
	caption2TextNode = document.createTextNode(caption2Text);
	caption3TextNode = document.createTextNode(caption3Text);
	
	caption1 = document.createElement("p");
	caption1.className = "caption";
	caption1.appendChild(caption1TextNode);
	caption2 = document.createElement("p");
	caption2.className = "caption";
	caption2.appendChild(caption2TextNode);
	caption3 = document.createElement("p");
	caption3.className = "caption";
	caption3.appendChild(caption3TextNode);
	
	captionDiv.appendChild(caption1);
	captionDiv.appendChild(caption2);
	captionDiv.appendChild(caption3);
	
	imageGallery();
	
}

/****************************************************************/
function imageGallery() {
	//get the thumbnails section
	thumbnails = document.getElementById("thumbnails");
	//grab the a links from this section
	var thumblinks = thumbnails.getElementsByTagName("a");
	//alert (thumblinks);
	//go thru the links and do the related function for each link
	for(var i=0; i < thumblinks.length; i++) {
	thumblinks[i].onclick = function(){
		//alert("showpic");
		showPic(this);  //i'm inside the a tag - this tag!
		
		return false; //don't do the usual href link
		}
	}
}

/****************************************************************/
function showPic(thisLink) {
	// 1. get the img src from the href tag
imagePath = thisLink.getAttribute("href");
//alert(imagePath);
//get the title description
caption1Text = thisLink.getAttribute("title");
//alert(caption1Text);
// 2. get captions from the span tags within the href tag
//alert(thisLink.lastChild.previousSibling);
if(thisLink.lastChild.previousSibling) {
	caption2Text = thisLink.lastChild.previousSibling.firstChild.nodeValue;

}
else {
	caption2Text = "";
	
}

//alert(caption2Text);
//alert(thisLink.lastChild.previousSibling.previousSibling.previousSibling);
if(thisLink.lastChild.previousSibling.previousSibling.previousSibling) {
	caption3Text = thisLink.lastChild.previousSibling.previousSibling.previousSibling.firstChild.nodeValue;

}
else {
	caption3Text = "";
}

//alert(caption3Text);
// 3. preload image	and get height and width properties
var nextImage = new Image();
nextImage.src = imagePath;
//alert(nextImage);
//alert(nextImage.src);

newHeight = nextImage.height;
newWidth = nextImage.width;
alert(newHeight);
alert(newWidth);

// 4. fade out image using css
//alert(currentBrowser);
	fadeOutImage();

// 5. check when the image is completely faded
// 6. add the new src to the image tag
	//mainImageResize();

// 7. animate the change of width of the div
// 8. animate the change of lenght of the div
	
// 9. check when the length is done animating

// 10. fade in the image using css
	//fadeInImage();

// 11. change the nodes of the two caption divs

	
}

/****************************************************************/
function mainImageResize() {
	//alert("mainImage = " + mainImage.width);
	//alert(newHeight);
	//alert(newWidth);
	if ((mainImage.width == newWidth) && (mainImage.height == newHeight)) {
		clearTimeout(resizing);
		mainImage.setAttribute("src", imagePath);
		mainImage.alt = caption1Text;
		fadeInImage();
		return true;	
	}
	if (mainImage.width < newWidth) {
		mainImage.width ++;
	}
	else if (mainImage.width > newWidth) {
		mainImage.width --;
	}
	
	if (mainImage.height < newHeight) {
		mainImage.height ++;
	}
	else if(mainImage.height > newHeight){
		mainImage.height --;
	}

	mainImageDiv.style.width = mainImage.width + "px";
	mainImageDiv.style.height = mainImage.height + "px";
	
	var resizing = setTimeout("mainImageResize()",1);
}

/****************************************************************/
function fadeOutImage() {
	
	if((currentBrowser == "IE" &&  mainImage.filters.alpha.opacity<=0) || (mainImage.style.MozOpacity <= 0)) {
		clearTimeout(fadingOut);
		mainImageResize();
		return true;	
	}
	if(currentBrowser == "IE") {
		mainImage.filters.alpha.opacity -= 5;
		}
		
	else {
		mainImage.style.MozOpacity = Math.min(parseFloat(mainImage.style.MozOpacity)-0.05, 1);
		
	}

	
	var fadingOut = setTimeout("fadeOutImage()",100);
}

/****************************************************************/
function fadeInImage() {
	
	if((currentBrowser == "IE" &&  mainImage.filters.alpha.opacity>=100) || (mainImage.style.MozOpacity >= 1)) {
		clearTimeout(fadingIn);
		
	caption1.firstChild.nodeValue = caption1Text;
	caption2.firstChild.nodeValue = caption2Text;
	caption3.firstChild.nodeValue = caption3Text;
		return true;	
	}
	if(currentBrowser == "IE") {
		mainImage.filters.alpha.opacity += 5;
		}
		
	else {
		mainImage.style.MozOpacity = Math.min(parseFloat(mainImage.style.MozOpacity)+0.05, 1);
		
	}

	
	var fadingIn = setTimeout("fadeInImage()",100);
}