$(document).ready(function () {

//////// Crossfading banner image 
  var DELAY_TIME = 3000;
  var XFADE_TIME = 1000;  
  var $img = $('div#banner ul img');
  var img_URLs = $img.map(function (i,e){ return e.src });   
  var current = 0;
   
  function fadeNext() {
// Set src URL of bottom layer to old image (both layers are now the same).
    $img.eq(1).attr('src', img_URLs[current]);
      
// Advance to new image.
    current = (current + 1) % $img.length;
    
// Delay.
    setTimeout(function () {
// Hide top layer, set src URL to new image, fade in, and loop.
        $img.eq(0)
            .hide()
            .attr('src', img_URLs[current])
            .fadeIn(XFADE_TIME, fadeNext);          
    }, DELAY_TIME);
  }
  
// Start the loop  
  if ($img.length) fadeNext();
  
//////// Drop-down menu
  
// for each direct LI descendant of the menu UL#product-navigation ..
  $('#product-navigation > li')
// on click ..
    .click(function (){
      $this = $(this);
// expand/toggle it ..
      $this.find('div').toggleClass('expanded');
// and collapse its siblings.
      $this.siblings().find('div').removeClass('expanded');
    });

//////// INPUT hints
    
// for all INPUT elements with a 'hint' attribute ..
  $('input[hint]')
// assign this 'hint' attribute to their 'value' attributes ..
    .each(function (){ $this = $(this); $this.val($this.attr('hint')); })
// and clear it once, on focus.
    .one('focus', function (){ this.value = ''; });
    
//////// Thumbnail preview switch

  $('#image-set dd.small-image a').click(function () {
// Set the (large) active image src attribute to the clicked image src.
      $('#image-set dt.active-image a img').attr('src', $('img', this).attr('src'));
      $('#image-set dt.active-image a').attr('href', $('img', this).attr('src'));
      return false;
  });



/////// accordion
    //$('ul.categories').accordion();
}); /* end document.ready */