function resize_box_height(elm, start_height, end_height, time_interval, em_interval, hide_when_done){ 
// resize/animate any element's height (that has a height)
// elm = element id
// start_height in ems
// end_height in ems
// time_interval in miliseconds per step
// em_interval size of step
// hide when done: hide element when done resizing
// try to make sure that em_interval divides evenly into end_height for best result 

document.getElementById(elm).style.display = 'block';

   if(start_height < end_height){
      var new_height = start_height + em_interval;
      if(new_height > end_height){ new_height = end_height; }
   }
   else{
      var new_height = start_height - em_interval;
            if(new_height < end_height){ new_height = end_height; }
   }
   new_height_em = new_height + 'em';
   document.getElementById(elm).style.height = new_height_em;
   if(new_height == end_height){ 
      if(hide_when_done){ document.getElementById(elm).style.display = 'none'; }  
      return true;
   }

   eval('setTimeout("resize_box_height(\'' + elm + '\',' + new_height + ',' + end_height + ',' +  time_interval + ',' + em_interval + ',' + hide_when_done + ')" , ' + time_interval + ')');
} // end resize box height

//will generate a 'safe enough' random unique id
function generateUid()
{
  return new Date().getTime() + '' + Math.round(100000000000*Math.random());
}

function resize_box_height2(elm, start_height, end_height, time_interval, em_interval, hide_when_done){ 
// resize/animate any element's height (that has a height)
// elm = element id
// start_height in ems
// end_height in ems
// time_interval in miliseconds per step
// em_interval size of step
// hide when done: hide element when done resizing
// try to make sure that em_interval divides evenly into end_height for best result 

document.getElementById(elm).style.display = 'block';

   if(start_height < end_height){
      var new_height = start_height + em_interval;
      if(new_height > end_height){ new_height = end_height; }
   }
   else{
      var new_height = start_height - em_interval;
            if(new_height < end_height){ new_height = end_height; }
   }
   new_height_em = new_height + 'em';
   document.getElementById(elm).style.height = new_height_em;
   if(new_height == end_height){ 
      if(hide_when_done){ document.getElementById(elm).style.display = 'none'; }  
      return true;
   }

   eval('setTimeout("resize_box_height(\'' + elm + '\',' + new_height + ',' + end_height + ',' +  time_interval + ',' + em_interval + ',' + hide_when_done + ')" , ' + time_interval + ')');
} // end resize box height



// ******************* END REMOVE THIS LATER AND REFERENCE MAIN LIB

function toggleSiteMap(open){
if(open){
   resize_box_height('sitemap', 0, 15, 25, 1, 0);
   document.getElementById('siteMapOpenLink').style.display = 'none';   
   document.getElementById('siteMapCloseLink').style.display = 'block';
} // end if
else{
   resize_box_height('sitemap', 15, 0, 25, 1, 0);
   document.getElementById('siteMapCloseLink').style.display = 'none';   
   document.getElementById('siteMapOpenLink').style.display = 'block';

} // end else
}//end toggleSiteMap

function toggleCustomizerControlMenu(elm,open){
if(open){
   resize_box_height(elm, 0, 15, 25, 1)
   document.getElementById(elm).style.display = 'block';
   if(elm == 'step2Container'){
      //close other menus if open  
      if(document.getElementById('colorCloseLink').style.display == 'block'){ document.getElementById('ColourMod').style.display = 'none'; resize_box_height('colorControlContainer', 15, 0, 25, 1); }         
      document.getElementById('editOpenLink').style.display = 'none';   
      document.getElementById('editCloseLink').style.display = 'block';
   }
   if(elm == 'colorControlContainer'){
      //close other menus if open     
      if(document.getElementById('editCloseLink').style.display == 'block'){ resize_box_height('step2Container', 15, 0, 25, 1); }     
      document.getElementById('colorOpenLink').style.display = 'none';   
      document.getElementById('colorCloseLink').style.display = 'block';
    //  document.getElementById('ColourMod').style.display = 'block';
     eval('setTimeout("document.getElementById(\'ColourMod\').style.display = \'block\';", 500);');   
      
      
   }
   //if(elm == 'colorControlContainer'){document.getElementById('ColourMod').style.display = 'block';}
} // end if
else{
    resize_box_height(elm, 15, 0, 25, 1);  
    if(elm == 'step2Container'){
       document.getElementById('editCloseLink').style.display = 'none';   
       document.getElementById('editOpenLink').style.display = 'block';
    }
    if(elm == 'colorControlContainer'){
      document.getElementById('colorOpenLink').style.display = 'block';   
      document.getElementById('colorCloseLink').style.display = 'none';
      document.getElementById('ColourMod').style.display = 'none';
    } 
    //if(elm == 'colorControlContainer'){document.getElementById('ColourMod').style.display = 'none';}    
    eval('setTimeout("document.getElementById(\'' + elm + '\').style.display = \'none\';", 500);');   
} // end else
} // end toggleCustomizerControlMenu



