// slideshow_test2a.js

// just like slideshow_test2.js except the function that shows the description associated with an image is disabled

// slideshow functions


/**************************************
**  Setup variables for customizing  **
**************************************/
var direction 	= "horizontal";		//direction the thumbnails will scroll: horizontal or vertical
var thImgWdth	= "70";			//the width of individual thumbnail image
var thImgHght	= "48";			//the height of individual thumbnail image
var thExt	= ".jpg";		//the extension added to thumbnail images
var thDir	= "images/";		//the directory of thumbnail images
var imgExt	= ".jpg";		//the extension add to large images
var imgDir	= "images/";			//the directory of large images
// var thNum	= 5;			//number of thumbnail images to display - supplied by software on the page
var scrSpd	= 4;			//speed in which to scroll thumbnail images
var sldrPos	= "relative";		//position style of thumbnail DIV
var sldrTop	= "0";			//top position of thumbnail DIV
var sldrLft	= "0";			//left position of thumbnail DIV
var oldHtml	= "";			//page to be loaded if IE4 or NS4

/*********************
**	Broswer sniffer	**
*********************/
isNS4 = (document.layers) ? true : false;
isIE4 = (document.all && !document.getElementById) ? true : false;
isIE5 = (document.all && document.getElementById) ? true : false;
isNS6 = (!document.all && document.getElementById) ? true : false;

/** If NS4 or IE4 then it's a no go **/
if (isNS4 || isIE4) { document.location = oldHtml }

/*****************************************
**	Preload thumbnail images for use.	**
*****************************************/
var imgs = new Array();
for (i = 0; i < imageData.length; i++) {
	imgs[i]		= new Image();
	//alert( thDir + imgThumb[i] );
	//imgs[i].src	= thDir + imgThumb[i] + thExt;
	//imgs[i].src	= thDir + imgThumb[i];
	imgs[i].src	= thDir + imageData[i].thumbnail;
//	imgs[i].brand = imageData[i].brand;
	}

/*********************************************
**	Create the layer or div that will		**
**	be manipulated. Needs to be included	**
**	within a script block where the layer	**
**	or div will be displayed with thumbs.	**
*********************************************/
var intOn = "";
var endPos;
if ( direction == "vertical" ) {
	sldrWdth = thImgWdth;
	sldrHght = thImgHght * thNum;
} else {
	sldrWdth = thImgWdth * thNum;
	sldrHght = thImgHght;
}

function createLayer () {
	var thFrm = (document.getElementById) ?
		document.getElementById('thFrame') : ((document.all) ?
		document.all.thFrame : document.layers['thFrame']);

	var sldrStyleTxt = 'position:' + sldrPos + ';';
	sldrStyleTxt += 'top:' + sldrTop + ';';
	sldrStyleTxt += 'left:' + sldrLft + ';';
	sldrStyleTxt += 'width:' + sldrWdth + ';';
	sldrStyleTxt += 'height:' + sldrHght + ';';
	sldrStyleTxt += 'overflow:visible;vertical-align:middle;padding:0;';

	/**	Create the working elements and clone those that need it later	**/
	var cloneImg = document.createElement('img');

	var sldr = document.createElement('div');

	var br = document.createElement('br');
	/**	Set the appropriate attributes on the new elements	**/

	sldr.setAttribute('id', 'slider');

	if (isNS6) {sldr.setAttribute('style', sldrStyleTxt);}
	if (isIE5) {sldr.style.cssText = sldrStyleTxt;}


	/**	Loop through and create the individual img's and span's	**/
	for (i = 0; i < imgs.length; i++) {
		var cldImg = cloneImg.cloneNode(false);
		cldImg.setAttribute('id', i);
		cldImg.setAttribute('border', '0');
		cldImg.setAttribute('width', thImgWdth);
		cldImg.setAttribute('height', thImgHght);
		cldImg.setAttribute('hspace', '0');
		cldImg.setAttribute('vspace', '0');
		cldImg.src = imgs[i].src;
		cldImg.onclick = showPic;
		cldImg.onmouseover = chgCursor;
		cldImg.onmouseout = clearDiv;
		sldr.appendChild(cldImg);
		if (direction=="vertical"){sldr.appendChild(br)}
		}
	thFrm.appendChild(sldr);
	}

/*********************************************
**	Event handler for clicking on thumbnail	**
*********************************************/

var description = 'content_3_slideshow_1_desc';
// this will change according to the page

function showPic (evt) {
	intOn	= true;
	evt = (evt) ? evt : ((window.event) ? window.event : false);
	if (evt) {
		var elem = (evt.target) ? evt.target : evt.srcElement;
		if (elem) {
			var index = parseInt(elem.getAttribute("id"));

//			document.getElementById('picture').src = imgDir + imgTxt[index] + imgExt;
//			document.getElementById('picture').src = imgDir + imgLarge[index];
			document.getElementById('picture').src = imgDir + imageData[index].large;
			document.getElementById('brandcontent').innerHTML = imageData[index].brand;

//			if (imgText[index] != "") {
			if (imageData[index].description != "") {
//				document.getElementById('picDesc').innerHTML = imgDesc[index];
//				document.getElementById('picDesc').innerHTML = imgText[index];
// this is a problem				document.getElementById('picDesc').innerHTML = imageData[index].description;
				document.getElementById('brandcontent').innerHTML = imageData[index].brand;
			}
		}
	}
	intOn	= false;
}

