var MooToolsOfferRotator = new Class({
   Implements: Options,

   options: {
        activeSlide: 0	//initally opened tab
		, transitionDuration: 500	//duration in millisecond of  opening effect (1000ms = 1 sec)
		, 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		
		, navigationTabsListItem: null //use of tabs to selct offer directly
		, useAutoPlay: true
		, isPaused: false
		, autoPlayDuration: 6000
		, pauseTimeAfterClick: 1000

   },

   initialize: function(panelClass, options) {
      this.setOptions(options);
      this.panelClass = panelClass;
      this.tabEffects = [];
      window.addEvent('domready', this.domready.bind(this));
   },


   domready: function() {
      this.morphElements = $$(this.panelClass);
      if (this.options.navigationTabsListItem != null) {
         this.tabElements = $(this.options.navigationTabsListItem).getElements('li');
         this.tabElements[this.options.activeSlide].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.transitionDuration, transition: this.options.transition });
            this.tabElements[i].addEvent('click', this.tabClicked.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.activeSlide)
               this.morphElements[i].style.display = 'none';
         }
      } else {
         for (var i = 0; i < this.tabElements.length; i++) {
            this.tabEffects[i] = new Fx.Morph(this.morphElements[i], { duration: this.options.transitionDuration, transition: this.options.transition });
            if (i != this.options.activeSlide)
               this.morphElements[i].style.display = 'none';
         }
      }
      if ((this.options.useAutoPlay && !this.options.isPaused) || this.options.navigationTabsListItem == null) {
         this.slideIntervall = this.showNextSlide.periodical(this.options.autoPlayDuration, this);
      }


   },

   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);
      }
   },

   tabClicked: function(event) {
     // console.log(event);
      this.options.isPaused = true;
      this.showSlide(this.tabElements.indexOf(event.target));

      (function() { this.options.isPaused = false }).delay(this.options.pauseTimeAfterClick, this);
   },

   showNextSlide: function() {
      if (!this.options.isPaused) {
         if (this.options.activeSlide < this.tabElements.length - 1)
            this.showSlide(this.options.activeSlide + 1);
         else
            this.showSlide(0);
      }
   },

   showSlide: function(slideToShow) {
      this.options.activeSlide = slideToShow;
      this.hideAll();
      if (this.options.navigationTabsListItem != null)
         this.tabElements[this.options.activeSlide].addClass(this.options.activeClassname);
      this.tabEffects[this.options.activeSlide].start({
         'display': ['none', 'block'],
         'opacity': [0, 1]
      });
   }


});