(function($){
    $.fn.remove_scrollbar = function()
    {	
        this.each(function() {
            var $container = $(this);
            var $contents = $container.find('div.overview').html();
            
            $container.find('div.scrollbar').remove();
            $container.find('div.viewport').remove();

            $container.html($contents);
            
            $container.data('tsb', null);
        });
        
        return this;
    };
})(jQuery);

(function($){
    $.fn.scrollbar = function(imagePath)
    {	
        this.each(function() {
            var $container = $(this);
            
            if (!imagePath)
                imagePath = '';
            
            $container.css('overflow', 'hidden');
            $container.width($container.width() + 5);
            
            var $scrollbar = $('<div class="scrollbar"></div>');
            $scrollbar.css('position', 'relative');
            $scrollbar.css('float', 'right')
            $scrollbar.css('width', '15px');
            $scrollbar.css('margin-left', '3px');
            
            var $track = $('<div class="track"></div>');
            $track.css('background', 'url('+imagePath+'/scroll_bg.png) repeat-y 4px 0px');
            $track.css('height', '100%');
            $track.css('width', '20px');
            $track.css('position', 'relative');
            $track.css('padding', '0 1px');
            
            var $thumb = $('<div class="thumb"></div>');
            $thumb.css('background', 'url('+imagePath+'/scroll_button.png) repeat-y left bottom');
            $thumb.css('height', '20px');
            $thumb.css('width', '12px');
            $thumb.css('cursor', 'pointer');
            $thumb.css('overflow', 'hidden');
            $thumb.css('position', 'absolute');
            $thumb.css('top', '0');
            
            var $end = $('<div class="end"></div>');
            $end.css('background', 'none');
            $end.css('overflow', 'hidden');
            $end.css('height', '5px');
            $end.css('width', '23px');
            
            var $overview = $('<div class="overview"></div>');
            $overview.css('list-style', 'none');
            $overview.css('position', 'absolute');
            $overview.css('width', '100%');
            $overview.css('left', '0');
            $overview.css('top', '0');
            
            var $viewport = $('<div class="viewport"></div>');
            //$viewport.width($viewport.width() - 20);
            $viewport.css('height', '100%');
            $viewport.css('overflow', 'hidden');
            $viewport.css('position', 'relative');
            
            $thumb.append($end);
            $track.append($thumb);
            $scrollbar.append($track);
           
            $container.wrapInner($overview);
            $container.wrapInner($viewport);
            
            $container.prepend($scrollbar);
                
            $container.tinyscrollbar();   
        });
        
        return this;
    };
})(jQuery);


/*!
 * Tiny Scrollbar 1.66
 * http://www.baijs.nl/tinyscrollbar/
 *
 * Copyright 2010, Maarten Baijs
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.opensource.org/licenses/gpl-2.0.php
 *
 * Date: 13 / 11 / 2011
 * Depends on library: jQuery
 * 
 */

