// Human Touch Redesign JS File

// Returns an array of all tags of a certain class
function getElementsByClassName(obj, theClass, theTag) {
	var allTagsWithClass = [], thisTag, i;
	for (i = 0; (thisTag = obj.getElementsByTagName(theTag ? theTag : '*')[i]); i++) {
		if (thisTag.className === theClass) {
			allTagsWithClass.push(thisTag);
		}
	}
	return allTagsWithClass;
}

// Sets the opacity level for an element
function setOpacity(el, opacity) {
	opacity = '' + (opacity / 5);
	el.style.opacity = opacity;									// For CSS 3 compliant browsers
	el.style["-moz-opacity"] = opacity;							// For old FF
	el.style.filter = 'alpha(opacity=' + opacity * 100 + ')';	// For IE
}

// Adds mouseover effects to navbar buttons that swaps out bottom panel based on which button is hovered
function navbarPanelSwap() {
	var navLinks, i, mouseOver, panels,
	navbar = document.getElementById('header-menu'),
	bottomPanel = document.getElementById('bottom-panel');
	
	// Mouse over and out event for navbar links
	mouseOver = function (pos, over) {
		return function () {
			panels[pos].style.display = (over) ? 'block' : 'none';
			panels[0].style.display = (over) ? 'none' : 'block';
		};
	};
	
	// init
	if (navbar && bottomPanel) {
		panels = bottomPanel.getElementsByTagName('div');
		navLinks = getElementsByClassName(navbar, 'header-menu-title', 'a');
		for (i = 0; i < navLinks.length; i++) {
			navLinks[i].onmouseover = mouseOver(i + 1, true);
			navLinks[i].onmouseout = mouseOver(i + 1, false);
			panels[i + 1].style.display = 'none';
		}
	}
}

// Handles the rotation of the big promo images
function promoSwap(swapTime) {
	var promos, i, timer, mouseOver, swapPromo, current = 0, last, fadeIn, fadeOpac = 1, fadeTimer = null,
	topPanel = document.getElementById('top-panel');
	
	// Starts and stops promo swapping when mouse is over current promo
	mouseOver = function (over) {
		return function () {
			if (over) {
				if (timer !== null) {
					window.clearTimeout(timer);
					timer = null;
				}
			} else {
				if (timer === null && fadeTimer === null) {
					timer = window.setTimeout(swapPromo(), swapTime);
				}
			}
		};
	};
	
	// This handles the fading in for the next promo and resets variables so its ready for the next one
	fadeIn = function () {
		return function () {
			setOpacity(promos[current], fadeOpac);
			if (fadeOpac < 5) {
				fadeOpac++;
				fadeTimer = window.setTimeout(fadeIn(), 50);
			} else {
				setOpacity(promos[last], 0);
				promos[last].style.left = '-10000px';
				promos[last].style.zIndex = 200;
				promos[current].style.zIndex = 100;
				fadeOpac = 1;
				fadeTimer = null;
				timer = window.setTimeout(swapPromo(), swapTime);
			}
		};
	};
	
	// This decides which promo should fade in next and calls the fader
	swapPromo = function (dir) {
		return function () {
			if (timer !== null) {
				last = current;
				if (dir) {
					this.blur();
					window.clearTimeout(timer);
					timer = null;
					if (dir > 0) {
						current = (current !== promos.length - 1) ? current + dir : 0;
					} else {
						current = (current !== 0) ? current + dir : promos.length - 1;
					}
				} else {
					current = (current !== promos.length - 1) ? current + 1 : 0;
				}
				promos[current].style.left = '0px';
				fadeTimer = window.setTimeout(fadeIn(), 50);
			}
		};
	};
	
	// init
	if (topPanel) {
		promos = topPanel.getElementsByTagName('a');
		for (i = 0; i < promos.length; i++) {
			promos[i].onmouseover = mouseOver(true);
			promos[i].onmouseout = mouseOver(false);
			if (i > 0) {
				setOpacity(promos[i], 0);
				promos[i].style.left = '-10000px';
				promos[i].style.zIndex = 200;
			} else {
				promos[i].style.left = '0px';
				promos[i].style.zIndex = 100;
			}
		}
		document.getElementById('top-panel-next').onclick = swapPromo(1);
		document.getElementById('top-panel-prev').onclick = swapPromo(-1);
		timer = window.setTimeout(swapPromo(), swapTime);
	}
}

