// JavaScript Document
var Slider = Class.create({
	initialize: function(sections, maskString, contentString){
		this.thumb = $('scrollThumb');
		this.gutter = $('scrollBar');
		this.content = $(contentString);
		this.mask = $(maskString);
		this.adj = $('leftBtn').offsetWidth;
		this.markers = [];
		if(sections.length>1){
			this.createDivisions(sections);
			this.gutter.style.visibility = 'visible';
			this.content.style.visibility = 'visible';
		}else{
			this.gutter.style.visibility = 'hidden';
			this.content.style.visibility = 'visible';
		}
		controller = new Mover(this.gutter, this.content, this.mask, this.adj);
	},
	
	createDivisions: function(sections){
		
		this.content.style.right="0px";
		
		$A($('scrollBar').childNodes).each(function(s){
				s.parentNode.removeChild(s);
		})
		if(sections.length > 1){
			$('scrollBar').style.visibility = 'visible';
			blockWidth = Math.floor((this.gutter.offsetWidth-2*this.adj) / sections.length);
			leftBtn = new Element('div', {id:'leftBtn'});
			rightBtn = new Element('div', {id:'rightBtn'});
			scrollThumb = new Element('div', {id:'scrollThumb', style:'width:'+blockWidth+'px'});
			bgThmb = new Element('div');
			bgThmb.className = 'bgThumb';
			leftThmb = new Element('div');
			leftThmb.className = 'leftThumb';
               rightThmb = new Element('div');
			rightThmb.className = 'rightThumb';
               gripThmb = new Element('div');
			gripThmb.className = 'grip';
			
			bgThmb.appendChild(leftThmb);
			bgThmb.appendChild(rightThmb);
			bgThmb.appendChild(gripThmb);
			scrollThumb.appendChild(bgThmb);
			this.gutter.appendChild(rightBtn);
			this.gutter.appendChild(leftBtn);
			this.gutter.appendChild(scrollThumb);		
			for(i=0; i<sections.length; i++){
				this.markers.push(new Marker(sections[i], i, sections.length-1, this));
			}
			this.thumb = new Handle($('scrollThumb'));
			this.left = new Arrow($('leftBtn'), 'left', this);
			this.right = new Arrow($('rightBtn'), 'right', this);
			new Effect.Opacity('scrollBar',{duration:0.5, from:0, to:1.0});
		}
		
	}
	
	
});

