/*     Global Variables     */

var browser = navigator.userAgent.toLowerCase();
var platform = window.navigator.platform.toLowerCase();
var browserVersion;

var ieVersion;
var areYouSliding = false;
var eTempButton, eTempDropDown;




// Set the 'position' to the index of the item you want to add in with the first fade.
var position = 1;

// Set the default 'invisible' opacity value.
var opacity = 0;



/*     Constructors     */

// Constructor to create structure to hold info about image and related url and alt tag.
function imageData(name, url, alt, title) {

	this.length = 5;
	this.name = name;
	this.url = url;
	this.alt = alt;
	this.title = title;
	
}



/*     Arrays     */

var supportedBrowsers = new Array ('msie', 'safari', 'firefox');

// Array of images, url and alt tags.
imageArray = new Array();

imageArray[imageArray.length] = new imageData('fade_banners/3666_colorcopies_185_185.jpg','/sbd/cre/programs/copyandprint/special_offers.html?show=1','39¢ color copies when you submit online.','Learn more.');

imageArray[imageArray.length] = new imageData('fade_banners/3666_holiday_products_185_185.jpg','/sbd/cre/programs/copyandprint/custom_holiday_products.html','Get your custom cards and calendars here!','Learn more.'); 

imageArray[imageArray.length] = new imageData('fade_banners/3666_ups_shipping_185_185_cp.jpg','http://www.staples-locator.com/','UPS shipping at every Staples store.','Find a store.');

/*     Runtime     */

document.write('<link href="styles/hidden.css" type="text/css" rel="stylesheet" media="all">');

for (var x = 0; x < supportedBrowsers.length; x++) {

	var eObj = new RegExp(supportedBrowsers[x]);
	var result = eObj.exec(browser);
	
	if (result) {

		if (supportedBrowsers[x] == 'msie') {
			browserVersion = 0;
			
			if (browser.search('msie 5.5') > -1) {
				browserVersion = '5_5';
			} else if (browser.search('msie 6') > -1) {
				browserVersion = '6';
			} else if (browser.search('msie 7') > -1) {
				browserVersion = '7';
			}
			
			if (browserVersion > 0) {
				document.write('<link href="styles/ie_' + browserVersion + '.css" type="text/css" rel="stylesheet" media="all" />');
			}
		}
		
		if (supportedBrowsers[x] == 'firefox') {
		
			if (browser.search('firefox/3') > -1) {
				browserVersion = 3;
			} else {
				browserVersion = 2;
			}
		}
		
		browser = supportedBrowsers[x];
	}
}

function init() {
	setInitialNavState();
	setNavFunctions();
	setOrderOnline();
	setTimeout(doThis, 6000);
}

function setInitialNavState () {

	var navUl = document.getElementById('navigation');
	
	var aList = navUl.getElementsByTagName('A');
	
	for (var x = 0; x < aList.length; x++) {
	
		var targetUl = aList[x].parentNode.parentNode;
		var targetA = aList[x];
		
		if (!targetUl.id) {
		
			targetLi = targetUl.parentNode;
			targetA = targetLi.getElementsByTagName('A')[0];
		
		}
		
		if (aList[x].href == window.location) {
			targetA.hasAttribute ? targetA.setAttribute('class', 'selected') : targetA.setAttribute('className', 'selected');
		}
			
	}
}

function setNavFunctions () {

	var navigation = document.getElementById('navigation');
		
	for (var i = 0; i < navigation.childNodes.length; i++) {
		
		if (navigation.childNodes[i].tagName && navigation.childNodes[i].tagName.toLowerCase() == 'li') {
			
			navigation.childNodes[i].getElementsByTagName('a')[0].onmouseover = function() {
				
				if (this.parentNode.getElementsByTagName('ul').length) {
					this.parentNode.getElementsByTagName('ul')[0].style.display = 'block';
					this.parentNode.getElementsByTagName('ul')[0].onmouseover = function() {
						this.style.display = 'block';
					}
					this.parentNode.getElementsByTagName('ul')[0].onmouseout = function() {
						this.style.display = '';
					}
				}
				
				return false;
				
			}
			
			navigation.childNodes[i].getElementsByTagName('a')[0].onmouseout = function() {
			
				if (this.parentNode.getElementsByTagName('ul').length) {
					this.parentNode.getElementsByTagName('ul')[0].style.display = '';
				}
				
				return false;
				
			}
		}
		
	}
	
	return false;

}





