RCRMSliderSalen = Class.create();
RCRMSliderSalen.prototype =
{
    initialize: function () {
        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 imageContainer = Element.extend(this.view.getElementsBySelector(".slide-content").first());
            var navContainer = Element.extend(this.view.getElementsBySelector(".slide-nav").first());
            var link = Element.extend(this.view.getElementsBySelector(".slide-link").first());

            var hiddenDataContainer = Element.extend(this.view.getElementsBySelector(".hiddenContainer").first());

            // OK, we add all our offers, to be able to parse them ..
            var offerData = "";
            for (var i = 0; i < offers.offers.length; i++) {
                offerData += offers.offers[i];
            }

            hiddenDataContainer.update(offerData.toString());

            // OK, init slides
            var idx = 0;
            var me = this;
            hiddenDataContainer.getElementsBySelector("li").each(
            function (e) {
                me.slides[idx] = new RCRMSliderSalenPage(idx, me, imageContainer, navContainer, link, e);
                idx++;
            });

            this.autoSlide(offers.offers.length);

        }
    },
    autoSlide: function (numoffers) {
        this.t = setTimeout(this.autoSlide.bind(this), this.slideDuration);

        if (!this.paused)
            this.nextSlide();

        if (numoffers < 2)
            this.paused = true;
    },
    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;
    }
};

var rcrmLinkCounter = 1;

RCRMSliderSalenPage = Class.create();
RCRMSliderSalenPage.prototype =
{
    initialize: function (idx, parent, imageContainer, navContainer, link, dataElement) {
        this.container = parent;
        this.idx = idx;

        this.imageContainer = Element.extend(imageContainer);
        this.imageContainer.forceRerendering = function (element) {
            try {
                element = $(element);
                var n = document.createTextNode(' ');
                element.appendChild(n);
                element.removeChild(n);
            } catch (e) { }
        };

        this.imageTag = Element.extend(imageContainer.getElementsBySelector("img").first());
        this.myImage = Element.extend(dataElement.getElementsBySelector("img").first());

        this.navContainer = Element.extend(navContainer);

        this.link = link;
        this.myLink = Element.extend(dataElement.getElementsBySelector("a").first());

        // OK, lets create our nav button
        var butt = Element.extend(document.createElement("li"));
        var buttLink = Element.extend(document.createElement("a"));
        buttLink.innerHTML = '' + rcrmLinkCounter;
        rcrmLinkCounter++;

        // OK, handle old version of prototype
        buttLink.onclick = this.onClick.bind(this);

        butt.appendChild(buttLink);
        navContainer.appendChild(butt);

        this.button = butt;
    },
    onClick: function () {
        this.container.onNavigate(this.idx);
    },
    activate: function () {
        this.button.addClassName("active");

        this.imageContainer.style.opacity = "0";
        this.imageContainer.style.filter = "alpha(opacity=0)";
        // Effect.Appear(this.imageContainer);
		jQuery(this.imageContainer).animate({opacity:1}, 500, function(){ jQuery(this).attr("filter", "").css("opacity","1"); });

        // OK, copy all our stuff to container
        this.imageTag.src = this.myImage.src;
        this.link.href = this.myLink.href;
    },
    deactivate: function () {
        this.button.removeClassName("active");
    }
}