function productScroller() {
	var productDivs, i, scrollLinks, length, swapProduct, last = 0, mouseDown, mouseUp, scrollInt = null, scrollIt, currentPos = 0, end, stopHere, setEvents, showButtons, width,
	contentDiv = document.getElementById('content'),
	containerDiv = document.getElementById('category-product-bar'),
	scrollDiv = document.getElementById('product-scroll-container'),
	scrollNext = document.getElementById('product-scroll-next'),
	scrollPrev = document.getElementById('product-scroll-prev');
	
	setEvents = function () {
		scrollNext.onmousedown = mouseDown(20);
		scrollNext.onmouseup = mouseUp('next');
		scrollNext.onmouseout = mouseUp('next');
		scrollPrev.onmousedown = mouseDown(-20);
		scrollPrev.onmouseup = mouseUp('prev');
		scrollPrev.onmouseout = mouseUp('prev');
	};
	
	showButtons = function (next, prev) {
		scrollNext.className = (next) ? 'product-scroll-buttons' : 'hide-me';
		scrollPrev.className = (prev) ? 'product-scroll-buttons' : 'hide-me';
	};
	
	scrollIt = function (speed) {
		return function () {
			currentPos -= speed;
			scrollDiv.style.left = currentPos + 'px';
			if (currentPos === stopHere) {
				window.clearInterval(scrollInt);
				scrollInt = null;
			} else if (speed > 0 && currentPos < stopHere || speed < 0 && currentPos > stopHere) {
				scrollDiv.style.left = stopHere + 'px';
				window.clearInterval(scrollInt);
				scrollInt = null;
			}
		};
	};
	
	mouseUp = function (dir) {
		return function (e) {
			var spot, rounded;
			spot = currentPos / 300;
			rounded = (dir === 'next') ? Math.floor(spot) : Math.ceil(spot);
			stopHere = rounded * 300;
			if (stopHere === end) {
				showButtons(false, true);
			} else if (stopHere === 0) {
				showButtons(true, false);
			} else {
				showButtons(true, true);
			}
		};
	};
	
	mouseDown = function (speed) {
		return function (e) {
			if (scrollInt === null) {
				scrollInt = window.setInterval(scrollIt(speed), 25);
			}
			stopHere = (speed > 0) ? end : 0;
		};
	};
	
	// Change the product div to show the info on the product they clicked on
	swapProduct = function (num) {
		return function () {
			this.blur();
			if (last !== num) {
				productDivs[last].className = 'hide-me';
				productDivs[num].className = 'standard-outer-box-outer';
				scrollLinks[last].className = '';
				scrollLinks[num].className = 'selected';
				last = num;
			}
			return false;
		};
	};
	
	// init
	if (contentDiv && scrollDiv) {
		containerDiv.className = '';
		productDivs = getElementsByClassName(contentDiv, 'standard-outer-box-outer', 'div');
		for (i = 1; i < productDivs.length; i++) {
			productDivs[i].className = 'hide-me';
		}
		scrollLinks = scrollDiv.getElementsByTagName('a');
		length = scrollLinks.length;
		for (i = 0; i < length; i++) {
			scrollLinks[i].onclick = swapProduct(i);
		}
		scrollLinks[0].className = 'selected';
		if (length > 3) {
			end = (length - 3) * -300;
			width = (oldIE) ? length * 300 + 300 : length * 300;
			scrollDiv.style.width = width + 'px';
			setEvents();
			showButtons(true, false);
		} else {
			showButtons(false, false);
		}
	}
}

