/*     Global Variables     */


var sliderIndex, moveSpeed, sliderDiv, sliderKids, slideTimes, moduleWidth;
var fadeDelay = 3500;
var fadeSpeed = 60;
var opacity = 0;
var fadePosition = 1;
var endCount = 5;
var count = 0;
var flvToPlay;



/*     Constructors     */

function imageData(name, alt) {
	this.length = 3;
	this.name = name;
	this.alt = alt;
	
}



/*     Arrays     */


// Array of image names and alt tags.
var fadeImageArray = new Array
fadeImageArray[0] = new imageData('images/header_rotate_1.jpg','OXO Stapler');
fadeImageArray[1] = new imageData('images/header_rotate_2.jpg','OXO Tacks');
fadeImageArray[2] = new imageData('images/header_rotate_3.jpg','OXO Hole punch');


var sNumbers = new Array
sNumbers[sNumbers.length] = new Array('s0278303', 's0288465','s0288856');
sNumbers[sNumbers.length] = new Array('s0278298', 's0288464','s0288856');
sNumbers[sNumbers.length] = new Array('s0278274', 's0288447');
sNumbers[sNumbers.length] = new Array('s0278269', 's0288461', 's0288474', 's0288475');
sNumbers[sNumbers.length] = new Array('s0278353', 's0288463', 's0288462');
sNumbers[sNumbers.length] = new Array('s0278348', 's0273081');
sNumbers[sNumbers.length] = new Array('s0278358', 's0288469', 's0288470');
sNumbers[sNumbers.length] = new Array('s0278374', 's0288476', 's0288477');
sNumbers[sNumbers.length] = new Array('s0278363', 's0288467', 's0288468');
sNumbers[sNumbers.length] = new Array('s0288489', 's0288488');
sNumbers[sNumbers.length] = new Array('s0278378', 's0274329', 's0288494');
sNumbers[sNumbers.length] = new Array('s0278284', 's0278286');
sNumbers[sNumbers.length] = new Array('s0288484', 's0288483');
sNumbers[sNumbers.length] = new Array('s0288491', 's0288490');
sNumbers[sNumbers.length] = new Array('s0288490', 's0288491');
sNumbers[sNumbers.length] = new Array('s0278410', 's0278411');
sNumbers[sNumbers.length] = new Array('s0278403', 's0278404');
sNumbers[sNumbers.length] = new Array('s0278394', 's0288454');
sNumbers[sNumbers.length] = new Array('s0278399', 's0288460');
sNumbers[sNumbers.length] = new Array('s0278421', 's0288493');
sNumbers[sNumbers.length] = new Array('s0278416', 's0288480');
sNumbers[sNumbers.length] = new Array('s0278425', 's0288492');
sNumbers[sNumbers.length] = new Array('s0278384', 's0264309', 's0278383');
sNumbers[sNumbers.length] = new Array('s0278389', 's0278388');
sNumbers[sNumbers.length] = new Array('s0278430', 's0278431', 's0288486');
sNumbers[sNumbers.length] = new Array('s0278445', 's0288496', 's0288495');
sNumbers[sNumbers.length] = new Array('s0280931', 's0288448');
sNumbers[sNumbers.length] = new Array('s0280943', 's0288487');
sNumbers[sNumbers.length] = new Array('s0280947', 's0288455');
sNumbers[sNumbers.length] = new Array('s0280952', 's0288451');
sNumbers[sNumbers.length] = new Array('s0280955', 's0288478', 's0288479');
sNumbers[sNumbers.length] = new Array('s0280957', 's0288450', 's0288471');
sNumbers[sNumbers.length] = new Array('s0280963', 's0288449');
sNumbers[sNumbers.length] = new Array('s0288472', 's0280967', 's0288473');



// this array must match the div ids and the variable stored in the URL string
var navArray = new Array('tools', 'pins', 'pens');


/* Runtime */


var itemToShow = navArray[0];

var pattern = /\?/;
var result = pattern.exec(window.location.toString());

if (result) {
	
	var passedVariable = window.location.toString().split('?')[1];
	var pattern2 = new RegExp('show=');
	var result2 = pattern2.exec(passedVariable);
	
	if (result2) {
		
		passedVariable = passedVariable.split('show=')[1];
		
		var pattern3 = /\&/;
		var result3 = pattern3.exec(passedVariable)
		
		if (result3) {
			passedVariable = passedVariable.split('&')[0];
		}
		
		
		var ok = false;
		
		for (var x = 0; x < navArray.length; x++) {
		
			if (passedVariable == navArray[x]) {
				
				if (passedVariable != itemToShow) {
					itemToShow = passedVariable;
				}
			}
		}
	}
}	





