/**
 * Slide carousel component
 *
 * $Id: slide-carousel.js 19 2011-10-11 20:16:53Z capricorn $
 *
 * @author Alexander "Capricorn" Potehin <alexander@potehin.pro>
 */

/**
 * Constructor
 *
 * @param baseElem Container element
 * @param slideSelector Slides selector
 * @param controlSelector Control buttons selector
 */
function SlideCarousel(baseElem, slideSelector, controlSelector)
{
    if (baseElem == null) return;

    this.baseElem = chsuJQ(baseElem);
    this.slides = chsuJQ(slideSelector, baseElem);
    this.controls = chsuJQ(controlSelector, baseElem);
    this.width = chsuJQ(baseElem).width();
    this.height = chsuJQ(baseElem).height();
    this.slideIndex = 0;

    this.easingType = "easeInOutExpo";

    chsuJQ(baseElem).css("overflow-x", "hidden");
    chsuJQ(baseElem).removeClass("nojs");
    chsuJQ(this.controls[0]).addClass("active");

    var INSTANCE = this;

    chsuJQ(baseElem).get(0).handler = INSTANCE;
    chsuJQ(this.controls).each(function() { this.handler = INSTANCE; });
    chsuJQ(this.slides).each(function() { this.handler = INSTANCE; });

    for (var i=0; i<this.controls.length; i++)
    {
        var ctrl = this.controls[i];

        ctrl.index = i;
        chsuJQ(ctrl).click(function() { this.handler.changeSlide(this.index); });
    }

    var scrollArea = chsuJQ(this.slides).wrapAll("<div class='viewport'><div class='scroll-area'/></div>").parent();
    scrollArea.css("position", "relative");

    var viewport = scrollArea.parent();
    viewport.css("overflow", "hidden");
    viewport.css("position", "absolute");

    var detached = chsuJQ(viewport).detach();
    chsuJQ(detached).appendTo(this.baseElem);

    for (var i=0; i<this.slides.length; i++)
    {
        var slide = chsuJQ(this.slides[i]);

        slide.css("position", "static");
        slide.css("float", "left");
        slide.css("margin", "0");
    }

    this.viewport = viewport;
    this.scrollArea = scrollArea;

    this.refreshViewport();

    chsuJQ(window).bind("resize", function() { INSTANCE.refreshViewport(); });
}

/**
 * Refresh slider viewport metrics
 */
SlideCarousel.prototype.refreshViewport = function()
{
    this.width = chsuJQ(this.baseElem).width();
    var fullWidth = (this.width * this.slides.length);

    this.viewport.css("width", this.width);
    this.scrollArea.css("width", fullWidth);

    chsuJQ(this.slides).css("width", this.width);
}

/**
 * Scroll to new slide
 *
 * @param newIndex New slide index
 */
SlideCarousel.prototype.changeSlide = function(newIndex)
{
    chsuJQ(this.controls[this.slideIndex]).removeClass("active");
    chsuJQ(this.controls[newIndex]).addClass("active");
    this.slideIndex = newIndex;

    chsuJQ(this.scrollArea).animate(
        {
            left: - newIndex * this.width + "px"
        },
        {
            easing: this.easingType,
            duration: 1500,
            queue: false
        }
    );
};