/**
 * United Cardists Video Slider Class
 * (c) www.unitedcardists.net
 *
 * @modified 24.11.2009 - Chris
 */
 
var UCVidSlider = new Class(
  {
  Implements: [Options, Events],
  options: {
    slidesContainer: null,    // parent container for slides
    slideInterval: 3000,      // interval between slides
    feed: ''                  // url to json feed for video information
  },
  count: 0,                     // contains currently shown slide
  slides: new Array(),          // contains html slides
  slideEvents: new Array(),     // contains slide events
  loading: null,                // contains loading indicator div
  currentTimer: 0,              // contains the current timer id of the next slide event
  lastFunction: this.slideDown, // the last slide event to be called
  pauseStart: null,             // remember start of slide-pause
  
  /**
   * Initialize class and start slider
   */
  initialize: function (options)
    {
    this.setOptions(options);
    // save scope
    VidSlider = this;
    this.slidesContainer = $(this.options.slidesContainer);
    // kick off slider
    this.getSlides();
    },
  
  
  /**
   * Get video information via ajax and onload-callback start building slides
   */
  getSlides: function ()
    {   
    // show loading indicator
    this.loading = new Element('div', {'class': 'uc_vid_slider_loading'});
    var loadingImage = new Element('img', {
      'src': '/uc/portal/img/uc_vid_slider_loading.gif',
      'align': 'absmiddle'});
    loadingImage.inject(this.loading);
    this.loading.appendText('loading latest media..');    
    this.loading.inject(this.slidesContainer);
    
    // get slides from JSON feed via ajax request
    var getSlidesRequest = new Request.JSON({
      url: this.options.feed,
      onComplete: function (data)
        {
        if (data)
          {
          // remove loading information
          VidSlider.slidesContainer.empty();
          // build slides
          VidSlider.slides = data;
          VidSlider.buildSlides();
          }
        else
          {
          VidSlider.loading.set('html', 'Error: could not load <a href="/uc/portal/media/">latest media</a>');
          }
        }}).get();
    },
  
  
  /**
   * Build HTML slides and start sliding
   */
  buildSlides: function ()
    {
    // loop slides and build html elements
    this.slides.each(function (slide, index)
      {              
      var slideContainer = new Element('div', {
        'id': 'uc_vid_slide'+index,
        'class': 'uc_vid_slide',
        'events': {
          // pause sliding on mouseenter
          'mouseenter': this.slidePause.bind(this),
          // continue on mouseleave
          'mouseleave': this.slideContinue.bind(this)
          }
        });
      // thumbnail
      var slideThumb = new Element('div', {'class': 'uc_vid_slider_thumb'});
      var slideThumbImage = new Element('img', {
        'src': '/uc/portal/'+slide.thumbnail,
        'height': 65,
        'width': 90});
      slideThumbImage.inject(slideThumb);
      slideThumb.inject(slideContainer);
      // info
      var slideInfo = new Element('div', {'class': 'uc_vid_slider_info'});
      var link_to_video = '/uc/portal/media/video/'+slide.key;
      var slideTitle = new Element('a', {
        'href': link_to_video,
        'class': 'uc_vid_slider_title',
        'html': slide.title});
      var slideInfoText = new Element('div', {
        'html': '<img src="/uc/portal/img/icons/004_03.gif" title="views" />'+slide.views+
                ' - <img src="/uc/portal/img/icons/004_04.gif" title="rating" />'+slide.rating+
                ' - <a href="'+link_to_video+'#bottom" title="comments"><img src="/uc/portal/img/icons/004_31.gif" />'+slide.comments+'</a>'});
      var moreInfo = new Element('div', {
        'html': '<img src="/uc/portal/img/icons/004_13.gif" />'+slide.user});
      // assemble slide
      slideTitle.inject(slideInfo);
      slideInfoText.inject(slideInfo);
      moreInfo.inject(slideInfo);
      slideInfo.inject(slideContainer);
      slideContainer.inject(this.slidesContainer);
      
      // initiate a slide event for each slide
      this.slideEvents[index] = new Fx.Slide(slideContainer);
      }, this);
      
    // start sliding after initial wait
    this.slideUp.delay(this.options.slideInterval, this);
    },
  
  
  /**
   * Move slides up by 1
   */
  slideUp: function ()
    {
    if (this.count == this.slides.length-1)
      {
      this.slideDown();
      return;
      }
    else
      {
      this.slideEvents[this.count].slideOut();
      this.count++;
      }
      
    this.lastFunction = this.slideUp;
    this.currentTimer = this.slideUp.delay(this.options.slideInterval, this);
    },
  
  
  /**
   * Moves slides down by 1
   */
  slideDown: function ()
    {
    this.slideEvents[this.count-1].slideIn();
    this.count--;
    
    if (this.count == 0)
      {
      this.lastFunction = this.slideUp;
      this.currentTimer = this.slideUp.delay(this.options.slideInterval, this);
      }
    else
      {
      this.lastFunction = this.slideDown;
      this.currentTimer = this.slideDown.delay(this.options.slideInterval, this);
      }
    },
    
    
  /**
   * Pause sliding when user hovers over slide and wait until mouse leaves
   */  
  slidePause: function ()
    {
    // remember when user paused
    this.pauseStart = new Date();
    // clear next slide event
    $clear(this.currentTimer);
    },
    
  
  /**
   * Continue slides when user leaves slide with mouse
   * Calculate the initial wait depending on how long the user already waited
   */
  slideContinue: function ()
    {
    // subtract the beginning of the pause from the current time
    var now = new Date();
    var secondsPassed = now.getTime()-this.pauseStart.getTime();
    // but wait at least 1 sec
    var interval = (this.options.slideInterval-secondsPassed);
    if (interval < 1000) interval = 1000;
    
    if (!this.lastFunction)
      this.lastFunction = this.slideDown;
    this.currentTimer = this.lastFunction.delay(interval, this);
    }
  });