(function($){
    $.fn.jScroller = function(options) {
        // options
        var defaults = {
            wheelspeed: 2,
            increment: 20,
            disableClass: 'disabled',
            paneHeight: 'auto',
            paneWidth: 'auto',
            resetTop: false,
            keyboardControl: true,
            paneFitContent: true
        };
        var options = $.extend(defaults, options);

        return this.each(
            function(){
                var $this = $(this);
                var paneHeight = options.paneHeight;
                var paneWidth = options.paneWidth;


                var $container = $this.parent().parent();
                var $pane;

                if($(this).attr('paneheight')){
                    paneHeight = $(this).attr('paneheight');
                }else{
                    if(paneHeight=='auto'){
                        paneHeight = $this.height();
                        $(this).attr({'paneheight':paneHeight});
                    }
                }
                if($(this).attr('panewidth')){
                    paneWidth = $(this).attr('panewidth');
                }else{
                    if(paneWidth=='auto'){
                        paneWidth = $this.width();
                        $(this).attr({'panewidth':paneWidth});
                    }
                }
               
//                if(console){
//                    console.log('height: '+$this.height());
//                    console.log('pane-height: '+paneHeight);
//                    console.log('width: '+$this.width());
//                    console.log('pane-width: '+paneWidth);
//                }


//                var $container = $this.parent().parent();
//                var $pane;

                if($container.is('.scroll-container')){
                    $('>.arrow-up, >.arrow-down, >.arrow-left, >.arrow-right', $container).remove();

                }else{
                    $this.wrap('<div class="scroll-container" style="height:'+paneHeight+'px;width:'+paneWidth+'px;"></div>');
                    $this.wrap('<div class="scroll-pane" style="height:100%;left:0;overflow:hidden;position:absolute;top:0;width:100%;"></div>');

                    if($this.css('overflow')=='auto'){
                        $this.css({'overflow':'visible','height':'auto'});
                    }
                }

                $pane = $this.parent();
                $container = $pane.parent();


                var scrollDetails;

                $this.css({'position':'absolute'});

                var disableHoriz = function(){
                    if(horiz==0){$arrowLeft.addClass(options.disableClass);}
                    else{$arrowLeft.removeClass(options.disableClass);}
                    if(horiz==horiz_limit){$arrowRight.addClass(options.disableClass);}
                    else{$arrowRight.removeClass(options.disableClass);}
                }
                var disableVert = function(){
                    if(vert==0){$arrowUp.addClass(options.disableClass);}
                    else{$arrowUp.removeClass(options.disableClass);}
                    if(vert==vert_limit){$arrowDown.addClass(options.disableClass);}
                    else{$arrowDown.removeClass(options.disableClass);}
                }


                $container.hover(
                    function(){
                        $container.attr({'tabindex':0});
                        $container.focus();
                        $container.css({'outline':0});
                    },
                    function(){
                        $container.removeAttr('tabindex');
                        $container.blur();
                        $container.css({'outline':''});
                    }
                );

                if(options.resetTop){$this.css({'top':'0px'});}

                if($this.height() > paneHeight){
                    
                    var vert = $this.css('top').replace('px','');
                    vert = parseFloat(vert == 'auto' ? 0 : vert);
                    var vert_limit = (($this.height() - paneHeight) * -1);

                    $container
                        .append('<div class="arrow-up"></div>')
                        .append('<div class="arrow-down"></div>');

                    var $arrowUp = $container.find('.arrow-up');
                    var $arrowDown = $container.find('.arrow-down');

                    disableVert();

                    $arrowUp.mousedown(function(){
                        scrollDetails = {
                            'direction':'1',
                            'axis':'vert'
                        }
                        startScroll();
                    });
                    $arrowDown.mousedown(function(){
                        scrollDetails = {
                            'direction':'-1',
                            'axis':'vert'
                        }
                        startScroll();
                    });

                    if (options.keyboardControl) {

                     $container.keydown(
                            function(e){
                                switch (e.keyCode) {
                                    case 38: //up
                                            scrollDetails = {
                                                'direction':'1',
                                                'axis':'vert'
                                            }
                                            scroll();
                                            return false;
                                    case 40: //down
                                            scrollDetails = {
                                                'direction':'-1',
                                                'axis':'vert'
                                            }
                                            scroll();
                                            return false;
                                }
                            }
                        );
                    }
                }else{
                    
//                    if(options.paneFitContent) {
//                        $this.css({'position':'relative'});
//                        $pane.css({'height':'auto'});
//                        $container.css({'height':'auto'});
//                        $container.css({'height':$this.height()+'px'});
//                        $pane.css({'height':'100%'});
//                        $this.css({'position':'absolute'});
//                    }
                }

                if($this.width() > paneWidth){
                    var horiz = $this.css('left').replace('px','');
                    horiz = parseFloat(horiz == 'auto' ? 0 : horiz);
                    var horiz_limit = ($this.width() - paneWidth) * -1;


                    $container
                        .append('<div class="arrow-left"></div>')
                        .append('<div class="arrow-right"></div>');

                    var $arrowLeft = $container.find('.arrow-left');
                    var $arrowRight = $container.find('.arrow-right');

                    disableHoriz();

                    $arrowLeft.mousedown(function(){
                        scrollDetails = {
                            'direction':'1',
                            'axis':'horiz'
                        }
                        startScroll();
                    });
                    $arrowRight.mousedown(function(){
                        scrollDetails = {
                            'direction':'-1',
                            'axis':'horiz'
                        }
                        startScroll();
                    });

                    if (options.keyboardControl) {

                        $container.keydown(
                            function(e){
                                switch (e.keyCode) {
                                    case 37: //left
                                            scrollDetails = {
                                                'direction':'1',
                                                'axis':'horiz'
                                            }
                                            scroll();
                                            return false;
                                    case 39: //right
                                            scrollDetails = {
                                                'direction':'-1',
                                                'axis':'horiz'
                                            }
                                            scroll();
                                            return false;
                                }
                            }
                        );
                    }
                }else{
//                    if(options.paneFitContent) {
//                        $container.css({'width':$this.width()+'px'});
//                    }
                }


                var scrollInterval;

                var stopScroll = function(){
                    clearInterval(scrollInterval); // stop scrolling the div by clearing the arrowInterval interval.
                }
                var startScroll = function(){
                    stopScroll();
                    scrollInterval = setInterval(scroll, 50); // start scrolling the div by repeating the scroll function
                    document.onmouseup = function(){
                        stopScroll();
                    }
                }

                var scroll = function(){
                    var dest = options.increment * scrollDetails.direction;
                    switch(scrollDetails.axis){
                        case('vert'):
                            vert = vert + parseFloat(dest);
                            vert = vert < vert_limit ? vert_limit : (vert > 0 ? 0 : vert);
                            disableVert();
                            $this.css({'top':vert+'px'});
                            break;
                        case('horiz'):
                            horiz = horiz + parseFloat(dest);
                            horiz = horiz < horiz_limit ? horiz_limit : (horiz > 0 ? 0 : horiz);
                            disableHoriz();
                            $this.css({'left':horiz+'px'});
                            break;
                    }
                }

            }

        );
    };
})(jQuery);