﻿function MhmCarousel(carouselId, arguments) {
    this.carouselId = carouselId;
    this.carouselElement = null;
    this.carouselWrapperElement = null;
    this.carouselWidth = 0;
    this.carouselHeight = 0;
    this.carouselBackElement = null;
    this.carouselForwardElement = null;
    this.carouselIndexElement = null;
    this.speed = 500;
    this.isAutoRotate = false;
    this.autoRotateDelay = 5000;
    this.onRotatedEventHandler = function (e) {
        // do nothing
    }

    if (arguments != null) {
        if (arguments.speed != null){
            this.speed = parseInt(arguments.speed);
        }
        if (arguments.isAutoRotate != null) {
            this.isAutoRotate = ($.trim(arguments.isAutoRotate.toLowerCase()) == "true");
        }
        if (arguments.autoRotateDelay != null) {
            this.autoRotateDelay = parseInt(arguments.autoRotateDelay);
        }
    }

    this.constructor();
}

MhmCarousel.prototype.constructor = function () {
    this.carouselElement = $("#" + this.carouselId);
    this.carouselWrapperElement = $("#" + this.carouselId + " > ul:first");
    this.carouselWidth = this.carouselElement.width();
    this.carouselHeight = this.carouselElement.height();
    var firstElement = this.carouselWrapperElement.children("li:first").clone();
    var lastElement = this.carouselWrapperElement.children("li:last").clone();
    this.carouselWrapperElement.prepend(lastElement);
    this.carouselWrapperElement.append(firstElement);
    var numberOfElements = this.carouselWrapperElement.children("li").length;
    this.carouselWrapperElement.children("li").width(this.carouselWidth);
    this.carouselWrapperElement.children("li").height(this.carouselHeight);
    this.carouselWrapperElement.children("li").css("display", "block");
    this.carouselWrapperElement.children("li").css("float", "left");
    this.carouselWrapperElement.children("li").css("list-style", "none");
    this.carouselWrapperElement.children("li").css("margin", "0");
    this.carouselWrapperElement.children("li").css("padding", "0");
    this.carouselWrapperElement.css("display", "block");
    this.carouselWrapperElement.css("list-style", "none");
    this.carouselWrapperElement.css("width", (this.carouselWidth * numberOfElements) + "px");
    this.carouselWrapperElement.css("padding", "0");
    this.carouselWrapperElement.css("margin", "0");
    this.carouselWrapperElement.css("margin-left", "-" + this.carouselWidth + "px");
    this.carouselElement.css("overflow", "hidden");
    this.carouselBackElement = $("#" + this.carouselId + "Back");
    this.carouselForwardElement = $("#" + this.carouselId + "Forward");
    this.carouselIndexElement = $("#" + this.carouselId + "Index");
    this.carouselIndexElement.css("display", "block");
    this.carouselIndexElement.css("padding", "0");
    this.carouselIndexElement.css("margin", "0");
    this.carouselIndexElement.children("li:first").addClass("selected");
    this.carouselIndexElement.children("li").css("display", "block");

    var self = this;
    this.carouselBackElement.click(function () {
        (function () {
            this.isAutoRotate = false;
            this.scrollBack();  //this refers to your object here
        }).call(self);
    });

    this.carouselForwardElement.click(function () {
        (function () {
            this.isAutoRotate = false;
            this.scrollForward();  //this refers to your object here
        }).call(self);
    });

    this.carouselIndexElement.children("li").click(function () {
        var el = this; //this is the element here
        (function () {
            this.isAutoRotate = false;
            this.scrollToIndex(el);  //this refers to your object here
        }).call(self);
    });

    this.setOnRotatedEventHandler = function (handler) {
        self.onRotatedEventHandler = handler;
        $("body").bind(self.carouselId + "Rotated", self, self.onRotatedEventHandler);
    }

    this.autoRotateCarousel = function () {
        if (self.isAutoRotate) {
            self.scrollForward();
        }
        else {
            clearInterval(self.autoRotateInterval);
        }
    }

    this.autoRotateInterval = setInterval(this.autoRotateCarousel, this.autoRotateDelay);
}

MhmCarousel.prototype.scrollBack = function () {
    this.scroll("back", 0);
}

MhmCarousel.prototype.scrollForward = function () {
    this.scroll("forward", 0);
}

MhmCarousel.prototype.scrollToIndex = function (element) {
    var index = 1;

    this.carouselIndexElement.children().each(function () {
        if (this == element) {
            return false;
        }

        index++;
    });

    this.scroll("toIndex", index);
}

MhmCarousel.prototype.scroll = function (direction, destinationElementIndex) {
    this.carouselWrapperElement.stop(true, true);

    var leftMargin = parseInt(this.carouselWrapperElement.css("margin-left"));
    var numElements = this.carouselWrapperElement.children().length;
    var currentElementIndex = Math.abs(leftMargin / this.carouselWidth);

    if (direction == "forward") {
        if (currentElementIndex == numElements - 2) {
            currentElementIndex = 0;
            this.carouselWrapperElement.css("margin-left", "0px");
        }

        destinationElementIndex = currentElementIndex + 1;
    }

    if (direction == "back") {
        if (currentElementIndex == 1) {
            currentElementIndex = numElements - 1;
            var currentOffset = currentElementIndex * this.carouselWidth;
            this.carouselWrapperElement.css("margin-left", "-" + currentOffset + "px");
        }

        destinationElementIndex = currentElementIndex - 1;
    }

    if (direction == "toIndex") {
        if (currentElementIndex == destinationElementIndex || destinationElementIndex > numElements - 2) {
            return;
        }
    }

    this.carouselIndexElement.children("li").removeClass("selected");
    this.carouselIndexElement.children("li:nth-child(" + destinationElementIndex + ")").addClass("selected");

    var destinationOffset = destinationElementIndex * this.carouselWidth;

    this.carouselWrapperElement.animate({ marginLeft: "-" + destinationOffset + "px" }, this.speed);

    $("body").trigger(this.carouselId + "Rotated");
}
