var ContentTabs = Class.create({

  initialize : function(element) {
    this.debug = false;

    this.panelsContainer = $(element);
    this.panels = this.panelsContainer.select('.tab-panel');
    this.tabsContainer = $('dest-tabs');
    this.tabs = this.tabsContainer.select('li a');
    this.isAnimating = false;

    this.totalPanels = this.panels.size(); // grab the total number of slides
    this.index = Math.floor(Math.random() * this.totalPanels); // randomise the first slide

    this.build();
    this.play(); // go!
  },

  activatePanel : function() {
    if(this.activePanel = this.panelsContainer.down('div.active')) {
      this.activePanel.removeClassName('active');
    }
    this.panels[this.index].addClassName('active');
  },

  activateTab : function() {
    if(this.activeTab = this.tabsContainer.down('li.active')) {
      this.activeTab.removeClassName('active');
    }
    this.tabs[this.index].up('li').addClassName('active');
  },

  animate : function() {
    panelToShow = this.panels[this.index];

    this.fx = new Effect.Appear(panelToShow, {
      afterFinish: function() {
        this.panelsContainer.down('div.active').hide();
        this.activatePanel();
        this.isAnimating = false; // unset animating flag
      }.bind(this),
      beforeStart: function() {
        this.isAnimating = true; // set animating flag

        // move current panel back on in z index stack
        this.panelsContainer.down('div.active').setStyle({
          zIndex : 98
        });

        // bring next panel forward in z index stack, set initial opacity to 0 (transparent) and then show it (although it won't be visible as it's see thru, innit)
        panelToShow.setStyle({
          opacity : 0,
          zIndex : 99
        }).show();

        this.activateTab();
      }.bind(this),
      duration: 1 // the effect will last half a second
    });

  },

  build : function() {
    this.resetPanels();

    this.onClickListener = this.onClick.bindAsEventListener(this);
    this.tabs.invoke('observe', 'click', this.onClickListener);

    this.panels[this.index].show();

    this.activatePanel();
    this.activateTab();
  },

  onClick : function(e) {
    this.pe.stop();

    this.prev = this.index;
    this.index = this.tabs.indexOf($(e.target.id));
    e.stop();

    this.show();
    this.play();
  },

  next : function() {
    this.prev = this.index; // store current (soon to be previous) slide

    // if we at the end of the slides, set back to the start, else move to next one
    if(this.index == this.totalPanels-1) {
      this.index = 0;
    } else {
      this.index++;
    }

    this.show();
  },

  play : function() {
    this.pe = new PeriodicalExecuter(this.next.bind(this), 10); // move to next slide every 5 seconds
  },

  resetPanels : function() {
    this.panels.each(function(el) {
      el.setStyle({
        left : 0,
        'position' : 'absolute',
        top : 0,
        zIndex : 98
      }).hide();
    });
  },

  show : function() {
    if(!this.panels[this.index].hasClassName('active') && !this.isAnimating) {

      this.animate();

    } else if (!this.panels[this.index].hasClassName('active') && this.isAnimating) {

      this.fx.cancel();
      this.isAnimating = false;

      //console.log(this.panels[this.prev]);

      this.resetPanels();

      this.panels[this.index].setStyle({
        zIndex : 99
      }).show();

      this.activatePanel();
      this.activateTab();
    }
  }
});