//
//    Son of Quidditch
//    Version 0.01
//
//    [09.07.22] just messing around
//

var soq = new Class
({
  Implements: [ Options ],
  
   options:
  {
    autoPlay: true,
    resizeDuration: 400,
    fadeDuration: 250,
    cycleDuration: 5000,
    cycleDelay: 0,
    collapseThreshold: 1,
    titleToPager: false
  },
  
  initialize: function(elements, options)
  {
    this.setOptions(options);
    
    this.elements = $$(elements);
    
    if(! this.elements.length ) return;
    
    this.limit = this.elements.length;
    
    this.container = this.elements[0].getParent();
    
    this.parent_container = this.container.getParent();
    
    if( this.limit <= this.options.collapseThreshold )
    {
      return;
    }
    else
    {
      this.elements.addClass('collapsable');
      this.parent_container.addClass('collapsable');
    }
    
    this.pager = new Element('div',{'class':'pager-fader'}).injectBefore(this.container);
    
    this.elements.each
    (
      function(element,i)
      {
        i++;
        
        var value = i;
        
        element.setStyle('opacity',0);
        
        this.id = new Element('span',{'class':'id'}).inject(this.pager);
        
        if( this.options.titleToPager )
        {
          var title = element.getElement('h2');
          
          title.setStyle('display','none');
          
          value = title.innerHTML;
        }
        
        this.id.set('html',value);
        
        /* rounded corners */
        //new Element('span',{'class':'corner left'}).inject(this.id);
        //new Element('span',{'class':'corner right'}).inject(this.id);
        /* end rounded corners */
        
        this.id.addEvent
        (
          'click', function(event)
          {
            this.fadeTo(i);
          }
          .bind(this)
        );
      }
      ,this
    );
    
    this.triggers = this.pager.getElements('span.id');
    
    this.current_index = 0;
    
    this.elements[this.current_index].setStyle('opacity',1);
    
    this.resize();
    
    if (this.options.autoPlay)
    {
      this.fadeTo();
      
      this.delay =
      (
        function()
        {
          this.autoplay();
        }
        .bind(this)
      )
      .delay(this.options.cycleDelay);
    }
    else
    {
      this.fadeTo();
    }
    
    $$( this.container , this.pager ).addEvents
    ({
      'mouseover': function()
      {
        $clear(this.cycle);
      }
      .bind(this),
      
      'mouseleave': function()
      {
        if( this.options.autoPlay ) this.autoplay(this.current_index);
      }
      .bind(this)
    });
    
    if( this.limit == 1 ) this.pager.setStyle('display','none');
  },
  
  resize: function()
  {
    this.current_element = this.elements[this.current_index];
    
    this.height = this.current_element.getCoordinates().height;
    
    this.containerFx = new Fx.Morph
    (
      this.container,
      {
        link: 'cancel',
        duration: this.options.resizeDuration,
        transition: 'expo:in:out'
      }
    );
    
    if( Browser.Engine.trident )
    {
      this.containerFx.set
      ({
        'height': this.height
      });
    }
    else
    {
      this.containerFx.start
      ({
        'height': this.height
      });
    }
  },
  
  fadeTo: function(index)
  {
    if(! index ) index = 1;
    
    index = index-1;
    
    this.triggers[index].addClass('selected');
    
    //this.triggers[index].morph('.selected-trigger');
    
    if( index == this.current_index ) return;
    
    this.triggers[this.current_index].removeClass('selected');

    //this.triggers[this.current_index].morph('.unselected-trigger');
    
    this.current_elementFx = new Fx.Morph
    (
      this.elements[this.current_index],
      {
        link: 'cancel',
        duration: this.options.fadeDuration,
        transition: 'cubic:in:out'
      }
    );
    
    this.elementFx = new Fx.Morph
    (
      this.elements[index],
      {
        link: 'cancel',
        duration: this.options.fadeDuration,
        transition: 'cubic:in:out'
      }
    );
    
    this.current_elementFx.start
    ({
      'opacity': 0
    })
    .chain
    (
      function()
      {
        this.elementFx.start
        ({
          'opacity': 1
        });
      }
      .bind(this)
    );
    
    this.current_index = index;
    
    this.resize();
  },
  
  autoplay: function(index)
  {
    if(! index )
    {
      index = 1;
    }
    else
    {
      index = index+1;
    }
    
    this.cycle =
    (
      function()
      {
        index++;
        
        if( index >= this.limit+1 ) index = 1;
        
        this.fadeTo(index);
      }
      .bind(this)
    )
    .periodical(this.options.cycleDuration);
  }
  
});