// JavaScript Document
/***********************************************************/
/* Auteur  : Benjamin DUPUIS                               */
/* Version : 2.0 - 09/12/2008                              */
/*                                                         */
/* Historique :                                            */
/*           1.0 - 10/06/2008                              */
/*                                                         */ 
/* Rôle    : Fonction Ajax permettant de créer des div     */
/*           dynamiquement                                 */
/*                                                         */
/* Source  : Banque de librairie personnel                 */
/*           OliBlog pour la gestion des déplacements      */
/*           modifiée pour répondre aux besoins            */
/*                                                         */
/* Note    :                                               */
/*          Vous pouvez réutiliser ce code a quelque fin   */
/*          que ce soit, privée ou commercial, sans en     */
/*          demander la permission de l'auteur. Vous ne    */
/*          pouvez/devez pas retirer ce bandeau de votre   */
/*          code final sans en demander la permission.     */
/*                                                         */
/* Remerciement :                                          */
/*          JohnSmith pour les cours de JavaScript         */
/*          Oli pour la base des déplacements de DIV       */
/*          famfam pour ses icônes                         */
/***********************************************************/
var isDragging=new Array();
var ecartX=new Array();
var ecartY=new Array();
var curX=new Array();
var curY=new Array();
var endY=new Array();
var move=new Array();
var availHeight;
var availWidth;
var borderWidthWidth;
var borderHeightWidth;
var correctionIE;

function addElement(id_target, id_newelem, url, position, posleft, postop, width, height, textalign, border, backgroundcolor, otherstyle, movable, out, getwidth, getheight, getleft, gettop) {
	var target = document.getElementById(id_target);
	var elem = document.createElement('div');  

	elem.setAttribute('id',id_newelem); // on défini l'identifiant de notre element
  	
	var zIndex=returnZindexMax(id_target);
	var zIndexCtrl=zIndex+1;
	
	if (getwidth==1) {
		width=getElementWidth(id_target)+'px';
	}
	
	if (getheight==1) {
		height=getElementHeight(id_target)+'px';
	}
	
	if (gettop==1) {
		postop=getElementTop(id_target)+'px';
	}
	
	if (getleft==1) {
		posleft=getElementLeft(id_target)+'px';
	}
	
	/* creation de la variable contenant le style de notre element */
	var monstyle = 'position:'+position+';';
		monstyle += 'z-index:'+zIndex+';';
		monstyle += 'top:'+postop+';';
		monstyle += 'left:'+posleft+';';
		monstyle += 'width:'+width+';';		
		monstyle += 'height:'+height+';';		
		monstyle += 'border: '+border+';';
		monstyle += 'overflow: auto;';
		monstyle += 'background-color:'+backgroundcolor+';';
		monstyle += 'text-align:'+textalign+';';
		monstyle += otherstyle;
		
  	/* on applique le style en fonction du navigateur */
	if (BrowserDetect.browser!='Explorer') {
		elem.setAttribute('style',monstyle);
	} else {
		elem.style.setAttribute('cssText',monstyle);
		if (BrowserDetect.version<=6 && position=='fixed') {
			elem.style.position='absolute';
			elem.style.setExpression("top","documentElement.scrollTop + body.scrollTop + 80");
		}
	}
	
	if (movable==1) { // Déplacement sur la DIV
		// Move sur la Div
		if (BrowserDetect.browser!='Explorer') {
			elem.setAttribute('onmousedown','changeZindex(\''+id_target+'\',\''+id_newelem+'\'); beginDrag(\''+id_newelem+'\',event); setBodyDrag(\''+id_newelem+'\',event)');
			target.setAttribute('onmouseup','endDrag(\''+id_newelem+'\');');
			elem.setAttribute('onmouseup','endDrag(\''+id_newelem+'\');');
		} else {
			elem.onmousedown=function () { 
				changeZindex(id_target,id_newelem); 
				beginDrag(id_newelem,event); 
				setBodyDrag(id_newelem, out);
			};

			target.onmouseup=function () { endDrag(id_newelem) };
			elem.onmouseup=function () { endDrag(id_newelem) };
		}
	}
	
	/* on efface les elements si ils existent deja */
	if (document.getElementById(id_newelem+'_shut')) {
		removeElement(id_newelem,id_newelem+'_shut');
	}
	
	if (document.getElementById(id_newelem+'_move')) {
		removeElement(id_newelem,id_newelem+'_move');
	}
	
	if (document.getElementById(id_newelem)) {
		removeElement(id_target,id_newelem);
	}
	
	target.appendChild(elem); // on créé l'élément
	
	getXhr()
	xhr.onreadystatechange = function() {
		if(xhr.readyState == 4 && xhr.status == 200) { // Si on a choppé le contenu de l'URL			
			elem.innerHTML=xhr.responseText; // On insère ce contenu dans l'element créé
			finwait(); // fin curseur en attente
			addShut(id_target, id_newelem, zIndexCtrl); // On créer également une div permettant de fermer l'element
			if (movable==1) { // On affiche le cadena pour verrouiller deverrouiller la div
				addLocker(id_target, id_newelem, zIndexCtrl);
			} else if (movable==2) { // On affiche le bouton de déplacement
				addMove(id_target, id_newelem, zIndexCtrl, out);
			}
		} 
		else {
			waitme(); // debut curseur attente
		}
	}
	xhr.open("GET",url,true); // on choppe l'url qu'il faut insérer
	xhr.send(null);
}

