var ScrollBar = new Class({
    initialize: function(id, scrollStepAmt) {
		this.container = id;
        var contentAreaInsideMask = this.container.getElement('.scrollContent');
		this.scrollStepAmt = scrollStepAmt;
        this.content = contentAreaInsideMask;
		this.contentSize = this.content.getSize();
        //console.log("initial height: " +  this.contentSize.y);
        this.content.set('styles', { 'position': 'relative', 'top': 0 });
        this.mask = this.container.getElement('.scrollMask');
		this.maskScrollSize = this.mask.getScrollSize();
        //console.log("initial scrollSize: " +  this.maskScrollSize.y);
		this.maskSize = this.mask.getSize();
		this.scrollable = false;
        this._buildScrollbar();
		this.currentContentPosition = 0;
		
        
    },
    _buildScrollbar: function() {
        var me = this;
        this.scrollBar = new Element('div', {'id': 'scrollBar', 'class': 'scrollBar' });
		this.scrollBar.inject(this.mask, 'bottom');
        this.scrollUpBtn = new Element('div', {
            'class': 'scrollUpBtn',
            'events': {
                'mousedown': this.moveTrackBtn.pass(['up', this.scrollStepAmt], this),
                'mouseup': this.stopMovement.bind(this),
                'mouseleave': this.stopMovement.bind(this)
            }
        });

		this.scrollUpBtn.inject(this.scrollBar, 'bottom');

        this.scrollDownBtn = new Element('div', {
            'class': 'scrollDownBtn',
            'events': {
                'mousedown': this.moveTrackBtn.pass(['down', this.scrollStepAmt], this),
                'mouseup': this.stopMovement.bind(this),
                'mouseleave': this.stopMovement.bind(this)
            }
        });
        this.scrollDownBtn.inject(this.scrollBar, 'top');
        this.scrollTrack = new Element('div', {
            'class': 'scrollTrack',
            'styles': {
                'height': this.scrollBar.getHeight() - this.scrollUpBtn.getHeight() - this.scrollDownBtn.getHeight(),
                'position': 'absolute',
                'top': this.scrollUpBtn.getHeight()
            }
        });
        this.scrollTrackBtn = new Element('div', { 'class': 'scrollTrackBtn' });
        this.scrollTrack.inject(this.scrollBar, 'top');
        this.scrollTrackBtn.inject(this.scrollTrack, 'bottom');
		this.scrollTrackDistance = this.scrollTrack.getHeight()-this.scrollTrackBtn.getSize().y;
        this.scrollSlide = new Slider(this.scrollTrack, this.scrollTrackBtn, {
            mode: 'vertical',
            onChange: function(step) {
                
                //console.log("step from onChange: " + step);
                me.scrollSlide.tick = step;
                me.moveContent(step);
                //console.log("cPosition: " + me.currentContentPosition);
                me.currentContentPosition = me.scrollSlide.tick * me.scrollSlide.stepWidth;
                //console.log("scrollStep: " + me.scrollSlide.step);
                //console.log("cPosition after: " + me.currentContentPosition);
            }
        });
        this.scrollSlide.step = 0;
        this.scrollSlide.tick = 0;
        //this.scrollStepAmt = this.scrollSlide.stepWidth;
        this.fxScrollContent = new Fx.Morph($$('.scrollContent')[0], {duration: 'long', transition: Fx.Transitions.Bounce.easeOut});
    },
    moveTrackBtn: function(dir, amt) {
        var me = this;
        if (!this.scrollSlide.step) this.scrollSlide.step = 0;
        if (dir == 'up') {
            this.scrollInterval = function() {
                //console.log("down before: " + me.scrollSlide.tick + ":" + me.scrollSlide.stepWidth + ":" + me.contentSize.y + ":" + me.currentContentPosition);
                this.scrollSlide.set(me.scrollSlide.tick - me.scrollSlide.stepWidth);
                me.scrollSlide.tick = me.scrollSlide.tick - me.scrollSlide.stepWidth;
                //console.log("down after: " + me.scrollSlide.tick + ":" + me.scrollSlide.stepWidth + ":" + me.contentSize.y + ":" + me.currentContentPosition);
            } .bind(me).periodical(80);             
        } else if (dir == 'down') {
            this.scrollInterval = function() {
                //console.log("down before: " + me.scrollSlide.tick + ":" + me.scrollSlide.stepWidth + ":" + me.contentSize.y + ":" + me.currentContentPosition);
                this.scrollSlide.set(me.scrollSlide.tick + me.scrollSlide.stepWidth);
                me.scrollSlide.tick = me.scrollSlide.tick + me.scrollSlide.stepWidth;
                //console.log("down after: " + me.scrollSlide.tick + ":" + me.scrollSlide.stepWidth + ":" + me.contentSize.y + ":" + me.currentContentPosition);
            } .bind(me).periodical(80); 
        } else {
            console.log("Error");
        }
        
        
    },
    stopMovement: function() {
        $clear(this.scrollInterval);
        //console.log("stop");
    },
    moveContent: function(step) {
	    var _me = this;
	    this.step =  (this.contentSize.y - this.maskSize.y) * (step / 100);
        //console.log("contentSize: " + this.contentSize.y);
		this.content.set('styles', {'top': -this.step});
    },
    moveContentPosition: function(y) {
        var _me = this;
        this.fxScrollContent.start({
            'top': y
        });
        _me.currentContentPosition = Math.floor((y/_me.contentSize.y) * -100);
        _me.scrollSlide.set(_me.currentContentPosition);
        _me.reInitializeDimension();    	
        //console.log("contentSize cp: " + this.contentSize.y);

    },
	isScrollable: function() {
		if (this.contentSize.y > this.maskSize.y) {
			this.scrollable = true;
			this.scrollableCoordinate = {'y': true};
		}
	},
	reInitializeDimension: function() {
		this.contentSize = this.content.getSize();
		this.maskScrollSize = this.mask.getScrollSize();
		this.maskSize = this.mask.getSize();
	}	
});