function searchBox() {
	var box = document.getElementById('header-search-input');
	box.onfocus = function () {
		if (this.value === 'keyword or item #') {
			this.value = '';
		}
	};
	box.onblur = function () {
		if (this.value === '') {
			this.value = 'keyword or item #';
		}
	};
}

// makes tabs work
function Tabs(tabsContainerId, tabContainerClass, tabNameClass, resizeTabs, secondaryContainerId) {
	var i, tabsContainer = document.getElementById(tabsContainerId), tabsContainerTwo = document.getElementById(secondaryContainerId), tabs, tabsTwo, tabWidth, currentTab,
	tabClickHandler = function (self) {
		return function () {
			currentTab.parentNode.className = 'tab-enabled';
			self.parentNode.className = 'tab-active';
			currentTab = self;
			return false;
		};
	},
	tabHoverHandler = function (hover) {
		return function () {
			this.className = tabNameClass + (hover ? ' tab-name-hover' : '');
		};
	};
	this.showTab = function (tabIndex) {
		if (tabs.length > tabIndex) {
			tabClickHandler(tabs[tabIndex])();
		}
	};
	if (tabsContainer) {
		tabsContainer.className = tabContainerClass;
		tabs = getElementsByClassName(tabsContainer, tabNameClass, 'div');
		if (tabs.length > 0) {
			if (resizeTabs) {
				tabWidth = 0;
				for (i = 0; i < tabs.length; i++) {
					tabs[i].style.left = tabWidth + 'px';
					tabs[i].style.width = tabs[i].offsetWidth + 20 + 'px';
					tabWidth += tabs[i].offsetWidth + 5;
				}
			} else {
				tabs[tabs.length - 1].style.marginRight = '0';
			}
			for (i = 0; i < tabs.length; i++) {
				if (tabs[i].parentNode.className !== 'tab-disabled') {
					tabs[i].onclick = tabClickHandler(tabs[i]);
					tabs[i].onmouseover = tabHoverHandler(true);
					tabs[i].onmouseout = tabHoverHandler(false);
					if (!currentTab) {
						currentTab = tabs[i];
					}
				}
			}
			currentTab.parentNode.className = 'tab-active';
			if (tabsContainerTwo) {
				tabsTwo = tabsContainerTwo.getElementsByTagName('a');
				for (i = 0; i < tabsTwo.length; i++) {
					tabsTwo[i].onclick = tabClickHandler(tabs[i]);
				}
			}
		}
	}
}

// IE6 fix for header menu and non anchor tag hover issues
function initHeaderMenu() {
	var i,
	els = document.getElementById('header-menu').childNodes;
	for (i = 0; i < els.length; i++) {
		if (oldIE) {
			els[i].onmouseover = function () {
				this.className += ' header-menu-first-level-item-hover';
			};
			els[i].onmouseout = function () {
				this.className = this.className.replace(new RegExp(' header-menu-first-level-item-hover\\b'), '');
			};
		}
	}
}
// Footer addthis code
function footerAddThis(){
	var addthis_pub = 'opht';
	var addthis_logo = 'http://lib.store.yahoo.net/lib/humantouch-com/logo-for-add-this-service.gif';
	var addthis_logo_background = 'FFFFFF';
	var addthis_logo_color = '999999';
	var addthis_brand = 'Human Touch';
	var addthis_options = 'favorites, google, email, facebook, live, myweb, delicious, digg, technorati, furl, stumbleupon, more';
	var addThisFooter = document.getElementById("footer-addthis");
	
	if (addThisFooter != null) {
		addThisFooter.onmouseover = function(){
			return addthis_open(this, '', location.href, document.title);
		};
		addThisFooter.onmouseout = function(){
			addthis_close();
		};
		addThisFooter.onclick = function(){
			return addthis_to();
		};
	}
}

function initIndex() {
	navbarPanelSwap();
	promoSwap(8000);	// number is amount of time in milliseconds between switching promos, 1000 = 1 second
	productScroller();
	searchBox();
	initHeaderMenu();
	footerAddThis();
	var tabs = new Tabs('product-tabs-container', 'tabs-with-js', 'tab-name', true);
}