/*** Asset: asset/scripts/carousel.js ***/
/**
 * Switching tabs
 *
 * @package Mootools
 * @author  Alan Roemen
 * @version 1.0
 * @uses    MooTools core v1.2.4
*/
var Carousel = new Class({
	Implements: [Options, Events, Chain],

  _active: 0,

  _loading: false,

  options: {
    'active_name': 'ad-display',
    'active_navigation': 'ad-active',
    'auto_run': 14,
    'auto_direction': 'right',
    'navigation': true,
    'next': false,
    'prev': false,
    'relative_el': null,
		'child_el': 'div',
    'zindex': {
      'top': 9999,
      'bottom': 9998
    },
    'fx_in': {
      'duration': 500
    },
    'fx_out': {
      'duration': 500
    }
  },

	initialize: function(wrapper, options) {
    if ($type(wrapper) == 'string')
      this.wrapper = $(wrapper);
    else this.wrapper = wrapper;
    if (!this.wrapper) return;

		this.setOptions(options);
    this.content = this.wrapper.getChildren(this.options.child_el);

    if (this.options.navigation === true) {
      this.navigation = this.wrapper.getElement('ul').getElements('li');
      this.navigation.each(function(el, i){
        el.addEvent('click', this.nav_click.bindWithEvent(this, i));
      }.bind(this));
    }

    if (this.options.next !== false)
      $(this.options.next).addEvent('click', this.right.bindWithEvent(this));
    if (this.options.prev !== false)
      $(this.options.prev).addEvent('click', this.left.bindWithEvent(this));

    if (this.options.auto_run !== false){
		this.auto_run();
	}
  },

  auto_run: function() {
    if (this.options.auto_run <= 0) return;
    this.ar_timer = this[this.options.auto_direction].periodical((this.options.auto_run * 1000), this);
  },

  right: function(e) {
    if (e) e.stop();
    var length = this.content.length;
    var tab = this._active + 1;
    if (tab >= length) tab = 0;
    this.switch_to(tab);
  },

  left: function(e) {
    if (e) e.stop();
    var length = this.content.length;
    var tab = this._active - 1;
    if (tab < 0) tab = length - 1;
    this.switch_to(tab);
  },

  nav_click: function(e, tab) {
    e.stop(); // stop click event
    $clear(this.ar_timer);
    this.switch_to(tab);
  },

	switch_to: function(tab){
		if(this._loading || this._active == tab) return;
		this._loading = true;
		var old = this._active;
		var cords = this.content[old].getCoordinates(this.options.relative_el);
		this.fxOld = new Fx.Tween(this.content[old], this.options.fx_out);
		this.fxNew = new Fx.Tween(this.content[tab], this.options.fx_in);

		this.content[tab].set('opacity', 0);
		this.content[tab].addClass(this.options.active_name);
    if (this.content[tab].getStyle('position') != 'absolute') {
      this.content[tab].setStyles({
        'position': 'absolute',
        'top': cords.top,
        'left': cords.left
      });
    }

		if (this.options.navigation) {
			this.navigation.removeClass(this.options.active_navigation);
			this.navigation[tab].addClass(this.options.active_navigation);
		}

		this.fxOld.start('opacity', [1,0]).chain(function(){
			this.content[old].removeClass(this.options.active_name);
			this.content[old].removeProperty('style');
			this.content[tab].removeProperty('style');														  	
		}.bind(this));
		
		this.fxNew.start('opacity', [0,1]).chain(function(){
			this._active = tab;
			this._loading = false;
		}.bind(this));
	}

});
