var zindex=0;
var fenetre_deplacee=0;
var fenetre_deplacee_difx=0;
var fenetre_deplacee_dify=0;
 
function creer_fenetre(left,top,width,height){
        var fenetre = document.createElement("div"); //Création du bloc principal
        fenetre.className="fenetre"; //On donne un attribut class à cette div
        fenetre.style.left=left+'px';
        fenetre.style.top=top+'px';
        fenetre.style.width=width+'px';
        fenetre.style.height=height+'px';
        if(document.all) fenetre.attachEvent("onmousedown",function (){premier_plan(fenetre)});
        else fenetre.addEventListener("mousedown",function (){premier_plan(fenetre)},true);
        
        //On crée de la même manière la div "haut":
        var haut = document.createElement("div");
        haut.className="haut";
		//Pour mousedown/mouseup
		addEvent(haut,"mousedown",function (){commencer_deplacement(event,fenetre)});
		addEvent(haut,"mouseup",arreter_deplacement);
        //On crée ensuite les trois div qui y figureront :
        var haut_gauche = document.createElement("div");
        haut_gauche.className="haut_gauche";
        var haut_droite = document.createElement("div");
        haut_droite.className="haut_droite";
        var haut_centre = document.createElement("div");
        haut_centre.className="haut_centre";
        //Puis on les insère une par une dans notre bloc "haut" :
        haut.appendChild(haut_gauche);
        haut.appendChild(haut_droite);
        haut.appendChild(haut_centre);
        //On insère le tout (la div "haut" et les trois div à l'intérieur) dans le bloc "fenetre" :
        fenetre.appendChild(haut);
        
        //On fait de même pour la div "milieu"
        var milieu = document.createElement("div");
        milieu.className="milieu";
        var milieu_gauche = document.createElement("div");
        milieu_gauche.className="milieu_gauche";
        var milieu_droite = document.createElement("div");
        milieu_droite.className="milieu_droite";
        var milieu_centre = document.createElement("div");
        milieu_centre.className="milieu_centre";
        milieu.appendChild(milieu_gauche);
        milieu.appendChild(milieu_droite);
        milieu.appendChild(milieu_centre);
        fenetre.appendChild(milieu);
        
        //On fait de même pour la div "bas"
        var bas = document.createElement("div");
        bas.className="bas";
        var bas_gauche = document.createElement("div");
        bas_gauche.className="bas_gauche";
        var bas_droite = document.createElement("div");
        bas_droite.className="bas_droite";
        var bas_centre = document.createElement("div");
        bas_centre.className="bas_centre";
        bas.appendChild(bas_gauche);
        bas.appendChild(bas_droite);
        bas.appendChild(bas_centre);
        fenetre.appendChild(bas);
 
        premier_plan(fenetre);
        document.body.appendChild(fenetre); //On insère le tout dans notre document, dans le corps
}
 
function premier_plan(fenetre) {
        zindex++;
        fenetre.style.zIndex=zindex;
}
function commencer_deplacement(fenetre) {
        fenetre_deplacee=fenetre; //la variable pointe désormais sur la fenêtre à déplacer
		old_mouseCoords=mouseCoords(ev); //On récupère la position de la souris
        old_windowCoords=getPosition(fenetre); //Et la position de notre fenêtre
        //On stocke les différences dans les variables globales
        fenetre_deplacee_difx=old_mouseCoords.x-old_windowCoords.x;
        fenetre_deplacee_dify=old_mouseCoords.y-old_windowCoords.y;

}
function arreter_deplacement() {
        fenetre_deplacee=0; //La variable vaut 0
}
function addEvent(obj,event,fct){
     if(obj.attachEvent)
        obj.attachEvent('on' + event,fct);
     else
        obj.addEventListener(event,fct,true);
}
function deplacer_fenetre(ev) {
        if(fenetre_deplacee!=0) { //On effectue le déplacement que s'il y a une fenêtre à déplacer
                var souris=mouseCoords(ev); //On récupère les coordonnées de la souris
				
				//On soustrait l'abscisse du curseur par rapport au coin gauche de la fenêtre
				fenetre_deplacee.style.left=(souris.x-fenetre_deplacee_difx)+'px'; 
				//On fait de même avec l'ordonnée     
                fenetre_deplacee.style.top=(souris.y-fenetre_deplacee_dify)+'px'; 			      
        }
}
function mouseCoords(ev){
        if(ev.pageX || ev.pageY){
                return {x:ev.pageX, y:ev.pageY};
        }
        return {
                x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
                y:ev.clientY + document.body.scrollTop  - document.body.clientTop
        };
}
function getPosition(e){
        var left = 0;
        var top  = 0;
        while (e.offsetParent){
                left += e.offsetLeft;
                top  += e.offsetTop;
                e     = e.offsetParent;
        }
        left += e.offsetLeft;
        top  += e.offsetTop;
        return {x:left, y:top};
}