/*
 * Project : IZI Framework 1
 * File    : thumbSwitcheroo.js
 * Date    : Wed Dec 17 13:03:26 CET 2008
 *
 * This Javascript Class can be used to create a slideshow using a set of 
 * thumbnails. Via a small navigator the user is able to choose a specific image
 * which will be displayed upon clicking the associated button in the navigator.
 * 
 * Changelog
 *   [pieter] initial release
 *
 * @link http://www.izi-services.nl
 * @author Pieter Hensen
 * @copyright IZI-Services
 * @package IZIFramework
 * @version 1.0
 *
 * @usage
 * 
 * First we create an object containing our thumbnails
 *
 * <script type="text/javascript">   
 *   //<![CDATA[
 *     var thumbnails = { thumbs: {
 *       1: { id: 1, index: 3, file: '10_large_3.jpg', title: 'Thumbnail 3', body: 'What a nice picture' }, 
 *       2: { id: 2, index: 4, file: '10_large_4.jpg', title: 'Thumbnail 4', body: 'What a nice picture' },
 *       3: { id: 3, index: 5, file: '10_large_5.jpg', title: 'Thumbnail 5', body: 'What a nice picture' }
 *     }, total: 3 };
 *   //]]>
 * </script>
 *
 * Second we create an unsorted list which will hold the thumbnails
 * 
 * <ul id="thumbnails"></ul>
 *
 * Then we create the navigator unsorted list
 * 
 * <ul id="navigator"></ul>
 *
 * And last but not...blabla...we initiate the Class
 *
 * var thumbSwitcheroo = new thumbSwitcheroo( thumbnails );
 *
 */
var thumbSwitcheroo = new Class({
  path: '/var/FlashHeader/slides/',   // thumbnail path
  thumbnails: new Object(),           // thumbails object
  thumbnail_elements: new Object(),   // thumbnails li elements
  current_thumbnail: 1,               // default selected thumbnail
  timer: 0,                           // looptimer placeholder
  interval: 3000,                     // loop interval in ms
  tweenHeight: false,                 // also tween heights?

  initialize: function( thumbnails )
  {
    this.thumbnails = thumbnails;
    this.initializeThumbnails();
    this.initializeNavigator();
    this.setThumbnail();
    this.setNavigator();
    // If more then one thumbnail, start the loop and bind it to the timer
    if( this.thumbnails.total > 1 ) {
      this.timer = this.loop.periodical(this.interval, this);
    }
  },

  /*
   * Inialize the thumbnail unsorted list
   */
  initializeThumbnails: function()
  {
    $each( this.thumbnails.thumbs, function( thumbnail ) {
      var element = new Element( 'li', { 'styles': { 'backgroundImage': 'url(' + this.path + thumbnail.file +')', 'opacity': 0  } } );
      var corner  = new Element( 'img' );
      corner.src = "/skins/default/images/header.corners.png";
      element.appendChild( corner );
      /*
      .adopt(
        new Element( 'p', { 'html': '', 
                            'styles': { 'height': 0, 'opacity': 0.7, 'text-align': 'right', 'padding-right': 20, 'font-weight': 'bold', 'color': '#FFFFFF' } } ));
                            */
      $( 'thumbnails' ).adopt( element );
    }.bind( this ));
    this.thumbnail_elements = $( 'thumbnails' ).getElements( 'li' );
  },

  /*
   * Initialize the navigator
   */
  initializeNavigator: function()
  {
    $each( this.thumbnails.thumbs, function( thumbnail ) {
      var element = new Element( 'li' ).adopt(
        new Element( 'a', { 'href': 'javascript:void(null)', 
                            'name': thumbnail.id, 
                            'html': thumbnail.title, 
                            'events': { 'mouseover': function(){ this.show(thumbnail.id) }.bind(this),
                                        'click': function(){ document.location.href = thumbnail.href; }.bind(this)
                                      } 
                          } 
        ));
      $( 'navigator' ).adopt( element );
    }.bind( this ));
  },

  /*
   * Display current thumbnail and hide previous one
   */
  setThumbnail: function()
  {
    // Display current thumbnail
    this.thumbnail_elements[ this.current_thumbnail-1 ].tween( 'opacity', 1 );
    if( this.tweenHeight )
      this.thumbnail_elements[ this.current_thumbnail-1 ].getElement('p').tween( 'height', 139 );
    if( this.current_thumbnail <= this.thumbnails.total ) {
      // Does the current thumbnail have a previous thumbnail
      if( this.thumbnail_elements[ this.current_thumbnail-1 ].getPrevious() ) {
        this.thumbnail_elements[ this.current_thumbnail-1 ].getPrevious().tween( 'opacity', 0 );
        if( this.tweenHeight )
          this.thumbnail_elements[ this.current_thumbnail-1 ].getPrevious().getElement('p').tween( 'height', 0 );
      } else {
        // Current thumbnail is first, so hide last thumbnail
        this.thumbnail_elements.getLast().tween( 'opacity', 0 );
        if( this.tweenHeight )
          this.thumbnail_elements.getLast().getElement('p').tween( 'height', 0 );
      }
    }
  },

  /*
   * Hide all thumbnails
   */
  hideAll: function ()
  {
    this.thumbnail_elements.each( function ( element ) {
      element.tween( 'opacity', 0 );
    });
  },

  /*
   * Hightlight the current thumbnail index on the navigator
   */
  setNavigator: function()
  {
    var element = $$('a[name=' + this.current_thumbnail + ']');
    $$('.navigator').getElements('a').each(function( element ) {
      element.removeClass('current');
    });
    element.addClass('current');
  },

  /*
   * Thumbnail loop
   */
  loop: function()
  {
    if( this.current_thumbnail < this.thumbnails.total ) {
      this.current_thumbnail++;
    } else {
      this.current_thumbnail = 1;
    }
    this.setThumbnail();
    this.setNavigator();
  },

  /*
   * Show the selected thumbnail by anchor name (thumbnail ID)
   *
   * @param HTML element (navigator anchor)
   */
  show: function( anchor )
  { 
    // Clear the current timer and set a new one
    $clear( this.timer );
    this.timer = this.loop.periodical(this.interval, this);
    this.current_thumbnail = anchor;
    this.hideAll();
    this.setThumbnail();
    this.setNavigator();
  }
});