/* THIS IS FOR RESIZING HORIZONTALLY -- DON'T DELETE... YET
function resizeControlMenu(elm, startWidth, endWidth, timeInterval, emInterval, hideWhenDone){


   if(startWidth < endWidth){
      var newWidth = startWidth + emInterval;
      if(newWidth > endWidth){ newWidth = endWidth; }
   }
   else{
      var newWidth = startWidth - emInterval;
            if(newWidth < endWidth){ newWidth = endWidth; }
   }
   newWidthEm = newWidth + 'em';
   document.getElementById(elm).style.width = newWidthEm;
   if(newWidth == endWidth){ 
         if(hideWhenDone){ document.getElementById(elm).style.display = 'none'; }  
      return true; 
   } 
  
   eval('setTimeout("resizeControlMenu(\'' + elm + '\',' + newWidth + ',' + endWidth + ',' +  timeInterval + ',' + emInterval +')" , ' + timeInterval + ')');
} //end toggleCustomizerControlMenu
*/


/* ****************!!!!!!!!!!!!! COME BACK LATER AND GENERALIZE THESE NAVCLICK FUNCTIONS !!!!!!!!!!!****************/
function adminStoreNavTabClick(divToOpen){
//switches visible form div depending on what tab is clicked

   var clickedTabId = divToOpen + 'Tab'; // create the name of the tab in the ui
   var clickedTabBigNumberId = divToOpen + 'BigNumber'; // create name of the big number span in the selected tab
   


//***DO: check to see if user is clicking on current tab, if so return 

   //update tab presentation (see if we can do this later by changing the item's class -- this seems unlikely, but would be good
   //could also do this by referencing some other data in the page, similar to the nav that works off body id
   // * change other tabs to default
   // * * tab backgrounds
   document.getElementById('createShopTab').style.backgroundColor = '#cccccc';
   document.getElementById('addShopItemTab').style.backgroundColor = '#cccccc';
   document.getElementById('tagShopItemTab').style.backgroundColor = '#cccccc';
   document.getElementById('openStoreTab').style.backgroundColor = '#cccccc';
   // * * tab number color
   document.getElementById('createShopBigNumber').style.color = '#333333'; 
   document.getElementById('addShopItemBigNumber').style.color = '#333333';
   document.getElementById('tagShopItemBigNumber').style.color = '#333333';
   document.getElementById('openStoreBigNumber').style.color = '#333333';
      
           
   document.getElementById(clickedTabId).style.backgroundColor = '#ffffff';
   document.getElementById(clickedTabBigNumberId).style.color = '#00cc00';
   
   //hide other divs 
   document.getElementById('createShop').style.display = 'none';
   document.getElementById('addShopItem').style.display = 'none';
   document.getElementById('tagShopItem').style.display = 'none';
   document.getElementById('openStore').style.display = 'none';
   
   //display selected div
   document.getElementById(divToOpen).style.display = 'block';

} //end adminStoreNavTabClick

/*******/
function manageStoreNavTabClick(divToOpen){
//switches visible form div depending on what tab is clicked

   var clickedTabId = divToOpen + 'Tab'; // create the name of the tab in the ui
   var clickedTabBigNumberId = divToOpen + 'BigNumber'; // create name of the big number span in the selected tab
   


//***DO: check to see if user is clicking on current tab, if so return 

   //update tab presentation (see if we can do this later by changing the item's class -- this seems unlikely, but would be good
   //could also do this by referencing some other data in the page, similar to the nav that works off body id
   // * change other tabs to default
   // * * tab backgrounds
   document.getElementById('newShopTab').style.backgroundColor = '#cccccc';
   document.getElementById('descriptionTab').style.backgroundColor = '#cccccc';
   document.getElementById('prodServTab').style.backgroundColor = '#cccccc';
   // * * tab number color
   document.getElementById('newShopBigNumber').style.color = '#333333'; 
   document.getElementById('descriptionBigNumber').style.color = '#333333';
   document.getElementById('prodServBigNumber').style.color = '#333333';
      
           
   document.getElementById(clickedTabId).style.backgroundColor = '#ffffff';
   document.getElementById(clickedTabBigNumberId).style.color = '#00cc00';
   
   //hide other divs 
   document.getElementById('newShop').style.display = 'none';
   document.getElementById('description').style.display = 'none';
   document.getElementById('prodServ').style.display = 'none';
   
   //display selected div
   document.getElementById(divToOpen).style.display = 'block';

} //end manageStoreNavTabClick