function addShut(id_target, id_newelem, zIndexCtrl) {
	var target = document.getElementById(id_newelem);
	var elem = document.createElement('div');  
	
	var id_newelem_shut=id_newelem+'_shut';
	
	var shut_style = 'position: absolute;';	
		shut_style += 'top:0px;';
		shut_style += 'right:0px;';
		shut_style += 'z-index:'+zIndexCtrl+';';
		shut_style += 'top:'+top+';';
		shut_style += 'width:16px; ';
		shut_style += 'height:16px; ';
		
	elem.setAttribute('id',id_newelem_shut);
	
	if (BrowserDetect.browser!='Explorer') {
		elem.setAttribute('style',shut_style);
	} else {
		elem.style.setAttribute('cssText',shut_style);
	}
	
	elemcontent='<img style="cursor:pointer" src="images/interface/close_16.png" alt="X" title="Close"';
	elemcontent+='onclick="removeElement(\''+id_newelem+'\',\''+id_newelem_shut+'\');';
	elemcontent+='removeElement(\''+id_target+'\',\''+id_newelem+'\');" />';
	
	elem.innerHTML = elemcontent; 
	
	target.appendChild(elem);
}

function addLocker(id_target, id_newelem, zIndexCtrl) {
	var target = document.getElementById(id_newelem);
	var elem = document.createElement('div');  
	
	var id_newelem_locker=id_newelem+'_locker';
	
	var check_style = 'position: absolute;';	
		check_style += 'top:0px;';
		check_style += 'right:18px;';
		check_style += 'z-index:'+zIndexCtrl+';';
		check_style += 'top:'+top+';';
		check_style += 'width:16px; ';
		check_style += 'height:16px; ';	
		
	elem.setAttribute('id',id_newelem_locker);
	
	if (BrowserDetect.browser!='Explorer') {
		elem.setAttribute('style',check_style);
	} else {
		elem.style.setAttribute('cssText',check_style);
	}
	
	if (move[id_newelem]==true) {
		elemcontent = '<img style="cursor:pointer" alt="1" title="Lock" src="images/interface/lock_open.png" ';
	} else {
		elemcontent = '<img style="cursor:pointer" alt="0" title="UnLock" src="images/interface/lock.png" ';
	}
	
	var oc='if (move[\''+id_newelem+'\']==true) { move[\''+id_newelem+'\']=false; this.src=\'images/interface/lock.png\'; this.title=\'UnLock\'; }';
	oc+='else { move[\''+id_newelem+'\']=true; this.src=\'images/interface/lock_open.png\';  this.title=\'Lock\'}"';
	
	elemcontent+= 'onclick="'+oc+'" />';
	elem.innerHTML = elemcontent; 
	
	target.appendChild(elem);
}

