var MooToolsTabs = new Class({
   Implements: Options,

   options: {
      activeTab: 0, //initally opened tab
      duration: 500, //duration in millisecond of  opening effect
      transition: Fx.Transitions.Sine.easeOut, //effect's transitions. See http://docs.mootools.net/Fx/Fx.Transitions for more details
      activeClassname: "selected", //classname for active item
      firstClassname: "first", //classname for first item
      lastClassname: "last" //classname for last item

   },

   initialize: function(tabsULId, panelHolder, panelClass, options) {
      this.setOptions(options);
      this.tabsULId = tabsULId;
      this.panelClass = panelClass;
      this.tabEffects = [];
      this.panelHolder = $(panelHolder);
      this.panelHolder.style.position = "relative";
      this.panelHolder.style.display = "none";


      window.addEvent('domready', this.domready.bind(this));
   },
   

   domready: function() {
      this.morphElements = $$(this.panelClass);
      this.tabElements = $(this.tabsULId).getElements('a');
      this.tabElements[this.options.activeTab].addClass(this.options.activeClassname);      
      this.panelHolder.set('tween', { duration: this.options.duration / 2, transition: this.options.transition });
      this.panelHolder.fade('hide');
      this.panelHolder.setStyle('display', 'block');

      for (var i = 0; i < this.tabElements.length; i++) {
         this.tabEffects[i] = new Fx.Morph(this.morphElements[i], { duration: this.options.duration, transition: this.options.transition });
         this.tabElements[i].addEvent('click', this.showFunction.bind(this));

         if (i == 0)
            this.tabElements[i].getParent().addClass(this.options.firstClassname);
         if (i == this.tabElements.length - 1)
            this.tabElements[i].getParent().addClass(this.options.lastClassname);
         if (i != this.options.activeTab) {
            this.morphElements[i].fade('hide');
         }
         else {
            this.tabElements[i].getParent().addClass(this.options.activeClassname);
            this.panelHolder.setStyle('height', this.morphElements[i].getSize().y);
         }
         this.morphElements[i].setStyle('position', 'absolute');

      }
      this.panelHolder.fade('in');
   },

   hideAll: function() {
      for (var i = 0; i < this.tabElements.length; i++) {
         this.tabEffects[i].cancel();
         if (i != this.options.activeTab)
            this.tabEffects[i].start({ 'opacity': 0 });
         this.tabElements[i].getParent().removeClass(this.options.activeClassname);
      }
   },

   showFunction: function(event) {
      if (this.tabElements.indexOf(event.target) >= 0)
         this.options.activeTab = this.tabElements.indexOf(event.target);
      else
         this.options.activeTab = this.tabElements.indexOf(event.target.parent);


      this.hideAll();
      this.tabEffects[this.options.activeTab].start({
         'opacity': 1
      });

      this.panelHolder.tween('height', this.morphElements[this.options.activeTab].getSize().y);
      this.tabElements[this.options.activeTab].getParent().addClass(this.options.activeClassname);
   }


});