if(Df){
}else{
	var Df = {}
}

Df.Scrollbar = function(el,para){
	//BEGIN constructor
	var ele = this.ele = $(el)
	
	var pars = this.pars = {
		classNames: {
			y: {
				holder: 'yHolder',
				prev: 'ArrowUp',
				next: 'ArrowDown',
				area: 'SlideArea',
				marker: 'marker'
			},
			x: {
				holder: 'xHolder',
				prev: 'ArrowLeft',
				next: 'ArrowRight',
				area: 'SlideArea',
				marker: 'marker'
			}
		},
		clickPercent:10,
		clickPixel:false,
		clickPause: 500,
		clickRepeat: 25
	}
	
	if(para){
		pars = Object.extend(pars,para)
	}
	
	var yDrag, xDrag, yClickMove, xClickMove, maxY, maxX;
	var yClickStatusNext = false;
	var yClickStatusPrev = false;
	var xClickStatusNext = false;
	var xClickStatusPrev = false;
	
	var eles = {
		y: {},
		x: {}
	}
	
	var dems = {
		holder:{},
		content:{},
		offset:{},
		x: {
			holder: {},
			prev: {},
			next: {},
			area: {},
			marker: {}
		},
		y: {
			holder: {},
			prev: {},
			next: {},
			area: {},
			marker: {}
		}
	}
	
	ele.scrollTop = 0;
	ele.scrollLeft = 0;
	
	this.version = function(){
		return 1.0;
	}
	
	this.requires = function(){
		return [
			'../js/Df.js',
			'../js/prototype1_5_1_1.js',
			'../js/prototype1_5_1_1_extend.js',
			'../js/Df.Drag'
		];
	}
	
	this.set = function(para){
		if(para){
			pars = Object.extend(pars,para)
		}
		
		setDems();
		
		setPositions();
		
		if(dems.content.height > dems.holder.height){
			buildYBar();
		}
		
		if(dems.content.width > dems.holder.width){
			buildXBar();
		}
	}
	
	this.getElements = function(){
		return eles;
	}
	
	var scrollY = this.scrollY = function(y){
		if(y > maxY){
			y = maxY;
		}
		else if(y < 0){
			y = 0;
		}
		eles.y.marker.style.top = y + 'px'
		moveContentY();
	}
	
	var scrollX = this.scrollX = function(x){
		if(x < 0){
			x = 0;
		}
		if(x > maxX){
			x = maxX;
		}
		eles.x.marker.style.left = x + 'px'
		moveContentX();
	}
	
	var scrollYNext = this.scrollYNext = function(){
		var y = parseInt(eles.y.marker.getStyle('top')) + yClickMove
		scrollY(y);
	}
	
	var scrollYPrev = this.scrollYPrev = function(){
		var y = parseInt(eles.y.marker.getStyle('top')) - yClickMove
		scrollY(y);
	}
	
	var scrollXNext = this.scrollXNext = function(){
		var x = parseInt(eles.x.marker.getStyle('left')) + xClickMove
		scrollX(x);
	}
	
	var scrollXPrev = this.scrollXPrev = function(){
		var x = parseInt(eles.x.marker.getStyle('left')) - xClickMove
		scrollX(x);
	}
	
	var scrollYBy = this.scrollYBy = function(y){
		y = parseInt(eles.y.marker.getStyle('top')) - y
		scrollY(y);
	}
	
	var scrollXBy = this.scrollXBy = function(y){
		x = parseInt(eles.x.marker.getStyle('left')) + x
		scrollX(x);
	}
	
	var setDems = function(){
		dems.holder = ele.getDimensions();
		dems.content = ele.getContentsDems();
	}
	
	var setPositions = function(){
		dems.offset = {x:parseInt(Position.cumulativeOffset(ele)[0]), y:parseInt(Position.cumulativeOffset(ele)[1])};
	}
	
	var buildYBar = function(){
		
		//create elements
		buildBarHTML('y');
		
		//set dem vars
		dems.y.holder = {width: parseInt(eles.y.holder.getStyle('width')), height: dems.holder.height};
		dems.y.prev = {width: parseInt(eles.y.prev.getStyle('width')), height: parseInt(eles.y.prev.getStyle('height'))};
		dems.y.next = {width: parseInt(eles.y.next.getStyle('width')), height: parseInt(eles.y.next.getStyle('height'))};
		dems.y.area.width = parseInt(eles.y.area.getStyle('width'));
		dems.y.area.height = dems.holder.height - dems.y.prev.height - dems.y.next.height;
		dems.y.marker.width = parseInt(eles.y.marker.getStyle('width'));
		dems.y.marker.height = Math.ceil((dems.holder.height/dems.content.height) * dems.y.area.height);
		
		if(pars.clickPixel){
			yClickMove = Math.ceil((pars.clickPixel/dems.content.height) * dems.y.area.height);
		}
		else if(pars.clickPercent){
			yClickMove = Math.ceil((pars.clickPercent/100) * dems.y.area.height);
		}
		
		maxY = dems.y.area.height - dems.y.marker.height
		
		//size elements
		eles.y.holder.style.height = dems.y.holder.height + 'px';
		eles.y.area.style.height = dems.y.area.height + 'px';
		eles.y.marker.style.height = dems.y.marker.height + 'px';
		
		//position elements
		eles.y.holder.style.left = '295px';
		eles.y.holder.style.top = '36px';
		
		//apply actions to marker
		var para = {
			dirX: false,
			onDrag: moveContentY,
			dirY: {
				min:0,
				max: maxY
			}
		}
		yDrag = new Df.Drag(eles.y.marker,para);
		yDrag.enable();
		
		//apply actions to Buttons
		Event.observe(eles.y.next, 'mousedown', yNext ,false);
		Event.observe(eles.y.next, 'mouseup', function(){
			yClickStatusNext = false;
		},false);
		Event.observe(eles.y.prev, 'mousedown', yPrev ,false);
		Event.observe(eles.y.prev, 'mouseup', function(){
			yClickStatusPrev = false;
		},false);
		
		//apply actions to scroll area
		Event.observe(eles.y.area, 'mousedown', yTo ,false);
		
		//edit actions to marker
		Event.observe(eles.y.marker, 'mousedown', function(){
			Event.stopObserving(eles.y.area,'mousedown',yTo,false);
		},false);
		Event.observe(eles.y.marker, 'mouseup', function(){
			Event.observe(eles.y.area,'mousedown',yTo,false);
		},false);
		
	}
	
	var buildXBar = function(){
		
		//create elements
		buildBarHTML('x');
		
		//set dem vars
		dems.x.holder = {height: parseInt(eles.x.holder.getStyle('height')), width: dems.holder.width};
		dems.x.prev = {width: parseInt(eles.x.prev.getStyle('width')), height: parseInt(eles.x.prev.getStyle('height'))};
		dems.x.next = {width: parseInt(eles.x.next.getStyle('width')), height: parseInt(eles.x.next.getStyle('height'))};
		dems.x.area.height = parseInt(eles.x.area.getStyle('height'));
		dems.x.area.width = dems.holder.width - dems.x.prev.width - dems.x.next.width;
		dems.x.marker.height = parseInt(eles.x.marker.getStyle('height'));
		dems.x.marker.width = Math.ceil((dems.holder.width/dems.content.width) * dems.x.area.width);
		
		if(pars.clickPixel){
			xClickMove = Math.ceil((pars.clickPixel/dems.content.width) * dems.x.area.width);
		}
		else if(pars.clickPercent){
			xClickMove = Math.ceil((pars.clickPercent/100) * dems.x.area.width);
		}
		
		maxX = dems.x.area.width - dems.x.marker.width
		
		//size elements
		eles.x.holder.style.width = dems.x.holder.width + 'px';
		eles.x.area.style.width = dems.x.area.width + 'px';
		eles.x.marker.style.width = dems.x.marker.width + 'px';
		
		//position elements
		eles.x.holder.style.top = dems.offset.y + dems.holder.height + 'px';
		eles.x.holder.style.left = dems.offset.x + 'px';
		
		//apply actions to marker
		var para = {
			dirY: false,
			onDrag: moveContentX,
			dirX: {
				min:0,
				max: maxX
			}
		}
		xDrag = new Df.Drag(eles.x.marker,para);
		xDrag.enable();
		
		//apply actions to Buttons
		Event.observe(eles.x.next, 'mousedown', xNext ,false);
		Event.observe(eles.x.next, 'mouseup', function(){
			xClickStatusNext = false;
		},false);
		Event.observe(eles.x.prev, 'mousedown', xPrev ,false);
		Event.observe(eles.x.prev, 'mouseup', function(){
			xClickStatusPrev = false;
		},false);
		
		//apply actions to scroll area
		Event.observe(eles.x.area, 'mousedown', xTo ,false);
		
		//edit actions to marker
		Event.observe(eles.x.marker, 'mousedown', function(){
			Event.stopObserving(eles.x.area,'mousedown',xTo,false);
		},false);
		Event.observe(eles.x.marker, 'mouseup', function(){
			Event.observe(eles.x.area,'mousedown',xTo,false);
		},false);
	}
	
	var yNext = function(event){
		yClickStatusNext = true
		yNextClick(pars.clickPause);
	}
	
	var yPrev = function(event){
		yClickStatusPrev = true
		yPrevClick(pars.clickPause);
	}
	
	var xNext = function(event){
		xClickStatusNext = true
		xNextClick(pars.clickPause);
	}
	
	var xPrev = function(event){
		xClickStatusPrev = true
		xPrevClick(pars.clickPause);
	}
	
	var yPrevClick = function(i){
		if(yClickStatusPrev){
			scrollYPrev();
			setTimeout(function(){
				yPrevClick(pars.clickRepeat)
			}, i);
		}
	}
	
	var yNextClick = function(i){
		if(yClickStatusNext){
			scrollYNext();
			setTimeout(function(){
				yNextClick(pars.clickRepeat)
			}, i);
		}
	}
	
	var xPrevClick = function(i){
		if(xClickStatusPrev){
			scrollXPrev();
			setTimeout(function(){
				xPrevClick(pars.clickRepeat);
			}, i);
		}
	}
	
	var xNextClick = function(i){
		if(xClickStatusNext){
			scrollXNext();
			setTimeout(function(){
				xNextClick(pars.clickRepeat);
			}, i);
		}
	}
	
	var yTo = function(event){
		Event.stop(event);
		var top = (Event.pointerY(event) - dems.offset.y - dems.y.prev.height) - parseInt((dems.y.marker.height/2));
		if(top<0){
			top = 0;
		}else if(top > maxY){
			top = maxY;
		}
		eles.y.marker.style.top = top + 'px';
		moveContentY();
	}
	
	var xTo = function(event){
		Event.stop(event);
		var left = (Event.pointerX(event) - dems.offset.x - dems.x.prev.width) - parseInt((dems.x.marker.width/2));
		if(left<0){
			left = 0;
		}else if(left > maxX){
			left = maxX;
		}
		eles.x.marker.style.left = left + 'px';
		moveContentX();
	}
	
	var moveContentY = function(){
		var percent = parseInt(eles.y.marker.getStyle('top')) / (dems.y.area.height - dems.y.marker.height);
		ele.scrollTop =  parseInt((dems.content.height - dems.holder.height) * percent);
	}
	
	var moveContentX = function(){
		var percent = parseInt(eles.x.marker.getStyle('left')) / (dems.x.area.width - dems.x.marker.width);
		ele.scrollLeft =  parseInt((dems.content.width - dems.holder.width) * percent);
	}
	
	var buildBarHTML = function(d){
		
		//create elements
		eles[d].holder = $E('div', $("details-more"),{ className:pars.classNames[d].holder } );
		eles[d].prev = $E('div', eles[d].holder,{ className:pars.classNames[d].prev } );
		eles[d].area = $E('div', eles[d].holder,{ className:pars.classNames[d].area } );
		eles[d].marker = $E('div', eles[d].area,{ className:pars.classNames[d].marker } );
		eles[d].next = $E('div', eles[d].holder,{ className:pars.classNames[d].next } );
		
	}
}