/** 
 * Photo Scrolling library for the Theatrical Reality, Inc. website
 * Joshua Walter, author
 */

// set up the onload event to start the show
if (evntLsnr) {
	window.addEventListener('load', scrollerSetup, false);
} else {
	window.attachEvent('onload', scrollerSetup);
}

// initialize global object variables
var photoBox;
var photo;
var prodShowFX;

/*************************
 * First functions control the product scroller
 */

function scrollerSetup() {
// set up the preview dialog by collecting all of the photo elements into an array
	photoBox = document.getElementById('photo');
	photo = photoBox.firstChild;
	var i = 0;
	photoArray = new Array;
	do {
		if ((photo.nodeName == 'DIV') && (photo.id != 'prodShowFX')) {
			photoArray[i] = photo;
			i++;
			/**
			 * As loaded, each photo element includes a link so that if javascript is disabled at least
			 * the first few photos will be visible and link to the product detail pages.  This next
			 * line strips those links because they won't be needed if javascript is enabled.
			 */
			photo.innerHTML = photo.innerHTML.replace(/(<a([^>]+)>)/ig,'');
		}
		photo = photo.nextSibling;
	} while (photo);
// preload the images that will be needed for the product info dialog
	dialogFrame = new Image;		dialogFrame.src = 'gfx/dlgFrame.png';
	btnHover = new Image;			btnHover.src = 'gfx/btnHover.png';
	btnClick = new Image;			btnClick.src = 'gfx/btnClick.png';
	btnNormal = new Image;			btnNormal.src = 'gfx/btnNormal.png';
// reuse the evntLsnr variable from the common.js library to set up the product preview events
	closeButton = document.getElementById('button');
	if (evntLsnr) {
		photoBox.addEventListener('click', showProdShowcase, false);
		closeButton.addEventListener('mouseover', showHoverButton, false);
		closeButton.addEventListener('mouseout', showNormalButton, false);
		closeButton.addEventListener('mousedown', showDepressedButton, false);
		closeButton.addEventListener('click', hideProdShowcase, false);
	} else {
		photoBox.attachEvent('onclick', showProdShowcase);
		closeButton.attachEvent('onmouseover', showHoverButton);
		closeButton.attachEvent('onmouseout', showNormalButton);
		closeButton.attachEvent('onmousedown', showDepressedButton);
		closeButton.attachEvent('onclick', hideProdShowcase);
	}
// all events assigned, now it's safe to start the scroller
	scrollIterations = 0;
	scrollStepper = setInterval('scrollPhotos()', 30);
}

function scrollPhotos() {
// move each photo element down two pixels at a time
	for (var i = 0; i < photoArray.length; i++) {
		photoArray[i].style.top = (parseInt(photoArray[i].style.top) - 2) + 'px';
	}
// increment the scroll iteration counter; if it's over twenty, check for wraparounds and reset it
	scrollIterations++;
	if (scrollIterations > 20) {
		wrapTopPhoto();
		scrollIterations = 0;
	}
}

function wrapTopPhoto() {
// see if there's a wrappable element; quit if not
	wrapPhoto = -1;
	for (var i = 0; i < photoArray.length; i++) {
		if ((parseFloat(photoArray[i].style.top) + parseFloat(photoArray[i].style.height)) < 0) {
			wrapPhoto = i;
			i = photoArray.length;
		}
	}
	if (wrapPhoto < 0) return;
// find the current lowest element (highest 'top' value)
	bottomPhoto = 0;
	for (i = 0; i < photoArray.length; i++) {
		if (parseInt(photoArray[i].style.top) > parseInt(photoArray[bottomPhoto].style.top)) {
			bottomPhoto = i;
		}
	}
// set the top of the wrappable photo to 5px below the bottom of the lowest photo
	photoArray[wrapPhoto].style.top = (parseInt(photoArray[bottomPhoto].style.top) + parseInt(photoArray[bottomPhoto].style.height) + 5) + 'px';
}

/*************************
 * Next functions control the product preview feature
 */