function chgCursor (evt) {
	evt = (evt) ? evt : ((window.event) ? window.event : false);
	if (evt) {
		var elem = (evt.target) ? evt.target : evt.srcElement;
		if (elem) {
			if (evt.type == "mouseover") { 
				elem.style.cursor = "pointer"; 
				var tooltip = document.getElementById('image_tool_tip');
				tooltip.style.position = "absolute";
				tooltip.style.display = "block";
				tooltip.style.visibility = "visible";
//				tooltip.style.border = "solid 1px red";
//	var top = yMousePos + 'px';
var top = '475px';
//	var left = xMousePos - 400;
var left = 232;
left = left + 'px';
				tooltip.style.top = top;
				tooltip.style.left = left;

			var index = parseInt(elem.getAttribute("id"));
			tooltip.innerHTML = imageData[index].brand;
			}
			else if (evt.type == "mouseout") { 
				elem.style.cursor = "default";
				}
			}
		}
	}

function clearDiv (evt) {
	evt = (evt) ? evt : ((window.event) ? window.event : false);
	if (evt) {
		var elem = (evt.target) ? evt.target : evt.srcElement;
		if (elem) {	
			if (evt.type == "mouseout") {
				elem.style.cursor = "default";
				var tooltip = document.getElementById('image_tool_tip');
				tooltip.style.visibility = "hidden";
			//	tooltip.style.height = "0";
				tooltip.innerHTML = "";
				}
			}
		}
	}


/*********************************
**	Set this as an interval to	**
**	scroll the thumbnail images	**
**	to the right within the DIV	**
*********************************/

function scrollRgt () {
	var curPos = getSldrPos();
	if ( curPos >= endPos ) {
		clearInterval(intOn);
		intOn = "";return;
		}
	curPos += scrSpd;
	assignSldrPos(curPos);
	//assignText(curPos,'curPos');
	 }

function scrollLft () {
	var curPos = getSldrPos();
	if ( curPos <= endPos ) {
		clearInterval(intOn);
		intOn = "";return;
		}
	curPos -= scrSpd;
	assignSldrPos(curPos);
	//assignText(curPos,'curPos');
	}


function scrollUp () {
	var curPos = getSldrPos();
	if ( curPos <= endPos ) {
		clearInterval(intOn);
		intOn = ""; return;
	}
	curPos -= scrSpd;
	assignSldrPos( curPos );
	//assignText(curPos,'curPos');
}

function scrollDwn () {
	var curPos = getSldrPos();
	if ( curPos >= endPos ) {
		clearInterval( intOn );
		intOn = "";return;
	}
	curPos += scrSpd;
	assignSldrPos( curPos );
	//assignText(curPos,'curPos');
}


/*********************************
**	Set this as an interval to	**
**	scroll the thumbnail images	**
**	to the left within the DIV	**
*********************************/

function getSldrPos () {
	var Pos;
	if (isNS6) {
		if ( direction == "vertical" ) {
			Pos = parseInt(document.getElementById('slider').style.top)
		} else { Pos = parseInt(document.getElementById('slider').style.left) }
	}
	else if (isIE5) {
		if ( direction == "vertical" ) {
			Pos = document.getElementById('slider').style.posTop;
		} else { Pos = document.getElementById('slider').style.posLeft }
	}
	return Pos;
	}

function assignSldrPos (Pos) {
	if (isNS6) {
		if ( direction == "vertical" ) {
			document.getElementById('slider').style.top = Pos + "px"
		} else { document.getElementById('slider').style.left = Pos + "px" }
	}
	else if (isIE5) {
		if ( direction == "vertical" ) {
			document.getElementById('slider').style.posTop = Pos
		} else { document.getElementById('slider').style.posLeft = Pos;}
	}
	}

