// make indexOf work better
if (!Array.prototype.indexOf) {
  Array.prototype.indexOf = function(elt /*, from*/) {
    var len = this.length;

    var from = Number(arguments[1]) || 0;
    from = (from < 0) 
         ? Math.ceil(from)
         : Math.floor(from);
    if (from < 0)
      from += len;

    for (; from < len; from++) {
      if (from in this &&
          this[from] === elt)
      return from;
    }
    return -1;
  };
}

	// positioning variables for the large image placeholder
var x1 = "504px"; var x2 = "541px"; var y = "186px";

	// folder name and image names for the current section
var imgFolder, imgArray;

	// temporary image 1x1 pixels, transparent GIF, used to replace the big images until the new ones load
var tempImage = new Image();
tempImage.src = "images/transparent.gif";

	// large images folder names
var brochureImgFolder	 			= "images/graphics-advertising/brochures/large/";
var displaysignageImgFolder	= "images/graphics-advertising/display-and-signage/large/";
var directmailImgFolder			= "images/graphics-advertising/direct-mail/large/";
var advertisingImgFolder		= "images/graphics-advertising/advertising/large/";

	// large images file names
var brochureImages = new Array (
		["ArwcrstBrochCovLG.jpg","h"],
		["GDC-CorpBrochLG.jpg","h"],
		["GGR-Broch-CarrierPAKLG.jpg","v"],
		["HHBrochCovLG.jpg","h"],
		["IL-BrochureLG.jpg","h"],
		["PreserveCoverLG.jpg","h"],
		["QG-BrochLG.jpg","h"],
		["RiverbendCoverLG.jpg","h"]
);
var displaysignageImages = new Array (
		["AtriumAngles-HH_LG.jpg","h"],
		["AtriumPanl-DispHHLG.jpg","h"],
		["Atrium-Sales-HHLG.jpg","h"],
		["GE-SignageLG.jpg","h"],
		["GGRSignLG.jpg","h"],
		["GilletteBrassSignLG.jpg","h"],
		["HHSalesCtrDisplaysLG.jpg","h"],
		["HH-SignageLG.jpg","h"],
		["KW-SignLG.jpg","h"]
);
var directmailImages = new Array (
		["GDCAM-DRLarge.jpg","h"],
		["FW-439-ExtMaintTentLG.jpg","h"],
		["FW-GreatSinglesMailerLG.jpg","h"],
		["GDC-440mailerYourKidsLG.jpg","h"],
		["GDC-CardBackingLG.jpg","h"],
		["GGR-NewsletterLG.jpg","h"],
		["GR-305PostC-NoChoresLG.jpg","h"],
		["HP-BrokerInvite-CurtainLG.jpg","h"]
);
var advertisingImages = new Array (
		["AmericanDreamAdLG.jpg","v"],
		["GDC-621FWNYTLeftadLG.jpg","v"],
		["HP-596-JNL-Ad2SM.jpg","v"],
		["IL-DifferentPerspectiveAdLG.jpg","v"],
		["RW -623StyleadnytLG.jpg","v"]
);

	// initialize the current folder name, big image names
	// add behaviour for the thumbnail links