var Mover = Class.create({
	initialize: function(_gutter, _content, _mask, _adj){
		this.thumb = $('scrollThumb');
		this.gutter = _gutter;
		this.content = _content;
		this.mask = _mask;
		this.adj = $('leftBtn').offsetWidth;
		//this.browserAdj;
	},
	dragSlider: function(e, mouseOffset){
		window.status = "dragging";
		startPos = controller.adj;
		endPos = controller.locateEnd();
		if(document.all){
			browserAdj = $('scrollBar').viewportOffset()['left'] - startPos + 10;
			xmouse = window.event.clientX - mouseOffset - browserAdj;
			controller.gutter.onselectstart = function () { return false; }
		}else{
			browserAdj = $('scrollBar').viewportOffset()['left'] - startPos;
			xmouse = e.pageX - mouseOffset - browserAdj;
		}
		
		if (xmouse > endPos){
			thumbPos = endPos;
		}else if(xmouse < startPos){
			thumbPos = startPos;
		}else{
			thumbPos = xmouse;
		}
		controller.placeSlider(thumbPos);		
	},	
	clickJump:function(elemString){
		window.status = "clickJump";
		var jumpTo = controller.findPos($(elemString))[0];
		controller.moveSlider(jumpTo);
	},
	placeSlider:function(position){
		this.thumb.style.left=position+"px"; 
		this.scrollContent(position - this.adj);	
	},
	moveSlider: function(position){
		window.status = "moving to "+controller.findMarker(position);
		new Effect.Move(this.thumb, {x:controller.findMarker(position),queue:'end', mode:'absolute', duration:0.3, transition:Effect.Transitions.easeTo, afterUpdate:controller.posUpdate});		
	},
	posUpdate: function(){
		controller.scrollContent(controller.findPos($('scrollThumb'))[0]- controller.findPos(controller.gutter)[0]- controller.adj);
	},
	scrollContent: function(thumbPos){
		startPos = controller.adj;
		endPos = controller.locateEnd();
		scaleA = (endPos) - (startPos);
		posA = thumbPos;
		scaleB = this.content.offsetWidth - (this.mask.offsetWidth + 100);
		offsetB = this.xMultiply(scaleB, scaleA, $('leftBtn').offsetWidth)
		posB = this.xMultiply(scaleB, scaleA, posA);
		this.content.style.right=posB+"px";
	},
	
	findMarker:function(position){
		var gutterPos = controller.findPos(controller.gutter)[0];
		position = position - gutterPos;
		var lowPos = 0;
		var highPos = controller.locateEnd();
		$A(slider.markers).each(function(s,i){
				temPos = controller.findPos($("block" + i))[0] - gutterPos;
				if(temPos <= position){
					lowPos = temPos;	
				}else if(temPos >= position){
					highPos = temPos;
					throw $break;
				}
			});
			if (highPos && lowPos){
				if (highPos - position < position - lowPos){
					var gotoPos = highPos;
				}else{
					var gotoPos = lowPos;
				}
			}
		
		return gotoPos;
	},
	locateEnd:function(){
		$A(slider.markers).each(function(s, i){
			if(i == slider.markers.length -1){
				var endPosString = $("block" + i).style.left;
				endPos = Number(endPosString.gsub("px", ""));
			}
		});
		return endPos;
	},	
 	findPos: function(obj) {
		var curleft = curtop = 0;
		if (obj.offsetParent) {
			curleft = obj.offsetLeft
			curtop = obj.offsetTop
			while (obj = obj.offsetParent) {
				curleft += obj.offsetLeft
				curtop += obj.offsetTop
			}
		}
		return [curleft,curtop];
	},

 	xMultiply: function(scaleB, scaleA, posA){
		var output = Math.round((scaleB*posA)/scaleA);
		return output;
	}
});

var Marker = Class.create({
	initialize: function(section, index, last, slider){
		slider.gutter.innerHTML += "<div onclick=\"javascript:controller.clickJump(\'block\'+"+index+");\" id=\"block" + index + "\">&nbsp; " + section + "</div>";
		var currentEle = $("block" + index);
		this.name = currentEle.id
		currentEle.className = 'sliderBlock';
		currentEle.style.width = (blockWidth) + "px";
		if(index == 0){
			currentEle.style.left = (slider.adj) + "px";
			currentEle.style.background = 'none';
		}else{
			currentEle.style.left = (((index)*(blockWidth)) + slider.adj)+"px";
		}
	}
	
					 
});


var Arrow = Class.create({
	initialize: function(element, direction, slider){
		element.onmousedown = function(){
			
			var gutterPos = controller.findPos(controller.gutter)[0];
			var position = controller.findPos($("scrollThumb"))[0];// - gutterPos;
			$A(slider.markers).each(function(s,i){
				
				temPos = controller.findPos($("block" + i))[0];// - gutterPos;
				if(temPos < position && direction == 'left'){
					gotoPos = temPos;
				}else if(temPos > position && direction == 'right'){
					gotoPos = temPos;
					throw $break;
				}
			});
			if(gotoPos){
				controller.moveSlider(gotoPos);
			}
		}
	}
});

var Handle = Class.create({
	initialize: function(thumb){
		thumb.onmousedown = function(e){
			var thumbPos = $('scrollThumb').viewportOffset()['left'];
				if(document.all){
					mouseOffset = window.event.clientX - thumbPos;
				}else{
					mouseOffset = e.pageX - thumbPos;
				}
			document.onmousemove = function(e){
				
				controller.dragSlider(e, mouseOffset);
			
				document.onmouseup = function(){
					document.onmousemove = null;
					document.onmouseup = null
					window.status = "drag is over";
					thumbLoc = controller.findPos(thumb)[0];
					new Effect.Move(thumb, {x:controller.findMarker(thumbLoc),queue:'end', mode:'absolute', duration:0.3, transition:Effect.Transitions.easeTo, afterUpdate:controller.posUpdate});
				}
			}
		}
	}
					 
});