var clickAllowed = new Array("imgTree");
   var resize=false;
   var newElmt = false;modifElement=false;
   var saveCoord = {x:0,y:0};
   var refElmtId = "imgTree";
   var tmpElmt = "tmpElmt";
   var nouvElmt = tmpElmt;
//===============mapDemoClick===================================================
    function mapDemoClick(e) {
        var clickPos = "";
        if (document.layers) {
             //alert("mozila necessaire pour cette fonctionnalitée");
             return(true);
        }else if (document.all) {
             //alert("mozila necessaire pour cette fonctionnalitée");
             if (event.srcElement.id != refElmtId) {
        	     return(true);
            }
        } else if (document.getElementById) {
             //si l'element n'est pas autorises pour le click
             if (!clickAllowed.member(e.target.id)) {return(true);}
             posImg = $(refElmtId).cumulativeOffset();
             //var calcClick = {x:e.pageX-e.target.x,y:e.pageY-e.target.y};
             var calcClick = {x:e.pageX-posImg[0],y:e.pageY-posImg[1]};
             //si on est en mode resize de la div
             iId = "i"+tmpElmt;
             if(resize){
                 newHeight = Math.abs(saveCoord.y-calcClick.y);
                 newWidth = Math.abs(saveCoord.x-calcClick.x);
                 $("height").value=newHeight;
                 $("width").value=newWidth;
                 $(iId).setStyle({height:newHeight+'px',width:newWidth+'px'});
             }else{
                 if($("p_left")){
                     $("p_left").value=calcClick.x;
                     $("p_top").value=calcClick.y;
                 }
                 if(newElmt || modifElement)
                     posElement(tmpElmt,calcClick.x,calcClick.y,refElmtId,iId);
                 saveCoord = calcClick;
             }
        }
        return(true);
    }
    if (document.layers) {
        document.captureEvents(Event.MOUSEDOWN);
        document.onmousedown = mapDemoClick;
    }else{
        document.onclick = mapDemoClick;
    }
//===============addElement=====================================================
    //Ajout des elements a la page.
    function addElement(idImage,type){
        dataElmt = new Array();
        if(modifElement){
            dataElmt.p_left = $("p_left").value;
            dataElmt.p_top = $("p_top").value;
            dataElmt.width = $("width").value;
            dataElmt.height = $("height").value;
            dataElmt.type_o = $("type_o").value;
        } else if(!newElmt){
            posImg = new Array();
            posImg = $(idImage).cumulativeOffset();
            p_top = posImg[1];
            p_left = posImg[0];
            if($("type_o").value==1){
                newElmt = newElement(tmpElmt,idImage,$H({"p_left":p_left,"p_top":p_top,"type_o":$("type_o").value,"_new":true,"dimention":100}));
                new Insertion.After(idImage, newElmt);       
                 $("height").value=100;
                 $("width").value=100;
                centerPos = false;
            }else{
                newElmt = newElement(tmpElmt,idImage,$H({p_left:p_left,p_top:p_top,type_o:$("type_o").value,"_new":true}));
                new Insertion.After(idImage, newElmt);
                centerPos="i"+tmpElmt;
            }
            if(newElmt) 
                posElement(tmpElmt,p_left,p_top,idImage,centerPos);
       }
    }
//==============posElement======================================================
   function posElement(elmt,p_left,p_top,refElmt,posElmt,typeX,typeY){
       elmtSize=0;
       //$("debug").innerHTML+=
       //'<br/>'+elmt+"-"+p_left+"-"+p_top+"-"+refElmt+"-"+posElmt;
       posImg = $(refElmt).positionedOffset();
       //posImg = $(refElmt).cumulativeOffset();
       if($(posElmt) && $(posElmt).className!='divZonne'){
           elmtSize = $(posElmt).getDimensions();
       }
       //$("debug").innerHTML+='-'+elmtSize.width+'-'+elmtSize.height;
       p_left+=posImg[0];p_top+=posImg[1];
       if(elmtSize){p_left-=(elmtSize.width/2);p_top-=(elmtSize.height/2);}
       //debug('<br/>'+elmt+"-"+p_left+"-"+p_top+"-"+refElmt+"-"+posElmt);
       $(elmt).setStyle({position:"absolute",top:p_top+"px",left:p_left+"px"});
   }