function addMove(id_target, id_newelem, zIndexCtrl, out) {
	var target = document.getElementById(id_newelem);
	var elem = document.createElement('div');  
	
	var id_newelem_move=id_newelem+'_move';
	
	move[id_newelem]=true;
	
	var move_style = 'position: absolute;';	
		move_style += 'top:0px;';
		move_style += 'right:20px;';
		move_style += 'z-index:'+zIndexCtrl+';';
		move_style += 'top:'+top+';';
		move_style += 'width:16px; ';
		move_style += 'height:16px; ';
		
	elem.setAttribute('id',id_newelem_move);
	
	if (BrowserDetect.browser!='Explorer') {
		elem.setAttribute('style',move_style);
	} else {
		elem.style.setAttribute('cssText',move_style);
	}
	elemcontent='<img style="cursor:pointer" src="images/interface/arrow_out.png" alt="M" />';
	
	elem.innerHTML = elemcontent; 
	
	target.appendChild(elem);
	
	// Move sur la Div
	if (BrowserDetect.browser!='Explorer') {
		elem.setAttribute('onmousedown','event.preventDefault(); changeZindex(\''+id_target+'\',\''+id_newelem+'\'); beginDrag(\''+id_newelem+'\',event); setBodyDrag(\''+id_newelem+'\',event)');
		target.setAttribute('onmousedown','changeZindex(\''+id_target+'\',\''+id_newelem+'\');');
		target.setAttribute('onmouseup','endDrag(\''+id_newelem+'\');');
		elem.setAttribute('onmouseup','endDrag(\''+id_newelem+'\');');
	} else {
		elem.onmousedown=function () { 
			changeZindex(id_target,id_newelem);
			beginDrag(id_newelem,event); 
			setBodyDrag(id_newelem, out);
		};

		target.onmouseup=function () { endDrag(id_newelem) };
		elem.onmouseup=function () { endDrag(id_newelem) };
	}
}

function setBodyDrag(id_newelem, out) {
	if (BrowserDetect.browser!='Explorer') {
		document.body.setAttribute('onmousemove','drag(\''+id_newelem+'\',\''+out+'\',event)');
	} else {
		document.body.onmousemove=function () { drag(id_newelem,out,event); };
	}
}

function returnZindexMax(idbase) {
	var elembase=document.getElementById(idbase);
	var elements = elembase.getElementsByTagName('*'); //On récupère tous les éléments de la page
	var zIndex = 0;
	var elementslength=elements.length;
	for( var i=0; i < elementslength; i++) {
	  zIndex = Math.max(zIndex,elements[i].style.zIndex);
	}
	zIndex = zIndex + 1; //toujours plus haut que le plus haut
	return zIndex;
}

function changeZindex(id_target, id_newelem) {
	var zIndex=returnZindexMax(id_target);
	var zIndexCtrl = zIndex +1
	var elements;
	var elem=document.getElementById(id_newelem);
	var cptelem=parseInt(elem.style.zIndex) + 2;
	
	if (elem) {
		if (zIndex>cptelem) {
			elem.style.zIndex=zIndex;
			elements=elem.getElementsByTagName('div');
			for( var i=0; i < elements.length; i++) {
				elements[i].style.zIndex=zIndexCtrl;
			}
		}
	}
}

function removeElement(id_target,id_newelem) {
	var d = document.getElementById(id_target);
	var del = document.getElementById(id_newelem);
	d.removeChild(del);
}

function pausecomp(millis) {
	var date = new Date();
	var curDate = null;

	do { curDate = new Date(); }
	while(curDate-date < millis);
}

function positionne(p_id, p_posX, p_pos_Y){
	document.getElementById(p_id).style.left = p_posX;
	document.getElementById(p_id).style.top = p_pos_Y;
}

