/*
 WP Gallery Script
 
Hero Images
    width : 532px
    height : 335px

Thumb Images
    width : 124px
    height : 77px
  
 
 To-Do :
 -	Add thumbnail highlight of some sort  
 -	Add fading f/x
 -	Reposition gallery window on browser resize
 -	Modify dimmer layer on browser resize
 -	Add loading animation for hero images/videos
 -	Preload rollovers
*/

var hs = {
	ie : (document.all && !window.opera),
	safari : /Safari/.test(navigator.userAgent),
	thumbLoc : '0',
	geckoMac : /Macintosh.+rv:1\.[0-8].+Gecko/.test(navigator.userAgent),
	thumbPath : '',
	heroPath : '',
	videoPath : '',
	frames : []
}

function ieVersion () {
	var arr = navigator.appVersion.split("MSIE");
	return arr[1] ? parseFloat(arr[1]) : null;
}

function getPageSize () {
	var iebody = document.compatMode && document.compatMode != "BackCompat" 
		? document.documentElement : document.body;	
	
	
	var b = document.body;
	var xScroll = (window.innerWidth && window.scrollMaxX) 
			? window.innerWidth + window.scrollMaxX :
				(b.scrollWidth > b.offsetWidth ? b.scrollWidth : b.offsetWidth),
		yScroll = (window.innerHeight && window.scrollMaxY) 
			? window.innerHeight + window.scrollMaxY :
				(b.scrollHeight > b.offsetHeight ? b.scrollHeight : b.offsetHeight),
		pageWidth = hs.ie ? iebody.scrollWidth :
			(document.documentElement.clientWidth || self.innerWidth),
      	pageHeight = hs.ie ? iebody.clientHeight : 
			(document.documentElement.clientHeight || self.innerHeight);
	
	var width = hs.ie ? iebody.clientWidth : 
			(document.documentElement.clientWidth || self.innerWidth),
		height = hs.ie ? iebody.clientHeight : self.innerHeight;
	
	return {
		pageWidth: xScroll < pageWidth ? pageWidth : xScroll,
		pageHeight: yScroll < pageHeight ? pageHeight : yScroll,
		width: width,
		height: height,		
		scrollLeft: hs.ie ? iebody.scrollLeft : pageXOffset,
		scrollTop: hs.ie ? iebody.scrollTop : pageYOffset
	}
}


function createShade () {
	pageSize = getPageSize();
	var shade = document.createElement('div');
	shade['id'] = 'shade';
	
	var shadeWidth = pageSize.pageWidth;
	var shadeHeight = pageSize.pageHeight;

	shade.style['width'] = shadeWidth + 'px';
	shade.style['height'] = shadeHeight + 'px';
	shade.style['visibility'] = 'visible';
	shade.style['backgroundColor'] = '#000000';
	shade.style['position'] = 'absolute';
	shade.style['top'] = '0px';
	shade.style['left'] = '0px';
	if (hs.ie) {
		shade.style.filter = 'alpha(opacity='+ (.5 * 100) +')';
	} else {
		shade.style['opacity'] = '.5';
	}
	shade.style['z-index'] = '2';
	document.body.appendChild(shade);	
}

function destroyShade() {
	var shade = document.getElementById('shade');
	document.body.removeChild(shade);
}