//==============newElement======================================================
   function newElement(divId,idImage,tabData,update){
       clickAllowed.push(divId);
       html = '<div id="'+divId+'" class="marqueur" style="position:absolute;top:'+tabData.get("p_top")+'px;left:'+tabData.get("p_left")+'px;"  onclick="'+tabData.get("js_action")+'">';
       switch (parseInt(tabData.get("type_o"))) {
          case 1 : //zone
              clickAllowed.push('i'+divId+'');
              style="";
              //alert(tabData.toArray());
              if(dim=tabData.get("dimention")){style='height:100px;width:100px;';}
              else{style='height:'+tabData.get("height")+'px;width:'+tabData.get("width")+'px;';}
              html += '<div  id="i'+divId+'" class="divZonne" style="position:relative;top:0;left:0;'+style+'">';
              if(divId==tmpElmt){ // si c'est l'element en cours de creation/modification
                  html+= addResize();
              }
              html += '</div>';
          break;
          case 2 : //marqueur zone
              html += 
              '<div class="marq_img_2">'+
                  '<img id="i'+divId+'" src="../images/restit/zonne.png"><br/>'+
              '</div>'+
              '<div  id="titre_'+divId+'"  class="maq_titre2">'+tabData.get("titre")+'</div>';
          break;
          case 3 : //marqueur choix
              html += 
              '<img id="i'+divId+'" src="../images/restit/rond.gif" onmouseover="choixOver(\''+divId+'\',\'over\')" onmouseout="choixOver(\''+divId+'\',\'out\')">';
              //'<img id="i'+divId+'" src="../images/restit/choix.png" >';
              //'<div id="titre_'+divId+'"  class="maq_titre3" style="display:none;">'+tabData.get("titre")+'</div>';
              //'<div id="titre_'+divId+'"  class="maq_titre3" style="display:inline;">'+tabData.get("titre")+'</div>';
          break;
          default :
              //html += 
              //'<img id="i'+divId+'" src="../images/restit/marque.png">'+
              return "";
          break;
       } 
       html += '</div>';
       return html;
   }
//==============editElement=====================================================
   function editElement(elmt){
       if(modifElement){
           $("nextModif").value=elmt.id;
           document.newElmt.submit();
       }else{
           $("id").value=elmt.id;
           $("titre").value=elmt.titre;
           $("width").value=elmt.width;
           $("height").value=elmt.height;
           $("p_left").value=elmt.p_left;
           $("p_top").value=elmt.p_top;
           $("js_action").value=elmt.js_action;
           $("type_o").value=elmt.type_o;
           marqueurId = "m"+elmt.id;
           if($(nouvElmt)) $(nouvElmt).remove();
           iId = "i"+marqueurId;
           saveCoord = {x:elmt.p_left,y:elmt.p_top};
           if(elmt.type_o==1) $(iId).innerHTML = addResize();
           modifElement = true;
           tmpElmt = marqueurId;
       }
   }
//==============updateElmt======================================================
   function updateElmt(idField){
       idUpdElmt = idField+"_"+tmpElmt;
       text = $(idField).value.replace(/\n/g,'<br\>');
       $(idUpdElmt).innerHTML = text;
   }
//==============choixOver=======================================================
   function choixOver(idChoix,event){
       imgId = "i"+idChoix;
       divTitreId = "titre_"+idChoix;
       switch (event){
           case "over" :
               $(imgId).src = '../images/restit/rond_over.gif';
               //$(divTitreId).setStyle({visibility:"visible"});
               if($(divTitreId))
                 $(divTitreId).show();
           break;
           case "out" :
               $(imgId).src = '../images/restit/rond.gif';
               //$(divTitreId).setStyle({visibility:"hidden"});
               if($(divTitreId))
                 $(divTitreId).hide();
           break;
       }
       
   }
//==============swapZonneDim====================================================
   function swapZonneDim(type){
       $("pos").setStyle({backgroundColor:"green"});
       $("size").setStyle({backgroundColor:"green"});
       $(type).setStyle({backgroundColor:"red"});
       if(type=="pos"){resize=false;}else{resize=true;}
   }
//==============addResize=======================================================
   function addResize(){
       html="";
       html+= '<div id="pos" onclick="swapZonneDim(this.id)" style="background-color:red;height:10px;width:10px;position:relative;top:0;left;0px;z-index:999;">&nbsp;</div>';
       html+= '<div id="size" onclick="swapZonneDim(this.id)" style="background-color:green;height:10px;width:10px;position:absolute;bottom:0px;right:0px;z-index:999;">&nbsp;</div>';
       return html;
   }
//==============posTree=========================================================
   function posTree(divId,imgHtml){
       $(divId).innerHTML=imgHtml;
   };
//==============treeHTML=========================================================
   function treeHTML(imgId,imgPath){
       return '<img id="'+imgId+'" src="'+imgPath+'" class="mapImg" alt="" />';
   }
//==============renderTree=========================================================
   function renderTree(oTree){
       //ecriture de l'arbre dans la page
       html = treeHTML(oTree.imgId,oTree.imgPath);
       if(oTree.divId){
           posTree(oTree.divId,html);
       }
       //pour chaque marqueur, ecriture et positionnement par rapport a l'arbre
       if(oTree.marqueurs){
           oTree.marqueurs.each(function(marqueur,ind){
               //$("debug").innerHTML+=("<p>"+marqueur.toArray()+marqueur[1].id+"</p>");
               oMarqueur = marqueur[1];
               html = oMarqueur.data.get("html");
               imId = "i"+oMarqueur.id;
               if(!html) html = newElement(oMarqueur.id,oTree.imgId,oMarqueur.data);
               new Insertion.After(oTree.imgId, html);
               posElement(oMarqueur.id,oMarqueur.data.get("p_left"),oMarqueur.data.get("p_top"),oTree.imgId,imId);
           });
       };
       //debug($(oTree.divId).makePositioned());
   }