(function($){
$.fn.dsplCarousel1 = function(options){
    options = $.extend({
        btnPrev: ".carouselWrapper1 .prev",
        btnNext: ".carouselWrapper1 .next",
        speed: 300,
        easing: null,
        visible: 8,
        start: 0,
        scroll: 1
    }, options || {});

    return this.each(function(){

        var running = false, animCss="left", sizeCss="width";
        var $Div = $(this), $Ul = $("ul", $Div), visible = options.visible;

        var $Li = $("li", $Ul), itemLength = $Li.size(), currentPosition = options.start;
        $Div.css("visibility", "visible");

        $Li.css({"overflow": "hidden", "float": "left"});
        $Ul.css({margin: "0", padding: "0", position: "relative", "list-style-type": "none", "z-index": "1"});
        $Div.css({overflow: "hidden", position: "relative", "z-index": "2", left: "0px"});

        var liSize = width($Li);                             
        var ulSize = liSize * itemLength;                   
        var divSize = liSize * visible;                     

        $Li.css({width: $Li.width(), height: $Li.height()});
        $Ul.css(sizeCss, ulSize+"px").css(animCss, -(currentPosition*liSize));

        $Div.css(sizeCss, ( divSize - parseInt($Li.eq(0).css('marginRight'))) +"px");    
            $(options.btnPrev).click(function() 
            {
                return goToPosition(currentPosition-options.scroll);
            });
        
            $(options.btnNext).click(function() 
            {
                return goToPosition(currentPosition+options.scroll);
            });

        function goToPosition(destination){
            if(!running)
            {
                    if(destination < 0 || destination > itemLength-visible)
                    {
                      return;  
                    }else
                    {
                        currentPosition = destination;
                    }
                    
                running = true;

                $Ul.animate(
                    animCss = {left: -(currentPosition*liSize)}  , options.speed, options.easing,
                    function() {
                        running = false;
                    }
                );
            }
        };
    });
};

$.fn.dsplCarousel2 = function(options){
    options = $.extend({
        btnPrev: ".carouselWrapper2 .prev",
        btnNext: ".carouselWrapper2 .next",
        speed: 300,
        easing: null,
        visible: 5,
        start: 0,
        scroll: 1
    }, options || {});

    return this.each(function(){

        var running = false, animCss="left", sizeCss="width";
        var $Div = $(this), $Ul = $("ul", $Div), visible = options.visible;

        var $Li = $("li", $Ul), itemLength = $Li.size(), currentPosition = options.start;
        $Div.css("visibility", "visible");

        $Li.css({"overflow": "hidden", "float": "left"});
        $Ul.css({margin: "0", padding: "0", position: "relative", "list-style-type": "none", "z-index": "1"});
        $Div.css({overflow: "hidden", position: "relative", "z-index": "2", left: "0px"});

        var liSize = width($Li);                             
        var ulSize = liSize * itemLength;                   
        var divSize = liSize * visible;                     

        $Li.css({width: $Li.width(), height: $Li.height()});
        $Ul.css(sizeCss, ulSize+"px").css(animCss, -(currentPosition*liSize));

        $Div.css(sizeCss, ( divSize - parseInt($Li.eq(0).css('marginRight'))) +"px");    
            $(options.btnPrev).click(function() 
            {
                return goToPosition(currentPosition-options.scroll);
            });
        
            $(options.btnNext).click(function() 
            {
                return goToPosition(currentPosition+options.scroll);
            });

        function goToPosition(destination){
            if(!running)
            {
                    if(destination < 0 || destination > itemLength-visible)
                    {
                      return;  
                    }else
                    {
                        currentPosition = destination;
                    }
                    
                running = true;

                $Ul.animate(
                    animCss = {left: -(currentPosition*liSize)}  , options.speed, options.easing,
                    function() {
                        running = false;
                    }
                );
            }
        };
    });
};
function addStyleToElement(element, property) {
    return parseInt($.css(element[0], property)) || 0;
};
function width(element) {
    return  element[0].offsetWidth + addStyleToElement(element, 'marginLeft') + addStyleToElement(element, 'marginRight');
};
function height(element) {
    return element[0].offsetHeight + addStyleToElement(element, 'marginTop') + addStyleToElement(element, 'marginBottom');
};

})(jQuery);