var Tabbed = new JS.Class({
  include: Ojay.Observable,
    
  initialize: function(tabs, options) {
    options = options || {};
    
    this.setup_toggles(tabs, options);
    
    this.tabs = Ojay(tabs).map(function(el) {
      return new this.klass.Tab(this, Ojay(el), options);
    }.bind(this));
    
    if (options.width && options.height) {
      this.width = options.width, this.height = options.height;
      Ojay(tabs).parents().at(0).setStyle({height: this.height});
    }
    
    this.toggle(0);
  },
  
  setup_toggles: function(tabs, options) {
    var self = this;
    this.toggles = [];
    
    var toggles = Ojay(Ojay.HTML.ul({className: this.klass.TOGGLES_CLASS}, function (H) {
      Ojay(tabs).children(self.klass.TOGGLE_SELECTOR).forEach(function(header, i) {
        header.hide();
        var toggle = Ojay(H.li(header.node.innerHTML)).addClass('toggle-' + i);
        if (i === 0) toggle.addClass('first');
        if (i === tabs.length - 1) toggle.addClass('last');
        self.toggles.push(toggle);
        toggle.on('click', function() { self.toggle(i); });
      });
    }));
    
    if (typeof options.width != 'undefined') toggles.setStyle({width: options.width});
    
    Ojay(tabs).parents().at(0).insert(toggles, options.position || 'before');
  },
  
  toggle: function(index, options) {
    options = options || {};
    
    if (index >= this.tabs.length) index = 0;
    if (this.current_tab == index || this.animating) return;
    
    if (typeof this.current_tab == 'undefined') {
      this.current_tab = index;
      this.toggles[index].addClass('current');
      this.tabs[index].show();
    } else {
      this.animating = true;
      this.toggles.forEach(function(toggle) { toggle.removeClass('current'); });
      this.toggles[index].addClass('current');
      this.tabs[this.current_tab].hide()._(function(self) {
        self.current_tab = index;
        self.tabs[index].show()._(function() {
          self.animating = false;
          if (options.silent !== true) self.notifyObservers('tabchange', index);
        });
      }, this);
    }
  },
  
  extend: {
    TOGGLE_SELECTOR: '.tab-toggle',
    TOGGLES_CLASS:   'tab-toggles clear',
    ANIMATE_SPEED:    0.2,
    
    Tab: new JS.Class({
      
      initialize: function(group, el, options) {
        this._wrapper = el, this.group = group;
        this.animateSpeed = options.animateSpeed || this.group.klass.ANIMATE_SPEED;
        this._wrapper.hide().setStyle({opacity: 0});
        if (this.group.height)
          this._wrapper.setStyle({position: 'absolute', top: 0, left: 0});
      },
      
      hide: function() {
        var chain = new JS.MethodChain;
        this._wrapper.animate({opacity: {to: 0}}, this.animateSpeed).hide()
        ._(function(self) { chain.fire(self); }, this)._(this);
        return chain;
      },
      
      show: function() {
        var chain = new JS.MethodChain;
        this._wrapper.show().animate({opacity: {to: 1}}, this.animateSpeed)
        ._(function(self) { chain.fire(self); }, this)._(this);
        return chain;
      }
    })
  }
});

var TabbedCarousel = new JS.Class({
  initialize: function(wrapper, options) {
    options = options || {};
    this.wrapper = Ojay(wrapper);
    this.tabs = new Tabbed(this.wrapper.descendants(this.klass.TAB_SELECTOR),
      {width: options.width || this.wrapper.getWidth() + 'px',
       height: options.height ||
        this.wrapper.descendants('.carousel-item').at(0).getHeight()
        + (this.klass.OFFSETS[1] * 2) + 'px'});
    this.pagers = [];
    this.addCarousels(options);
    this.setupListeners();
    this.pagers[0].setup().addControls('before');
    this.wrapper.descendants('.page').forEach(function(page) {
      page.children('.carousel-item').at(0).addClass('carousel-item-first');
    });
  },
  
  addCarousels: function(options) {
    this.wrapper.descendants(this.klass.CAROUSEL_SELECTOR)
    .forEach(function(cwrap) {
      var paginator = new Ojay.Paginator(cwrap,
        {columns: options.columns || 3, rows: options.rows || 1});
      this.pagers.push(paginator);
    }.bind(this));
  },
  
  setupListeners: function() {
    this.tabs.on('tabchange', function(tabs, index) {
      if (!this.pagers[index]) return;
      
      this.pagers[index].setup().addControls('before');
      
      this.wrapper.descendants('.page').forEach(function(page) {
        page.children('.carousel-item').at(0).addClass('carousel-item-first');
      });
      
      delete pagers[index];
    }, this);
  },
  
  extend: {
    TAB_SELECTOR: '.tab',
    CAROUSEL_SELECTOR: '.carousel',
    OFFSETS: [29, 16]
  }
});

var TabbedPromotion = new JS.Class({
  initialize: function(wrapper, options) {
    options = options || {};
    this.wrapper = Ojay(wrapper);
    
    this.tabbed = new Tabbed(
      this.wrapper.descendants(this.klass.TAB_SELECTOR),
      options);
    
    this.tabbed.on('tabchange', function(tabs, index) {
      this.interval = this.klass.INTERVAL * 2;
      this.lastChanged = Number(new Date);
    }, this);
    
    this.setupTransitions();
  },
  
  setupTransitions: function() {
    this.interval = this.klass.INTERVAL;
    this.lastChanged = Number(new Date);
    
    setInterval(function() {
      var time = Number(new Date);
      if (time - this.lastChanged > this.interval) {
        this.lastChanged = time;
        this.interval = this.klass.INTERVAL;
        this.tabbed.toggle(this.tabbed.current_tab + 1, {silent: true});
      }
    }.bind(this), 250);
  },
  
  extend: {
    TAB_SELECTOR: '.tab',
    INTERVAL:      15000
  }
});