Event.observe(window, 'load', function(){
	subMenuManagement();
});

function showHiddeForm(showName, hiddeName) {
	$(hiddeName).hide();
	$(showName).show();
}

function subMenuManagement() {
	var itemz =$$('div.ItemMainMenuShareit');
	itemz.each(function(item){
	
		var subMenu = item.down('div.subMenuItemShareit');
		
		if (subMenu){
		
			/*** initialisation des variables ***/
		
				var titleItem = item.down('div.itemMenuShareIt');
				var arrowDown = item.down('div.arrowDownItemMenuShareIt');
				var contenerMenu = $$('div.contenerMenuShareIt')[0];
				
				var titleItemPos = 0;
				var subMenuWidth = 0 ;
				var itemHeight = 0;
			
			
			/*** 'méthodes' du sous-menu ***/
			
				function insertSubMenu(){
					document.body.appendChild(subMenu);
					subMenu.setStyle({
						display		: 'none',
						zIndex		: 10,
						position	: 'absolute',
						left		: titleItemPos[0] + "px",
						top			: titleItemPos[1] + itemHeight + "px",
						width		: subMenuWidth + "px"
					});
				}
				
				function setSubMenuCoordinates(){
					titleItemPos = Position.cumulativeOffset(titleItem) || 0;
					subMenuWidth = (arrowDown) ? titleItem.getWidth()+arrowDown.getWidth() : 0 ;
					itemHeight = contenerMenu.getHeight();
				}
				
				function openSubMenu(){
					subMenu.show();
					arrowDown.addClassName('active');
				}
				
				function closeSubMenu(){
					subMenu.hide();
					arrowDown.removeClassName('active');
				}
			
				function openOrNot(){
					var activeSubMenu = subMenu.hasClassName('active');
					if (!activeSubMenu) openSubMenu();
				}
				
				function closeOrNot(event){
					var el = $(Event.element(event));
					var isRightElement = el!=arrowDown && el!=subMenu && !el.descendantOf || (!el.descendantOf(arrowDown) && !el.descendantOf(subMenu));
					if (isRightElement) closeSubMenu();
				}
				
			/*** initialisation du sous-menu ***/
			
				setSubMenuCoordinates();
				insertSubMenu();
			
			/*** gestionnaires d'évènements ***/
			
				Event.observe(arrowDown, 'click', openOrNot);
				Event.observe(document.body, 'resize', setSubMenuCoordinates);
				Event.observe(document.body, 'click', closeOrNot);
		}
	});

};
;

	var MiniProfil = Class.create();
	MiniProfil.prototype = {
		
		params : {
			distance : 10,								// pixels
			delay : 0.0,								// seconds
			src : '/public/miniprofile/index.jsp'	// url
		},

		setAttributes : function(elt){
			var state = {
				exists		: false,
				position	: 'undefined',
				dimensions	: 'undefined',
				flownOver	: false,
				visible		: false,
				filledIn	: false
			};
			elt.state = state;
		},

		initialize : function(handler, memberId) {
		
			if (arguments[1]){
				this.options = arguments[1];
				if (this.options.src) 		this.params.src 		= this.options.src;
				if (this.options.distance) 	this.params.distance 	= this.options.distance;
				if (this.options.delay) 	this.params.delay 		= this.options.delay;
			}
		
			this.window				= (window.event) ? document.body : window; // IE Hack
			this.handler			= $(handler);
			this.memberId			= memberId;
			
			this.setAttributes(this.handler);
			
			this.getCoordinates(this.handler);
			this.getDimensions(this.handler);
			
			Event.observe(window, 'resize', function(){
				this.getCoordinates(this.handler);
				this.getDimensions(this.handler);
			}.bind(this));
			
			this.createcanvas();
			
			this.eltListenerSwitcher(this.window, 'on', this.updateflyOvers.bind(this));
			this.eltListenerSwitcher(this.handler, 'on', this.fillInCanvas.bind(this));
		
		},
		
		createcanvas : function(){
		
			var canvas = Builder.node('div', { className : 'miniprofil miniprofilshadow ' });
			document.body.appendChild(canvas);
			
			this.canvas = canvas;
			this.setAttributes(this.canvas);
			this._hide(this.canvas);
			this.canvas.exists = true;
		
		},
		
		canvasCss : function(){
			
			var windowDim	 		= this.getWindowDim();
			var windowScrollDepth 	= document.documentElement.scrollTop || document.body.scrollTop;
			var handlerPos 			= this.handler.state.position;
			var handlerWidth 		= this.handler.state.dimensions.width;
			var canvasWidth  		= this.canvas.state.dimensions.width;
			var canvasHeight  		= this.canvas.state.dimensions.height;

			var topOverflow		= handlerPos[1] + canvasHeight - windowDim[1] - windowScrollDepth;
			var rightOverflow	= handlerPos[0] + handlerWidth + canvasWidth - windowDim[0];

			var style = {
				position : 'absolute',
				top : ( (topOverflow > 0) ? handlerPos[1] - topOverflow : handlerPos[1] ) + "px",
				left: ( (rightOverflow > 0) ? handlerPos[0] - canvasWidth - this.params.distance : handlerPos[0] + handlerWidth + this.params.distance ) + "px"
			};
			
			return style;
		},
		
		fillInCanvas : function(event){
			
			var updater = function(){
				
				if(this.handler.state.flownOver){
				
					new Ajax.Updater({ success: this.canvas }, this.params.src, {
						parameters: 'paramControl=valide&memberId='+this.memberId,
						onComplete : function(){
						
							this.canvas.state.filledIn = true;
							this.getDimensions(this.canvas);
							
							this.canvas.setStyle(this.canvasCss());
							this._show(this.canvas);
							
							Event.observe(window, 'resize', function(){
								this.getCoordinates(this.handler);
								this.getDimensions(this.handler);
								this.canvas.setStyle( this.canvasCss() );
							}.bind(this));
							
							this.eltListenerSwitcher(this.handler, 'off', this.fillInCanvas.bind(this));
							
							if(this.canvas.down('.close')) {
								this.closer = this.canvas.down('.close');
								this.closer.observe('click', function(){this._hide(this.canvas)}.bind(this));
							}
							
						}.bind(this)
					});
				
				}
			}.bind(this);
			
			if(!this.canvas.state.filledIn) updater.delay(this.params.delay);
			
		}, 

		updateflyOvers : function(event){
			var element = $( Event.element(event) );
			this.canvas.state.flownOver 	= (this.canvas		== element || element.descendantOf(this.canvas) );
			this.handler.state.flownOver 	= (this.handler		== element || element.descendantOf(this.handler) );
			this.initbehavior();
		},
		
		initbehavior : function(){
			if(this.canvas.state.filledIn) {
			
				if(this.canvas.state.visible){
					if( !this.handler.state.flownOver	&&	!this.canvas.state.flownOver	){ this._timedCanvasHide(); }
				}
				else if(!this.canvas.state.visible){
					if( this.handler.state.flownOver	&&	this.canvas.state.flownOver		){ this._timedCanvasShow(); }
					if( this.handler.state.flownOver	&&	!this.canvas.state.flownOver	){ this._timedCanvasShow(); }
					if( !this.handler.state.flownOver	&&	!this.canvas.state.flownOver	){ this._timedCanvasHide(); }
				}
				
			}
		},
		
		eltListenerSwitcher : function(element, choice, callback){
			if('off' == choice) {
				Event.stopObserving(element,'mouseover', callback);
			} else {
				Event.observe(element, 'mouseover', callback);
			}
		},

		getCoordinates : function(elt){
			elt.state.position 		= elt.cumulativeOffset();
		},

		getDimensions : function(elt){
			elt.state.dimensions	= elt.getDimensions();
		},
		
		_hide : function(elt){elt.addClassName('hidden');elt.state.visible = false; },
		_show : function(elt){
			elt.hide();
			elt.removeClassName('hidden');
			new Effect.Appear(elt, {duration: 0.1});
			elt.state.visible = true;
			this.canvas.setStyle(this.canvasCss());
		},
		
		_timedCanvasHide : function(){
			var hide = function(){ if( !this.handler.state.flownOver	&&	!this.canvas.state.flownOver ) this._hide(this.canvas); }.bind(this);
			hide.delay(this.params.delay);
		},
		_timedCanvasShow : function(){
			var show = function(){ if( this.handler.state.flownOver || this.canvas.state.flownOver ) this._show(this.canvas); }.bind(this);
			show.delay(this.params.delay);
		},
		
		getWindowDim: function() { // Récupère les dimensions de la fenêtre du navigateur
			var width 	= 0;
			var height 	= 0;
			if ( typeof(window.innerWidth) == 'number' ) {
				//Non-IE
				width 	= window.innerWidth;
				height 	= window.innerHeight;
			} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
				//IE 6+ in 'standards compliant mode'
				width 	= document.documentElement.clientWidth;
				height 	= document.documentElement.clientHeight;
			} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
				//IE 4 compatible
				width 	= document.body.clientWidth;
				height 	= document.body.clientHeight;
			};
			return [width, height];
		}
	 
	};