RCRMSlider = Class.create();
RCRMSlider.prototype =
{
    initialize: function(nextCaption) {
        this.nextCaption = nextCaption;
        this.slides = $A();
        this.currentSlide = -1;
        this.t = null;
        this.slideDuration = 5000;
        this.paused = false;
    },
    show: function(request, offers) {
        this.view = request.elementToUpdate;
        this.view.onmouseover = this.onMouseOver.bind(this);
        this.view.onmouseout = this.onMouseOut.bind(this);

        if (offers.numOffers > 0) {
            this.view.show();



            // Slides ..
            var slideContainer = this.view.select(".slide-content").first();
            var navContainer = this.view.select(".slide-nav").first();
            var navButtons = Element.extend(document.createElement("ol"));
            navContainer.insert({ top: navButtons });
/*
            var nextLink = Element.extend(document.createElement("a"));
            nextLink.update(this.nextCaption + " »");
            nextLink.onclick = this.nextSlide.bind(this);
            navContainer.insert({ bottom: nextLink });
*/
            // OK, vi konstruerar html
            for (var i = 0; i < offers.offers.length; i++) {
                this.slides[i] = new RCRMSliderPage(i, this);
                this.slides[i].show(slideContainer, navButtons, offers.offers[i]);

            }
            this.autoSlide();
        }
    },
    autoSlide: function()
    {
      this.t = setTimeout(this.autoSlide.bind(this),this.slideDuration);
      
      if(!this.paused)
          this.nextSlide();
    },
    nextSlide: function()
    {
      var nextIdx = this.currentSlide + 1;

      if(nextIdx >= this.slides.length)
          nextIdx = 0;

      this.showSlide(nextIdx);
    },
    showSlide: function(idx)
    {
      if(this.currentSlide >= 0)
      {
        var oldSlide = this.slides[this.currentSlide];
        oldSlide.deactivate();
      }
      this.currentSlide = idx;
      var newSlide = this.slides[idx];
      newSlide.activate();
    },
    onNavigate: function(selectedIdx) {
       this.showSlide(selectedIdx);
    },
    onMouseOver: function()
    {
      // OK, on mouse over we should pause
      this.paused = true;
    },
    onMouseOut: function()
    {
      this.paused = false;
    }
};
RCRMSliderPage = Class.create();
RCRMSliderPage.prototype =
{
    initialize: function(idx, parent) {
        this.container = parent;
        this.idx = idx;
    },
    show: function(contentContainer, navContainer, innerHtml) {
        var div = Element.extend(document.createElement("div"));
        div.update(innerHtml);
        div.hide();
        contentContainer.insert({ bottom: div });

        // Navigation ..
        var butt = Element.extend(document.createElement("li"));
        var buttLink = Element.extend(document.createElement("a"));
        buttLink.onclick = this.onClick.bind(this);

        butt.insert({ bottom: buttLink });
        navContainer.insert({ bottom: butt });

        // Sparar de vi behöver
        this.slideElement = div;
        this.slideElement.hide();
        this.button = butt;
    },
    onClick: function() {
        this.container.onNavigate(this.idx);
    },
    activate: function()
    {
         this.button.addClassName("active");
//         this.slideElement.show();
         this.slideElement.appear();

    },
    deactivate: function()
    {
         this.button.removeClassName("active");
         this.slideElement.hide();
//         this.slideElement.fade();
    }
}