function setOrderOnline() {

	var divList = document.getElementsByTagName('DIV');
	
	for (var x = 0; x < divList.length; x++) {
	
		if (divList[x].className && divList[x].className == 'order_online') {
			addListener(divList[x], 'mouseover', showOrderOptions, false);
		}
	}
	
	var pList = document.getElementsByTagName('P');
	
	for (var x = 0; x < pList.length; x++) {
	
		if (pList[x].className && pList[x].className == 'mainButton') {
			addListener(pList[x], 'click', stopEvents, false);
		}
	}
}


function stopEvents(event) {
	event.stopPropagation ? event.stopPropagation() : window.event.cancelBubble = true;
	event.preventDefault ? event.preventDefault() : window.event.returnValue = false;
}


function showOrderOptions (event) {

	setEventTargets(event);
	
	if (!areYouSliding) {
	
		var tempObj = eTarget;
		
		while (tempObj.nodeName != 'DIV') {
			tempObj = tempObj.parentNode;
		}
		
		
		removeListener(tempObj, 'mouseover', showOrderOptions, false);
		addListener(tempObj, 'mouseout', hideOrderOptions, false)
		
		// does an element already have an ID of tempButton?
		
		if (document.getElementById('tempButton')) {
		
			// if an element w/an ID of tempButton exists, is it our tempObj?
	
			if (tempObj != eTempButton) {
				eTempButton.removeAttribute('id');
				addListener(eTempButton, 'mouseover', showOrderOptions, false)
				eTempButton = tempObj;
			}
		} 
		
		eTempButton = tempObj;
		eTempButton.setAttribute('id', 'tempButton');
		
		var tempDrop = eTempButton.getElementsByTagName('DIV')[0];
		
		if (document.getElementById('tempDropDown')) {
		
			if (tempDrop != eTempDropDown) {
			
			
				if (!document.getElementById('totalCallouts')) {
					eTempDropDown.removeAttribute('id');
					removeListener(eTempDropDown, 'mouseout', hideOrderOptions, false);
					eTempDropDown.hasAttribute ? eTempDropDown.removeAttribute('style') : eTempDropDown.style.display = 'none';
					
				} else {
					var tempDiv = document.getElementById('tempDropDown');
					var tempParent = tempDiv.parentNode;
					tempParent.removeChild(tempDiv);
				}
			}
		}
		
		if (document.getElementById('totalCallouts')) {
			var tempDiv = tempDrop.cloneNode(true);
			document.body.appendChild(tempDiv);
			tempDrop = tempDiv;
		}
		
		
		eTempDropDown = tempDrop;
		eTempDropDown.setAttribute('id', 'tempDropDown');
		eTempDropDown.hasAttribute ? eTempDropDown.setAttribute('style', 'display: block') : eTempDropDown.style.display = 'block';
		
		if (document.getElementById('totalCallouts')) {
			pos = findPos(eTempButton);
			var leftPosition = parseInt(pos[0]);
			
			if (browser == 'msie') {
				leftPosition = leftPosition + 4;
			} else if (browser == 'firefox') {
				if (platform == 'win32') {
				
					if (browserVersion > 2) {
						leftPosition = leftPosition + 1;
					} else {
						leftPosition = leftPosition + 4;
					}
				
				} else {
					leftPosition = leftPosition + 1;
				}
			
			} else if (browser == 'safari') {
				leftPosition = leftPosition + 1;
			}
			
			eTempDropDown.style.left = leftPosition + 'px';
			eTempDropDown.style.top = (pos[1] + 15) + 'px';
			eTempDropDown.style.position = 'absolute';
		}
		
		
		addListener(eTempDropDown, 'mouseout', hideOrderOptions, false);
	}
}



function findRelationship(child, ancestor) {

	var isChild = false;
	
	var childList = ancestor.getElementsByTagName(child.nodeName);
	
	if (childList.length > 0) {
		
		for (var x = 0; x < childList.length; x++) {
			
			if (childList[x] == child) {
				isChild = true;
				break;
			}
		}
	}
	
	return isChild;
	
}



