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, panelClass, options) {
      this.setOptions(options);
      this.tabsULId = tabsULId;
      this.panelClass = panelClass;
      this.tabEffects = [];

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


   domready: function() {
      this.morphElements = $$(this.panelClass);
      this.tabElements = $(this.tabsULId).getElements('li');
      this.tabElements[this.options.activeTab].addClass(this.options.activeClassname);

      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].addClass(this.options.firstClassname);
         if (i == this.tabElements.length - 1)
            this.tabElements[i].addClass(this.options.lastClassname);
         if (i != this.options.activeTab)
            this.morphElements[i].style.display = 'none';
      }
   },

   hideAll: function() {
      for (var i = 0; i < this.tabElements.length; i++) {
         this.tabEffects[i].cancel();
         this.tabEffects[i].set({ display: 'none' });
         this.tabElements[i].removeClass(this.options.activeClassname);
      }
   },

   showFunction: function(event) {
      this.options.activeTab = this.tabElements.indexOf(event.target);
      this.hideAll();
      this.tabEffects[this.options.activeTab].start({
         'display': ['none', 'block'],
         'opacity': [0, 1]
      });
      this.tabElements[this.options.activeTab].addClass(this.options.activeClassname);
   }


});