function createGallery() {
	// get "main" element used for placing gallery div
	var main = document.getElementById("main");

	// create main gallery div
	var gallery = document.createElement('div');
	var content = "<div style=\"background-image:url(/images/gallery/gallery_top_shadow.png); width:817px; height:8px;\">&nbsp;</div>";
	content += "<div style=\"background-image:url(/images/gallery/gallery_left_shadow.png); width:45px; height:519px; float:left;\">&nbsp;</div>";
	content += "<div style=\"background-color:#ffffff; width:727px; height:519px; float:left;\">";
	
	// Top Section
	content += "<div id=\"caption\" style=\"float:left; text-align:left; border-top:5px solid white; border-left:5px solid white; background-color:#dddddd; width:659px; height:45px;\">&nbsp;</div>";
	content += "<div style=\"float:left; width:63px; height:55px;\"><img src=\"/images/gallery/gallery_close_button.png\" onMouseOver=\"this.src='/images/gallery/gallery_close_button_hover.png'; this.style.cursor='pointer';\" onMouseOut=\"this.src='/images/gallery/gallery_close_button.png';\" onClick=\"closeGallery();\" /></div>";
	
	// Logo and Hero Screenshot Section
	content += "<div style=\"float:left; position:relative; overflow:visible; top:-10px; border-left:5px solid white; background-color:#dddddd; width:46px; height:352px;\"><img src=\"/images/gallery/gallery_logo.png\" /></div>"; 
	content += "<div id=\"hero\" style=\"float:left; text-align:left; margin-top:10px; margin-left:53px; width:623px; height:343px;\"></div>";
	
	
	// Thumbnail Navigation
	content += "<div id=\"prevButton\" style=\"clear:both; float:left; margin-left:20px; margin-top:30px; width:63px; height:63px; text-align:right;\"><img src=\"/images/gallery/gallery_left_button_off.png\" onClick=\"loadThumbnails(hs.thumbLoc, 'backward');\" /></div>";
	content += "<div style=\"float:left; width:561px; height:63px; margin-top:15px; text-align:center;\">";

	content += "<div id=\"thumb1\" style=\"text-align:left; float:left; width:140px; height:93px; background-image:url(/images/gallery/gallery_thumbnail_shadow.png);\"></div>";
	content += "<div id=\"thumb2\" style=\"text-align:left; float:left; width:140px; height:93px; background-image:url(/images/gallery/gallery_thumbnail_shadow.png);\"></div>";
	content += "<div id=\"thumb3\" style=\"text-align:left; float:left; width:140px; height:93px; background-image:url(/images/gallery/gallery_thumbnail_shadow.png);\"></div>";
	content += "<div id=\"thumb4\" style=\"text-align:left; float:left; width:140px; height:93px; background-image:url(/images/gallery/gallery_thumbnail_shadow.png);\"></div>";
	content += "<div style=\"clear:both;\"></div>";

	content += "</div>";
	content += "<div id=\"nextButton\" style=\"float:left; margin-right:20px; margin-top:30px; width:63px; height:63px; text-align:right;\"><img src=\"/images/gallery/gallery_right_button.png\" onMouseOver=\"this.src='/images/gallery/gallery_right_button_hover.png'; this.style.cursor='pointer';\" onMouseOut=\"this.src='/images/gallery/gallery_right_button.png';\" onClick=\"loadThumbnails(hs.thumbLoc, 'forward');\" /></div>";
	
	
	content += "<div style=\"clear:both;\"></div>";
	content += "</div>";
	
	content += "<div style=\"background-image:url(/images/gallery/gallery_right_shadow.png); width:45px; height:519px; float:left;\">&nbsp;</div>";
	content += "<div style=\"clear:both; background-image:url(/images/gallery/gallery_bottom_shadow.png); width:817px; height:39px;\">&nbsp;</div>";
	gallery['id'] = 'gallery';
	gallery['innerHTML'] = content;
	gallery.style['width'] = '817px';
	gallery.style['height'] = '567px';
	gallery.style['left'] = main.offsetLeft + 80 + 'px';
	gallery.style['top'] = '0px';
	gallery.style['visibility'] = 'visible';
	// gallery.style['backgroundColor'] = '#ffffff';
	gallery.style['position'] = 'absolute';
	gallery.style['z-index'] = '50';
	document.body.appendChild(gallery);
	
	loadThumbnails(hs.thumbLoc, 'init');
	loadHero(0);
}

