<!--// JavaScript Document

//================================================
// Functions related to the main navigation hovers
//================================================

function showSubNav() {
	
	//================================================
	// Displays a UL list of subnavigation links
	//================================================
	
	var objParentNav = document.getElementById("products_link");
	var objSubNav = document.getElementById("products_submenu");
	
	// Position the subnavigation below the parent menu item 
	
	//objSubNav.style.top = getObjectTopCoordinate(objParentNav) + 14 + "px";
   objSubNav.style.top = "27px";
	
	//objSubNav.style.left = getObjectLeftCoordinate(objParentNav) - 60 + "px";
	objSubNav.style.left = "120px";
	
	objSubNav.style.display = "block";	
	objSubNav.style.zIndex = 101;
	
	
	// Position the iFrame shim under the subnav, so that any form elements and the Flash banner are blocked out (IE 6 fix)
    var objiFrameShim = document.getElementById("iFrameShim");
	
	objiFrameShim.style.top = objSubNav.offsetTop + "px";
	objiFrameShim.style.left = objSubNav.offsetLeft + "px"; 
	objiFrameShim.style.width = objSubNav.offsetWidth + "px";	
	objiFrameShim.style.height = objSubNav.offsetHeight + "px";
	objiFrameShim.style.zIndex = 100;  // zIndex must be a lower number than the subnav_ul, so it positions under it 
	objiFrameShim.style.visibility = "visible";		
	
}
function hideSubNav() {
	
	//================================================
	// Hides a UL list of subnavigation links
	//================================================
	
	// Hide the subnavigation
	var objSubNav = document.getElementById("products_submenu");
	objSubNav.style.display = "none";
	
	// Hide the iFrame shim
	var objiFrameShim = document.getElementById("iFrameShim");
    objiFrameShim.style.visibility = "hidden";
}
//==============================================================================
// Retrieves the top coordinate of an object
//==============================================================================

function getObjectTopCoordinate(obj) {

    var intYPos = obj.offsetTop;
    var objTemp = obj.offsetParent;

    while (objTemp != null) {
        intYPos += objTemp.offsetTop;
        objTemp = objTemp.offsetParent;
    }
    return(intYPos);
}

//==============================================================================
// Retrieves the left coordinate of an object
//==============================================================================
function getObjectLeftCoordinate(obj) {

    var intXPos = obj.offsetLeft;
    var objTemp = obj.offsetParent;

    while (objTemp != null) {
        intXPos += objTemp.offsetLeft;
        objTemp = objTemp.offsetParent;
    }
    return(intXPos);
}	


//================================================
// Functions related to the products page hovers
//================================================

var intProductCount = 7;
var intIconCount = 4;

function showRelatedProducts(icon_number) {
	
	// Change icon to hovered state
	var objThisIcon = document.getElementById("icon0" + icon_number);
	objThisIcon.src =  "images/products/icon0" + icon_number + "_hover.gif";
	
	// Fade out the products unrelated to the icon hovered
	switch (icon_number) {
	case 0:
		// Cats
		objThisProduct = document.getElementById("product06");
		objThisProduct.src =  "images/products/product06_fadeout.gif";
	break;
	case 1:
		// Dogs
		objThisProduct = document.getElementById("product02");
		objThisProduct.src =  "images/products/product02_fadeout.gif";
		objThisProduct = document.getElementById("product03");
		objThisProduct.src =  "images/products/product03_fadeout.gif";
		objThisProduct = document.getElementById("product04");
		objThisProduct.src =  "images/products/product04_fadeout.gif";
		objThisProduct = document.getElementById("product05");
		objThisProduct.src =  "images/products/product05_fadeout.gif";
	break;
	case 2:
	case 3:
	case 4:
		// Birds, Reptiles & Small Animals
		objThisProduct = document.getElementById("product02");
		objThisProduct.src =  "images/products/product02_fadeout.gif";
		objThisProduct = document.getElementById("product03");
		objThisProduct.src =  "images/products/product03_fadeout.gif";
		objThisProduct = document.getElementById("product04");
		objThisProduct.src =  "images/products/product04_fadeout.gif";
		objThisProduct = document.getElementById("product05");
		objThisProduct.src =  "images/products/product05_fadeout.gif";
		objThisProduct = document.getElementById("product06");
		objThisProduct.src =  "images/products/product06_fadeout.gif";
		objThisProduct = document.getElementById("product07");
		objThisProduct.src =  "images/products/product07_fadeout.gif";
	break;
	default:
  	}
}

