// 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 caption1;
var caption2;
var caption3;
//declare in the respective vars
//var caption1Text;
//var caption2Text;
//var caption3Text;
var caption1TextNode;
var caption2TextNode;
var caption3TextNode;
var thumbnails;
var currentBrowser;

//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");
	setUpMainArea();
}


/****************************************************************/
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", imagePath);	
	//put the image in the div
	mainImageDiv = document.getElementById("mainImageBkg");
	mainImageDiv.appendChild(mainImage);

	//creates the paragraph tag
	captionDiv = document.getElementById("captionDiv");

	//creates the text to put in the paragraph tag
	//these are declared in the vars
	//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);
	captionDiv.style.width = mainImageWidth + "px";
	
	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);
test = thisLink.getElementsByTagName("span");
	if (test[0].firstChild.nodeValue) {
		caption2Text = test[0].firstChild.nodeValue;
	}
	else {
		caption2Text = "";
	}
	if (test[1].firstChild.nodeValue) {
		caption3Text = test[1].firstChild.nodeValue;
	}
	else {
		caption3Text = "";
	}


// 3. preload image	and get height and width properties

var nextImage = new Image();

	nextImage.onload = function() {
		mainImage.setAttribute("src", imagePath);
		mainImage.width = nextImage.width;	
		mainImage.height = nextImage.height;
		mainImage.alt = caption1Text;
		caption1.firstChild.nodeValue = caption1Text;
		caption2.firstChild.nodeValue = caption2Text;
		caption3.firstChild.nodeValue = caption3Text;
		nextCaptionDiv = document.getElementById("captionDiv");
		nextCaptionDiv.style.width = nextImage.width + "px";
		//mainImageDiv.appendChild(mainImage);
	}
	
nextImage.src = imagePath;
}