var NarrowWindow = Class.create(
{
	/**
	 * Contructeur
	 * 
	 * @param string elementID - identifiant de l'élément ( ou élement lui même )
	 * @param object options - {border,cursor,height,width,horizontal,vertical}
	 */
	initialize:				function(elementID,options)
							{
								// récupération des éléments HTML
								// element extérieur
								this.outerDIV = $(elementID);
								
								// élément intérieur
								this.innerDIV = this.wrap();
								
								// options 
								this.options = {};
								this.setOptions(options);
								
								// calque sur élément extérieur
								/*this.hotspot = new Overlay(this.outerDIV);*/
								
								// FLAG interne
								this.isClicked = false;
								this.lastMousePos = false;
								/*
								if(this.options.mouseEnabled)
								{
									// observeurs
									Event.observe	(
														this.hotspot.DOM,
														'mousedown',
														this._onMouseDown.bindAsEventListener(this)
													);
													
									Event.observe	(
														this.hotspot.DOM,
														'mousemove',
														this._onMouseMove.bindAsEventListener(this)
													);
													
									Event.observe	(	
														this.hotspot.DOM,
														'mouseup',
														this._onMouseUp.bindAsEventListener(this)
													);
													
									Event.observe	(	
														this.hotspot.DOM,
														'mouseout',
														this._onMouseOut.bindAsEventListener(this)
													);
								}
								*/
								if(this.options.mouseEnabled)
								{
									// observeurs
									Event.observe	(
														this.outerDIV,
														'mousedown',
														this._onMouseDown.bindAsEventListener(this)
													);
													
									Event.observe	(
														this.outerDIV,
														'mousemove',
														this._onMouseMove.bindAsEventListener(this)
													);
													
									Event.observe	(	
														this.outerDIV,
														'mouseup',
														this._onMouseUp.bindAsEventListener(this)
													);
													
									Event.observe	(	
														this.outerDIV,
														'mouseout',
														this._onMouseOut.bindAsEventListener(this)
													);
								}
							},
							
	wrap:					function()
							{
								var div = new Element('div');
								
								Element.cleanWhitespace(this.outerDIV);
								
								while(this.outerDIV.hasChildNodes())
								{
									div.appendChild(this.outerDIV.firstChild);
								}
								
								this.outerDIV.appendChild(div);
								
								return div;
							},
					
	_onMouseDown:			function(event)	
							{
								event = event || window.event;
								
								this.isClicked = true;
								this.saveMousePos(this.getMousePos(event));
								
								Event.stop(event);
							},
					
	_onMouseMove:			function(event)
							{
								event = event || window.event;
								
								if(this.isClicked)
								{
									var mousePos = this.getMousePos(event);
									var lastMousePos = this.getLastMousePos();
									
									if(lastMousePos)
									{
										// distance parcourue par la souris depuis la dernière "capture" de position
										var deltaX = mousePos.x - lastMousePos.x;
										var deltaY = mousePos.y - lastMousePos.y;
										
										this.setLeftPos(deltaX);
										this.setTopPos(deltaY);
									}
									
									this.saveMousePos(mousePos);
								}
								Event.stop(event);
							},
					
	_onMouseUp:				function(event)
							{
								event = event || window.event;
								this.isClicked = false;
								Event.stop(event);
							},
							
	_onMouseOut:			function(event)
							{
								this.isClicked = false;
							},
					
	getMousePos:			function(e)
							{
								var position = {};
								
								position.x = Event.pointerX(e);
								position.y = Event.pointerY(e);
								
								return position;
							},
							
	saveMousePos:			function(mousePos)
							{
								this.lastMousePos = mousePos;
							},
							
	getInnerDivPos:			function()
							{
								var position = {};
								
								position.top = this.innerDIV.style.top.substring(0,this.innerDIV.style.top.length-2);
								position.left = this.innerDIV.style.left.substring(0,this.innerDIV.style.left.length-2);
								
								return position;
							},
	
	getLastMousePos:		function()	
							{
								return this.lastMousePos;
							},
							
	setLeftPos:				function(delta)
							{
								// position courante relative de l'élément interne
								var currentInnerDivPos = this.getInnerDivPos();
								
								if(this.options.constraintContent)
								{
									var innerDivDimensions = Element.getDimensions(this.innerDIV);
								}
								// si on veut qu'il bouge horizontalement
								if(this.options.horizontal === true)
								{
									// calcul de la nouvelle position horizontale
									var left = parseInt(currentInnerDivPos.left)+parseInt(delta);
									// si on ne veut pas sortir du cadre
									if(this.options.constraintContent === true)
									{
										// si on ne sort pas du "cadre"
										if(!(left > 0) && ((((left - parseInt(this.options.width))) * (-1)) <= innerDivDimensions.width))
										{
											if(this.options.mouseEnabled === true)
											{
												this.innerDIV.style.left = left+'px';
											}
											else
											{
												if(this.options.smooth === true)
												{
													new Effect.MoveBy(this.innerDIV,0,delta,{duration:0.3,transition:Effect.Transitions.linear,fps:40});
												}
												else
												{
													this.innerDIV.style.left = left+'px';
												}
											}
										}
										// sinon, on ajuste
										else
										{
											/////////////////////////////////// A REFAIRE ///////////////////////////////////
											if(left > 0)
											{
												this.innerDIV.style.left = '0';
											}
											if( ((left - parseInt(this.options.width)) * (-1)) > innerDivDimensions.width )
											{
												this.innerDIV.style.left = (parseInt(this.options.width) - innerDivDimensions.width)+'px';
											}
										}
									}
									// si on veut sortir du cadre
									else
									{
										if(this.options.mouseEnabled === true)
										{
											this.innerDIV.style.left = left+'px';
										}
										else
										{
											if(this.options.smooth === true)
											{
												new Effect.MoveBy(this.innerDIV,0,delta,{duration:0.3,transition:Effect.Transitions.linear,fps:40});
											}
											else
											{
												this.innerDIV.style.left = left+'px';
											}
										}
									}
								}
							},
							
	setTopPos:				function(delta)
							{
								// position courante relative de l'élément interne
								var currentInnerDivPos = this.getInnerDivPos();
								
								if(this.options.constraintContent)
								{
									var innerDivDimensions = Element.getDimensions(this.innerDIV);
								}
								// si on veut qu'il bouge verticalement
								if(this.options.vertical === true)
								{
									// calcul de la nouvelle position verticale
									var top = parseInt(currentInnerDivPos.top)+parseInt(delta);
									
									if(this.options.constraintContent === true)
									{
										// si on ne sort pas du "cadre"
										if(!(top > 0) && ((((top - parseInt(this.options.height))) * (-1)) <= innerDivDimensions.height))
										{
											if(this.options.smooth === true)
											{
												new Effect.MoveBy(this.innerDIV,delta,0,{duration:0.7});
											}
											else
											{
												this.innerDIV.style.top = top+'px';
											}
										}
										// sinon on ajuste
										else
										{
											///////////////////////////// A REFAIRE /////////////////////////////
											if(top > 0)
											{
												if(this.options.smooth === true)
												{
													new Effect.MoveBy(this.innerDIV,-currentInnerDivPos.top,0,{duration:0.7});
												}
												else
												{
													this.innerDIV.style.top = '0';
												}
											}
											if( ((top - parseInt(this.options.height)) * (-1)) > innerDivDimensions.height )
											{
												if(this.options.smooth === true)
												{
													var delta  = (parseInt(this.options.height) - innerDivDimensions.height)-parseInt(currentInnerDivPos.top);
													new Effect.MoveBy(this.innerDIV,delta,0,{duration:0.7});
												}
												else
												{
													this.innerDIV.style.top = (parseInt(this.options.height) - innerDivDimensions.height)+'px';
												}
												
											}
										}
									}
									else
									{
										if(this.options.mouseEnabled === true)
										{
											this.innerDIV.style.top = top+'px';
										}
										else
										{
											if(this.options.smooth === true)
											{
												new Effect.MoveBy(this.innerDIV,delta,0,{duration:0.7});
											}
											else
											{
												this.innerDIV.style.top = top+'px';
											}
										}
									}
								}
							},
							
	setOptions:				function(options)
							{
								Element.extend(this.outerDIV);
								this.outerDIV.setStyle({'position':'relative','overflow':'hidden'});
								
								if(options.border)
								{
									this.outerDIV.setStyle({'border' : options.border});
								}
								else
								{
									this.outerDIV.setStyle({'border' : '1px solid gray'});
								}
								
								if(options.cursor)
								{
									this.outerDIV.setStyle({'cursor' : options.cursor});
								}
								else
								{
									this.outerDIV.setStyle({'cursor' : 'pointer'});
								}
								
								if(options.height)
								{
									this.outerDIV.setStyle({'height' : options.height});
									this.options.height = options.height.substring(0,options.height.length-2);
								}
								else
								{
									throw 'la propriété height doit être définie.';
								}
								
								if(options.width)
								{
									this.outerDIV.setStyle({'width' : options.width});
									this.options.width = options.width.substring(0,options.width.length-2);
								}
								else
								{
									throw 'la propriété width doit être définie.';
								}
								
								if(options.vertical === false || options.vertical === true)
								{
									this.options.vertical = options.vertical;
								}
								else
								{
									this.options.vertical = true;
								}
								
								if(options.horizontal === false || options.horizontal === true)
								{
									this.options.horizontal = options.horizontal;
								}
								else
								{
									this.options.horizontal = true;
								}
								
								if(options.constraintContent === true || options.constraintContent === false)
								{
									this.options.constraintContent = options.constraintContent;
								}
								else
								{
									this.options.constraintContent = true;
								}
								
								if(options.smooth === true || options.smooth === false)
								{
									this.options.smooth = options.smooth;
								}
								else
								{
									this.options.smooth = false;
								}
								
								if(options.mouseEnabled === true || options.mouseEnabled === false)
								{
									this.options.mouseEnabled = options.mouseEnabled;
								}
								else
								{
									this.options.mouseEnabled = true;
								}
								
								this.innerDIV.setStyle({'position' : 'absolute','top':'0','left':0});
							}
}
);


