(function($){
    $.fn.extend({ 
        imageslider: function(options) {

            var defaults = {
                viewLength: 3 
            };

            var options =  $.extend(defaults, options);

            return this.each(function() 
            {

                var o = options;              
                var sliderContainer = $(this)
                var maskElement = sliderContainer.find(".mask");
                var slidingElement = maskElement.find(".slider");
                var slidingElementChildren = slidingElement.children();
                var childElementWidth = slidingElementChildren.outerWidth(true);
                var nextButton = sliderContainer.find(".next");
                var previousButton = sliderContainer.find(".previous");

                slidingElement.width(slidingElementChildren.length*childElementWidth)
                slidingElement.css({"marginLeft": 0})

                previousButton.addClass("disabled")
                
                if (slidingElementChildren.length <= o.viewLength)
                {
                    nextButton.addClass("disabled")
                } 

                else if (nextButton.hasClass("disabled"))
                {
                    nextButton.removeClass("disabled")
                }
                
                nextButton.unbind("click");
                previousButton.unbind("click");
                
                nextButton.bind("click", nextSlide);
                previousButton.bind("click", previousSlide);
               
                function nextSlide() {
                    var leftMargin = parseInt(slidingElement.css("marginLeft"));
                    if (!slidingElement.is(":animated")) {
                        if (leftMargin <= 0 - slidingElement.width() + (childElementWidth*o.viewLength)) {
                        //do nothing
                        } else {
                            previousButton.removeClass("disabled")
                            leftMargin = leftMargin-childElementWidth;
                            if (leftMargin <= 0 - slidingElement.width() + (childElementWidth*o.viewLength)) {
                                nextButton.addClass("disabled")
                            }
                            slidingElement.animate({"marginLeft": leftMargin},350)
                        }
                    }
                }
                
                function previousSlide() {
                    var leftMargin = parseInt(slidingElement.css("marginLeft"));
                    if (!slidingElement.is(":animated")) {
                        if (leftMargin >= 0) {
                        //do nothing
                        } else {
                            nextButton.removeClass("disabled")
                            leftMargin = leftMargin+childElementWidth;
                            if (leftMargin >= 0) {
                                previousButton.addClass("disabled")
                            }
                            slidingElement.animate({"marginLeft": leftMargin},350)
                        }
                    }
                }
            });
        }
    });
})(jQuery);