// imageOvers.js
//
//	This enables use of preloading and hover over for the product/item display page
//	Barry O Rourke
//	CybercomGroup
//	
//	Needs the following in the jsp file
//<script language="javascript" src="<c:out value="${jspStoreImgDir}javascript/imageOvers.js"/>"></script>
//<script language = "JavaScript">
//var BFimageArray = new Array();
//the default location of the images
//imgpath="/wcsstore/SourceOnline/images/catalog/";
// div a - first division named as id="a" etc 
// BFimgobject (div id,imagesmall,bfimagebig,imagenumber)
//BFimageArray[0] = new BFimgobject('a','parka','parka','02');
//BFimageArray[1] = new BFimgobject('b','parka','parka','03');
//BFimageArray[2] = new BFimgobject('c','parka'.'parka','04');
//BFimageArray[3] = new BFimgobject('d','parka','parka','05');
// name of default image when no hover present
//defaultimage="26-AW06-SLASH-BROWN";
//</script>
// also needs something along the lines of
// <div style="position:absolute; display:visible; width:352px; height:331px;"><img id="fullimage" src="/wcsstore/SourceOnline/images/catalog/26-AW06-SLASH-BROWN-300.jpg" alt="Military Multi-Pocket Parka" width="352" height="331" /></div>
// <div id="div-no-image" style="position:absolute; display:none; width:352px; height:331px;"><img src="/wcsstore/SourceOnline/images/catalog/no-image.gif" alt="Military Multi-Pocket Parka" width="352" height="331" /></div>
// <div style="display:visible; width:352px; height:331px;"></div>
// <div id="div-all-details" <p><br/><strong>Details /</strong> Click to Zoom +</p></div>
// <div id="a" class="row-1-col-d3"><img onmouseover="hover1('a')" onmouseout="hover2('a')" src="/wcsstore/SourceOnline/images/catalog/26-AW06-SLASH-BROWN-150.jpg" alt="detail view 1" width="82" height="82" border="0" /></div>
//  ..
// ...
// <div id="d" class="row-1-col-d3"><img onmouseover="hover1('d')" onmouseout="hover2(,'d')" src="/wcsstore/SourceOnline/images/catalog/26-AW06-SLASH-BROWN-150.jpg" alt="detail view 1" width="82" height="82" border="0" /></div>
// the div name div-all-details is used to enable a no image available transparent gif to appear
// over the default image
// also the id of the fullimage must be named fullimage



badCount=0;
pagefinished=false;
numDivs=4;
var ar=new Array('a','b','c','d');
show_all_div=0;
function hover1(which) {
	if (pagefinished) {
		if (BFimageArray[which].bfimagebig.complete==false || BFimageArray[which].bfimagebig.width==0) {
			document.getElementById("div-no-image").style.display='block';
		}
		else {
			document.images['fullimage'].src=BFimageArray[which].bfimagebig.src;
			trace("hover1 " + BFimageArray[which].bfimagebig.src);
		}
	}
}

function hover2(which) {
	document.getElementById("div-no-image").style.display='none';
	document.images['fullimage'].src=imgpath + defaultimage + '_big_01.jpg';
}

function imagepreloader() 
{	
//		for (nd = 0 ; nd < numDivs ; nd ++ ) {
//			document.getElementById(ar[nd]).innerHtml=''; //style.display='none';
//		}
	if (typeof(pagefinished) == 'undefined')
		//alert('Page didnt load completely');
		;
	else 
	{
		trace('imagepreloader');
		// somehow BFimageArray.length returns 0
		for (nd = 0 ; nd < numDivs ; nd ++ ) {
			if (BFimageArray[nd] ==null)
				continue;
			trace('image height ' +BFimageArray[nd].imagesmall.height);
			if (BFimageArray[nd].imagesmall.height > 32) {
				document.getElementById(ar[nd]).style.display='inline';
				BFimageArray[nd].show=true;
				show_all_div=show_all_div + 1;
			}
			else {
				BFimageArray[nd].show=false;
			}
			
			if (BFimageArray[nd].show==false) {
				trace('blanking' + nd);
				document.getElementById(ar[nd]).innerHTML='';
			} else {
				BFimageArray[nd].bfimagebig.src=BFimageArray[nd].srcbig;
				document.getElementById(ar[nd]).style.display='inline';
			}
		}
		document.images['fullimage'].src=imgpath+defaultimage+'_big_01.jpg';
//		if (badCount == numDivs )
//			document.getElementById('div-all-details').style.display='none';
		pagefinished=true;
	}
	trace ("show_all_div = " + show_all_div);
	if (show_all_div>0)
		set_div_all_details();
}

function imageloaderror()
{
	trace('Load error - failing A ' + this.src);
	for (ind = 0 ; ind < numDivs ; ind ++ ) {
			if (BFimageArray[ind] ==null)
				continue;
		if (BFimageArray[ind].imagesmall.src == this.src) {
			if (document.getElementById(ar[ind]) !=null) {
				document.getElementById(ar[ind]).style.display='none';
			}
			BFimageArray[ind].show=false;
			badCount=badCount+1;
			break;
		}
	}
}
function okimage() {
	trace ('Load OK' + this.src);
	if (this.src !=undefined) {
		show_all_div=show_all_div + 1;
		for (nd = 0 ; nd < numDivs ; nd ++ ) {
				if (BFimageArray[nd] ==null)
					continue;
				if (BFimageArray[nd].imagesmall.src == this.src) {
					BFimageArray[nd].show=true;
					trace(nd);
//			document.getElementById(ar[nd]).style.display='inline';
				break;
			}
		}
	}
}
function set_div_all_details()
{
	if (document.getElementById('div-all-details') !=null)
		document.getElementById('div-all-details').style.display='inline';
}


function BFimgobject(div,srcsmall,srcbig,imagenumber){
	trace('new bf ' + div);
	this.srcsmall=imgpath + srcsmall + '_sml_' + imagenumber + '.jpg';
	this.srcbig=  imgpath + srcbig   + '_big_' + imagenumber + '.jpg';
	this.imagesmall = new Image();
	this.imagesmall.onerror=imageloaderror;
	this.imagesmall.onload=okimage;
	this.show=true;
	this.div=div;
	this.bfimagebig = new Image();
	trace('fin bf' + div);
}
function set_bfimages() {
	for (nd = 0 ; nd < numDivs ; nd ++ )
		BFimageArray[nd].imagesmall.src=BFimageArray[nd].srcsmall;
}
function trace(str) 
{
	// dummy
}