﻿var mootabs = new Class({
  Implements: [Options, Events],
  options: {
    width:            '100%',
    height:           '650px',
    changeTransition: Fx.Transitions.Bounce.easeOut,
    duration:         1000,
    mouseOverClass:   'active',
    activateOnLoad:   'first',
    useAjax:          false,
    ajaxUrl:          '',
    ajaxOptions:      { method:'get' },
    ajaxLoadingText:  'Loading...',
    cookieName:       'MooTabsActiveTab',
		cookiePath:       '/'
  },
  
  initialize: function( element , options ){
    this.setOptions( options );
    this.el = $( element );
    this.elid = element;
    this.el.setStyles({
      height: this.options.height,
      width: this.options.width
    });
    this.titles = $$( '#' + this.elid + ' ul.mootabs-titles li.mootabs-title' );
    this.panelHeight = this.el.getSize().y - ( this.titles[0].getSize().y );
    this.panels = $$( '#' + this.elid + ' ul.mootabs-panels li.mootabs-panel' );
    this.panels.setStyle( 'height' , this.panelHeight );
    this.titles.each( function( item ) {
       /* jkv20090602 */
			/*
      item.addEvent( 'click' , function(){
				item.removeClass( this.options.mouseOverClass );
        this.activate( item );
      }.bind( this ) );
			*/
			/* //jkv20090602 */
      item.addEvent( 'mouseover' , function(){
				/* jkv20090602 */
				/*
        if( item != this.activeTitle ){
          item.addClass( this.options.mouseOverClass );
        }
				*/
				this.activate( item );
				/* //jkv20090602 */
      }.bind( this ) );
			/* jkv20090602 */
			/*
      item.addEvent( 'mouseout' , function(){
        if( item != this.activeTitle ){
          item.removeClass( this.options.mouseOverClass );
        }
      }.bind( this ) );
			*/
			/* //jkv20090602 */
    }.bind( this ) );
    if( this.options.activateOnLoad != 'none' ){
			if( this.options.activateOnLoad == 'cookie' ){
				var tabNo = Cookie.read( this.options.cookieName.toUpperCase() );
				if( tabNo ) {
					this.activate( $( 'mootabs-title-' + tabNo ) , true );
				}
				else {
					this.activate( this.options.activateOnLoad , true );
				}
			}
      else if( this.options.activateOnLoad == 'first' ){
        this.activate( this.titles[0] , true );
      }
      else{
        this.activate( this.options.activateOnLoad , true );
      }
    }
  },
  
  activate: function( tab , skipAnim ){
    if( ! $defined( skipAnim ) ){
      skipAnim = false;
    }
    if( $type( tab ) == 'string' ){
      myTab = $$( '#' + this.elid + ' ul li' ).filter( '[title=' + tab + ']' )[0];
      tab = myTab;
    }
    if( $type( tab ) == 'element' ){
      var newTabId = tab.getProperty( 'id' );
			var newPanelId = newTabId.split( '-' )[0] + "-panel-" + newTabId.split( '-' )[2];
      this.panels.removeClass('active');
      this.activePanel = $(newPanelId);
      this.activePanel.addClass('active');
      if(this.options.changeTransition != 'none' && skipAnim==false){
        this.activePanel.setStyle('height', 0);
        var changeEffect = new Fx.Elements(this.activePanel, {duration: this.options.duration, transition: this.options.changeTransition});
        changeEffect.start({
          '0': {
            'height': [0, this.panelHeight]
          }
        });
      }
      this.titles.removeClass('active');
      tab.addClass('active');
			if( this.options.activateOnLoad == 'cookie' ) {
				Cookie.write( this.options.cookieName.toUpperCase() , tab.getProperty( 'id' ).split( '-' )[2] , { path: this.options.cookiePath } );
			}
      this.activeTitle = tab;
      if(this.options.useAjax){
        this.getContent();
      }
    }
  },
  
  getContent: function(){
    this.activePanel.set('text', this.options.ajaxLoadingText);
    var newOptions = { url: this.options.ajaxUrl + '?tab=' + this.activeTitle.get('title'), update: this.activePanel.get('id') } ;
    this.options.ajaxOptions = $extend(this.options.ajaxOptions, newOptions);
    var req = new Request.HTML(
      this.options.ajaxOptions
    ).send();
  },
  addTab: function(title, label, content){
    var newTitle = new Element('li', {
      'title': title
    });
    newTitle.appendText(label);
    this.titles.include(newTitle);
    $$('#' + this.elid + ' ul').adopt(newTitle);
    newTitle.addEvent('click', function(){
      this.activate(newTitle);
    }.bind(this));
    newTitle.addEvent('mouseover', function() {
      if(newTitle != this.activeTitle){
        newTitle.addClass(this.options.mouseOverClass);
      }
    }.bind(this));
    newTitle.addEvent('mouseout', function() {
      if(newTitle != this.activeTitle){
        newTitle.removeClass(this.options.mouseOverClass);
      }
    }.bind(this));
    var newPanel = new Element('div', {
      'style': {'height': this.options.panelHeight},
      'id': title,
      'class': 'mootabs_panel'
    });
    if(!this.options.useAjax){
      newPanel.setHTML(content);
    }
    this.panels.include(newPanel);
    this.el.adopt(newPanel);
  },
  
  removeTab: function(title){
    if(this.activeTitle.title == title){
      this.activate(this.titles[0]);
    }
    $$('#' + this.elid + ' ul li').filter('[title='+title+']')[0].dispose();
    $$('#' + this.elid + ' .mootabs_panel').filter('[id='+title+']')[0].dispose();
  },
  
  next: function(){
    var nextTab = this.activeTitle.getNext();
    if(!nextTab){
      nextTab = this.titles[0];
    }
    this.activate(nextTab);
  },
  
  previous: function(){
    var previousTab = this.activeTitle.getPrevious();
    if(!previousTab){
      previousTab = this.titles[this.titles.length - 1];
    }
    this.activate(previousTab);
  }
});
