var draggerWidth = 0;
(function($){
    $.fn.extend({
        hscroll: function(options) {
            var defaults = {
                visibleItems:6,
                afterRender:null
            }

            var options =  $.extend(defaults, options);
            return this.each(function() {
                var that = this;
                var ul = $(that).children('ul');
                var liSet = ul.children('li.visible');
                var liCount = liSet.length;
                var lastLeft = 0;
                
                //add proper classes
                ul.addClass('hScrollUl').attr('id','hScrollUlId');
                $(that).addClass('hScrollContainer');

                //get width of container
                var mainWidth = $(that).width();

                //calculate li width base on visible item count
                var liWidth = Math.ceil(mainWidth/options.visibleItems);
                
                //calculate ul width base on total li item
                var ulWidth = Math.floor(liWidth*liCount);

                //set child li properties
                liSet.each(function(){
                    $(this).css({
                        width:liWidth
                    }).addClass('hScrollItem');
                });

                //set ul properties
                ul.width(ulWidth);

                //add clear fix
                $(that).append($('<div />',{}).addClass('clear'));

                //add scrollbar container
                var dragContainer = $('<div />',{}).addClass('hScrollDragContainer')
                $(that).append(dragContainer);

                //calulate dragger width;
                var visiblePercent = mainWidth/ulWidth;
                draggerWidth = Math.ceil(dragContainer.width()*visiblePercent);
                
                //add scrollbar dragger
                var dragger = $('<div />',{}).addClass('hScrollDragger').width(draggerWidth);
                dragContainer.append(dragger);

                //call callback function
                options.afterRender();

                //enabled dragging
                dragger.draggable({
                    containment:'parent',
                    axis:'x',
                    delay:0,
                    opacity:0.7,
                    drag:function(event,ui){
                        var offset = ui.position;
                        var offsetPercent = offset.left/mainWidth
                        var targetLeft = 0-ul.width()*offsetPercent;
                        var newLeft = targetLeft;

                        ul.stop().animate({
                            left:targetLeft
                        },10,function(){
                            animating = false;
                        });
                    },
                    stop:function(event,ui){
                        var offset = ui.position;
                        var offsetPercent = offset.left/mainWidth
                        var targetLeft = 0-ul.width()*offsetPercent;

                        dragger.animate({
                            width:draggerWidth
                        },500);
                            
                        ul.stop().animate({
                            left:targetLeft
                        },10,function(){
                            animating = false;
                        });
                    }
                });
            });
        },
        hScrollResize:function(){
            var that = this;
            var ul = $(that).children('ul');
            var liSet = ul.children('li.visible');
            var liCount = liSet.length;
            var mainWidth = $(that).width();
            var dragger = $(that).find('.hScrollDragger');

            var dragContainer = $(that).children('.hScrollDragContainer');

            //calculate li width base on visible item count
            var liWidth = $(liSet[0]).width();

            //calculate ul width base on total li item
            var ulWidth = Math.floor(liWidth*liCount);
            ul.width(ulWidth).css({
                left:0
            });
            
            var visiblePercent = mainWidth/ulWidth;
            if(visiblePercent>1)
                visiblePercent = 1
            
            draggerWidth = Math.ceil(dragContainer.width()*visiblePercent);
            
            dragger.animate({
                width:draggerWidth,
                left:0
            });
        }
    });
})(jQuery);