function windowsize() {
	if (BrowserDetect.browser=='Explorer') {
		if (BrowserDetect.version>=6) { // IE 6 et supérieur
			availWidth=document.documentElement.clientWidth;
			availHeight=document.documentElement.clientHeight;
		} else { // IE 4 et supérieur 
			availWidth=document.body.clientWidth;
			availHeight=document.body.clientHeight;
		}
	}
	else { // Opera Firefox ...
		availWidth=window.innerWidth;
		availHeight=window.innerHeight;
	}
}

function getPositionCurseur(id_newelem, e){
	//ie
	if(document.all){
		curX[id_newelem] = event.clientX; // ou screenX ? ou autre ??
		curY[id_newelem] = event.clientY; // ou screenY ? ou autre ??
	}	
	//netscape 4
	else if(document.layers){
		curX[id_newelem] = e.pageX;
		curY[id_newelem] = e.pageY;
	}	
	//mozilla
	else if(document.getElementById){
		curX[id_newelem] = e.clientX;
		curY[id_newelem] = e.clientY;
	}
}

function beginDrag(id_newelem,e){
	if (move[id_newelem]==true) {
		isDragging[id_newelem] = true;
			
		objectToDrag = document.getElementById(id_newelem);
		getPositionCurseur(id_newelem, e);
		
		ecartX[id_newelem] = curX[id_newelem] - parseInt(objectToDrag.style.left);
		ecartY[id_newelem] = curY[id_newelem] - parseInt(objectToDrag.style.top);
			
		objectToDrag.style.cursor='move';
		
		// On choppe la taille de bordure et la taille de notre fenetre
		borderWidthWidth=parseInt(objectToDrag.style.borderRightWidth)+parseInt(objectToDrag.style.borderLeftWidth);
		borderHeightWidth=parseInt(objectToDrag.style.borderBottomWidth)+parseInt(objectToDrag.style.borderTopWidth);
		
		windowsize();
		
		// Fix Selection de texte IE
		/*if (BrowserDetect.browser=='Explorer') {
			document.onselectstart=new Function ("return false");
			document.unselectable = "on";
			document.body.focus();
		}*/
		disableSelection(document.body);
	}
}