function init () {
		
		// get current page name - from the UL id
	var currentPage = document.getElementById('sub-menu').getElementsByTagName('ul')[0].className;
	switch (currentPage) {
		case "brochures":
			imgFolder = brochureImgFolder; 				imgArray = brochureImages; 				break
		case "display-signage":
			imgFolder = displaysignageImgFolder;	imgArray = displaysignageImages; 	break
		case "direct-mail":
			imgFolder = directmailImgFolder; 			imgArray = directmailImages;			break
		case "advertising":
			imgFolder = advertisingImgFolder; 		imgArray = advertisingImages; 		break
	}
	
		// list of LI elements
	var thumbList = new Array ();
		// list of A elements
	var thumbLinks = new Array (); 
		// temp variable for the A element, on iteration
	var thumbAnchor;
	var count = 0;
	
		// get the list of LI elements from the thumbnails UL
	thumbList = document.getElementById('thumbnails').getElementsByTagName('ul')[0].childNodes;
	
		// get the A elements from each LI
		// add them to the thumbLinks array
		// ! iteration is needed, because the thumbList array is filled with both LI elements and \n characters from the HTML source
	for (i=0; i < thumbList.length; i++) {
		if (thumbList[i].tagName == "LI") {
			thumbAnchor = thumbList[i].firstChild;
			thumbLinks [count] = thumbAnchor;
			count++;
		}
	}
	
		///////////////////////////////////////////////////////////////////////
		///////////////
		/////////////// Get the image type (horizontal or vertical) from the first image of the image array and set the background of the right column DIV according to it
		///////////////
		/////////////// This will load the appropriate right column background image for the first large image displayed!
		///////////////
		///////////////////////////////////////////////////////////////////////
		// reference to the right column DIV
	var rightColumn = document.getElementById('right-column');
		// get image's dimensions : h for horizontal; v for vertical - will need them afterwards when we position the wrapper div
	bigImageSize = imgArray[0][1];
		// if the image is horizontal, set the horiz. backgr. image, else set the vert. backgr. image
	if (bigImageSize == "h") { rightColumn.style.background = "url(images/backgr-graphics-right-2.gif) 0 0 no-repeat";  }
	else { rightColumn.style.background = "url(images/backgr-graphics-right.gif) 0 0 no-repeat";  }

		// run through the anchor elements and add onclick event handler for each of them
	for (i=0; i < thumbLinks.length; i++) {
		
			// holder for the image names
		var bigImgName = imgArray[i];
			// reference to the A element from the links array
		var anchor = thumbLinks[i]

			// add event handler to the A element
		anchor.onclick = function () {
				// reference to the large image IMG element 
			var largeImagePlaceholder = document.getElementById('largeImage');
				// reference to the large image DIV wrapper
			var largeImageWrapper = document.getElementById('large-image');
				// compose the URL for the big image 
				// - the image folder corresponding to the current section + the image name corresponding to the current image in the iteration
				// - the image name is determined by getting the index of the A element from the links array and passing it to the images array
			bigImageURL = imgFolder + imgArray[thumbLinks.indexOf(this)][0];
				// get image's dimensions : h for horizontal; v for vertical - will need them afterwards when we position the wrapper div
			bigImageSize = imgArray[thumbLinks.indexOf(this)][1];
				// hide the large image wrapper DIV
			largeImageWrapper.style.visibility = "hidden";
				// position the wrapper DIV based on the size of the images
				// change the background image of the right column DIV
			if ( bigImageSize == "h") { largeImageWrapper.style.left = x1; rightColumn.style.background = "url(images/backgr-graphics-right-2.gif) 0 0 no-repeat"; } 
			else { largeImageWrapper.style.left = x2;	rightColumn.style.background = "url(images/backgr-graphics-right.gif) 0 0 no-repeat"; }
				// load the new image
			largeImagePlaceholder.src = bigImageURL;
/*			
				// once the image finished loading, make the wrapper div visible again
			largeImagePlaceholder.onload = function() {
				var largeImageWrapper = document.getElementById('large-image');
				largeImageWrapper.style.visibility = "visible";
			}
*/
				// show the large image wrapper DIV
			largeImageWrapper.style.visibility = "visible";

				// add this so the links to the large images don't follow through; also helpful to not jump the page at the top
			return false;
		}
	}
	

	/////// PRELOAD
	var tempImagesPreload = new Array();
	for (i=0; i < thumbLinks.length; i++) {
		tempImagesPreload[i] = new Image();
		var bigImgName = imgArray[i];
		bigImageURL = imgFolder + imgArray[i][0];
		tempImagesPreload[i].src = bigImageURL;
	}

/*
			/////////////// I don't know why it needs this added, but it's the only way to make IE and OPERA for PC work on the first click - not true anymore :)
			/////////////// TO DO: figure out this issue!
			// reference to the large image IMG element 
		var largeImagePlaceholder = document.getElementById('largeImage');
		largeImagePlaceholder.onload = function() {
			var largeImageWrapper = document.getElementById('large-image');
			largeImageWrapper.style.visibility = "visible";
		}
*/
}


	// event handler; will run after the document is loaded
window.onload = function () { init(); }