// JavaScript Document

/*************************
 2009-01-12 edit by Cyrus: vert_handler_background & hori_handler_background added
*************************/
	

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.origWidth=this.ele.getWidth();
			this.origHeight=this.ele.getHeight();
			
			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_width=this.vtrack_ele.getWidth();
			this.htrack_height=this.vtrack_ele.getHeight();
			
			
			
			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()-1)+"px"});
			}
			if(!this.options.top_side_hander){
				this.htrack_ele.setStyle({marginTop:(this.ele.getHeight()-this.htrack_ele.getHeight()-1)+"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.content_ele.setStyle({width:(this.origWidth-this.vtrack_width)+"px"});
				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");	
				//console.log((this.origHeight-this.htrack_height));
				//this.content_ele.setStyle({height:(this.origHeight-this.htrack_height)+"px"});
				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);
})();


Component.init(".scrollable","Scrollable",
	   function(e){
		    o={};
		   	if(c=e.getStyle("content")){
				if(c!="none")
					eval("o="+eval(c.gsub("\\9",'')));
			}
			
			return {
				animate:e.readAttribute("scrollable:animate")=="true" || o.animate ,
				right_side_handler:e.readAttribute("scrollable:right_side_handler")=="true" || o.right_side_handler,
				top_side_handler:e.readAttribute("scrollable:top_side_handler")=="true" || o.top_side_handler,
				vert_handler_image:e.readAttribute("scrollable:vert_handler_image") || o.vert_handler_image,
				hori_handler_image:e.readAttribute("scrollable:hori_handler_image") || o.hori_handler_image,
				vert_handler_background:e.readAttribute("scrollable:vert_handler_background") || o.vert_handler_background,
				hori_handler_background:e.readAttribute("scrollable:hori_handler_background") || o.hori_handler_background
			};	   
		},
		function(e,options){
			
			var html = e.innerHTML;
			e.update();
			var w = e.getWidth()-e.offsetLeft;
			var h = e.getHeight()-e.offsetTop;
			
			e.update('<div class="scrollable-content" style="width:'+w+'px;height:'+h+'px">'+html+'</div>');
			
			if(himg=options.vert_handler_image) {
				vhimghtml="<img src=\""+himg+"\" />";
			}else{
				vhimghtml="&nbsp;";
			}
			
			if(himg=options.hori_handler_image) {
				hhimghtml="<img src=\""+himg+"\" />";
			}else{
				hhimghtml="&nbsp;";
			}
			
			if(himg=options.vert_handler_background) {
				vhbghtml=" style=\"background-image:url("+himg+")\"";
			}else{
				vhbghtml="";
			}
			
			if(himg=options.hori_handler_background) {
				vhbghtml=" style=\"background-image:url("+himg+")\"";
			}else{
				hhbghtml="";
			}
			
			e.insert({top:'<div class="scrollable-vtrack"'+vhbghtml+'><div class="handle">'+vhimghtml+'</div></div>'});
			e.insert({top:'<div class="scrollable-htrack"'+hhbghtml+'><div class="handle">'+hhimghtml+'</div></div>'});
			
			return e;
		}
);

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

document.observe("dom:loaded",
	function(){
		
		$$(".scrollable").each(
		function(e){
			
			eid=e.identify();
			var options = ;
			
			
			
			
			regcmp(new Scrollable(eid,options),eid,"Scrollable");
			
			
		}
	)}
)*/