/**
 * Reshuffle the content on window resize.
 */
ResizeContent = Class.create({

   // Array of side-by-side divs
   _divs:   null,
   padding: 0,
   
   // Store the passed values, add the observer and do a resize
   initialize: function(divs, padding) {
   
      // Save the divs
      this._divs    = divs;
      
      // Save padding value if given. This is the amount of padding/margins
      // to subtract from the offsetHeight to get the content area. Padding
      // is not available to js when defined in css so we must pass it manually.
      // Not ideal but no alternative, afaik.
      this._padding = padding ? padding: 0;
      
      // Observe window resize and fix the heights initially
      Event.observe(window, 'resize', this.go.bind(this));
      this.go();
      
   },
   
   // Do the resizing
   go: function() {
   
      // Max height
      var max = 0;
   
      // Go through all the divs and find the tallest
      for ( var i = 0, len = this._divs.length; i < len; ++i ) {
      
         // Grab the relevant div
         var theDiv = this._divs[i];
      
         // Reset any previously applied height
         theDiv.style.height = 'auto';
         
         // Is this a new maximum?
         if ( theDiv.offsetHeight-this._padding > max ) {
            max = theDiv.offsetHeight-this._padding;
         }
         
      }
      
      // Set all divs to this height
      for ( var i = 0, len = this._divs.length; i < len; ++i ) {
         this._divs[i].style.height = max+'px';
      }
   
   }
   
});


/**
 * Switch news between network titles and site titles.
 */
SwitchNews = {

   // Link elements
   _siteLink:    null,
   _networkLink: null,
   
   // Title container elements
   _siteTitles:    null,
   _networkTitles: null,
   
   // Which is currently active?
   _siteIsActive: null,

   // Constructor sets up listener for switch and adjusts styles
   // to indicate the titles are switchable.
   initialize: function() {
   
      // Find the links
      this._siteLink    = $('site-news-link');
      this._networkLink = $('network-news-link');
    
      // Find the news titles
      this._siteTitles    = $('site-news');
      this._networkTitles = $('network-news');
    
      // Find which one should be active
      this._siteIsActive = this._siteLink.hasClassName('active') ? true : false;
    
      // Ensure it is active
      this._siteIsActive ? this.showSite() : this.showNetwork();

      // Preload required images
      Preload.add('http://media.gtanet.com/gta4/images/titles/auto/site-news-tbogt.gif');
      Preload.add('http://media.gtanet.com/gta4/images/titles/auto/site-news-inactive-tbogt.gif');
      Preload.add('http://media.gtanet.com/gta4/images/titles/auto/network-news-tbogt.gif');
      Preload.add('http://media.gtanet.com/gta4/images/titles/auto/network-news-inactive-tbogt.gif');
      
   },
   
   // Show the site news
   showSite: function() {
   
      // Show the site titles, hide the network titles
      this._siteTitles.style.display = 'block';
      this._networkTitles.style.display = 'none';
      
      // Reset the links (styles and observers)
      this._resetLinks();
      
      // Mark the site link as active and change the images
      this._siteLink.addClassName('active');
      this._siteLink.src = 'http://media.gtanet.com/gta4/images/titles/auto/site-news-tbogt.gif';
      
      // Make the network link look clickable
      this._networkLink.addClassName('switchable');
      this._networkLink.src = 'http://media.gtanet.com/gta4/images/titles/auto/network-news-inactive-tbogt.gif';
      
      // And add its observers
      this._networkLink.observe('click', this.showNetwork.bind(this));
      this._networkLink.observe('mouseover', function() {
         this.src = 'http://media.gtanet.com/gta4/images/titles/auto/network-news-tbogt.gif';
      });
      this._networkLink.observe('mouseout', function() {
         this.src = 'http://media.gtanet.com/gta4/images/titles/auto/network-news-inactive-tbogt.gif';
      });
      
   },
   
   // Show the network news
   showNetwork: function() {
   
      // Show the network titles, hide the site titles
      this._siteTitles.style.display = 'none';
      this._networkTitles.style.display = 'block';
      
      // Reset the links (styles and observers)
      this._resetLinks();
      
      // Mark the network link as active and change the images
      this._networkLink.addClassName('active');
      this._networkLink.src = 'http://media.gtanet.com/gta4/images/titles/auto/network-news-tbogt.gif';
      
      // Make the site link look clickable
      this._siteLink.addClassName('switchable');
      this._siteLink.src = 'http://media.gtanet.com/gta4/images/titles/auto/site-news-inactive-tbogt.gif';
      
      // And add its observer
      this._siteLink.observe('click', this.showSite.bind(this));
      this._siteLink.observe('mouseover', function() {
         this.src = 'http://media.gtanet.com/gta4/images/titles/auto/site-news-tbogt.gif';
      });
      this._siteLink.observe('mouseout', function() {
         this.src = 'http://media.gtanet.com/gta4/images/titles/auto/site-news-inactive-tbogt.gif';
      });
   
   },
   
   // Reset the links (styles and observers)
   _resetLinks: function() {
      this._siteLink.removeClassName('switchable').removeClassName('active').stopObserving();
      this._networkLink.removeClassName('switchable').removeClassName('active').stopObserving();
   }

};