function loadThumbnails(offset, direction) {
	var thumb1 = document.getElementById('thumb1');
	var thumb2 = document.getElementById('thumb2');
	var thumb3 = document.getElementById('thumb3');
	var thumb4 = document.getElementById('thumb4');
	var prevButton = document.getElementById('prevButton');
	var nextButton = document.getElementById('nextButton');
	
	
	var displayThumbs = 'no';
	
	if(direction == 'forward') {
		if(offset < hs.frames.length) {
			offset = offset -3;
			displayThumbs = 'yes';
			// Make Sure prev button is turned on
			prevButton.innerHTML = "<img src=\"/images/gallery/gallery_left_button.png\" onMouseOver=\"this.src='/images/gallery/gallery_left_button_hover.png'; this.style.cursor='pointer';\" onMouseOut=\"this.src='/images/gallery/gallery_left_button.png';\" this.style.cursor='default';\" onClick=\"loadThumbnails(hs.thumbLoc, 'backward');\" />";
		}
	} else if(direction == 'backward') {
		if(offset > 4) {
			offset = offset - 5;
			displayThumbs = 'yes';
			// Make Sure next button is turned on
			nextButton.innerHTML = "<img src=\"/images/gallery/gallery_right_button.png\" onMouseOver=\"this.src='/images/gallery/gallery_right_button_hover.png'; this.style.cursor='pointer';\" onMouseOut=\"this.src='/images/gallery/gallery_right_button.png';\" onClick=\"loadThumbnails(hs.thumbLoc, 'forward');\" />";
		}
	} else {
		displayThumbs = 'yes';
	}
	
	if(displayThumbs == 'yes') {
		// Load thumbnails
		thumb1.innerHTML = "<img src=\"" + hs.thumbPath + hs.frames[offset][3] + "\" alt=\"" + hs.frames[offset][1] + "\" title=\"" + hs.frames[offset][1] + "\" style=\"margin-top:8px; margin-left:8px;\" onMouseOver=\"this.style.cursor='pointer';\" onMouseOut=\"this.style.cursor='default';\" onClick=\"loadHero(" + offset + ");\" />";
		++offset;
	
		// Load second thumbnail
		thumb2.innerHTML = "<img src=\"" + hs.thumbPath + hs.frames[offset][3] + "\" alt=\"" + hs.frames[offset][1] + "\" title=\"" + hs.frames[offset][1] + "\" style=\"margin-top:8px; margin-left:8px;\" onMouseOver=\"this.style.cursor='pointer';\" onMouseOut=\"this.style.cursor='default';\" onClick=\"loadHero(" + offset + ");\" />";
		++offset;
		
		// Load third thumbnail
		thumb3.innerHTML = "<img src=\"" + hs.thumbPath + hs.frames[offset][3] + "\" alt=\"" + hs.frames[offset][1] + "\" title=\"" + hs.frames[offset][1] + "\" style=\"margin-top:8px; margin-left:8px;\" onMouseOver=\"this.style.cursor='pointer';\" onMouseOut=\"this.style.cursor='default';\" onClick=\"loadHero(" + offset + ");\" />";
		++offset;
		
		// Load fourth thumbnail
		thumb4.innerHTML = "<img src=\"" + hs.thumbPath + hs.frames[offset][3] + "\" alt=\"" + hs.frames[offset][1] + "\" title=\"" + hs.frames[offset][1] + "\" style=\"margin-top:8px; margin-left:8px;\" onMouseOver=\"this.style.cursor='pointer';\" onMouseOut=\"this.style.cursor='default';\" onClick=\"loadHero(" + offset + ");\" />";
		++offset;
		
		hs.thumbLoc = offset;

		if(direction == 'forward') {
			if(offset >= hs.frames.length) {
				// Turn off forward button
				nextButton.innerHTML = "<img src=\"/images/gallery/gallery_right_button_off.png\" onClick=\"loadThumbnails(hs.thumbLoc, 'forward');\" />";
			}
		} else if(direction == 'backward') {
			if(offset == 4) {
				// Turn off previous button
				prevButton.innerHTML = "<img src=\"/images/gallery/gallery_left_button_off.png\" onClick=\"loadThumbnails(hs.thumbLoc, 'backward');\" />";
			}
		}
	}
}		

function loadHero(Frame) {
	var hero = document.getElementById('hero');
	var caption = document.getElementById('caption');
	
	if(hs.frames[Frame][0] == "image") {
		hero.innerHTML = "<span style=\"font-weight:bold; font-size:13px;\">" + hs.frames[Frame][1] + "</span><br />";
		hero.innerHTML += "<img src=\"" + hs.heroPath + hs.frames[Frame][4] + "\"  />";
	} else if (hs.frames[Frame][0] == "video") {
		var FO = { movie:hs.videoPath + hs.frames[Frame][4], width:"532", height:"335",
	majorversion:"8", build:"0", wmode:"transparent", flashvars:"variable1=<?=$allow_purchase;?>" };
	UFO.create(FO, "hero");
	}
	caption.innerHTML = "<div style=\"padding-left:100px; padding-top:2px; padding-right:5px;\">" + hs.frames[Frame][2] + "</div>";
}


function destroyGallery() {
	var gallery = document.getElementById('gallery');
	document.body.removeChild(gallery);
}


function openGallery() {
	createShade();
	createGallery();
}

function closeGallery() {
	destroyShade();
	destroyGallery();
	hs.thumbLoc = 0;
}