/***
*
* scrollbox:  Requires Drag.Move
*
***/
var ScrollBox = new Class({
		Implements: [Events, Options],
		options: {
				minBarLength:20,
				vertical:true,
				horizontal:false,
				//
				scroller_scale:.99,
				scroller_size:20,
				track_size:18,
				track_margin:1,
				bar_size:18,
				bar_margin:0,
				//
				yscroller_id:"vertical_scroll_box",
				xscroller_id:"horizontal_scroll_box",
				ytrack_id:"vertical_scroll_track",
				xtrack_id:"horizontal_scroll_track",
				ybar_id:"vertical_scroll_bar",
				xbar_id:"horizontal_scroll_bar",
				ybarbox_id:"vertical_scroll_barbox",
				xbarbox_id:"horizontal_scroll_barbox",
				//
				tween_secs:50
		},
		initialize: function(elm,options){
				this.setOptions(options);
				this.xpartners = []
				this.ypartners = []
				this.element = document.id(elm)
				this.element.setStyle("position","absolute")
				this.element.set("tween",{duration:this.options.tween_secs})
				this.box = this.element.getParent()
				this.box.setStyles({
						overflow:"hidden"	
				})
				this.setup()
		},
		xpartner: function(partner){
				if (this.xbar){
						var elm = document.id(partner)
						elm.set("tween",{duration:this.options.tween_secs})
						elm.xratio = -(elm.getSize().x-elm.getParent().getStyle("width").toInt())/(this.xtrack_length - this.xbar_length)
						this.xpartners.push(elm)
				}
		},
		ypartner: function(partner){
				if (this.ybar){
						var elm = document.id(partner)
						elm.set("tween",{duration:this.options.tween_secs})
						elm.yratio = -(elm.getSize().y-elm.getParent().getStyle("height").toInt())/(this.ytrack_length - this.ybar_length)
						this.ypartners.push(elm)
				}
		},
		//
		//  INTERNAL
		//
		setup: function(){
				this.box_width = this.box.getStyle("width").toInt()
				this.box_height = this.box.getStyle("height").toInt()
				// x-scroller
				if (this.options.horizontal){
						this.xscroller_length = this.box_width * this.options.scroller_scale
						this.xtrack_length = this.xscroller_length - 2 * this.options.track_margin
						this.xscroller = new Element("div",{id:this.options.xscroller_id})
						this.xscroller.setStyles({
								width:this.xscroller_length,
								height:this.options.scroller_size
						})
						var xtrack = new Element("div",{id:this.options.xtrack_id})
						xtrack.setStyles({
								width:this.xtrack_length,
								height:this.options.track_size,
								position:"absolute",
								left:this.options.track_margin,
								top:(this.options.scroller_size - this.options.track_size)/2
						})
						var barbox = new Element("div",{id:this.options.xbarbox_id})
						barbox.setStyles({
								width:this.xtrack_length - 2 * this.options.bar_margin,
								height:this.options.bar_size,
								position:"absolute",
								left:this.options.bar_margin,
								top:(this.options.track_size - this.options.bar_size)/2
						})
						this.xbar = new Element("div",{id:this.options.xbar_id})
						this.xbar.setStyles({
								width:this.xtrack_length - 2 * this.options.bar_margin,
								height:this.options.bar_size,
								position:"absolute",
								cursor:"pointer",
								left:0,
								top:0
						})
						this.xbar.addEvent("mousedown",function(){
								var dragging = function(){
										this.reposebox()
								}
								document.body.addEvent("mouseup",function(){
										$clear(timer)
										this.reposebox()
										document.body.removeEvents("mouseup")
								}.bind(this))
								var timer = dragging.periodical(this.options.tween_secs,this)
						}.bind(this))
						var xdrag = new Drag.Move(this.xbar, {
								container:barbox
						})
						this.xscroller.grab(xtrack.grab(barbox.grab(this.xbar)))
				}
				// y-scrolller
				if (this.options.vertical){
						this.yscroller_length = this.box_height * this.options.scroller_scale
						this.ytrack_length = this.yscroller_length - 2 * this.options.track_margin
						this.yscroller = new Element("div",{id:this.options.yscroller_id})						
						this.yscroller.setStyles({
								width:this.options.scroller_size,
								height:this.yscroller_length
						})
						var ytrack = new Element("div",{id:this.options.ytrack_id})
						ytrack.setStyles({
								width:this.options.track_size,
								height:this.ytrack_length,
								position:"relative",
								left:(this.options.scroller_size - this.options.track_size)/2,
								top:this.options.track_margin
						})
						var ybarbox = new Element("div",{id:this.options.ybarbox_id})
						ybarbox.setStyles({
								width:this.options.bar_size,
								height:this.ytrack_length - 2 * this.options.bar_margin,
								position:"absolute",
								left:this.options.bar_margin,
								top:(this.options.track_size - this.options.bar_size)/2
						})
						this.ybar = new Element("div",{id:this.options.ybar_id})
						this.ybar.setStyles({
								width:this.options.bar_size,
								height:this.ytrack_length - 2 * this.options.bar_margin,
								position:"absolute",
								cursor:"pointer",
								left:0,
								top:0
						})
						this.ybar.addEvent("mousedown",function(){
								var ydragging = function(){
										this.yreposebox()
								}
								document.body.addEvent("mouseup",function(){
										clearTimeout(ytimer)
										this.yreposebox()
										document.body.removeEvents("mouseup")
								}.bind(this))
								var ytimer = ydragging.periodical(this.options.tween_secs,this)
						}.bind(this))
						var ydrag = new Drag.Move(this.ybar, {
								container:ybarbox
						})
						this.yscroller.grab(ytrack.grab(ybarbox.grab(this.ybar)))
				}
				this.update()
		},
		update: function(){
				if (this.xbar){
						this.xbar_length = Math.max(this.options.minBarLength,this.xtrack_length * this.box_width / this.element.getSize().x)
						this.xratio = -(this.element.getSize().x-this.box.getStyle("width").toInt())/(this.xtrack_length - this.xbar_length)
						if (this.element.getSize().x < this.box.getStyle("width").toInt()) {
								this.xscroller.setStyle("visibility","hidden")
								// repose to zero
								this.element.setStyle("left",0)
								this.xpartners.each(function(elm){
										elm.setStyle("left",0)
								}.bind(this))
								this.xbar.setStyle("left",0)
						} else  {
								this.xscroller.setStyle("visibility","visible")
								if (this.xbar) this.xbar.setStyle("width",this.xbar_length)
								this.xpartners.each(function(elm){
										elm.xratio = -(elm.getSize().x-elm.getParent().getStyle("width").toInt())/(this.xtrack_length - this.xbar_length)
								}.bind(this))
						}		
				}
				if (this.ybar){
						this.ybar_length = Math.max(this.options.minBarLength,this.ytrack_length * this.box_height / this.element.getSize().y)
						this.yratio = -(this.element.getSize().y-this.box.getStyle("height").toInt())/(this.ytrack_length - this.ybar_length)
						if (this.element.getSize().y < this.box.getStyle("height").toInt()) {
								this.yscroller.setStyle("visibility","hidden")
								// repose to zero
								this.element.setStyle("top",0)
								this.ypartners.each(function(elm){
										elm.setStyle("top",0)
								}.bind(this))
								this.ybar.setStyle("top",0)
						} else {
								this.yscroller.setStyle("visibility","visible")
								if (this.ybar) this.ybar.setStyle("height",this.ybar_length)
								this.ypartners.each(function(elm){
										elm.yratio = -(elm.getSize().y-elm.getParent().getStyle("height").toInt())/(this.ytrack_length - this.ybar_length)
								}.bind(this))
						}		
				}
		},
		reposebox: function(){
				this.element.setStyle("left",this.xbar.getStyle("left").toInt() * this.xratio)
				this.xpartners.each(function(elm){
						elm.setStyle("left",this.xbar.getStyle("left").toInt() * elm.xratio)
				}.bind(this))
		},
		yreposebox: function(){
				this.element.setStyle("top",this.ybar.getStyle("top").toInt() * this.yratio)
				this.ypartners.each(function(elm){
						elm.setStyle("top",this.ybar.getStyle("top").toInt() * elm.yratio)
				}.bind(this))
		},
		//
		//  ELEMENT
		//
		toElement: function(){
			return this.element	
		}
});