function initToggleProdDetails() {
   if(!document.getElementById && !document.getElementsByTagName) return false;
   var mainSection = document.getElementById("detailsgroup");
   subSectionHead = mainSection.getElementsByTagName("h4");
   subSectionDivs = mainSection.getElementsByTagName("div");
   subSectionDrawer = new Array();
   for(var i = 0; i < subSectionDivs.length; i++) {
      if(subSectionDivs[i].className == "prodDetDrawer") {
         subSectionDrawer.push(subSectionDivs[i]);
      }
   }
}
function clickDetailsHead() {
   if(!document.getElementById && !document.getElementsByTagName) return false;
   for(var i = 0; i < subSectionHead.length; i++) {
      subSectionHead[i].onclick = function() {
         return toggleProdDetails(this);
      }
   }
}


function toggleProdDetails(whichSection) {
   for(var i = 0; i < subSectionHead.length; i++) {
// If the user clicked on this sub-section heading...
      if(subSectionHead[i] == whichSection) {
// hide the corresponding hidden details div if it is visible.
         if(subSectionDrawer[i].style.display == "block") {
            subSectionDrawer[i].style.display = "none";
// After hiding the details div, reset the styles of subSectionHead to none:
            subSectionHead[i].firstChild.className = "drawerClosed";
         } else {
// Otherwise, if the subsection details are visible, hide them.
            subSectionDrawer[i].style.display = "block";
// Set the background color and arrow to opened style:
            subSectionHead[i].firstChild.className = "drawerOpen";
         }
      }
   }
   return false;
}


function addLoadEvent(func) {
   var oldonload = window.onload;
   if(typeof window.onload != 'function') {
      window.onload = func;
   } else {
      window.onload = function() {
         oldonload();
         func();
      }
   }
}

addLoadEvent(initToggleProdDetails);
addLoadEvent(clickDetailsHead);