/* Simple Image Trail script- By JavaScriptKit.com. Modified by JJ. July 2009 */

var mouseoffset = [15,25]; //image x,y offsets from cursor position in pixels

var defaultimageheight = 630; // maximum image size.
var defaultimagewidth = 520; // maximum image size.

var timer, hidetimer;
var i,t,w,h;
var GlobalImageArray = new Hash();
var GlobalThumbArray = new Hash();

function ImageNode(in_id, in_listing, in_imgurl, in_link, in_brand) {	
	this.unique_id = in_id;
	this.listing = in_listing;
	this.imgurl = in_imgurl;
	this.prodlink = in_link;
	this.brand = in_brand;

} //END: custructor for ImageNode

function ThumbNode(in_id, in_listing, in_thumburl, in_brand, in_size, in_targetid) {	
	this.unique_id = in_id;
	this.listing = in_listing;
	this.thumburl = in_thumburl;
	this.brand = in_brand;
	this.size = in_size;
	this.targetid = in_targetid;

} //END: custructor for ImageNode

function addToGlobalImageCollection (in_id, in_listing, in_imgurl, in_link, in_brand) {
	var imgNode = new ImageNode(in_id, in_listing, in_imgurl, in_link, in_brand);
	GlobalImageArray[in_id] = imgNode;
	return true;
} //END: addToGlobalImageCollection()

function addToThumblistCollection (in_id, in_listing, in_thumburl, in_brand, in_size, in_targetid) {
	var thumbNode = new ThumbNode(in_id, in_listing, in_thumburl, in_brand, in_size, in_targetid);
	GlobalThumbArray[in_id] = thumbNode;	
	return true;
} //END: addToThumblistCollection()

function gettrailobj(){
	if (document.getElementById){
		return document.getElementById("preview_div").style;
	}
}