/**
 * 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-30) / 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';

   }

};

/**
 * Preload images
 */
Preload = {

   // Array of images to load
   _toLoad: new Array(),
   
   // Image element
   _img: new Image(),

   // Add an image to the preload stack
   add: function(url) {
      this._toLoad.push(url);
   },
   
   // Do the preloading
   go: function() {
      
      // Check we have images
      if ( this._toLoad.length < 1 ) {
         return;
      }
      
      // Add the image to the document (hidden)
      var div = $(document.createElement('div'));
      div.appendChild(this._img);
      div.setStyle({display: 'none'});
      document.body.appendChild(div);
      
      // Load the first image
      this._img.src = this._toLoad.first();
      
      // Observe for when its loaded (so we can swap it)
      this._img.observe('load', this._next.bind(this));
      
   },
   
   // Update src after one image has loaded
   _next: function() {
   
      // Remove current src from array
      this._toLoad = this._toLoad.without(this._img.src);
      
      // If we have any images left, show the next one
      if ( this._toLoad.length ) {
         this._img.src = this._toLoad.first();
      }
      
   }

};


/**
 * Convert a number of seconds to relative string.
 */
function secondsToRelativeString(secondsAgo) {

   // Display it in seconds if it's less than a minute
   if ( secondsAgo < 60 ) {
      return secondsAgo == 1 ? '1 second ago' : secondsAgo + ' seconds ago';
   }
   
   // Display it in minutes if it's less than an hour
   var minutesAgo = Math.round(secondsAgo/60);
   if ( minutesAgo < 60 ) {
      return minutesAgo == 1 ? '1 minute ago' : minutesAgo + ' minutes ago';
   }
   
   // Display it in hours if it's less than an day
   var hoursAgo = Math.round(minutesAgo/60);
   if ( hoursAgo < 24 ) {
      return hoursAgo == 1 ? '1 hour ago' : hoursAgo + ' hours ago';
   }
   
   // Display it in days if it's less than a month
   var daysAgo = Math.round(hoursAgo/24);
   if ( daysAgo < 31 ) {
      return daysAgo == 1 ? 'yesterday' : daysAgo + ' days ago';
   }
   
   // Display it in months if it's less than a year
   var monthsAgo = Math.round(daysAgo/30);
   if ( monthsAgo < 12 ) {
      return monthsAgo == 1 ? '1 month ago' : monthsAgo + ' months ago';
   }
   
   // Display it in years if we're still here
   var yearsAgo = Math.round(monthsAgo/12);
   return yearsAgo == 1 ? '1 year ago' : yearsAgo + ' years ago';
   
}


/**
 * Roundificate the corners for IE
 */
DD_roundies.addRule('.greybox', '12px');
DD_roundies.addRule('.whitebox', '6px');
DD_roundies.addRule('.lightgreybox', '6px');
DD_roundies.addRule('.news-titles a', '7px');