function adminCustomNavTabClick(divToOpen){
//switches visible form div depending on what tab is clicked

   var clickedTabId = divToOpen + 'Tab'; // create the name of the tab in the ui
   var clickedTabBigNumberId = divToOpen + 'TabBigNumber'; // create name of the big number span in the selected tab
  


//***DO: check to see if user is clicking on current tab, if so return 

   //update tab presentation (see if we can do this later by changing the item's class -- this seems unlikely, but would be good
   //could also do this by referencing some other data in the page, similar to the nav that works off body id
   // * change other tabs to default
   // * * tab backgrounds
   document.getElementById('templateTab').style.backgroundColor = '#cccccc';
   document.getElementById('layoutTab').style.backgroundColor = '#cccccc';
   document.getElementById('populateTab').style.backgroundColor = '#cccccc';
   document.getElementById('addToNavTab').style.backgroundColor = '#cccccc';
   document.getElementById('savePageTab').style.backgroundColor = '#cccccc';
   
   // * * tab number color
   document.getElementById('templateTabBigNumber').style.color = '#333333'; 
   document.getElementById('layoutTabBigNumber').style.color = '#333333';
   document.getElementById('populateTabBigNumber').style.color = '#333333';
   document.getElementById('addToNavTabBigNumber').style.color = '#333333';
   document.getElementById('savePageTabBigNumber').style.color = '#333333';
      
      
  //  log(clickedTabBigNumberId);  
           
   document.getElementById(clickedTabId).style.backgroundColor = '#ffffff';
   document.getElementById(clickedTabBigNumberId).style.color = '#00cc00';
   
   
   //hide other divs 
   document.getElementById('template').style.display = 'none';
   document.getElementById('step2Container').style.display = 'none';//document.getElementById('previewDivContainer').style.display = 'none';
   document.getElementById('populate').style.display = 'none';
   document.getElementById('addToNav').style.display = 'none';
   document.getElementById('savePage').style.display = 'none';
   
   
  

   //display selected div
   if(divToOpen == 'layout'){
      document.getElementById('step2Container').style.display = 'block';
      document.getElementById('previewDivContainer').style.display = 'block';      
   }
   else { document.getElementById(divToOpen).style.display = 'block'; }


   //show/hide style options div
   if(divToOpen == 'populate'){  
      document.getElementById('colorControlContainer').style.display='block';
   }
   else {
      document.getElementById('colorControlContainer').style.display='none';
   }

} //end adminCustomNavTabClick



function popWindow(url, width, height){
//opens popup window with specified usr, width and height
// no nav bars, buttons or any other options but scrollbars
   var options='width=' + width + ',height=' + height +',toolbar=no,location=no,directories=no,status=no,scrollbars=no,menubar=no'; 
   toc_window = window.open(url,null,options);
} //end popWindow



function toggleArticle(articleName){
   fullContentRef = articleName + 'FullContent';
   teaserRef = articleName + 'Teaser';
   linkRef = articleName + 'toggle'; 
   

//   openLinkRef = articleName + 'open';
//   closeLinkRef = articleName + 'close';
     
  
   doOpen = true;
   if(document.getElementById(fullContentRef).style.display == 'block'){ doOpen = false;}


   
   if(doOpen){
      document.getElementById(teaserRef).style.display = 'none';
      document.getElementById(fullContentRef).style.display = 'block';
      document.getElementById(linkRef).innerHTML = 'Close';
    //  document.getElementById(openLinkRef).style.display = 'none';
    //  document.getElementById(closeLinkRef).style.display = 'block';
      
      
   }
   else{
      document.getElementById(teaserRef).style.display = 'block';
      document.getElementById(fullContentRef).style.display = 'none';
      document.getElementById(linkRef).innerHTML = 'Read All';
      
   //   document.getElementById(closeLinkRef).style.display = 'none';
   //   document.getElementById(openLinkRef).style.display = 'block';      
   }

   

} // end toggleArticle



