jQuery.fn.scrollSlider = function(options)
{
    var defaults = {
        itemsSelector: '.item',
        visibleCount: 4,
        scroll: true
    };
    var settings = $.extend(false, defaults, options);

    return this.each(
        function()
        {
            var elem = $(this), api = elem.data('scrollSlider');
            if (api) {
            } else {
                api = new ScrollSlider(this, settings);
                elem.data('scrollSlider', api);
            }
        }
    );
}
function ScrollSlider(wrapper, settings) {
    this.init(wrapper, settings);
};
ScrollSlider.prototype = {
    targetObject: false,
    roller: false,
    items: false,
    settings: false,
    navPrev: false,
    navNext: false,
    itemCount: 0,
    scrollCount: 0,
    itemWidth: 0,
    duration: 300,
    currentItem: 1,
    scrollLine: false,
    visibleCount: 1,
    init: function(wrapper, settings) {
        var context = this;
        this.targetObject = $(wrapper);
        this.settings = settings;
        this.items = $(this.settings.itemsSelector, this.targetObject);
        this.itemCount = this.items.length;

        this.resizeItems();

        this.scrollCount = this.itemCount - this.visibleCount + 1;
        this.itemWidth = this.items.outerWidth();

        this.targetObject.addClass('scroll-slider').wrapInner('<div class="slider-hider"></div>');
        var _h = 0;
        var _w = 0;
        this.items.each(function(){
            var h = $(this).height();
            if (h > _h) _h = h;
            _w += $(this).outerWidth();
        });
        $('.slider-hider', this.targetObject).height(_h);
        $('.slider-hider', this.targetObject).wrapInner('<div class="slider-row"></div>');
        this.roller = $('.slider-row', this.targetObject);
        this.roller.width(_w).height(_h);
        this.targetObject.append('<a class="nav-prev" href="#"></a>').append('<a class="nav-next" href="#"></a>');
        this.navNext = $('.nav-next', this.targetObject);
        this.navPrev = $('.nav-prev', this.targetObject);
        if (this.settings.scroll) {
            this.targetObject.append('<div class="scroll-line"></div>');
            this.scrollLine = $('.scroll-line', this.targetObject);
            this.scrollLine.slider({
                min: 1,
                max: 1000,
                step: 1,
                //animate: this.duration,
                slide: function( event, ui ) {
                    var percent = ui.value / 10;
                    var totalLeft = context.itemWidth * (context.scrollCount - 1);
                    var _left = totalLeft / 100 * percent;
                    context.roller.stop().css({left: -_left+'px'});
                },
                stop: function( event, ui ) {
                    var percent = ui.value / 10;
                    var totalLeft = context.itemWidth * (context.scrollCount - 1);
                    var _left = totalLeft / 100 * percent;
                    var num = Math.round(_left / context.itemWidth) + 1;
                    context.currentItem = num;
                    context.slideTo(num);
                }
            });
        }

        this.checkLimits();
        this.initActions();
    },
    initActions: function() {
        var context = this;

        this.navNext.click(function(){
            context.slideNext();
            return false;
        });

        this.navPrev.click(function(){
            context.slidePrev();
            return false;
        });

        $(window).on('resize', function(){
            context.resizeItems();
        });
    },
    slideTo: function(num){
        var _left = (num - 1) * this.itemWidth;
        this.roller.stop().animate({left: -_left+'px'}, this.duration);
        if (this.scrollLine) {
            var percent = (num - 1) / (this.scrollCount - 1) * 100;
            $('.ui-slider-handle', this.scrollLine).animate({'left': percent+'%'}, this.duration);
            //this.scrollLine.slider('option', 'value', percent*10);
        }
        this.checkLimits();
    },
    slideNext: function(){
        if (this.currentItem < this.scrollCount) {
            this.currentItem++;
            this.slideTo(this.currentItem);
        }
    },
    slidePrev: function(){
        if (this.currentItem > 1) {
            this.currentItem--;
            this.slideTo(this.currentItem);
        }
    },
    checkLimits: function(){
        if (this.currentItem == 1)
            this.navPrev.addClass('inactive');
        else
            this.navPrev.removeClass('inactive');
        if (this.currentItem == this.scrollCount)
            this.navNext.addClass('inactive');
        else
            this.navNext.removeClass('inactive');
    },
    resizeItems: function(){
        var fullWidth = this.targetObject.width();
        var minWidth = parseInt(this.targetObject.attr('data-min-width'));
        if (!minWidth)
            minWidth = 220;
        var cnt = Math.floor(fullWidth / minWidth);
        if (!cnt) cnt = 1;
        this.visibleCount = cnt;
        var itemWidth = fullWidth/cnt;
        $(this.settings.itemsSelector, this.targetObject).width(itemWidth);
        this.itemWidth = itemWidth;
        if (this.roller) {
            this.roller.width(this.itemWidth * this.itemCount);
            this.slideTo(1);
        }
    },
    fireCallback: function(fn) {
        if($.isFunction(fn)) {
            fn.call(this);
        };
        //this.fireCallback(this.settings.onstart);
    }
}