/*********************************
**	Link this function and pass	**
**	it either 'right' or 'left'	**
*********************************/
function slideIt (way) {
	if ( intOn ) { return; }
	if ( direction == "vertical" ) { veryEnd = -1*(imgs.length*thImgHght) }
	else { veryEnd = -1*(imgs.length*thImgWdth) }
	
	var pos	= getSldrPos();
	if ( way == "left" ) {
		var nextPos = pos - sldrWdth;
		var nextEnd	= nextPos - sldrWdth;
		if ( nextEnd > veryEnd ) {endPos = nextPos}
		else {endPos = pos - (sldrWdth - (veryEnd - nextEnd))}
		//assignText(nextPos,'nextPos');
		intOn	= setInterval( "scrollLft()", 1 );
		}
	if ( way == "right" ) {
		var nextPos = pos + sldrWdth;
		if ( nextPos < 0 ) {endPos = nextPos}
		else {endPos = pos + (sldrWdth - nextPos)}
		//assignText(nextPos,'nextPos');
		intOn = setInterval( "scrollRgt()", 1 );
		}
	if ( way == "down" ) {
		var nextPos = pos + sldrHght;
		if ( nextPos < 0 ) { endPos = nextPos}
		else { endPos = pos + ( sldrHght - nextPos )}
		//assignText(nextPos,'nextPos');
		intOn = setInterval( "scrollDwn()", 1 );
	}
	if ( way == "up" ) {
		var nextPos = pos - sldrHght;
		var nextEnd = nextPos - sldrHght;
		if ( nextPos > veryEnd ) { endPos = nextPos}
		else { endPos = pos - ( sldrHght - ( veryEnd - nextEnd ) )}
		//assignText(nextPos,'nextPos');
		intOn = setInterval( "scrollUp()", 1 );
	}
}


/**********/
// slideToBrand 

function slideToBrand (brandNum) {
	var brandPos = brandData[brandNum].brandPos;

	var pos = getSldrPos();
	if (pos <  brandPos) {
		// slide right
		var nextPos = brandPos;
//		if ( nextPos < 0 ) {endPos = nextPos}
//		else {endPos = pos + (sldrWdth - nextPos)}
		endPos = nextPos;
// alert("pos: " + pos + "  nextPos: " + nextPos + "  endPos: " + endPos);
		intOn = setInterval( "scrollRgt()", 1 );
	} else {
		// slide left
		var nextPos = brandPos;
//		if ( nextPos < 0 ) {endPos = nextPos}
//		else {endPos = pos + (sldrWdth - nextPos)}
		endPos = nextPos;
		intOn = setInterval( "scrollLft()", 1 );
	}
	document.getElementById('picture').src = imgDir + brandData[brandNum].largeImageName;
	document.getElementById('brandcontent').innerHTML = brandData[brandNum].brandName;
}


/****************************/
// get mouse position
// Set Netscape up to run the "captureMousePosition" function whenever
// the mouse is moved. For Internet Explorer and Netscape 6, you can capture
// the movement a little easier.
if (document.layers) { // Netscape
    document.captureEvents(Event.MOUSEMOVE);
    document.onmousemove = captureMousePosition;
} else if (document.all) { // Internet Explorer
    document.onmousemove = captureMousePosition;
} else if (document.getElementById) { // Netcsape 6
    document.onmousemove = captureMousePosition;
}
// Global variables
xMousePos = 0; // Horizontal position of the mouse on the screen
yMousePos = 0; // Vertical position of the mouse on the screen
xMousePosMax = 0; // Width of the page
yMousePosMax = 0; // Height of the page

function captureMousePosition(e) {
    if (document.layers) {
        // When the page scrolls in Netscape, the event's mouse position
        // reflects the absolute position on the screen. innerHight/Width
        // is the position from the top/left of the screen that the user is
        // looking at. pageX/YOffset is the amount that the user has
        // scrolled into the page. So the values will be in relation to
        // each other as the total offsets into the page, no matter if
        // the user has scrolled or not.
        xMousePos = e.pageX;
        yMousePos = e.pageY;
        xMousePosMax = window.innerWidth+window.pageXOffset;
        yMousePosMax = window.innerHeight+window.pageYOffset;
    } else if (document.all) {
        // When the page scrolls in IE, the event's mouse position
        // reflects the position from the top/left of the screen the
        // user is looking at. scrollLeft/Top is the amount the user
        // has scrolled into the page. clientWidth/Height is the height/
        // width of the current page the user is looking at. So, to be
        // consistent with Netscape (above), add the scroll offsets to
        // both so we end up with an absolute value on the page, no
        // matter if the user has scrolled or not.
        xMousePos = window.event.x+document.body.scrollLeft;
        yMousePos = window.event.y+document.body.scrollTop;
        xMousePosMax = document.body.clientWidth+document.body.scrollLeft;
        yMousePosMax = document.body.clientHeight+document.body.scrollTop;
    } else if (document.getElementById) {
        // Netscape 6 behaves the same as Netscape 4 in this regard
        xMousePos = e.pageX;
        yMousePos = e.pageY;
        xMousePosMax = window.innerWidth+window.pageXOffset;
        yMousePosMax = window.innerHeight+window.pageYOffset;
    }
}


/*******************/
	
window.onload = initPage;  
function initPage() {
	createLayer();
//	 document.getElementById('picture').src = imgDir + imgLarge[0];
	 document.getElementById('picture').src = imgDir + imageData[0].large;
	 document.getElementById('brandcontent').innerHTML = imageData[0].brand;

//	if (imgText[0] != "") {
	if (imageData[0].description != "") {
//		document.getElementById('picDesc').innerHTML = imgText[0];
		document.getElementById('picDesc').innerHTML = imageData[0].description;
	}
}