function drag(id_newelem, out, e){
	objectToDrag = document.getElementById(id_newelem);

	var newPosX;
	var newPosY;
	var divHeight;
	var divHeightPx;
	var divWidth;
	var divWidthPx;
	
	if(isDragging[id_newelem] == true) {
		getPositionCurseur(id_newelem, e);
		
		newPosX = curX[id_newelem] - ecartX[id_newelem];
		newPosY = curY[id_newelem] - ecartY[id_newelem];
		
		// Dimension de la div en PX ou en %
		divHeight=parseInt(objectToDrag.style.height);
		divWidth=parseInt(objectToDrag.style.width);
		
		if (out==0) {
			// Empecher DIV de sortir de l'écran
			if (BrowserDetect.browser!='Explorer' || (BrowserDetect.browser=='Explorer' && BrowserDetect.version>=7)) {
				// Empecher de sortir a Gauche et en Haut
				if (newPosX<0) { newPosX=0; }
				if (newPosY<0) { newPosY=0; }	
				
				// Empecher de sortir en bas et a droite
				// Si Hauteur en % 
				if ( objectToDrag.style.height.search('%') != -1 ) {
					divHeightPx=(availHeight/100)*divHeight;
					if (newPosX>(availHeight-divHeightPx-borderHeightWidth)) {
						newPosX=(availHeight-divHeightPx-borderHeightWidth); 
					}					
				}
				// Si Hauteur en PX
				else {
					if (newPosY>(availHeight-divHeight-borderHeightWidth)) { 
						newPosY=(availHeight-divHeight-borderHeightWidth); 
					}
				}				
				// Si Largeur en %
				if ( objectToDrag.style.width.search('%') != -1 ) {
					divWidthPx=(availWidth/100)*divWidth;
					if (newPosX>(availWidth-divWidthPx-borderWidthWidth)) {
						newPosX=(availWidth-divWidthPx-borderWidthWidth); 
					}
					
				}
				// Si Largeur en Px
				else {
					if (newPosX>(availWidth-divWidth-borderWidthWidth)) { 
						newPosX=(availWidth-divWidth-borderWidthWidth); 
					}
				}
				
			} 
			// Fix temporaire 0,0 est à -150,0 car position curseur est dans l'element courant 'content' et pas le body ?
			else { 
				divHeight=parseInt(objectToDrag.style.height);
				divWidth=parseInt(objectToDrag.style.width);
				
				if (newPosX<0) { newPosX=0; }
				if (newPosY<0) { newPosY=0; }	//if (newPosY<-150) { newPosY=-150; }	
				
				// Si largeur en %
				if ( objectToDrag.style.height.search('%') != -1 ) {
					divHeightPx=(availHeight/100)*divHeight;
					if (newPosX>(availHeight-divHeightPx-borderHeightWidth)-150) {
						newPosX=(availHeight-divHeightPx-borderHeightWidth)-150; 
					}
				}
				// Si largeur en Px
				else {
					if (newPosY>(availHeight-divHeight-borderHeightWidth)-150) { 
						newPosY=(availHeight-divHeight-borderHeightWidth)-150; 
					}
				}
				// Si largeur en %
				if ( objectToDrag.style.width.search('%') != -1 ) {
					divWidthPx=(availWidth/100)*divWidth;
					if (newPosX>(availWidth-divWidthPx-borderWidthWidth)) {
						newPosX=(availWidth-divWidthPx-borderWidthWidth); 
					}
				} 
				// Si largeur en Px
				else {
					if (newPosX>(availWidth-divWidth-borderWidthWidth)) { 
						newPosX=(availWidth-divWidth-borderWidthWidth); 
					}
				}
			}
		}
		
		// On positionne notre élement	
		objectToDrag.style.left = newPosX + 'px';
		objectToDrag.style.top = newPosY + 'px';
		
		endY[id_newelem] = newPosY;
	}
}

function endDrag(id_newelem) {
	objectToDrag = document.getElementById(id_newelem);
	objetContent = document.getElementById('content');
	if(isDragging[id_newelem] == true) {
		objectToDrag.style.cursor='';
		isDragging[id_newelem] = false;
		
		// On remet la position Fixed pour IE
		if ( (BrowserDetect.browser=='Explorer') && (BrowserDetect.version<=6) ) {
			if (objectToDrag.style.setExpression!='') {
				var tmp;
	//			var valY=parseInt(event.screenY)-getElementPosY(objetContent)-20;
	//			var oc='documentElement.scrollTop + body.scrollTop +'+valY;

	//			objectToDrag.style.setExpression("top",oc);	
	//			window.alert(getElementPosY(objetContent)+' '+getElementPosY(objectToDrag));
			}			
		}
		// Fix Selection de texte IE
		/*if (BrowserDetect.browser=='Explorer') {
			document.onselectstart = new Function ("return true");
		}*/
		enableSelection(document.body);
	}
}

function getElementPosY(myObj) {
	return (myObj.offsetTop + ((myObj.offsetParent) ?
		getElementPosY(myObj.offsetParent) : 0));
}


function disableSelection(target) {
	if (typeof target.onselectstart!="undefined") //IE route
		target.onselectstart=function(){return false}
		
	else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
		target.style.MozUserSelect="none"
		
	else //All other route (ie: Opera)
		target.onmousedown=function(){return false}
		
	target.style.cursor = "default"
}

function enableSelection(target) {
	if (typeof target.onselectstart!="undefined") //IE route
		target.onselectstart=function(){return true}
		
	else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
		target.style.MozUserSelect="";
		
	else //All other route (ie: Opera)
		target.onmousedown=function(){return true}
		
	target.style.cursor = "default"
}