(function($){
    $.tiny = $.tiny || { };
	
    $.tiny.scrollbar = {
        options: {	
            axis: 'y', // vertical or horizontal scrollbar? ( x || y ).
            wheel: 40,  //how many pixels must the mouswheel scroll at a time.
            scroll: true, //enable or disable the mousewheel;
            size: 'auto', //set the size of the scrollbar to auto or a fixed number.
            sizethumb: 24 //set the size of the thumb to auto or a fixed number.
        }
    };	
	
    $.fn.tinyscrollbar = function(options) { 
        var options = $.extend({}, $.tiny.scrollbar.options, options); 		
        this.each(function(){
            $(this).data('tsb', new Scrollbar($(this), options));
        });
        return this;
    };
    $.fn.tinyscrollbar_update = function(sScroll) {
        return $(this).data('tsb').update(sScroll);
    };
        
    $.fn.tinyscrollbar_updatenoscroll = function() {
        return $(this).data('tsb').updatenoscroll();
    };
        
    $.fn.tinyscrollbar_scrollTo = function(iScroll){
        return $(this).data('tsb').scrollTo(iScroll);
    };
	
    function Scrollbar(root, options){
        var oSelf = this;
        var oWrapper = root;
        var oViewport = {
            obj: $('.viewport', root)
        };
        var oContent = {
            obj: $('.overview', root)
        };
        var oScrollbar = {
            obj: $('.scrollbar', root)
        };
        var oTrack = {
            obj: $('.track', oScrollbar.obj)
        };
        var oThumb = {
            obj: $('.thumb', oScrollbar.obj)
        };
        var sAxis = options.axis == 'x', sDirection = sAxis ? 'left' : 'top', sSize = sAxis ? 'Width' : 'Height';
        var iScroll, iPosition = {
            start: 0, 
            now: 0
        }, iMouse = {};

        function initialize() {	
            oSelf.update();
            setEvents();
            return oSelf;
        }
        this.update = function(sScroll){
            oViewport[options.axis] = oViewport.obj[0]['offset'+ sSize];
            oContent[options.axis] = oContent.obj[0]['scroll'+ sSize];
            oContent.ratio = oViewport[options.axis] / oContent[options.axis];
            oScrollbar.obj.toggleClass('disable', oContent.ratio >= 1);
            oTrack[options.axis] = options.size == 'auto' ? oViewport[options.axis] : options.size;
            oThumb[options.axis] = Math.min(oTrack[options.axis], Math.max(0, ( options.sizethumb == 'auto' ? (oTrack[options.axis] * oContent.ratio) : options.sizethumb )));
            oScrollbar.ratio = options.sizethumb == 'auto' ? (oContent[options.axis] / oTrack[options.axis]) : (oContent[options.axis] - oViewport[options.axis]) / (oTrack[options.axis] - oThumb[options.axis]);
            iScroll = (sScroll == 'relative' && oContent.ratio <= 1) ? Math.min((oContent[options.axis] - oViewport[options.axis]), Math.max(0, iScroll)) : 0;
            iScroll = (sScroll == 'bottom' && oContent.ratio <= 1) ? (oContent[options.axis] - oViewport[options.axis]) : isNaN(parseInt(sScroll)) ? iScroll : parseInt(sScroll);
            setSize();
        };
        this.updatenoscroll = function(){
            oViewport[options.axis] = oViewport.obj[0]['offset'+ sSize];
            oContent[options.axis] = oContent.obj[0]['scroll'+ sSize];
            var oold = oContent.ratio;
            oContent.ratio = oViewport[options.axis] / oContent[options.axis];
            var onew = oContent.ratio;
            oScrollbar.obj.toggleClass('disable', oContent.ratio >= 1);
            oTrack[options.axis] = options.size == 'auto' ? oViewport[options.axis] : options.size;
            oThumb[options.axis] = Math.min(oTrack[options.axis], Math.max(0, ( options.sizethumb == 'auto' ? (oTrack[options.axis] * oContent.ratio) : options.sizethumb )));
            oScrollbar.ratio = options.sizethumb == 'auto' ? (oContent[options.axis] / oTrack[options.axis]) : (oContent[options.axis] - oViewport[options.axis]) / (oTrack[options.axis] - oThumb[options.axis]);
            if (onew > oold && !isNaN(oold) && iScroll > oViewport[options.axis]) {
                iScroll = (oContent.ratio <= 1) ? (oContent[options.axis] - oViewport[options.axis]) : iScroll;
            }
            setSize();
        };
                
        this.getRatio = function(){
            return oScrollbar.ratio;
        };
                
        this.scrollTo = function(iScroll){
            pScrollTo(iScroll);
        };
                
        this.getIScroll = function(){
            return iScroll;
        };
                
        function pScrollTo(offset){
            iScroll = offset;
                    
                    
            oThumb.obj.css(sDirection, iScroll / oScrollbar.ratio);
            oContent.obj.css(sDirection, -iScroll);
        };
                
        function setSize(){
            oThumb.obj.css(sDirection, iScroll / oScrollbar.ratio);
            oContent.obj.css(sDirection, -iScroll);
            iMouse['start'] = oThumb.obj.offset()[sDirection];
            var sCssSize = sSize.toLowerCase(); 
            oScrollbar.obj.css(sCssSize, oTrack[options.axis]);
            oTrack.obj.css(sCssSize, oTrack[options.axis]);
            oThumb.obj.css(sCssSize, oThumb[options.axis]);		
        };		
        function setEvents(){
            oThumb.obj.bind('mousedown', start);
            oThumb.obj[0].ontouchstart = function(oEvent){
                oEvent.preventDefault();
                oThumb.obj.unbind('mousedown');
                start(oEvent.touches[0]);
                return false;
            };	
            oTrack.obj.bind('mouseup', drag);
            if(options.scroll && this.addEventListener){
                oWrapper[0].addEventListener('DOMMouseScroll', wheel, false);
                oWrapper[0].addEventListener('mousewheel', wheel, false );
            }
            else if(options.scroll){
                oWrapper[0].onmousewheel = wheel;
            }
        };
        function start(oEvent){
            iMouse.start = sAxis ? oEvent.pageX : oEvent.pageY;
            var oThumbDir = parseInt(oThumb.obj.css(sDirection));
            iPosition.start = oThumbDir == 'auto' ? 0 : oThumbDir;
            $(document).bind('mousemove', drag);
            document.ontouchmove = function(oEvent){
                $(document).unbind('mousemove');
                drag(oEvent.touches[0]);
            };
            $(document).bind('mouseup', end);
            oThumb.obj.bind('mouseup', end);
            oThumb.obj[0].ontouchend = document.ontouchend = function(oEvent){
                $(document).unbind('mouseup');
                oThumb.obj.unbind('mouseup');
                end(oEvent.touches[0]);
            };
            return false;
        };		
        function wheel(oEvent){
            if(!(oContent.ratio >= 1)){
                var oEvent = oEvent || window.event;
                var iDelta = oEvent.wheelDelta ? oEvent.wheelDelta/120 : -oEvent.detail/3;
                iScroll -= iDelta * options.wheel;
                iScroll = Math.min((oContent[options.axis] - oViewport[options.axis]), Math.max(0, iScroll));
				
                pScrollTo(iScroll);
                                
                oEvent = $.event.fix(oEvent);
                oEvent.preventDefault();
            };
        };
        function end(oEvent){
            $(document).unbind('mousemove', drag);
            $(document).unbind('mouseup', end);
            oThumb.obj.unbind('mouseup', end);
            document.ontouchmove = oThumb.obj[0].ontouchend = document.ontouchend = null;
            return false;
        };
        function drag(oEvent){
            if(!(oContent.ratio >= 1)){
                iPosition.now = Math.min((oTrack[options.axis] - oThumb[options.axis]), Math.max(0, (iPosition.start + ((sAxis ? oEvent.pageX : oEvent.pageY) - iMouse.start))));
                iScroll = iPosition.now * oScrollbar.ratio;
                oContent.obj.css(sDirection, -iScroll);
                oThumb.obj.css(sDirection, iPosition.now);
            }
            return false;
        };
		
        return initialize();
    };
})(jQuery);