var Scroller = Class.create({
	initialize: function(element, options)
	{
		this.container = $(element);
		
		this.height = options.height ? options.height : 400;
		this.width = options.width ? options.width : 400;

		this.offset = 0;
		this.scroll = false;
		
		this.start();
	},
	start: function()
	{
		
		
		
		this.container.addClassName('scrollerOuter');
		this.container.setStyle({height:this.height+'px', width:this.width+'px', overflow:'hidden', position:'relative'});
	
		this.build();
	},
	build: function()
	{
		this.content = new Element('div').update(this.container.innerHTML);
		this.content.setStyle({width: (this.width - 20) + 'px', overflow:'hidden',float:'left', position:'relative'});
		this.container.update('');
		this.container.appendChild(this.content);
		
		
		
		this.buildBar();
		this.buildHandel();
		this.calculateOffsets();
	},
	buildBar: function()
	{
		this.bar = new Element('div');
		this.bar.setStyle({height:this.height, width:'13px',float:'left',padding:'0 0 0 7px', cursor:'pointer'});
		
		this.container.appendChild(this.bar);	
		
		this.topButton = new Element('div')
		.setStyle({height:'10px', width:'13px', background:'url("images/scrollerScrollUp.gif") no-repeat bottom right'})
		.observe('mousedown', this.startScrollUp.bindAsEventListener(this))
		.observe('mouseup', this.stopScroll.bindAsEventListener(this));
		
		this.track = new Element('div')
		.setStyle({height:(this.height-20)+'px', width:'13px', background:'url("images/scrollerTrack.gif") repeat-y right'});
		
		document.observe('mouseup', this.stopScroll.bindAsEventListener(this))
		.observe('mousedown', this.scrollSnap.bindAsEventListener(this));
		
		this.bottomButton = new Element('div')
		.setStyle({height:'10px', width:'13px', cursor:'pointer', background:'url("images/scrollerScrollDown.gif") no-repeat top right'})
		.observe('mousedown', this.startScrollDown.bindAsEventListener(this))
		.observe('mouseup', this.stopScroll.bindAsEventListener(this));
		
		this.bar.appendChild(this.topButton);
		this.bar.appendChild(this.track);
		this.bar.appendChild(this.bottomButton);

	},
	buildHandel:function()
	{
		this.handel = new Element('div')
		.setStyle({height:'31px', width:'13px', cursor:'pointer', background:'url("images/scrollerHandel.png") no-repeat right', position:'relative'})
		.observe('mousedown', this.startScrollDrag.bindAsEventListener(this));
		
		this.track.appendChild(this.handel);
		
	},
	calculateOffsets:function()
	{
		var contentHeight = this.content.getHeight();

		this.scrollOffset = (contentHeight - this.height) / 100;
		this.trackOffset = (this.height - this.handel.getHeight() - 20) / 100;
		
		
	},
	
	doScroll:function(pe)
	{
		if (this.scroll)
		{
			if (this.scroll == 'up')
			{
				this.scrollUp();
				this.animateScroll();
			}
			else if (this.scroll == 'down')
			{
				this.scrollDown();
				this.animateScroll();
			}
			this.setHandel();
		}
		else
		{
			pe.stop();
		}

	},
	startScrollUp:function(event)
	{	
	
		new PeriodicalExecuter(this.doScroll.bindAsEventListener(this), 0.005);
		this.scroll = 'up';
	},
	startScrollDown:function(event)
	{
		new PeriodicalExecuter(this.doScroll.bindAsEventListener(this), 0.005);
		this.scroll = 'down';
	},
	startScrollDrag:function(event)
	{
		this.currentPointer = event.pointerY();
		//alert(event.pointerY());
		document.observe('mousemove', this.scrollDrag.bindAsEventListener(this));
		this.scroll = 'drag';
	},
	scrollSnap:function()
	{
		
	},
	stopScroll:function()
	{
		this.scroll = false;
	},
	scrollUp:function()
	{
		this.offset -= 3;
		if (this.offset < 0)
		{
			this.offset = 0;
			this.scroll = false;
		}
	},
	scrollDown:function()
	{
		this.offset += 3;
		if (this.offset > 100)
		{
			this.offset = 100;
			this.scroll = false;
		}
	},
	scrollDrag:function(event)
	{
		
		if (this.scroll)
		{
			if (this.scroll == 'drag')
			{
				
				var newPointer = event.pointerY();
				
				var adjust = (newPointer - this.currentPointer) / this.trackOffset;
				
				this.offset += adjust;
				
				if (this.offset > 100)
				{
					this.offset = 100;

				}
				if (this.offset < 0)
				{
					this.offset = 0;
				}
				
				this.animateScroll();
				this.currentPointer = newPointer;
			}
			this.setHandel();
		}
	},
	getOffset: function()
	{
		if (this.offset >0)
		{
			return '-' + (this.offset * this.scrollOffset) + 'px';
		}
		else
		{
			return (this.offset * this.scrollOffset) + 'px';
		}
		
	},
	animateScroll: function()
	{
		this.content.setStyle({top:this.getOffset()});
		
	},
	setHandel: function()
	{
		this.handel.setStyle({top:(this.offset * this.trackOffset) + 'px'});
	}
	
});

document.observe('dom:loaded', function(){
	scroller = new Scroller('scroller', {height: 128, width:400});
	
	
});