var ScrollBar = new Class({

        Implements: [Events, Options],

        options: {
            maxThumbSize: 15,
            wheel: 8,
            arrows: true,
            hScroll: true // horizontal scrollbars
        },

        initialize: function(main, content, options){
            this.setOptions(options);
            
            this.main = $(main);
            this.content = $(content);
            
            if (this.options.arrows == true){
                this.arrowOffset = 30;
            } else {
                this.arrowOffset = 0;
            }
            
            if (this.options.hScroll == true){
                this.hScrollOffset = 15;
            } else {
                this.hScrollOffset = 0;
            }                

            this.vScrollbar = new Element('div', {
                    'class': 'vScrollbar'
                }).injectAfter(this.content);                

            if (this.options.arrows == true){                
                this.arrowUp = new Element('div', {
                        'class': 'arrowUp'
                    }).injectInside(this.vScrollbar);
            }    

            this.vTrack = new Element('div', {
                    'class': 'vTrack'
                }).injectInside(this.vScrollbar);
                
            this.vThumb = new Element('div', {
                    'class': 'vThumb'
                }).injectInside(this.vTrack);

            if (this.options.arrows == true){                
                this.arrowDown = new Element('div', {
                        'class': 'arrowDown'
                    }).injectInside(this.vScrollbar);
            }        
            
            this.hScrollbar = new Element('div', {
                    'class': 'hScrollbar'
                }).injectAfter(this.vScrollbar);

            if (this.options.arrows == true){                            
                this.arrowLeft = new Element('div', {
                        'class': 'arrowLeft'
                    }).injectInside(this.hScrollbar);
            }        

            this.hTrack = new Element('div', {
                    'class': 'hTrack'
                }).injectInside(this.hScrollbar);
         
                
            this.hThumb = new Element('div', {
                    'class': 'hThumb'
                }).injectInside(this.hTrack);                            
    
            if (this.options.arrows == true){
                this.arrowRight = new Element('div', {
                        'class': 'arrowRight'
                    }).injectInside(this.hScrollbar);
            }                                            

            this.corner = new Element('div', {
                    'class': 'corner'
                }).injectAfter(this.hScrollbar);
            
            this.bound = {
                'vStart': this.vStart.bind(this),
                'hStart': this.hStart.bind(this),                
                'end': this.end.bind(this),
                'vDrag': this.vDrag.bind(this),
                'hDrag': this.hDrag.bind(this),                
                'wheel': this.wheel.bind(this),
                'vPage': this.vPage.bind(this),
                'hPage': this.hPage.bind(this)                
            };

            this.vPosition = {};
            this.hPosition = {};            
            this.vMouse = {};
            this.hMouse = {};            
            this.update();
            this.attach();
        },

        update: function(){
            
            this.main.setStyle('height', this.content.offsetHeight + this.hScrollOffset);
            this.vTrack.setStyle('height', this.content.offsetHeight - this.arrowOffset);
                        
            this.main.setStyle('width', this.content.offsetWidth + 15);
            this.hTrack.setStyle('width', this.content.offsetWidth - this.arrowOffset);
            
            // Remove and replace vertical scrollbar            
            if (this.content.scrollHeight <= this.main.offsetHeight) {
                this.vScrollbar.setStyle('display', 'none');
                if (this.options.hScroll == true){                
                    this.hTrack.setStyle('width', this.hTrack.offsetWidth + 15);
                }    
                this.content.setStyle('width', this.content.offsetWidth + 15);    
            } else {
                this.vScrollbar.setStyle('display', 'block');            
            }
            
            if (this.options.hScroll == true){            
            
                // Remove and replace horizontal scrollbar
                if (this.content.scrollWidth <= this.main.offsetWidth) {
                    this.hScrollbar.setStyle('display', 'none');
                    this.vTrack.setStyle('height', this.vTrack.offsetHeight + this.hScrollOffset);                
                    this.content.setStyle('height', this.content.offsetHeight + this.hScrollOffset);    
                } else {
                    this.hScrollbar.setStyle('display', 'block');            
                }
            
                // Remove and replace bottom right corner spacer            
                if (this.content.scrollHeight <= this.main.offsetHeight || this.content.scrollWidth <= this.main.offsetWidth) {
                    this.corner.setStyle('display', 'none');                
                } else {
                    this.corner.setStyle('display', 'block');            
                }        
            
                // Horizontal

                this.hContentSize = this.content.offsetWidth;
                this.hContentScrollSize = this.content.scrollWidth;
                this.hTrackSize = this.hTrack.offsetWidth;

                this.hContentRatio = this.hContentSize / this.hContentScrollSize;

                this.hThumbSize = (this.hTrackSize * this.hContentRatio).limit(this.options.maxThumbSize, this.hTrackSize);

                this.hScrollRatio = this.hContentScrollSize / this.hTrackSize;

                this.hThumb.setStyle('width', this.hThumbSize);

                this.hUpdateThumbFromContentScroll();
                this.hUpdateContentFromThumbPosition();            

            } else {
                    this.hScrollbar.setStyle('display', 'none');
                    this.corner.setStyle('display', 'none');                                        
            }
            

            // Vertical
            
            this.vContentSize = this.content.offsetHeight;
            this.vContentScrollSize = this.content.scrollHeight;
            this.vTrackSize = this.vTrack.offsetHeight;

            this.vContentRatio = this.vContentSize / this.vContentScrollSize;

            this.vThumbSize = (this.vTrackSize * this.vContentRatio).limit(this.options.maxThumbSize, this.vTrackSize);

            this.vScrollRatio = this.vContentScrollSize / this.vTrackSize;

            this.vThumb.setStyle('height', this.vThumbSize);

            this.vUpdateThumbFromContentScroll();
            this.vUpdateContentFromThumbPosition();
            
        },

        vUpdateContentFromThumbPosition: function(){
            this.content.scrollTop = this.vPosition.now * this.vScrollRatio;
        },
        
        hUpdateContentFromThumbPosition: function(){
            this.content.scrollLeft = this.hPosition.now * this.hScrollRatio;
        },        

        vUpdateThumbFromContentScroll: function(){
            this.vPosition.now = (this.content.scrollTop / this.vScrollRatio).limit(0, (this.vTrackSize - this.vThumbSize));
            this.vThumb.setStyle('top', this.vPosition.now);
        },
        
        hUpdateThumbFromContentScroll: function(){
            this.hPosition.now = (this.content.scrollLeft / this.hScrollRatio).limit(0, (this.hTrackSize - this.hThumbSize));
            this.hThumb.setStyle('left', this.hPosition.now);
        },        

        attach: function(){
            this.vThumb.addEvent('mousedown', this.bound.vStart);
            if (this.options.wheel) this.content.addEvent('mousewheel', this.bound.wheel);
            this.vTrack.addEvent('mouseup', this.bound.vPage);
            
            this.hThumb.addEvent('mousedown', this.bound.hStart);
            this.hTrack.addEvent('mouseup', this.bound.hPage);            
            
            if (this.options.arrows == true){
                this.arrowUp.addEvent('mousedown', function(event){
                        this.interval = (function(event){
                        this.content.scrollTop -= this.options.wheel;
                        this.vUpdateThumbFromContentScroll();
                    }.bind(this).periodical(40))
                }.bind(this));
            
                this.arrowUp.addEvent('mouseup', function(event){
                    $clear(this.interval);
                }.bind(this));
            
                this.arrowUp.addEvent('mouseout', function(event){
                    $clear(this.interval);
                }.bind(this));
                        
                this.arrowDown.addEvent('mousedown', function(event){
                        this.interval = (function(event){
                        this.content.scrollTop += this.options.wheel;
                        this.vUpdateThumbFromContentScroll();
                    }.bind(this).periodical(40))
                }.bind(this));
            
                this.arrowDown.addEvent('mouseup', function(event){
                    $clear(this.interval);
                }.bind(this));
            
                this.arrowDown.addEvent('mouseout', function(event){
                    $clear(this.interval);
                }.bind(this));
            
                this.arrowLeft.addEvent('mousedown', function(event){
                        this.interval = (function(event){
                        this.content.scrollLeft -= this.options.wheel;
                        this.hUpdateThumbFromContentScroll();
                    }.bind(this).periodical(40))
                }.bind(this));
            
                this.arrowLeft.addEvent('mouseup', function(event){
                    $clear(this.interval);
                }.bind(this));
            
                this.arrowLeft.addEvent('mouseout', function(event){
                    $clear(this.interval);
                }.bind(this));
            
                this.arrowRight.addEvent('mousedown', function(event){
                        this.interval = (function(event){
                        this.content.scrollLeft += this.options.wheel;
                        this.hUpdateThumbFromContentScroll();
                    }.bind(this).periodical(40))
                }.bind(this));
            
                this.arrowRight.addEvent('mouseup', function(event){
                    $clear(this.interval);
                }.bind(this));
            
                this.arrowRight.addEvent('mouseout', function(event){
                    $clear(this.interval);
                }.bind(this));
            }            
                        
        },
        
        wheel: function(event){
            this.content.scrollTop -= event.wheel * this.options.wheel;
            this.vUpdateThumbFromContentScroll();
            event.stop();
        },

        vPage: function(event){
            if (event.page.y > this.vThumb.getPosition().y) this.content.scrollTop += this.content.offsetHeight;
            else this.content.scrollTop -= this.content.offsetHeight;
            this.vUpdateThumbFromContentScroll();
            event.stop();
        },
        
        hPage: function(event){
            if (event.page.x > this.hThumb.getPosition().x) this.content.scrollLeft += this.content.offsetWidth;
            else this.content.scrollLeft -= this.content.offsetWidth;
            this.hUpdateThumbFromContentScroll();
            event.stop();
        },        

        vStart: function(event){
            this.vMouse.start = event.page.y;
            this.vPosition.start = this.vThumb.getStyle('top').toInt();
            document.addEvent('mousemove', this.bound.vDrag);
            document.addEvent('mouseup', this.bound.end);
            this.vThumb.addEvent('mouseup', this.bound.end);
            event.stop();
        },
        
        hStart: function(event){
            this.hMouse.start = event.page.x;        
            this.hPosition.start = this.hThumb.getStyle('left').toInt();
            document.addEvent('mousemove', this.bound.hDrag);
            document.addEvent('mouseup', this.bound.end);
            this.hThumb.addEvent('mouseup', this.bound.end);
            event.stop();
        },        

        end: function(event){
            document.removeEvent('mousemove', this.bound.vDrag);
            document.removeEvent('mousemove', this.bound.hDrag);            
            document.removeEvent('mouseup', this.bound.end);
            this.vThumb.removeEvent('mouseup', this.bound.end);
            this.hThumb.removeEvent('mouseup', this.bound.end);            
            event.stop();
        },

        vDrag: function(event){
            this.vMouse.now = event.page.y;
            this.vPosition.now = (this.vPosition.start + (this.vMouse.now - this.vMouse.start)).limit(0, (this.vTrackSize - this.vThumbSize));
            this.vUpdateContentFromThumbPosition();
            this.vUpdateThumbFromContentScroll();
            event.stop();
        },
        
        hDrag: function(event){
            this.hMouse.now = event.page.x;
            this.hPosition.now = (this.hPosition.start + (this.hMouse.now - this.hMouse.start)).limit(0, (this.hTrackSize - this.hThumbSize));
            this.hUpdateContentFromThumbPosition();
            this.hUpdateThumbFromContentScroll();
            event.stop();
        }        

    });