/*============================================================ Owner: Hill's Pet Nutrition Title: Product Detail Javascript Document Author: Steve Kiernan Date: 08/12/09 Desc: This javascript document provides the functionality to control the necessary visual effects on the product detail pages (ie. controling navigation states and displaying/hiding content from the browser) =============================================================*/ function init() { evalProd(); //call function to set className on tag (needed for SD/PD specific lightbox effects } function evalProd() { //append appropriate className to the tag depending on whether viewing a "Science Diet" or "Prescription Diet" product detail page var targObj = document.getElementById("column2"); //set variable to target element (column2) if(targObj) { //if column2 is found if(targObj.className == "SD-Product") { //check to see if column2's className is set to Science Diet targObj = document.getElementsByTagName("body"); //get the "body" tag element for (var i=0; i elements targObj[i].className = "SD-Product"; //set the className of each tag to "SD-Product" (should always only be 1 tag) } } else if(targObj.className == "PD-Product") { //check to see if column2's className is set to Prescription Diet targObj = document.getElementsByTagName("body"); //get the "body" tag element for(var i=0; i elements targObj[i].className = "PD-Product"; //set the className of each tag to "PD-Product" (should always only be 1 tag) } } else { //display an alertbox... No className attribute was found on

alert('

does not have the appropriate className set. Please add the appropiate class to view this page correctly'); } } } function toggleContent(ref) { //toggle selected section content if(ref.match("nav_")) { //make sure the referer contains the string "nav_" clearSubNav(); //call function to hide the "on" state of the subNav elements var targObj = document.getElementById(ref); //get the referred element by ID if(ref == "nav_keyBenefits") { //if the reffered element is the "Key Benefits" tab, it is the first item in the subNav targObj.className = "first on"; //set the appropriate className for "Key Benefits" tab } else { //referred element is not the first item in the subNav targObj.className = "on"; //set classname on reffered element } dispSectContent(ref); //call the function to display the appropriate content } } function clearSubNav() { //hides the "on" state of the subNav elements var targObj = document.getElementById("subNav").getElementsByTagName("li"); //get all

elements in the div called "subnav" for(var i=0; i elements targObj[i].className = ""; //set the className of each

element to an empty string } targObj[0].className = "first"; //set the classname of the first

element to "first" } function clearSectContent() { //hide the currently displayed content section var targObj = document.getElementById("mainDetailSection").getElementsByTagName("div"); //get all

elements within the "mainDetailSection" for(var i=0; i elements var tempObj = targObj[i].id; //because there can be addition

's, this tempObj var holds the ID of the

for later comparison if (tempObj.match("sect_")) { //we only want

's who's ID contains the string "sect_" targObj[i].style.display = "none"; //hide these "sect_"

's } } } function dispSectContent(ref) { //display section content if (ref.match("nav_")) { //make sure the referer contains the string "nav_" var targObj = ref.replace("nav_", "sect_"); //replace the string "nav_" with the string "sect_" clearSectContent(); //hide the currently displayed section content document.getElementById(targObj).style.display = "block"; //display the newly selected section content } } function enlarge(ref, parent) { //show enlarged image in the main panel of the "Closer Look" lightbox var refThumb = ref; //get the reffering anchor element that initiated the click event if(refThumb.className == "on") { //check to see if the current target is already being displayed return; // do nothing (selected image is already enlarged in view) } else { //current target is not already in view proceed to swap the enlarged image in the main view var thumbnails = document.getElementById("leftcol").getElementsByTagName("a"); //get all anchor elements (thumbnails) within the left column of the lightbox display for(var i=0; i elements thumbnails[i].className = ""; //set the className of each element to an empty string to remove previously set styles } refThumb.className = "on"; //set the className of the reffering anchor that initiated the click event to "on" //Now show the corresponding full size image var targObj = document.getElementById("list_lgIMGs").getElementsByTagName("li"); for(var i=0; i elements targObj[i].style.display = "none"; if(targObj[i].className == parent) { targObj[i].style.display = "block"; } } } } window.onload = init; //initialize JS code after HTML is finished loading