/*     Functions     */


function setDisplayOptions() {
	
	for (var x = 0; x < navArray.length; x++) {
	
		var tempDiv = document.getElementById('product_' + navArray[x]);
		var tempNav = document.getElementById('nav_' + navArray[x]);
		
		if (navArray[x] == itemToShow) {
			tempNav.setAttribute('src', tempNav.getAttribute('src').replace('off.gif', 'selected.gif'));
			tempDiv.hasAttribute ? tempDiv.removeAttribute('class') : tempDiv.removeAttribute('className');
		}
	}
}	



function init() {
	var eProductsInner = document.getElementById('productsInner');
	eProductsInner.hasAttribute ? eProductsInner.setAttribute('class', 'collapsed') : eProductsInner.setAttribute('className', 'collapsed');

	setDisplayOptions();
	initializeSlider();
	
	addListener(document.getElementById('arrow_right'), 'mousedown', sliderLogic, false);
	addListener(document.getElementById('arrow_right'), 'mouseover', changeArrow, false);
	addListener(document.getElementById('arrow_right'), 'mouseout', changeArrow, false);

	addListener(document.getElementById('arrow_left'), 'mousedown', sliderLogic, false);
	addListener(document.getElementById('arrow_left'), 'mouseover', changeArrow, false);
	addListener(document.getElementById('arrow_left'), 'mouseout', changeArrow, false);
	
	addListener(document.getElementById('pageCount'), 'mousedown', sliderLogic, false);
	addListener(document.getElementById('pageCount'), 'mouseover', swapImageLogic, false);
	addListener(document.getElementById('pageCount'), 'mouseout', swapImageLogic, false);
	
	addListener(document.getElementById('expandTab'), 'mousedown', showAllSliderElements, false);
	addListener(document.getElementById('expandTab'), 'mouseover', swapImageLogic, false);
	addListener(document.getElementById('expandTab'), 'mouseout', swapImageLogic, false);

	addListener(document.getElementById('nav'), 'mouseover', swapImageLogic, false);
	addListener(document.getElementById('nav'), 'mouseout', swapImageLogic, false);
		
	var pList = document.getElementById('product_' + itemToShow).getElementsByTagName('P');
	
	for (var x = 0; x < pList.length; x++) {
	
		if (pList[x].className && pList[x].className == 'watchVideo') {
			
			addListener(pList[x], 'click', playMovie, false);
		
		}
	
	
	
	}
	

	for (var x = 0; x < document.images.length; x++) {
	
		if (document.images[x].getAttribute('src').match('button_learn_more')) {
			addListener(document.images[x], 'mouseover', swapImageLogic, false);
			addListener(document.images[x], 'mouseout', swapImageLogic, false);
		
		}
		
		if (document.images[x].getAttribute('src').match('button_buy_now')) {
			addListener(document.images[x], 'mouseover', swapImageLogic, false);
			addListener(document.images[x], 'mouseout', swapImageLogic, false);
		
		}
	}

	fadeImage();
	
}


function swapImageLogic(event) {

	setEventTargets(event);
	
	if (eTarget.nodeName == 'IMG') {
	
		if (!eTarget.className) {
			swapImage(eTarget, 'mouseover', event.type, true, 'off.gif', 'on.gif');
		}	
	}
}


function initializeSlider () {

	moveSpeed = 5;
	
	sliderDiv = document.getElementById('product_' + itemToShow);
	sliderKids = 0;
	moduleWidth = false;

	sliderIndex = 0;

	var divList = sliderDiv.getElementsByTagName('DIV');
	sliderKids = 0;
	moduleWidth = false;
	
	for (var x = 0; x < divList.length; x++) {
		if (divList[x].className && divList[x].className == 'productWrapper') {
		
			if (!moduleWidth) {
				moduleWidth = parseInt(divList[x].offsetWidth);
			}
			
			!sliderKids ? sliderKids = 1 : sliderKids++;
		}
	}
	
	slideTimes = parseInt(sliderKids)/4;
	
	if (slideTimes > 1) {
	
		if (!sliderDiv.style.width) {
			var newWidth = sliderKids * moduleWidth;
			
			if (sliderDiv.hasAttribute) {
				sliderDiv.setAttribute('style', 'width: ' + newWidth + 'px; position: relative; left: 0px;');
			} else {
				sliderDiv.style.width = newWidth + 'px';
				sliderDiv.style.marginLeft = '0px';
			
			}
		}
		
		setSliderPagination();
		
		var rightArrow = document.getElementById('arrow_left');
		
		rightArrow.setAttribute('src', rightArrow.getAttribute('src').replace('_on.gif', '_null.gif'));
		
		// remove right button
		
	}
}