function hideOrderOptions (event) {

	setEventTargets(event);
	var passed = false;
	
	if (eRelatedTarget.id) {
		if (eRelatedTarget.id == eTempButton.id || eRelatedTarget.id == eTempDropDown.id) {
			passed = true;
		}
	}
	
	
	var test = findRelationship(eRelatedTarget, eTempButton);

	if (!test) {
		test = findRelationship(eRelatedTarget, eTempDropDown);
	}
	
	if (test) {
		passed = true;
	}
	
	
	if (!passed) {
	
		addListener(eTempButton, 'mouseover', showOrderOptions, false);
		removeListener(eTempButton, 'mouseout', hideOrderOptions, false);
		eTempButton.removeAttribute('id');

		if (document.getElementById('totalCallouts')) {
		
			document.body.removeChild(document.getElementById('tempDropDown'));

		} else {
		
			eTempDropDown.hasAttribute ? eTempDropDown.removeAttribute('style') : eTempDropDown.style.display = 'none';
			eTempDropDown.removeAttribute('id');
			
			removeListener(eTempDropDown, 'mouseout', hideOrderOptions, false);
		
		}
	}
}



// This function creates the replacing A and IMG tags and populates it with next image from array.
function doThis() {

	var opacityValue = opacity / 100;

	eA = document.createElement('A');
	eA.setAttribute('id','frontAnchor');
	eA.setAttribute('href',imageArray[position].url);
	eA.setAttribute('title',imageArray[position].title);
	
	eImg = document.createElement('IMG');
	eImg.setAttribute('src',imageArray[position].name);
	eImg.setAttribute('width','185');
	eImg.setAttribute('height','185');
	eImg.setAttribute('border','0');
	eImg.setAttribute('alt',imageArray[position].alt);
	eImg.style.cssText = 'filter: alpha(opacity=' + opacity + ');';
	eImg.style.KHTMLOpacity = opacityValue;
	eImg.style.MozOpacity = opacityValue;
	eImg.style.opacity = opacityValue;
	targetDiv = document.getElementById('sidebar');
	eA.appendChild(eImg);
	targetDiv.insertBefore(eA, targetDiv.firstChild);
	
	thenThis();
}

// This function changes the opacity until image is fully visible, then removes previous image.
function thenThis() {

	if (opacity < 100) {
	
		opacity += 10;
		var opacityValue = opacity / 100;
		targetA = document.getElementById('frontAnchor');
		targetA.firstChild.style.cssText = 'filter: alpha(opacity=' + opacity + ');';
		targetA.firstChild.style.KTHMLOpacity = opacityValue;
		targetA.firstChild.style.MozOpacity = opacityValue;
		targetA.firstChild.style.opacity = opacityValue;
		setTimeout(thenThis, 50);
		
	} else {
	
		targetDiv = document.getElementById('sidebar');
		targetA = document.getElementById('backAnchor');
		targetDiv.removeChild(targetA);
		
		targetA = document.getElementById('frontAnchor');
		targetA.setAttribute('id','backAnchor');
		opacity = 0;
		position < (imageArray.length - 1) ? position++ : position = 0;
		setTimeout(doThis, 6000);
	}
}


function findPos(obj) {
	var curleft = curtop = 0;
	if (obj.offsetParent) {
	do {
			curleft += obj.offsetLeft;
			curtop += obj.offsetTop;
		} while (obj = obj.offsetParent);
	}
	return [curleft,curtop];
}

function setEventTargets(event) {
	event.target ? eTarget = event.target : eTarget = event.srcElement;
	event.relatedTarget ? eRelatedTarget = event.relatedTarget : eRelatedTarget = event.toElement;
	eTargetParent = eTarget.parentNode;
}

function addListener(obj, triggerEvent, callFunction, capture) {
	obj.addEventListener ? obj.addEventListener(triggerEvent, callFunction, capture) : obj.attachEvent('on' + triggerEvent, callFunction);
}

function removeListener(obj, triggerEvent, callFunction, capture) {
	obj.removeEventListener ? obj.removeEventListener(triggerEvent, callFunction, capture) : obj.detachEvent('on' + triggerEvent, callFunction);
}

function cleanImage(imgString, ext) {
	var tempImg = imgString.split('/');
	tempImg = tempImg[tempImg.length - 1];
	tempImg = tempImg.split(ext)[0];
	return tempImg;
}