// JavaScript Document

var Scrollable = Class.create(
	{
		initialize:function(ele,options){
			this.ele = $(ele);
			
			this.options = Object.extend({
				animate:false,
				right_side_handler:false,
				top_side_hander:false
			},options);
			
			this.vtrack_ele = this.ele.down(".scrollable-vtrack");
			this.htrack_ele = this.ele.down(".scrollable-htrack");
			this.content_ele = this.ele.down(".scrollable-content");
			
			
			
			
			this.vtrack_ele.setStyle({height:this.content_ele.getHeight()+"px"});
			this.htrack_ele.setStyle({width:this.content_ele.getWidth()+"px"});
			
			
			
			document.observe('mousewheel',this.wheel.bind(this));
			document.observe('DOMMouseScroll',this.wheel.bind(this));
			
		  	this.update();
			if(!this.options.right_side_handler){
				this.vtrack_ele.setStyle({marginLeft:(this.ele.getWidth()-this.vtrack_ele.getWidth())+"px"});
			}
			if(!this.options.top_side_hander){
				this.htrack_ele.setStyle({marginTop:(this.ele.getHeight()-this.htrack_ele.getHeight())+"px"});
			}
			//this.htrack_ele.setStyle({marginTop:(this.ele.getHeight()-this.htrack_ele.getHeight())+"px"});
		},
		initVertTrack:function(){
			if(this.slider_vert) return;
			this.slider_vert = new Control.Slider(	this.vtrack_ele.down(".handle").identify(), 
												this.vtrack_ele.identify() ,
												{axis:"vertical",
												 onSlide:function(value){
													 
													v=Math.round(value / this.slider_vert.maximum * (this.content_ele.scrollHeight - this.content_ele.offsetHeight));
													if(this.options.animate){
														s = this.content_ele.scrollTop;
														if(this.twn) this.twn.cancel();
														this.twn = new Effect.Tween({},s,v,{duration:0.5},function(p){this.content_ele.scrollTop=p; }.bind(this));
													}else{
														this.content_ele.scrollTop=v;
													}
													
												 }.bind(this),
												  onChange:function(value){
													v=Math.round(value / this.slider_vert.maximum * (this.content_ele.scrollHeight - this.content_ele.offsetHeight));
													if(this.options.animate){
														s = this.content_ele.scrollTop;
														if(this.twn) this.twn.cancel();
														this.twn = new Effect.Tween({},s,v,{duration:0.5},function(p){this.content_ele.scrollTop=p; }.bind(this));
													}else{
														this.content_ele.scrollTop=v;
													}
												 }.bind(this)
												});
		},
		initHoriTrack:function(){
			if(this.slider_hori) return;
			this.slider_hori = new Control.Slider(	this.htrack_ele.down(".handle").identify(), 
												this.htrack_ele.identify() ,
												{
												 onSlide:function(value){ 
													v=Math.round(value / this.slider_hori.maximum * (this.content_ele.scrollWidth - this.content_ele.offsetWidth));
													if(this.options.animate){
														s = this.content_ele.scrollLeft;
														if(this.twn) this.twn.cancel();
														this.twn = new Effect.Tween({},s,v,{duration:0.5},function(p){this.content_ele.scrollLeft=p; }.bind(this));
													}else{
														this.content_ele.scrollLeft=v;
													}
													
												 }.bind(this),
												  onChange:function(value){
													v=Math.round(value / this.slider_hori.maximum * (this.content_ele.scrollWidth - this.content_ele.offsetWidth));
													if(this.options.animate){
														s = this.content_ele.scrollLeft;
														if(this.twn) this.twn.cancel();
														this.twn = new Effect.Tween({},s,v,{duration:0.5},function(p){this.content_ele.scrollLeft=p; }.bind(this));
													}else{
														this.content_ele.scrollLeft=v;
													}
												 }.bind(this)
												});
		},
		update:function(){
			
			lasttop = this.content_ele.scrollTop;
			if(Prototype.Browser.IE)
				this.content_ele.hide();
			this.content_ele.scrollTop+=1;
			if(lasttop==this.content_ele.scrollTop || (lasttop!=this.content_ele.scrollTop && this.content_ele.scrollTop==0)){
				this.content_ele.show();
				this.ele.removeClassName("scrollable-vpanal");
				this.vtrack_ele.hide();
			}else{
				this.content_ele.scrollTop-=1;
				this.content_ele.show();
				this.initVertTrack();
				this.ele.addClassName("scrollable-vpanal");	
				this.vtrack_ele.show();
			}
			
			
			
			lastleft = this.content_ele.scrollLeft;
			if(Prototype.Browser.IE)
				this.content_ele.hide();
			this.content_ele.scrollLeft+=1;
			if(lastleft==this.content_ele.scrollLeft || (lastleft!=this.content_ele.scrollLeft && this.content_ele.scrollLeft==0)){
				this.content_ele.show();
				this.ele.removeClassName("scrollable-hpanal");
				this.htrack_ele.hide();
			}else{
				this.content_ele.scrollLeft-=1;
				this.content_ele.show();
				this.initHoriTrack();
				this.ele.addClassName("scrollable-hpanal");	
				this.htrack_ele.show();
			}
			
			
		},
		wheel:function(event){
			if(event.wheelDelta) // IE & Opera
			  delta = event.wheelDelta / 120;
			else if (event.detail) // W3C
			  delta =- event.detail / 3;
			if(!delta)
			  return;
			 if(event.element()==this.content_ele || event.element().up("#"+this.content_ele.identify())){
				 this.slider_vert.setValue(this.slider_vert.value-delta/20);
				 event.stop();
			 }
		}
		
	}
);


(function(){
  function wheel(event){
	var delta;
	// normalize the delta
	if(event.wheelDelta) // IE & Opera
	  delta = event.wheelDelta / 120;
	else if (event.detail) // W3C
	  delta =- event.detail / 3;
	if(!delta)
	  return;
	var custom_event = event.element().fire('mouse:wheel',{
	  delta: delta
	});
	if(custom_event.stopped){
	  event.stop();
	  return false;
	}
  }
  document.observe('mousewheel',wheel);
  document.observe('DOMMouseScroll',wheel);
})();

document.observe("dom:loaded",
	function(){
		
		$$(".scrollable").each(
		function(e){
			
			eid=e.identify();
			var options = {
								animate:e.readAttribute("option:animate")=="true"?true:false,
								right_side_handler:e.readAttribute("option:right_side_handler")=="true"?true:false,
								top_side_handler:e.readAttribute("option:top_side_handler")=="true"?true:false
						   };
			var html = e.innerHTML;
			
			e.update();
			var w = e.getWidth();
			
			e.update('<div class="scrollable-content" style="width:'+w+'px">'+html+'</div>');
			e.insert({top:'<div class="scrollable-vtrack"><div class="handle">&nbsp;</div></div>'});
			e.insert({top:'<div class="scrollable-htrack"><div class="handle">&nbsp;</div></div>'});
			
			
			
			regcmp(new Scrollable(eid,options),eid,"Scrollable");
			
			
		}
	)}
)

Event.observe(window,"load",function(){
	$$(".scrollable").each(function(e){
		getcmp(e.identify(),"Scrollable").update();
	});
});