function toggleDiv(obj, doOpen){ // show or hide a div
   if(doOpen){ document.getElementById(obj).style.display = 'block'; }
   else{ document.getElementById(obj).style.display = 'none'; }   
} //end toggleDiv

pageHashtable = {};
//will show or hide an element
function toggleElementById(id)
{
  obj = document.getElementById(id);
  if (pageHashtable[id] == null)
  {
     //hide
     pageHashtable[id] = obj.innerHTML;
     obj.innerHTML = '';
  }
  else
  {
     //show
     obj.innerHTML = pageHashtable[id];
     pageHashtable[id] = null;
  }
}

//note: update pages calling toggleDiv (above) and replace with this one
function toggleDiv2(linkType, obj, openText, closeText, linkObj){ // show or hide a div (and update link text) -- determines if opening or closing from div display status


   doOpen = true;
   if(document.getElementById(obj).scrollHeight > 0){ doOpen = false;}

   if(doOpen){ 
      document.getElementById(obj).style.display = 'block';
      if(linkType == 'text'){document.getElementById(linkObj).innerHTML = closeText;} 
      if(linkType == 'image'){document.getElementById(linkObj).src = closeText;} // closeText in this case is an image reference
   }
   else{ 
      document.getElementById(obj).style.display = 'none'; 
      if(linkType == 'text'){document.getElementById(linkObj).innerHTML = openText;} 
      if(linkType == 'image'){document.getElementById(linkObj).src = openText;} // closeText in this case is an image reference
      
   } 
} //end toggleDiv


function swapImage(objRef, imgRef){ //swap out an image
//objRef is the id of the image to be replaced
//imgRef must be a javascript image object (preloaded)

   document.getElementById(objRef).src = imgRef.src;
} // end swapImage


function sliderObj(name, description, imageLink){ //an item object for the browser widget
   this.name = name;
   this.description = description;
   this.img = new Image();
   this.img.src = imageLink;
   return this;
} //end itemObj


function imageSlider(dataObj, direction, showImage, transImage, descObj, width, animDelay){ //move item browser left or right
//dataObj: reference to structure containing the data for each item (an array of siderObj -- above)
//direction: direction of slide
//showImage:
//transImage:
//descObj: an object in which to write the description that goes with the image
//width: width of the images
//
//must have global: browseState to hold the state of the image browser (also make this a parameter -- for multiple instances)
//
//example call: imageSlider(browseArray, 'left', 'showImage', 'transImage', 'browserDesc', 150)
//
//need to have a line like this in page onload or image browser will be blank:
//imageSlider(browseArray, 'none', 'showImage', 'transImage', 'browserDesc', 150); //set intial state of image browser 
//
//CSS AND HTML:
// * must have outer container which is 'position:relative'
// * transImage and showImage must be positioned ABSULUTELY to the above outer container
//
/* EXAMPLE
#browser .holder {display:block; position:relative; float:left; overflow:hidden; width:150px; height:75px; margin-left:3px; border:1px solid #ccc;}
#browser #browserDesc{display:block; width:150px; font-size:.8em; margin:0 auto; border:1px solid #ccc; }
#browser #transImage{position:absolute; top:0px; display:none;} 
#browser #showImage{position:absolute; top:0px; left:0px; }



*/



   if(direction == 'none'){ //for onLoad
      document.getElementById(showImage).src = dataObj[dataObj.browseState].img.src;
      document.getElementById(descObj).innerHTML = dataObj[dataObj.browseState].description;
   }// end if no direction

   if(direction == 'left'){
      if(dataObj.browseState == 0){ boingItem(10, transImage, true, 'left'); return;} // return if all the way left
      dataObj.browseState--; //browseState--;
      document.getElementById(showImage).src = dataObj[dataObj.browseState+1].img.src;
      document.getElementById(transImage).src = dataObj[dataObj.browseState].img.src;
      document.getElementById(descObj).innerHTML = dataObj[dataObj.browseState].description;
      slideBrowseItem('left',-width, showImage, transImage, width, animDelay);
   } // end if left
   if(direction == 'right'){
      if(dataObj.browseState == dataObj.length-1){ boingItem(10, transImage, true, 'right'); return;} // return if all the way right   
      dataObj.browseState++; //browseState++;
      document.getElementById(showImage).src = dataObj[dataObj.browseState-1].img.src;
      document.getElementById(transImage).src = dataObj[dataObj.browseState].img.src;      
      document.getElementById(descObj).innerHTML = dataObj[dataObj.browseState].description;
      slideBrowseItem('right',width, showImage, transImage, width, animDelay);
      
   } // end else

} // end browseToggle

