/*
 * ScrollBar
 * @author Pietro Ferraresi
 * @version 0.2
 * @classDescription A numeric spinner object. 
 * Created with the help of MooTools v1.2.1
 * MIT-style License.

-- start it up by doing this in your domready:

$$('input.ScrollBar').each( function(el){
	new ScrollBar(el);
});

 */

var ScrollBar = new Class({	
	Implements: [Events, Options],

	version: 0.1,

	element:null,
	elements: {
		mask: null,
		content: null,
		scrollbar_container: null,
		up_button: null,
		cursor: null,
		scrollbar: null,
		up_button: null,
		slider: null
	},
	options : {
		height: 100,
		width: 15,
		margin: 5,
		background: '#CCCCCC',
		cursor: {
			width: 0,
			height: 10,
			background: '#000000'
		},
		up: {
			width: 0,
			height: 20,
			background: '#999999'
		},
		down: {
			width: 0,
			height: 20,
			background: '#999999'
		}
	},

	initialize: function(obj,options) {
		var options=JSON.decode(obj.getProperty('alt'));
		this.setOptions(options);
		
		if (this.options.cursor.width==0){this.options.cursor.width=this.options.width}
		if (this.options.up.width==0){this.options.up.width=this.options.width}
		if (this.options.down.width==0){this.options.down.width=this.options.width}
		if (this.options.cursor.height==0){this.options.cursor.height=this.options.height/5}
		
		this.element=obj;
		if (this.options.margin==null){
			this.options.margin=(this.options.width/2);
		}
		this.build(this.element);
		this.bind(this.elements);
	},
	
	build: function(obj){
		
		// *************************************
		// CREA LA MASCHERA PER IL CONTENUTO
		this.elements.content=obj.clone();
		
		
		this.elements.mask=new Element('div');
		this.elements.mask.setStyle('position', 'relative');
		this.elements.mask.setStyle('overflow', 'hidden');
		this.elements.mask.setStyle('width', obj.getWidth());
		this.elements.mask.setStyle('height', this.options.height);
		
		this.element.set('html','');
		this.elements.mask.inject(obj);
		this.elements.content.setStyle('width', obj.getWidth() - this.options.width - this.options.margin);
		this.elements.content.inject(this.elements.mask);
		
		// *************************************
		// CREAZIONE DELLA SCROLLBAR
		
		// Pulsanti
		if (this.options.up.height>0 || this.options.down.height>0){
			this.elements.up_button=new Element('div',{styles: {width: this.options.up.width, height: this.options.up.height, background: this.options.up.background}});
			this.elements.down_button=new Element('div',{styles: {width: this.options.down.width, height: this.options.down.height, background: this.options.down.background}});
		}
		
		// Scrollbar
		this.elements.scrollbar=new Element('div',{styles: {width: this.options.width, height: this.options.height - (this.options.down.height + this.options.up.height)}});
		this.elements.scrollbar.setStyle('cursor','pointer');
		
		// Cursore
		this.elements.cursor=new Element('div',{styles: {width: this.options.cursor.width, height: this.options.cursor.height, background: this.options.cursor.background}});
		this.elements.cursor.setStyle('cursor','pointer');
		
		// Container
		this.elements.scrollbar_container=new Element('div', {styles: {display: 'block', position: 'absolute', top: '0px', right: '0px', width: this.options.width, height: this.options.height, background: this.options.background}});
		this.elements.scrollbar_container.setStyle('height', this.options.height);
		
		// Posizionamento
		if (this.options.up.height>0){
			this.elements.up_button.inject(this.elements.scrollbar_container);
		}
		this.elements.scrollbar.inject(this.elements.scrollbar_container);
		this.elements.cursor.inject(this.elements.scrollbar);
		if (this.options.down.height>0){
			this.elements.down_button.inject(this.elements.scrollbar_container);
		}
		this.elements.scrollbar_container.inject(this.elements.mask);
	},
	
	bind: function(elements){
	
		// OLD CODE
		var maskHeight = this.options.height;
		var contentHeight= elements.content.getHeight();
		var deltaHeight = contentHeight - maskHeight;
		
		elements.content.setStyle('margin-top', 0);
		if (contentHeight > maskHeight){
			elements.scrollbar_container.style.display='block';
		}else{
			//elements.content.setStyle('width', elements.content.getWidth() + this.options.width + this.options.margin);
			elements.scrollbar_container.style.display='none';
		}
	
		elements.slider = new Slider(elements.scrollbar, elements.cursor, {	
		steps: deltaHeight,
		mode: 'vertical',	
		onChange: function(step){
			if (deltaHeight>0){
				var newPosition = - (step + 20);
				elements.content.setStyle('margin-top', newPosition); 
			}
		}
		}).set(0);

		this.elements.mask.addEvent('mousewheel',function(event){
			elements.slider.step-=(event.wheel * 10);
			elements.slider.set(elements.slider.step);
		})
		
		if (this.options.up.height>0){
			elements.up_button.setStyle('cursor','pointer');
			elements.up_button.addEvent('click',function(){
				elements.slider.step=elements.slider.step - (maskHeight + 20);
				elements.slider.set(elements.slider.step);
			});
		}
		
		if (this.options.down.height>0){
			elements.down_button.setStyle('cursor','pointer');
			elements.down_button.addEvent('click',function(){
				elements.slider.step=elements.slider.step + (maskHeight - 20);
				elements.slider.set(elements.slider.step);
			});
		}
	},
	
	update: function(){
	}
});

	
Element.implement({
	ScrollBar: function (options){
		new ScrollBar(this, options);
		return this;
	}
});