function setSliderPagination (arg) {

	var ePageCount = document.getElementById('pageCount');
	
	while (ePageCount.firstChild) {
		ePageCount.removeChild(ePageCount.firstChild);
	}
	
	if (!arg) {
		for (var x = 0, y = 1; x < Math.ceil(slideTimes); x++, y++) {
		
			var newImg = document.createElement('IMG');
			var modifier = 'off';
			
			if (x == sliderIndex) {
				modifier = 'selected';
				newImg.hasAttribute ? newImg.setAttribute('class', 'selected') : newImg.setAttribute('className', 'selected') ;
			}
			
			newImg.setAttribute('src', 'images/button_page_' + y + '_' + modifier + '.gif')
			newImg.setAttribute('width', '17')
			newImg.setAttribute('height', '17')
			newImg.setAttribute('alt', 'Page ' + y);
			
			ePageCount.appendChild(newImg);
		
		}
	}
}

function setArrowPagination() {

	var rightArrow = document.getElementById('arrow_right');
	var leftArrow = document.getElementById('arrow_left');

	function setArrowImage(obj, setToExtension, changeFromExtension) {
	
		for (var x = 0; x < changeFromExtension.length; x++) {
		
			var temp = changeFromExtension[x];
		
			var pattern = new RegExp(temp);
			var result = pattern.exec(obj.getAttribute('src'));
			
			if (result) {
				obj.setAttribute('src', obj.getAttribute('src').replace(temp, setToExtension));
			}
		}
	}


	if (sliderIndex == 0) {
		setArrowImage(leftArrow, '_null.gif', ['_on.gif', '_over.gif']);
	}
	
	if (sliderIndex > 0) {
		setArrowImage(leftArrow, '_on.gif', ['_null.gif']);
	}
	
	if (sliderIndex < (Math.ceil(slideTimes) - 1)) {
		setArrowImage(rightArrow, '_on.gif', ['_null.gif']);
	}
	
	if (sliderIndex == (Math.ceil(slideTimes) - 1)) {
		setArrowImage(rightArrow, '_null.gif', ['_on.gif', '_over.gif']);
	}
}



function showAllSliderElements(event) {

	var eProductsInner = document.getElementById('productsInner');
	var eProductsSlider = document.getElementById('productSlider');
	
	var eRightArrow = document.getElementById('rightArrowDiv');
	var eLeftArrow = document.getElementById('leftArrowDiv');

	setEventTargets(event);
	clearInterval(sliderDiv.interval);
	
	if (eTarget.nodeName == 'IMG') {
	
		var pattern = new RegExp('_all_on.gif');
		var result = pattern.exec(eTarget.getAttribute('src'));

		if (result) {
		
			setSliderPagination('remove');
				
			eTarget.setAttribute('src', eTarget.getAttribute('src').replace('_all_on.gif', '_slide_off.gif'));

			if (sliderDiv.hasAttribute) {
				sliderDiv.setAttribute('style', 'height: auto;')
			} else {
				sliderDiv.style.height = 'auto'
				sliderDiv.style.width = (moduleWidth * 4) + 'px';
				sliderDiv.style.marginLeft = '0px';
			}
			
			eProductsInner.hasAttribute ? eProductsInner.removeAttribute('class') : eProductsInner.removeAttribute('className');

			eProductsInner.setAttribute('style', 'height: auto');
			eProductsSlider.setAttribute('style', 'height: auto');
			
			eLeftArrow.hasAttribute ? eLeftArrow.setAttribute('class', 'expand') : eLeftArrow.setAttribute('className', 'expand');
	
			eLeftArrow.hasAttribute ? eLeftArrow.setAttribute('style', 'height: ' + sliderDiv.offsetHeight + 'px;') : eLeftArrow.style.height = sliderDiv.offsetHeight + 'px';
	
			eRightArrow.hasAttribute ? eRightArrow.setAttribute('class', 'expand') : eRightArrow.setAttribute('className', 'expand');
			eRightArrow.hasAttribute ? eRightArrow.setAttribute('style', 'height: ' + sliderDiv.offsetHeight + 'px;') : eRightArrow.style.height = sliderDiv.offsetHeight + 'px';


		} else {
		
			eTarget.setAttribute('src', eTarget.getAttribute('src').replace('_slide_on.gif', '_all_off.gif'));
			
			sliderDiv.removeAttribute('style');

			eProductsInner.removeAttribute('style');
			eProductsInner.hasAttribute ? eProductsInner.setAttribute('class', 'collapsed') : eProductsInner.setAttribute('className', 'collapsed');
			eProductsSlider.removeAttribute('style')

			eLeftArrow.hasAttribute ? eLeftArrow.removeAttribute('class') : eLeftArrow.removeAttribute('className');
	
			eLeftArrow.removeAttribute('style')	

			eRightArrow.hasAttribute ? eRightArrow.removeAttribute('class') : eRightArrow.removeAttribute('className');
			eRightArrow.removeAttribute('style')
			
			initializeSlider();
			setArrowPagination();
			setSliderPagination();
		
		}
	
	}

}


