Event.observe(window, "load", function(){
	
	Panel = Class.create({
		//
		initialize : function () {

			this.state = "open";
			this._texte = $("index-texte");
			this._panneau = $("panel");
			this._fond = $("index-container-opacite");
			this._divFleche = $("bouton-index");
			this._aFleche = $("fleche");
			
			this._stateTimer = true;
			this._timer = null;
			this._timerDuration = 10000;
			
			if (Prototype.Browser.IE){
				this._openPosY = 0
				this._closePosY = 0
			}
			else{
				this._openPosY = 48
				this._closePosY = -48
			}
			
			this._openHeight = 48;
			this._closeHeight = 0;
			
			this._effectDuration = 0.8;
			this._opacitySlowDuration = 1.6;
			this._opacitySpeedDuration = 0.4;
			
			this._setTimer();
		},
		_setTimer : function () {
			this._timer = setTimeout(function(){
				panel.closePanel();
			}, this._timerDuration);
		},
		_resetTimer : function () {
			clearInterval(this._timer);
		},
		disableTimer : function (){
			this._stateTimer = false;
		},
		openPanel : function () {
			
			var stateTimer     = this._stateTimer;
			var openHeight     = this._openHeight;
			var effectDuration = this._effectDuration;
			var opacitySpeed   = this._opacitySlowDuration;
			var openPosY       = this._openPosY;
			var closePosY      = this._closePosY;
			var aFleche        = this._aFleche;
			
			this._resetTimer();
			new Effect.Morph(this._panneau, {
				style : 'height:' + openHeight + 'px',
				duration : effectDuration,
				afterFinish : function(){
					panel.state = "open";
					if (stateTimer){
						panel._setTimer();
					}
				}
			});
			new Effect.Morph(this._fond, {
				style : 'height:' + openHeight + 'px',
				duration : effectDuration,
				afterFinish : function(){
					panel.state = "open";
				}
			});
			new Effect.Opacity(this._texte, {
				duration : opacitySpeed,
				from : 0,
				to : 1
			});
			
			new Effect.Move(this._divFleche, {
				x : 0,
				y : openPosY,
				mode : 'relative',
				duration : effectDuration,
				afterFinish : function(){
					aFleche.removeClassName("bouton-fleche-close");
					aFleche.addClassName("bouton-fleche");
				}
			});
		},
		closePanel : function () {
			
			var closeHeight    = this._closeHeight;
			var effectDuration = this._effectDuration;
			var opacitySpeed   = this._opacitySpeedDuration;
			var openPosY       = this._openPosY;
			var closePosY      = this._closePosY;
			var aFleche        = this._aFleche;
			
			this._resetTimer();
			new Effect.Morph(this._panneau, {
				style: 'height:' + closeHeight + 'px',
				duration: effectDuration,
				afterFinish : function(){
					panel.state = "close";
				}
			});
			new Effect.Morph(this._fond, {
				style : 'height:' + closeHeight + 'px',
				duration : effectDuration,
				afterFinish : function(){
					panel.state = "close";
				}
			});
			new Effect.Opacity(this._texte, {
				duration : opacitySpeed,
				from : 1,
				to : 0
			});
			new Effect.Move(this._divFleche, {
				x : 0,
				y : closePosY,
				mode : 'relative',
				duration : effectDuration,
				afterFinish : function(){
					aFleche.removeClassName("bouton-fleche");
					aFleche.addClassName("bouton-fleche-close");
				}
			});
		}
	});
	
	if (!Prototype.Browser.IE6) {
		
		var panel = new Panel;
		var btnFeche = $("fleche");
		
		Event.observe(btnFeche, "click", function(){
			if (panel.state == "open"){
				panel.closePanel();
			}
			else{
				panel.disableTimer();
				panel.openPanel();
			}
		});
	}
	else{
		var btnFeche = $("fleche");
		Element.setStyle(btnFeche, {'display' : 'none'});
	}
});