/**
 * Manage the multi-page featured content area
 */
FeaturedContent = {

   // Arrows
   _leftArrow:  null,
   _rightArrow: null,
   
   // Page selector
   _page:       null,
   _pageActive: null,
   
   // Content divs
   _container:  null,
   _content:    null,
   _active:     0,

   // Set up the arrows and 'page' buttons
   initialize: function() {
      
      // Find the elements we're after
      this._leftArrow  = $('arrow-left');
      this._rightArrow = $('arrow-right');
      this._page       = $('page-selector');
      this._pageActive = $$('#page-selector div')[0];
      this._container  = $('featured-content');
      
      // Find the alternative content
      this._content = $$('#featured-content>div');
      
      // Set the div height to the tallest div so the page doesn't jiggle
      // when we show a different page. Observe resize and do it again.
      this.setToTallest();
      Event.observe(window, 'resize', this.setToTallest.bind(this));
      
      // Show the arrows
      this._leftArrow.show();
      this._rightArrow.show();
      
      // Update our active value with the correct key
      for ( var i = 0, len = this._content.length; i < len; ++i ) {
         if ( this._content[i].readAttribute('id') == 'featured-default' ) {
            this._active = i;
         }
      }
      
      // Adjust height of arrow divs to center them vertically
      this.adjustArrowHeights();
      
      // Add listener for window resize
      Event.observe(window, 'resize', this.adjustArrowHeights.bind(this));
   
      // Add listener for arrow clicks
      this._leftArrow.observe('click', this.showPrevious.bind(this));
      this._rightArrow.observe('click', this.showNext.bind(this));
   
      // Show the page selector
      this._page.style.display = 'block';
      this._page.style.width   = (this._content.length*14) + 'px';
      
      // Update the active blob
      this.updateBlob();
   
   },
   
   // Adjust the arrow divs to align the arrows in the middle of the box
   adjustArrowHeights: function() {
      
      // Determine margin to apply
      var margin = Math.floor( (this._container.offsetHeight-70) / 2 )+ 'px';
      
      // Adjust the arrow div styles
      this._leftArrow.style.marginTop  = margin;
      this._rightArrow.style.marginTop = margin;
      
      this._leftArrow.style.height  = margin;
      this._rightArrow.style.height = margin;
      
   },
   
   // Show a different featured div
   show: function(key) {
   
      // Is this the same as the currently active div?
      if ( key == this._active ) {
         return;
      }

      // Hide the active div
      this._content[this._active].style.display = 'none';
      
      // And show the desired div
      this._content[key].style.display = 'block';
      
      // Update active key
      this._active = key;
   
      // And update the blob
      this.updateBlob();
   
   },
   
   // Show the previous div
   showPrevious: function() {
      this._active > 0 ? this.show(this._active-1) : this.show(this._content.length-1);
   },
   
   // Show the next div
   showNext: function() {
      this._active < this._content.length-1 ? this.show(this._active+1) : this.show(0);
   },
   
   // Reset the blob nav
   updateBlob: function() {
      this._pageActive.style.marginLeft = (this._active * 14) + 'px';
   },
   
   // Adjust the height to match the tallest possible content
   setToTallest: function() {

      var max = 0;
   
      // Go through all the divs and find the tallest
      for ( var i = 0, len = this._content.length; i < len; ++i ) {
      
         // Grab the relevant div
         var theDiv = this._content[i];
         
         // Show the div
         if ( i != this._active ) {
            theDiv.style.display = 'block';
         }

         // Is this a new maximum?
         if ( theDiv.offsetHeight > max ) {
            max = theDiv.offsetHeight;
         }
         
         // And hide it again
         if ( i != this._active ) {
            theDiv.style.display = 'none';
         }
         
      }
      
      // Set the height
      this._container.style.height = max +'px';

   }

};