function sliderLogic (event) {
		
	setEventTargets(event);
	
	if (eTarget.nodeName == 'IMG') {
	
		var endModifier = 4;
		var requestedIndex, startPosition, endPosition;
				
		
		/*
		
			Has the user requested an index higher or lower than the current display? 
		
			The next if/else statement handles the request from either the page pagination or the arrows
			
		*/
		
		if (!eTarget.id) {
		
			// the extension will need to change when Dave Noel adds an over state
			requestedIndex = cleanImage(eTarget.getAttribute('src'), '_off.gif');
			requestedIndex = parseInt(requestedIndex.replace('button_page_', ''));			
			requestedIndex--;

		} else {
			
			if (eTarget.getAttribute('id') == 'arrow_right') {
			
				var num = Math.ceil(slideTimes);
				num--;
			
				num != sliderIndex ? requestedIndex = sliderIndex + 1 : requestedIndex = sliderIndex;
			
			} else {
			
				sliderIndex == 0 ? requestedIndex = sliderIndex : requestedIndex = sliderIndex - 1;
			}
		}
		
		var result = sliderIndex - requestedIndex;
		var startPosition = sliderDiv.hasAttribute ? sliderDiv.style.left : sliderDiv.style.marginLeft;
		startPosition = parseInt(startPosition.replace('px', ''));
		
		if (result != 0) {
		
			endPosition = -(endModifier * moduleWidth * requestedIndex);
			
			if (result < 0) {
			
				// move left
				var alreadySeen = (sliderIndex + 1) * endModifier;
				
				if (alreadySeen != sliderKids) {
				
					if ((((requestedIndex) * endModifier) + endModifier) > sliderKids) {
					
						endPosition = -((endModifier * moduleWidth * slideTimes) - (endModifier * moduleWidth));
							
					} 
				}
			} 
						
			sliderIndex = requestedIndex;
			
			// Set arrow images
			
			setArrowPagination();
			
			// set page pagination
			setSliderPagination();
			
			move(sliderDiv, startPosition, endPosition, moveSpeed);
			
		}
	}
}

function changeArrow(event) {

	setEventTargets(event);
	
	if(eTarget.nodeName == 'IMG') {
		
		var pattern = new RegExp('_null.gif', 'g');
		var result = pattern.exec(eTarget.getAttribute('src'));
		
		if (!result) {
		
			if (event.type == 'mouseover' || event.type == 'onmouseover') {
				eTarget.setAttribute('src', eTarget.getAttribute('src').replace('_on.gif', '_over.gif'));
				eTarget.hasAttribute ? eTarget.setAttribute('style', 'cursor: pointer;') : eTarget.style.cursor = 'pointer';
				eTarget.hasAttribute ? eTarget.setAttribute('class', 'selected') : eTarget.setAttribute('className', 'selected');
				
			} else {
				eTarget.setAttribute('src', eTarget.getAttribute('src').replace('_over.gif', '_on.gif'));
				eTarget.removeAttribute('style');
				eTarget.hasAttribute ? eTarget.removeAttribute('class') : eTarget.removeAttribute('className');
			}
		}
	}
}



function move(object, start, end, speed) {

	if (object.interval) { clearInterval(object.interval); }

	object.interval = setInterval(function() {

		start += Math.round((end - start) * (speed / 100));
		
		var tempLength;
		
		start == end ? tempLength = end : tempLength = start;
		
		if (object.hasAttribute) {
			var currentStyle = object.getAttribute('style').split('; left')[0];
			object.setAttribute('style', currentStyle += '; left: ' + tempLength + 'px;');
		
		} else {
			object.style.marginLeft = tempLength + 'px';
		}
		
		if (start == end) {
			clearInterval(object.interval); 
		}

	}, speed);
}






