var MooToolsTabs = new Class({
   Implements: Options,

   options: {
      activeTab: 0, //inital opened tab
      duration: 500, //duration (in milliseconds) 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');

      //check if there is a item selected through the url
      if (location.href.split("#")[1] != null) {
         for (var i = 0; i < this.morphElements.length; i++) {
            if (this.morphElements[i].get('id') == location.href.split("#")[1])
               this.options.activeTab = i;
         };
      }

      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.setStyles({ 'display': 'block', 'overflow': 'hidden' });

      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,
            onStart: function(morphItem) {
               if (morphItem.get('opacity') == 0)
                  morphItem.setStyle('display', 'block');

            },
            onComplete: function(morphItem) {
               if (morphItem.get('opacity') == 0)
                  morphItem.setStyle('display', 'none');
            }
         });
         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);
   }
});