function slideBrowseItem(direction, position, showImage, transImage, width, animDelay){ //animate an image slide for image browser
   if((direction == 'left') && (position > 0)){ position = 0; }
   if((direction == 'right') && (position < 0)){ position = 0; }
   if(position == 0) { return; }
   
   if(direction == 'left'){
      position += 20;
      if(position > 0){ position = 0; }
      transPxPosition = position + 'px';
      showPxPosition = (position + width) + 'px';
      document.getElementById(transImage).style.display = 'block';
      document.getElementById(transImage).style.left = transPxPosition;
      document.getElementById(showImage).style.left = showPxPosition;
      eval('setTimeout("slideBrowseItem(\'left\',' + position + ', \'' + showImage + '\',\'' + transImage + '\',' +  width + ',\'' + animDelay + '\')",  animDelay);');
   } //end if left
   
   if(direction == 'right'){
      position -= 20;
      if(position < 0){ position = 0; }      
      transPxPosition = position + 'px';
      showPxPosition = (position - width) + 'px';      
      document.getElementById(transImage).style.display = 'block';
      document.getElementById(transImage).style.left = transPxPosition;
      document.getElementById(showImage).style.left = showPxPosition; 
      //eval('setTimeout("slideItem(\'right\',' + position + ')",  25);');
      eval('setTimeout("slideBrowseItem(\'right\',' + position + ', \'' + showImage + '\',\'' + transImage + '\',' +  width + ',\'' + animDelay + '\')",  animDelay);');
   } //end if left
           
} // end slideItem


function bounceItem(times, transImage){ // bounce the image (used when at end of list)
   if(times == 0){ return; }
   times--;
   
   if(times == 0){
      newTop = '0px';
      newLeft = '0px';
   }
   else{
      var min = -10;
      var max = 10;
      newTop = Math.round(Math.random() * (max - min) + min) + 'px';
      newLeft = Math.round(Math.random() * (max - min) + min) + 'px';
  }
  
  document.getElementById(transImage).style.left = newLeft;
  document.getElementById(transImage).style.top = newTop;
  


   eval('setTimeout("bounceItem(' + times + ',\'' + transImage + '\')",  20);');

} // end bounceItem


function boingItem(times, transImage, onEnd, direction ){ // boing the image (used when at end of list)
   if(times == 0){ return; }
   times-=1;
   
   
   if(times == 0){
      newLeft = '0px';
   }
   else{ 
      if(times % 2){newLeft = (times * 2) + 'px'; newOnEnd = false; }
      else{ newLeft = '0px'; newOnEnd = true; }
  }
  
  speed = times * 10;
  
  document.getElementById(transImage).style.left = newLeft;
  

   eval('setTimeout("boingItem(' + times + ',\'' + transImage + '\',\'' + newOnEnd + '\',\'' + direction + '\')",  speed);');

} // end boingItem


function searchIn(linkObj){
//bold the appropriate item in the search box and indicate choice in a hidden field

//unbold all
document.getElementById('searchLinkAll').style.fontWeight = 'normal';
document.getElementById('searchLinkPeople').style.fontWeight = 'normal';
document.getElementById('searchLinkCommunities').style.fontWeight = 'normal';
document.getElementById('searchLinkPodcasts').style.fontWeight = 'normal';

//bold the selected one
linkObj.style.fontWeight='900';

//set hidden form field to indicate what the user wants to search within
document.forms[0].searchType.value = linkObj.id;


//give focus to the search field
document.forms[0].searchFor.focus();

} // end searchIn


function getNodeValue(node)
{
  if (node == null)
   return '';
  else
   return node.nodeValue;
}


//Open Window
function openWindow(page){
   rand = (Math.random() * 1000);
   rand = Math.round(rand);
   windowName = 'window' + rand;
   window.open(page,windowName);
}