// JavaScript Document

function getImage(nam)
{
	this.img=new Image();
	this.img.finished=false;
	this.img.src=nam;
	if(this.img.getHeight.bind.defer(this))
	{
		if(this.img.height!=0)
		{
			this.height=this.img.height;
			this.width=this.img.width;
			return;
		}
	}
	this.img.observe('load',function(evt)
							{
								if(this._unObserve)
									 this._unObserve(evt,this) 
							}.bindAsEventListener(this));
	this.img.observe('complete',function(evt)
							{
								if(this._unObserve)
									 this._unObserve(evt,this) 
							}.bindAsEventListener(this));
	this.img.observe('error',function(evt)
							{
								if(this._unObserve)
									 this._unObserve(evt,this)  
							}.bindAsEventListener(this));
	this.img.observe('abort',function(evt)
							{
								if(this._unObserve)
									 this._unObserve(evt,this) 
							}.bindAsEventListener(this));
	this.waitImg();
	this.height=this.img.height;
	this.width=this.img.width;
}
getImage.prototype=
{
	_unObserve:function(evt,img)
	{
		this.img.finished=true;
		this.img.writeAttribute("finished",true);
		this.img.stopObserving('complete');
		this.img.stopObserving('error');
		this.img.stopObserving('abort');
		this.img.stopObserving('load');
	},
	waitImg:function()
	{
		if(this.img.finished || this.img.complete)
		{
			return;
		}
		else
		this.waitImg.bind(this).delay(0.1);
		
	}
}
/*
	size, top (offset), left, min, max, hrz, imds (folder) ,change
*/
Element.addMethods('DIV',
{
	slider:function(element,params)
	{
		element = $(element);
		params.parent=element;
		element.slider=new slider(params);
		return element;
	}
}
)
var slider = Class.create(
	{
		initialize: function(params)
		{
			this.params=params;
			this.params.hrz=this.params.hrz?this.params.hrz:false;
			g=new getImages(this.init.bind(this),params.imgs+"cursor.png",this.params.imgs+"rail"+(this.params.hrz?"":"-vert")+".png");
		},
		init: function(imgs)
		{
			//this.params=params;
			if(!($(this.params.parent)))
			{
				this.params.parent=new Element("div")
			}
			else
			{
				this.params.parent=$(this.params.parent);
			}
			this.params.parent.slider=this;
			this.params.size=this.params.size?this.params.size:100;
			this.params.top=this.params.top?this.params.top:0;
			this.params.left=this.params.left?this.params.left:0;
			this.params.min=this.params.min?this.params.min:0;
			this.params.max=this.params.max?this.params.max:100;
			this.params.dragCallback=this.params.change?this.params.change:null;
			
			this.params.imgs=this.params.imgs?this.params.imgs:"";
			var scname=this.params.imgs+"rail"+(this.params.hrz?"":"-vert")+".png";
			/*var im=new getImage(scname);
			var hsize=im.img.width;
			var vsize=im.img.height;
			*/
			var hsize=imgs[0].width;
			var vsize=imgs[0].height;
			var imcurs=new Image;imcurs.src=this.params.imgs+"cursor.png"
			//var imcurs=new getImage(this.params.imgs+"cursor.png");
			var contWidth,contHeight,contTop,contLeft;
			
			var scHeight,scTop,scWidth,scLeft;
			if(this.params.hrz)
			{
				vsize=imcurs.height;
				contWidth=this.params.size+6;
				contHeight=imcurs.height+6;
				contTop=this.params.top;
				contLeft=this.params.left;
				
				scHeight=imcurs.height;
				scTop=(contHeight-scHeight)/2;
				scWidth=this.params.size;
				scLeft=3;
				
			}
			else
			{
				hsize=imcurs.width;
				contWidth=imcurs.width+6;
				contHeight=this.params.size+6;
				contLeft=this.params.left;
				contTop=this.params.top;
				
				scHeight=this.params.size;
				scWidth=imcurs.width;
				scTop=3;
				scLeft=(contWidth-scWidth)/2;
			}
			
			if(!this.params.sid)
			{
				var sid=1;
				while($("scroller"+sid)) sid++;
				this.params.sid=sid;
			}
			this.scrollerCont=new Element('div',{'id':"scrollercont"+sid}).setStyle({'position':'absolute','width':contWidth+'px','height':contHeight+'px','top':contTop+'px','left':contLeft+'px','overflow':"hidden"});
			h=(this.params.hrz)?vsize:this.params.size;
			this.params.parent.insert(this.scrollerCont);
			this.scroller=new Element('div',{'id':"scroller"+sid}).setStyle({'position':'absolute','width':scWidth+'px','height':scHeight+'px','top':scTop+'px','left':scLeft+'px','overflow':"visible"});
			this.scrollerCont.insert(this.scroller);
		this.scrollerCont.observe("mousedown",function(evt)
									  {
										  this.trackDrag(evt);
										  this.scrollerCont.observe("mousemove",function(evt)
																	{
																		this.trackDrag(evt);
																		evt.stop();
																	  }.bindAsEventListener(this)
																)
															.observe("mouseup",function(evt)
																  {
																	evt.stop();
																	this.scrollerCont.stopObserving("mousemove");
																  }.bindAsEventListener(this)
																 )
									  }.bindAsEventListener(this)
								)
		/*.observe("mouseout",function(evt)
									  {
										  
										evt.stop();
										if(evt.relatedTarget!=this.curseur && evt.relatedTarget!=this.scroller)
										{
											if(console)console.log("mouseout"+evt.relatedTarget.id);
											this.scrollerCont.stopObserving("mousemove");
										}
									  }.bindAsEventListener(this)
									  )*/
			if(this.params.hrz)
			{
				this.scroller.style.backgroundImage='url('+scname+')';
				this.scroller.setStyle({"backgroundRepeat":"repeat-x"});
				this.scroller.setStyle({"backgroundAttchment":"fixed"});
				this.scroller.setStyle({"backgroundPosition":"left center"});
			}
			else
			{
				this.scroller.style.backgroundImage='url('+scname+')';
				this.scroller.setStyle({"backgroundRepeat":"repeat-y"});
				this.scroller.setStyle({"backgroundAttchment":"fixed"});
				this.scroller.setStyle({"backgroundPosition":"left center"});
			}
			this.posZero=this.params.zero?(this.params.hrz?scWidth*this.params.zero/100:scrollHeight*this.params.zero/100):0;
			if(!this.params.hrz)
				this.curseur=new Element('div',{'id':"cursor"+sid}).setStyle({'position':'absolute',"width":imcurs.width+"px","height":imcurs.height+"px",top:this.posZero+"px",left:"-2px"});
			else
			{
				this.curseur=new Element('div',{'id':"cursor"+sid}).setStyle({'position':'absolute',"width":imcurs.width+"px","height":imcurs.height+"px",top:"0px",left:this.posZero+"px"});
				//this.curseur.insert('<img src="'+params.imgs+'/cursor.png>');
			}
			this.curseur.setStyle({"background":'url('+this.params.imgs+'cursor.png) no-repeat left top'}) ;
			
			this.scroller.insert(this.curseur);
			
			this.params.parent.select("div").invoke("setStyle",'{"border":"thin black"}');
			if(this.params.ratio)
			{
				if(!this.params.hrz)
					this.curseur.top((scHeight-imcurs.height)*this.params.ratio);
				else
					this.curseur.left((scWidth-imcurs.width)*this.params.ratio);
				//this.setRatio(this.params.ratio);
			}
		},
		resize:function(w,h)
		{
			if(!this.scrollerCont)return;
			var ratio=this.getRatio();
			this.scrollerCont.setStyle({"width":w+"px","height":h+"px"});
			this.scroller.setStyle({"width":w+"px","height":h+"px"});
			this.setRatio(ratio);
		},
		hide:function()
		{
			this.scroller.hide();
		},
		show:function()
		{
			this.scroller.show();
		},
		setRatio:function(ratio)
		{
			if(!this.curseur)return;
			var d=this.scroller.getDimensions();
			if(!this.params.hrz)
				this.curseur.top((this.scroller.height()-this.curseur.height())*ratio);
			else
				this.curseur.left((this.scroller.width()-this.curseur.width())*ratio);
		},
		trackDrag:function(evt)
		{
			if(!this.curseur)return;
			var pos=this.scroller.cumulativeOffset();
			var x=evt.pageX-pos.left;
			var y=evt.pageY-pos.top;
			if(!this.params.hrz)
			{
				this.curseur.top(y);
				this._trackDrag(evt,this.curseur);
			}
			else
			{
				this.curseur.left(x);
				this._trackDrag(evt,this.curseur);
			}
		},
		_trackDrag:function(evt,target)
		{
			//var p=target.pOwner
			var hrz=this.scroller.width()>this.scroller.height();
			var newVal=hrz?(target.left()-target.width()/2):(target.top()-target.height()/2);
			
			if(newVal<0)newVal=0;
			
			var maxCursor=hrz?((this.scroller.width())-target.width()):((this.scroller.height())-target.height());
			if(newVal>= maxCursor) newVal=maxCursor;
			if(hrz)target.left(newVal); else target.top(newVal);
			var ratioCursor=(newVal-this.posZero)/maxCursor;
		   if(this.params.dragCallback)
			this.params.dragCallback(ratioCursor);
		},
		getRatio:function()
		{
			//var newVal=this.params.hrz?(this.curseur.left()-this.curseur.width()/2):(this.curseur.top()-this.curseur.height()/2);
			if(!this.curseur)return(0);
			var newVal=this.params.hrz?(this.curseur.left()):(this.curseur.top());
			if(newVal<0)newVal=0;
			var maxCursor=this.params.hrz?((this.scroller.width())-this.curseur.width()):((this.scroller.height())-this.curseur.height());
			if(newVal>= maxCursor) newVal=maxCursor;
			return((newVal-this.posZero)/maxCursor);
		}
	}
)
//========================================= variants ======================================================
/*
var slider = Class.create(slider,
{
  initialize: function($super, params)
  {
		 $super(params);
		 this.
		 
			.insert(
						new Element("div",{"id":""}).setStyle({"position":"absolute","top":s_top+"px","left":s_left+"px","width":"50px","height":"20px","textAlign":"right","color":"white"}).update(nam)
					)
			.insert(
						new Element("div",{"id":nam}).setStyle({"position":"absolute","top":s_top+"px","left":s_left+55+"px","width":"150px","height":"20px"})
					)
			.insert(
						new Element("div",{"id":nam+"ratio"}).setStyle({"position":"absolute","top":s_top+"px","left":s_left+215+"px","width":"30px","height":"20px","color":"white"}).update(defaultvalue)
					)
  }
	
}
)*/