var NarrowWindowDecorator = Class.create();
	
NarrowWindowDecorator.prototype =
{
	initialize:				function(narrowWindow,options)
							{
								this.narrowWindow = narrowWindow;
								this.options = {};
								this.setOptions(options);
								this.container = this.wrap();					
							},
	
	wrap:			function()		
							{								
								var container = new Element('div',{'class':'container_wrapper'});
								var controls = new Element('div',{'id':'controls','align':'center'});
								
								controls.setStyle({'cursor':'pointer','width':'10px','marginTop':'10px','paddingLeft':'70px','float':'left'});
								container.setStyle({'float':'left'});
								
								var upControl = this._getUpControl();
								var downControl = this._getDownControl();
								
								var parent = this.narrowWindow.outerDIV.parentNode;
								
								controls.appendChild(upControl);
								controls.appendChild(downControl);
								
								container.appendChild(this.narrowWindow.outerDIV);
								container.appendChild(controls);
								
								parent.appendChild(container);
								
								return container;
							},
						
	_upControlClick:		function(e,myWindow)
							{
								e = e || window.event;
								myWindow.setTopPos(this.options.step);
								Event.stop(e);
							},
						
	_upControlMouseOver:	function(e,upControl)
							{
								e = e || window.event;
								upControl.setAttribute('src','images/arrow_up_hover.gif');
								Event.stop(e);
							},
	
	_upControlMouseOut:		function(e,upControl)
							{
								e = e || window.event;
								upControl.setAttribute('src','images/arrow_up.gif');
								Event.stop(e);
							},
						
	_downControlClick:		function(e,myWindow)
							{
								e = e || window.event;
								var delta = (this.options.step) * (-1);
								myWindow.setTopPos(delta);
								Event.stop(e);
							},
						
	_downControlMouseOver:	function(e,downControl)
							{
								e = e || window.event;
								downControl.setAttribute('src','images/arrow_down_hover.gif');
								Event.stop(e);
							},
							
	_downControlMouseOut:	function(e,downControl)
							{
								e = e || window.event;
								downControl.setAttribute('src','images/arrow_down.gif');
								Event.stop(e);
							},
						
	_getUpControl:			function()
							{
								var upControl = new Element('img',{'id':'upControl','src':'images/arrow_up.gif'});
								
								upControl.setStyle({'cursor':'pointer','display':'block','margin':'4px','float':'left','clear':'left'});
								
								Event.observe(upControl,'click',this._upControlClick.bindAsEventListener(this,this.narrowWindow));
								Event.observe(upControl,'mouseover',this._upControlMouseOver.bindAsEventListener(this,upControl));
								Event.observe(upControl,'mouseout',this._upControlMouseOut.bindAsEventListener(this,upControl));
								
								return upControl;
							},
						
	_getDownControl:		function()
							{
								var downControl = new Element('img',{'id':'downControl','src':'images/arrow_down.gif'});
								
								downControl.setStyle({'cursor':'pointer','display':'block','margin':'4px','float':'left','clear':'left'});
						
								Event.observe(downControl,'click',this._downControlClick.bindAsEventListener(this,this.narrowWindow));
								Event.observe(downControl,'mouseover',this._downControlMouseOver.bindAsEventListener(this,downControl));
								Event.observe(downControl,'mouseout',this._downControlMouseOut.bindAsEventListener(this,downControl));
								
								return downControl;
							},
						
	setOptions:				function(options)
							{							
									if(options && options.step > 0)
									{
										this.options.step = options.step;
									}
									else
									{
										this.options.step = 100;
									}
							}
};