function showAllProductsIcons() {
	
	// Turn all icons back to the unhovered state 
	var objThisIcon;
	var i=0;
	for (i=0;i<=intIconCount;i++) {
		objThisIcon = document.getElementById("icon0" + i);
		objThisIcon.src =  "images/products/icon0" + i +".gif";
	}	
	// Turn all products back to the unhovered state 
	var objThisProduct;
	var i=0;
	for (i=0;i<=intProductCount;i++) {
		objThisProduct = document.getElementById("product0" + i);
		objThisProduct.src =  "images/products/product0" + i +".gif";
	}
}

function showRelatedIcons(product_number) {
	
	// First turn all products to the fade out state
	var objThisProduct;
	var i=0;
	for (i=0;i<=intProductCount;i++) {
		objThisProduct = document.getElementById("product0" + i);
		objThisProduct.src =  "images/products/product0" + i +"_fadeout.gif";
	}
	
	// Turn the hovered product back to the unfaded state
	objThisProduct = document.getElementById("product0" + product_number);
	objThisProduct.src =  "images/products/product0" + product_number +".gif";
	
	var objThisIcon;
	
	// Fade out the icons unrelated to the product being hovered over
	switch (product_number) {
	case 0:
	case 1:
		// Pet Grass and Garden are a match for all pets
		var i=0;
		for (i=0;i<=intIconCount;i++) {
			objThisIcon = document.getElementById("icon0" + i);
			objThisIcon.src =  "images/products/icon0" + i +"_hover.gif";
		}
	break;
	case 2:
	case 3:
	case 4:
	case 5:
		// Both types of Catnip, and both types of Cat Treats are for cats only
		hideAllIcons();
		objThisIcon = document.getElementById("icon00");
		objThisIcon.src =  "images/products/icon00_hover.gif";		
	break;
	case 6:
		// Dog Treats are only for dogs
		hideAllIcons();
		objThisIcon = document.getElementById("icon01");
		objThisIcon.src =  "images/products/icon01_hover.gif";
	break;
	case 7:
		// Grooming products are for cats and dogs only
		hideAllIcons();
		objThisIcon = document.getElementById("icon00");
		objThisIcon.src =  "images/products/icon00_hover.gif";	
		objThisIcon = document.getElementById("icon01");
		objThisIcon.src =  "images/products/icon01_hover.gif";
	break;
	default:
  	}
	
}

function hideAllIcons() {
	
	var objThisIcon;
	
	// Changes all icons back to the blank state 
	var i=0;
	for (i=0;i<=3;i++) {
		objThisIcon = document.getElementById("icon0" + i);
		objThisIcon.src =  "images/products/icon_hidden.gif";
	}
	// Icon04 is a special case, because it's wider than the others
	objThisIcon = document.getElementById("icon04");
	objThisIcon.src =  "images/products/icon04_hidden.gif";
}

// Recipe rollovers for the dog and cat treat pages 
function showRecipe(recipe_id) {
	
	var objParentImage = document.getElementById("treats_large")
	var objThisRecipe = document.getElementById("recipe0" + recipe_id);
	var intNudge = -5
	
	objThisRecipe.style.display = "block";
	
	// Position the recipe just above the large treats image
	objThisRecipe.style.top = getObjectTopCoordinate(objParentImage) - objThisRecipe.offsetHeight + intNudge + "px";
    objThisRecipe.style.left = getObjectLeftCoordinate(objParentImage) + 95 + "px";
} 
function hideRecipe(recipe_id) {
	
	// Hide the recipe layer 
	var objThisRecipe = document.getElementById("recipe0" + recipe_id);
	objThisRecipe.style.display = "none";
} 

// Product details rollovers for the grooming page 
function showDetails(details_id) {
	
	var objParentImage = document.getElementById("grooming_large")
	var objThisDetailDiv = document.getElementById("details0" + details_id);
	var intNudge = 0
	
	objThisDetailDiv.style.display = "block";
	
	// Position the details div just above the large grooming image
	objThisDetailDiv.style.top = getObjectTopCoordinate(objParentImage) - objThisDetailDiv.offsetHeight + intNudge + "px";
    objThisDetailDiv.style.left = getObjectLeftCoordinate(objParentImage) + 50 + "px";
} 
function hideDetails(details_id) {
	
	// Hide the details layer 
	var objThisDetailDiv = document.getElementById("details0" + details_id);
	objThisDetailDiv.style.display = "none";
} 


// JavaScript used for top menu navigation drop down submenus

startList = function() {
	if (document.all && document.getElementById) {
		navRoot = document.getElementById("main_nav");
		for (i=0; i < navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			if (node.nodeName=="li") {
				node.onmouseover=function() {
					this.className+=" over";
				}
				node.onmouseout=function() {
					this.className=this.className.replace(" over", "");
				}
			}
		}
	}
}

window.onload=startList;

//-->