function showProdShowcase(e) {
// stop the scroller while the product preview dialog is visible
	clearInterval(scrollStepper);
// catch the id of the clicked photo element (needed for product preview info)
	var evnt = (!e) ? window.event : e;
	tgt = (window.event) ? evnt.srcElement : evnt.target;
	while (tgt.nodeName != 'DIV') {
		tgt = tgt.parentNode;
	}
	partNum = tgt.id;
	prodShowFX = document.getElementById('prodShowFX');
	prodShowFX.style.display = 'block';
/**
 * This next section checks whether a photo is partially out of frame when it's clicked.  The
 * idea is to limit the new bounding box to the dimensions of the photo scrollbar, so it doesn't
 * look like it's overhanging.
 */
	var offsetMin = 173;
	var offsetMax = 662;
	var placeTop = parseInt(tgt.style.top) + offsetMin;
	var placeHeight = parseInt(tgt.style.height);
	offsetTop = (placeTop < offsetMin) ? offsetMin - placeTop : 0;
/**
 * This next line is the confusing one:  I wanna make sure I document this for when I inevitably
 * need to troubleshoot it.  The assignment uses the ternary operator twice.  The logic is thus:
 * TO DETERMINE the value of offsetHeight:
 * 	is placeTop less than offsetMin (has is scrolled past the top)?
 * 		if so, offsetHeight is equal to offsetTop
 * 		if not, then...
 * 			is the sum of placeTop and placeHeight greater than offsetMax (has it not yet scrolled fully into view)?
 * 				if so, offsetHeight equals placeTop plus placeHeight (the bottom edge) minus offsetMax
 * 				if not, offsetHeight equals zero.
 */
	offsetHeight = (placeTop < offsetMin) ? offsetTop : ((placeTop + placeHeight > offsetMax) ? placeTop + placeHeight - offsetMax : 0);
// set the starting position of the frame blowup box
	leftI = 7;
	widthI = 80;
	topI = placeTop + offsetTop;
	heightI = placeHeight - offsetHeight;
	prodShowFX.style.top = topI + 'px';
	prodShowFX.style.height = heightI + 'px';
// initialize the variables for the blowup effect, then start it
	frameCounter = 25;
	incTime = 5;
	leftF = 150;
	widthF = 626;
	topF = 185;
	heightF = 157;
	blowUp();
}

function blowUp() {
// increment the box position 1/[frameCounter]th of the way to the final position
	leftI += (leftF - leftI) / frameCounter;
	widthI += (widthF - widthI) / frameCounter;
	topI += (topF - topI) / frameCounter;
	heightI += (heightF - heightI) / frameCounter;
	prodShowFX.style.left = parseInt(leftI) + 'px';
	prodShowFX.style.width = parseInt(widthI) + 'px';
	prodShowFX.style.top = parseInt(topI) + 'px';
	prodShowFX.style.height = parseInt(heightI) + 'px';
	frameCounter--;
// if the box has reached its final position, disappear it and show the product preview dialog
	if (frameCounter < 1) {
   	prodShowFX.style.display = 'none';
	// reset the box position for the next call
		prodShowFX.style.left = '7px';
		prodShowFX.style.width = '80px';
		prodShowFX.style.top = '176px';
		prodShowFX.style.height = '80px';
	// call the AJAX routine to fill in the product information
		fillProdDetails();
   } else {
		setTimeout('blowUp()', incTime);
	}
}

function fillProdDetails() {
// set the AJAX parameters
	try {
		var prodRequest = new XMLHttpRequest();
	} catch (e) {
		try {
			prodRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			prodRequest = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	prodRequest.onreadystatechange = function() {
		if (prodRequest.readyState == 4 && prodRequest.status == 200) {
	  		try {
	  			document.getElementById('prodShowDetail').innerHTML = prodRequest.responseText;
		  	} catch (e) {
		  		document.getElementById('prodShowDetail').innerHTML = ("Error on Ajax return call : " + e.description);
		  	}
		}
	}
// execute the AJAX request on a data page
	prodRequest.open('GET', 'libPHP/prodDialogLoader.php?partNumber=' + partNum);
	prodRequest.send(null);
// now that it has data, show it
	document.getElementById('prodShowcase').style.display = 'block';
}

function showHoverButton() {closeButton.src = btnHover.src}

function showNormalButton() {closeButton.src = btnNormal.src}

function showDepressedButton() {closeButton.src = btnClick.src}

function hideProdShowcase() {
	document.getElementById('prodShowcase').style.display = 'none';
// resume the photo scrolling
	scrollStepper = setInterval('scrollPhotos()', 30);
}