function fadeImage() {
	setTimeout(addFadeImage, fadeDelay);
}


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

	var opacityValue = opacity / 100;
	var eImg = document.createElement('IMG');
	eImg.setAttribute('src',fadeImageArray[fadePosition].name);
	eImg.setAttribute('id','frontAnchor');
	eImg.setAttribute('width','480');
	eImg.setAttribute('height','278');
	eImg.setAttribute('border','0');
	eImg.setAttribute('alt',fadeImageArray[fadePosition].alt);
	eImg.style.cssText = 'filter: alpha(opacity=' + opacity + ');';
	eImg.style.KHTMLOpacity = opacityValue;
	eImg.style.MozOpacity = opacityValue;
	eImg.style.opacity = opacityValue;
	targetDiv = document.getElementById('fadeArea');
	targetDiv.insertBefore(eImg, targetDiv.firstChild);
	//return false;
	//alert('wes');
	fadeIn();
}



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

	if (opacity < 100) {

		opacity += 10;
		var opacityValue = opacity / 100;
		targetImg = document.getElementById('frontAnchor');	
		targetImg.style.cssText = 'filter: alpha(opacity=' + opacity + ');';
		targetImg.style.KTHMLOpacity = opacityValue;
		targetImg.style.MozOpacity = opacityValue;
		targetImg.style.opacity = opacityValue;
		setTimeout(fadeIn, fadeSpeed);
		
	} else {
	
		targetDiv = document.getElementById('fadeArea');
		targetImg = document.getElementById('backAnchor');
		targetDiv.removeChild(targetImg);
		
		targetImg = document.getElementById('frontAnchor');
		targetImg.setAttribute('id','backAnchor');
		opacity = 0;
		fadePosition < (fadeImageArray.length - 1) ? fadePosition++ : fadePosition = 0;
		setTimeout(addFadeImage, fadeDelay);
	}
}

/*
function playMovie (event) {

	setEventTargets(event);
	
	if (eTarget.nodeName == 'A' || eTargetParent.nodeName == 'A') {
	
		var checkLink = eTarget.getAttribute('href');
		if (eTargetParent.nodeName == 'A') {
			checkLink = eTargetParent.getAttribute('href');
		}
				
		event.preventDefault ? event.preventDefault() : window.event.returnValue = false;
		var pattern = new RegExp('.flv');
		var result = pattern.exec(checkLink);
		
		if (result) {
		
			checkLink = checkLink.split('/');
			checkLink = checkLink[checkLink.length - 1];
			
			flvToPlay = 'http://media.staples.com/products/productvideos/' + checkLink;
				 		
	 		// the next logic branch is taken from .com for the overlay feature.
	 		
	 		var scrollLock;
	 
			if (typeof(window.pageYOffset) == 'number') {
				scrollLock = window.pageYOffset;
			} else if (document.body && document.body.scrollTop ) {
				scrollLock = document.body.scrollTop;
			} else if (document.documentElement && document.documentElement.scrollTop ) {
				scrollLock = document.documentElement.scrollTop;
			} else {
				scrollLock = 0;
			}
			
			var fullScreenDiv = document.createElement('DIV');
			fullScreenDiv.setAttribute('id', 'fullScreen');
			
			var newDiv = document.createElement('DIV');
			newDiv.setAttribute('id', 'movieContainer');
			newDiv.hasAttribute ? newDiv.setAttribute('style', 'margin-top: ' + (50 + scrollLock) + 'px') : newDiv.style.marginTop = (50 + scrollLock) + 'px';
			
			var newP = document.createElement('P');
			var newA = document.createElement('A');
			newA.setAttribute('href', '#')
			newA.onclick = function closeWindow() {
				document.body.removeChild(document.getElementById('fullScreen'));
				return false;
			};
			
			var newText = document.createTextNode('Close this widow');
			
			newA.appendChild(newText);
			newP.appendChild(newA);
			newDiv.appendChild(newP);
			
			newIframe = document.createElement('IFRAME');
			newIframe.setAttribute('src', '/sbd/cre/_lib/support/movieFrame_window.html');
			newIframe.setAttribute('frameBorder', '0')
			newIframe.setAttribute('scrolling', 'no')

			newDiv.appendChild(newIframe);
			fullScreenDiv.appendChild(newDiv)

			document.body.appendChild(fullScreenDiv);
		}
	}
}
*/