function truebody(){
return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function hidetrail(){	
	clearTimeout(timer);
	hidetimer = setTimeout('hideExecute()', 200);
}

function hideExecute(){
	gettrailobj().display = "none";
	document.onmousemove = "";
	gettrailobj().left = "-9999px";
	clearTimeout(hidetimer);
}

function hideCancel(){
	clearTimeout(hidetimer);
}

function showtrail(listing,title,width,height,pricetype,price,bid,newitem){
	i = listing;
	t = title;
	w = width;
	h = height;
	pt = pricetype;
	p = price;
	b = bid;
	n = newitem;
	timer = setTimeout("show('"+i+"',t,w,h,pt,p,b,n);", 200);
}

function show(listing,title,width,height,pricetype,price,bid,newitem){
    var docwidth = document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth - mouseoffset[0];
	var docheight = document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(window.innerHeight);
	//var docwidth = document.viewport.getWidth();
	//var docheight = document.viewport.getHeight();
	hideCancel();
	// full size images are fully visible at constraints 1070x670
	//alert(docwidth + 'x' + docheight);
	if( (navigator.userAgent.indexOf("Konqueror")==-1  || navigator.userAgent.indexOf("Firefox")!=-1 || (navigator.userAgent.indexOf("Opera")==-1 && navigator.appVersion.indexOf("MSIE")!=-1)) && (docwidth>1000 && docheight>600)) {
		
		( width == 0 ) ? width = defaultimagewidth: '';
		( height == 0 ) ? height = defaultimageheight: '';
		
		var width1= width + 50;
		var height1 = height + 140;
		
		defaultimageheight = height1;
		defaultimagewidth = width1;
	
		document.onmousemove = followmouse;
		$('preview_div').onmouseout = hidetrail;
		$('preview_div').onmouseover = hideCancel;
		
		/* newHTML = '<div class="border_preview"><h2 class="title_h2">' + ' '+title + '</h2><div id="loader_container"><div id="loader"><div align="center">Loading image...</div><div id="loader_bg"><div id="progress"> </div></div></div></div>';
		
    	newHTML = newHTML + '<div class="preview_temp_load">';
		if(price != 0 && pricetype != ''){
			newHTML = newHTML + '<div class="preview_pricing">' + pricetype + ': <em>' + price + '</em>'; 
		}
		if(bid != undefined){
			newHTML = newHTML + '<br/>Current bid: <em>$' + bid + '</em></div>';
		}
		if(newitem == 1){
			newHTML = newHTML + '<div class="preview_new_band"><span>new item</span></div>';
		}
		newHTML = newHTML + '<img onload="javascript:remove_loading();" src="' + listing + '" border="0" height="'+  height +'" width="'+  width +'" /></div>';
		newHTML = newHTML + '</div>'; 
		
		if(navigator.userAgent.indexOf("MSIE")!=-1 && navigator.userAgent.indexOf("Opera")==-1 ){
			newHTML = newHTML+'<iframe src="about:blank" scrolling="no" frameborder="0" width="'+width+'" height="'+height+'"></iframe>';
		}	

		$('preview_div').innerHTML = newHTML; */
		
		$('preview_div').innerHTML = $('imagegallery_holder_' + listing).innerHTML;
		if (document.getElementById('g_thumblist_' + listing)){
			showThumbGallery('g_thumblist_' + listing);
		}
		showImage('g_image_' + listing + '_0');
		gettrailobj().display="block";
	}
}

function followmouse(e){

	var xcoord=mouseoffset[0]
	var ycoord=mouseoffset[1]

	var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth - mouseoffset[0];
	var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(window.innerHeight)

	if (typeof e != "undefined"){
		if (docwidth - e.pageX < defaultimagewidth + 2*mouseoffset[0]){
			//alert('xcoord = '+ e.pageX + ' - ' + xcoord + ' - ' + defaultimagewidth);
			xcoord = e.pageX - xcoord - defaultimagewidth; // Move to the left side of the cursor
		} else {
			xcoord += e.pageX;
		}
		if (docheight - e.pageY < defaultimageheight + 2*mouseoffset[1]){
			ycoord += e.pageY - Math.max(0,(2*mouseoffset[1] + defaultimageheight + e.pageY - docheight - truebody().scrollTop));
		} else {
			ycoord += e.pageY;
		}
	} else if (typeof window.event != "undefined"){
		if (docwidth - event.clientX < defaultimagewidth + 2*mouseoffset[0]){
			//alert('xcoord = '+ event.clientX + ' + ' + truebody().scrollLeft + ' - ' + xcoord + ' - ' + defaultimagewidth);
			xcoord = event.clientX + truebody().scrollLeft - xcoord - defaultimagewidth; // Move to the left side of the cursor
		} else {
			//alert('xcoord = '+ event.clientX + ' + ' + truebody().scrollLeft);
			xcoord += truebody().scrollLeft + event.clientX;
		}
		if (docheight - event.clientY < (defaultimageheight + 2*mouseoffset[1])){
			ycoord += event.clientY + truebody().scrollTop - Math.max(0,(2*mouseoffset[1] + defaultimageheight + event.clientY - docheight));
		} else {
			ycoord += truebody().scrollTop + event.clientY;
		}
	}
	gettrailobj().left=xcoord+"px";
	gettrailobj().top=ycoord+"px";
	
	document.onmousemove = "";
	
}

/* Loader */

function remove_loading() {
	var targetelement = document.getElementById('loader_container');
	targetelement.style.display = 'none';
	targetelement.style.visibility = 'hidden';
}

/* Gallery functions */

function showGallery() {
	if (!document.getElementById) return false;
	document.getElementById("product_imagegallery").style.display = 'block';
}

function hideGallery() {
	if (!document.getElementById) return false;
	document.getElementById("product_imagegallery").style.display = 'none';
}

function showImage(image_id) {
	if (!document.getElementById) return false;
	if (!document.getElementsByTagName) return false;
	var bigimagesDiv = document.getElementById("g_imagelist").getElementsByTagName("div");
	
	if (bigimagesDiv.length < 1) return false;
	
	for ( var i=0; i < bigimagesDiv.length; i++) {
		bigimagesDiv[i].style.display = 'none';
	}
	var actualDivToDisplayImage = document.getElementById(image_id);
	var i2Disp = GlobalImageArray[image_id];
	if (actualDivToDisplayImage.innerHTML == "") {
		//only fill this in if empty, otherwise we waste loading images again
		actualDivToDisplayImage.innerHTML = "<img id='i_" + i2Disp.unique_id + "' class='g_image' src='" + i2Disp.imgurl + "' onclick='followURL(\"" + i2Disp.prodlink +  "\")' alt='" + i2Disp.brand + "' />";
	}	
	document.getElementById(image_id).style.display = 'block';
}

function showThumbGallery(gallery_id){
	if (!document.getElementById) return false;
	
	var thumbGallery = '';
	var currentThumbId = '' + gallery_id + '_0';
	var g2Disp = GlobalThumbArray[currentThumbId];
	//alert(currentThumbId);
	thumbGallery += '<ul>';
	for ( var i=0; i < g2Disp.size; i++) {
		currentThumbId = '' + gallery_id + '_' + i;
		g2Disp = GlobalThumbArray[currentThumbId];
		thumbGallery += '<li><img onMouseOver="showImage(\'g_image_' + g2Disp.listing + '_' + i + '\');" class="g_thumb" src="' + g2Disp.thumburl + '" alt="' + g2Disp.brand + '" /></li>';
	}
	thumbGallery += '</ul>';
	
	if (document.getElementById(gallery_id).innerHTML == "") {
		document.getElementById(gallery_id).innerHTML = thumbGallery;
	}
}