/*
	Class: Scrollbar
		Manage vertical scrollbar for container.
		
	Require:
		Should have a look, sorry for now!
		
	Arguments:
		options
		
	Options:
		width - (integer) The scollbar track width
		maxThumbSize - (integer)
		wheel - (integer) The scroll increment
		
	Example:
		(start code)
		var scrollbar = new Scrollbar({
			container	: this.content
		});
		(end)

	Credits: 
		based on Valerio's Mootools scrollbar plugin.
		found in upload folder of mootools website

*/

Scrollbar = new Class({
					  
	Implements: [Events, Options],				  
					  
	options: {	
		maxThumbSize: 32,
		wheel: 16,
		width:'4px',
		scollToElementClass: ''
	},

	initialize: function(target,options){
		this.setOptions(options);
		//console.log('target :', target);
		if (target) { this.target = target; }
		 else { return } 
		
		this.build();
		this.bound = {
			'start': this.start.bind(this),
			'end': this.end.bind(this),
			'drag': this.drag.bind(this),
			'wheel': this.wheel.bind(this),
			'page': this.page.bind(this)
		};

		this.position = {};
		this.mouse = {};
		this.update();
		this.attach();
		
		// add by sb, 29.6.2010
		if (this.options.scrollToElementClass && this.container.getElement('[class='+this.options.scrollToElementClass+']')){
			this.container.scrollTo(0, this.container.getElement('[class='+this.options.scrollToElementClass+']').getPosition(this.container).y);
			this.updateThumbFromContentScroll();
		}
	},
	
	build: function(){
		
		this.container = this.target.getElement('ul');
		
		this.container.setStyles({
			height: '141px',
			overflow:'hidden'
		});
		
		this.element = new Element('div',{
			styles: {
				'float': 'right',
				height: '100%',
				width: '4px',
				zIndex: '10000',
				backgroundColor: '#fff',
				padding:'0 2px'
			}					   
		});
		
		this.element.inject(this.container,'before')
		this.thumb = new Element('div', {
			styles: {
				margin: '0',
				padding:'0 0 0',
				width:'4px',
				position: 'absolute',
				background: 'url(/img/scrollbar/top.gif) top no-repeat'
			}
		}).inject(this.element);
		
		this.inner = new Element('div',{
			styles: {
				margin: '0',
				height:'100%',
				backgroundColor: '#cccccc',
				background: 'url(/img/scrollbar/bottom.gif) bottom no-repeat'
			}
		}).inject(this.thumb);
	},
	
	update: function(){
		this.containerSize = this.container.getSize().y;
		this.element.set('styles', {
   			width: this.options.width.toInt(),
    		height: this.containerSize + 'px'
		});

		this.containerScrollSize = this.container.scrollHeight;
		if(this.containerScrollSize == 0) return;

		if (this.isVisible()) {
    		this.thumb.setStyle('visibility', 'visible');
		}
		else {
			this.thumb.setStyle('visibility', 'hidden');
		}
		
		this.trackSize = this.element.offsetHeight.toInt();
		this.containerRatio = this.containerSize / this.containerScrollSize;
		this.thumbSize = this.trackSize * this.containerRatio;
		
		var offset;
		
		if (this.thumbSize < this.options.maxThumbSize.toInt()) {
			this.thumbSize = this.options.maxThumbSize.toInt();
			offset = this.trackSize - this.thumbSize;
		}
		else if (this.thumbSize > this.trackSize) {
			this.thumbSize = this.options.maxThumbSize.toInt();
			offset = this.trackSize;
		} else {
			offset = this.trackSize;
		}
		
		this.scrollRatio = this.containerScrollSize / offset;
		
		this.thumb.set('styles', {
   			//width: this.options.width-4,
    		height: this.thumbSize + 'px'
		});
			
		this.updateThumbFromContentScroll();
		this.updateContentFromThumbPosition();
	},

	updateContentFromThumbPosition: function(){
		this.container.scrollTop = this.position.now * this.scrollRatio;
	},

	updateThumbFromContentScroll: function(){
		this.position.now = (this.container.scrollTop / this.scrollRatio).limit(0, (this.trackSize - this.thumbSize));
		this.thumb.setStyle('top', this.position.now);
	},

	attach: function(){
		this.thumb.addEvent('mousedown', this.bound.start);
		//this.thumb.addEvent('whileclick', this.bound.start);
		if (this.options.wheel) 
			this.container.addEvent('mousewheel', this.bound.wheel);
		this.element.addEvent('mouseup', this.bound.page);
	},

	wheel: function(event){
		this.container.scrollTop -= event.wheel * this.options.wheel;
		this.updateThumbFromContentScroll();
		event.stop();
	},

	page: function(event){
		if (event.page.y > this.thumb.getPosition().y) this.container.scrollTop += this.container.offsetHeight;
		else this.container.scrollTop -= this.container.offsetHeight;
		this.updateThumbFromContentScroll();
		event.stop();
	},

	start: function(event){
		this.mouse.start = event.page.y;
		this.position.start = this.thumb.getStyle('top').toInt();
		document.addEvent('mousemove', this.bound.drag);
		document.addEvent('mouseup', this.bound.end);
		this.thumb.addEvent('mouseup', this.bound.end);
		event.stop();
	},

	end: function(event){
		document.removeEvent('mousemove', this.bound.drag);
		document.removeEvent('mouseup', this.bound.end);
		this.thumb.removeEvent('mouseup', this.bound.end);
		//console.log('stop');
		event.stop();
	},

	drag: function(event){
		this.mouse.now = event.page.y;
		this.position.now = (this.position.start + (this.mouse.now - this.mouse.start))
		 .limit(0, (this.trackSize - this.thumbSize));
		 
		this.updateContentFromThumbPosition();
		this.updateThumbFromContentScroll();
		event.stop();
	},
	
	isVisible: function(){
		if (this.containerSize < this.containerScrollSize) {
			return true;
		} else {
			return false;	
		}
	}
});