/****************************************************************************************
*	Fichier : panoramic.js
*	Auteur : Ricou47 (www.codes-sources.com)
*	Role : permet le défilement d'une zone <div> dans laquelle on peut afficher tout
*		type de contenu (texte, liens, images,...) en fonction des mouvements 
		de la souris
*	Version : 1.0
*
*       Adapté à un défilement vertical à item multiples par Manuel STEPHAN pour Tevolys (2007)
*
*       Ajout d'une zone avec survol par Manuel STEPHAN pour Tevolys (2007)
*
/***************************************************************************************/

var dispoBorderColor = '#0090c6';

var visibleHeight = 440;
var O = new Array();
var unclicO = new Array();
var itemO = new Array();
var dispoZoneItemO = new Array();
var dispoZoneSumTxtO = new Array();
var dispoZoneImgO = new Array();
var dispoZoneOverO = new Array();
var dispoZoneItemBorderO = new Array();
var lastItem = false;
var nextItem = false;
var defilLastItem = false;

var defilTrig = false;
var defilTrigAction = false;
var defilTrigId = false;
var theTimer = 0;

var overOffsetTop;
var overOffsetBottom;

var unclicHTML = new Array();
unclicHTML['Marche'] = '<div class=\"unclicContentImg\"><img width=\"93\" height=\"63\" src=\"assets/images/EnUnClic/marche.jpg\" alt=\"\" /></div>\r\n<div class=\"unclicContentSum\">\r\n  <div class=\"unclicContentTxt\">Consultez nos commandes publiques</div>\r\n  <div class=\"unclicContentLink\"><a href=\"/fr/espace-fournisseurs/190\">En savoir +</a></div>\r\n</div>';
unclicHTML['Carto'] = '<div class=\"unclicContentImg\"><img width=\"93\" height=\"63\" src=\"assets/images/EnUnClic/carte.jpg\" alt=\"\" /></div>\r\n<div class=\"unclicContentSum\">\r\n  <div class=\"unclicContentTxt\">Venez visiter notre patrimoine...</div>\r\n  <div class=\"unclicContentLink\"><a href=\"/fr/vous-loger/carte-du-patrimoine-et-de-vos-interlocuteurs\">En savoir +</a></div>\r\n</div>';
unclicHTML['Contact'] = '<div class=\"unclicContentImg\"><img width=\"93\" height=\"63\" src=\"assets/images/EnUnClic/contact.JPG\" alt=\"\" /></div>\r\n<div class=\"unclicContentSum\">\r\n  <div class=\"unclicContentTxt\">Tous nos contact en un clic!</div>\r\n  <div class=\"unclicContentLink\"><a href=\"/fr/nous-connaitre/contacts-horaires-et-plans-d-acces\">En savoir +</a></div>\r\n</div>';


var timer;

var offsetItem = new Array();
var itemHeight = 150;
var itemWidth = 220;

var itemZoom = 0;
var itemEsp = 8;
var itemDist = itemHeight + itemEsp;

var itemHTML = new Array();
var itemHTMLa = new Array();
var itemHTMLb = new Array();

offsetItem[1] = (1*itemDist)-itemHeight;
offsetItem[2] = (2*itemDist)-itemHeight;
offsetItem[3] = (3*itemDist)-itemHeight;
offsetItem[4] = (4*itemDist)-itemHeight;
offsetItem[5] = (5*itemDist)-itemHeight;
offsetItem[6] = (6*itemDist)-itemHeight;
offsetItem[7] = (7*itemDist)-itemHeight;
offsetItem[8] = (8*itemDist)-itemHeight;
itemHTML[1] = '<div onmousedown="javascript:window.location=\'/fr/nous-connaitre/nos-realisations/dernieres-realisations/Saint-Vit\'" id="item-1" class="defilItem" style="text-align:center;top:'+offsetItem[1]+'px;width:'+itemWidth+'px;height:'+itemHeight+'px;" ><img width="130" height="90" src="http://www.habitat25.fr/assets/images/nous_connaitre/nos_realisations/st_vit_petite.JPG" alt="-" /></div>';
itemHTML[2] = '<div onmousedown="javascript:window.location=\'/fr/nous-connaitre/nos-realisations/dernieres-realisations/seloncourt_photo\'" id="item-2" class="defilItem" style="text-align:center;top:'+offsetItem[2]+'px;width:'+itemWidth+'px;height:'+itemHeight+'px;" ><img width="130" height="90" src="http://www.habitat25.fr/assets/images/nous_connaitre/nos_realisations/seloncourt_petite.JPG" alt="-" /></div>';
itemHTML[3] = '<div onmousedown="javascript:window.location=\'/fr/nous-connaitre/nos-realisations/dernieres-realisations/Montbeliard_rue_du_Petit_Chenois\'" id="item-3" class="defilItem" style="text-align:center;top:'+offsetItem[3]+'px;width:'+itemWidth+'px;height:'+itemHeight+'px;" ><img width="130" height="90" src="http://www.habitat25.fr/assets/images/nous_connaitre/nos_realisations/montbeliard_petit_chenois_petite.JPG" alt="-" /></div>';
itemHTML[4] = '<div onmousedown="javascript:window.location=\'/fr/nous-connaitre/nos-realisations/dernieres-realisations/montbeliard_rue_du_parc\'" id="item-4" class="defilItem" style="text-align:center;top:'+offsetItem[4]+'px;width:'+itemWidth+'px;height:'+itemHeight+'px;" ><img width="130" height="90" src="http://www.habitat25.fr/assets/images/nous_connaitre/nos_realisations/montbeliard_parc_petite.jpg" alt="-" /></div>';
itemHTML[5] = '<div onmousedown="javascript:window.location=\'/fr/nous-connaitre/nos-realisations/dernieres-realisations/franois_photo\'" id="item-5" class="defilItem" style="text-align:center;top:'+offsetItem[5]+'px;width:'+itemWidth+'px;height:'+itemHeight+'px;" ><img width="130" height="90" src="http://www.habitat25.fr/assets/images/nous_connaitre/nos_realisations/franois_petite.JPG" alt="-" /></div>';
itemHTML[6] = '<div onmousedown="javascript:window.location=\'/fr/nous-connaitre/nos-realisations/dernieres-realisations/Commune_d_Anteuil_bis\'" id="item-6" class="defilItem" style="text-align:center;top:'+offsetItem[6]+'px;width:'+itemWidth+'px;height:'+itemHeight+'px;" ><img width="130" height="90" src="http://www.habitat25.fr/assets/images/nous_connaitre/nos_realisations/anteuil_petite.jpg" alt="-" /></div>';
itemHTML[7] = '<div onmousedown="javascript:window.location=\'/fr/nous-connaitre/nos-realisations/dernieres-realisations/Auxon-Dessous\'" id="item-7" class="defilItem" style="text-align:center;top:'+offsetItem[7]+'px;width:'+itemWidth+'px;height:'+itemHeight+'px;" ><img width="130" height="90" src="http://www.habitat25.fr/assets/images/nous_connaitre/nos_realisations/auxon_dessous_petite.JPG" alt="-" /></div>';
itemHTML[8] = '<div onmousedown="javascript:window.location=\'/fr/nous-connaitre/nos-realisations/dernieres-realisations/Montbeliard_rue_Courbet\'" id="item-8" class="defilItem" style="text-align:center;top:'+offsetItem[8]+'px;width:'+itemWidth+'px;height:'+itemHeight+'px;" ><img width="130" height="90" src="http://www.habitat25.fr/assets/images/nous_connaitre/nos_realisations/montbeliard_courbet_petite.jpg" alt="-" /></div>';
var nbItem = 8;
itemHTMLa[1] = '<img width="130" height="90" src="http://www.habitat25.fr/assets/images/nous_connaitre/nos_realisations/st_vit_petite.JPG" alt="-" />';
itemHTMLa[2] = '<img width="130" height="90" src="http://www.habitat25.fr/assets/images/nous_connaitre/nos_realisations/seloncourt_petite.JPG" alt="-" />';
itemHTMLa[3] = '<img width="130" height="90" src="http://www.habitat25.fr/assets/images/nous_connaitre/nos_realisations/montbeliard_petit_chenois_petite.JPG" alt="-" />';
itemHTMLa[4] = '<img width="130" height="90" src="http://www.habitat25.fr/assets/images/nous_connaitre/nos_realisations/montbeliard_parc_petite.jpg" alt="-" />';
itemHTMLa[5] = '<img width="130" height="90" src="http://www.habitat25.fr/assets/images/nous_connaitre/nos_realisations/franois_petite.JPG" alt="-" />';
itemHTMLa[6] = '<img width="130" height="90" src="http://www.habitat25.fr/assets/images/nous_connaitre/nos_realisations/anteuil_petite.jpg" alt="-" />';
itemHTMLa[7] = '<img width="130" height="90" src="http://www.habitat25.fr/assets/images/nous_connaitre/nos_realisations/auxon_dessous_petite.JPG" alt="-" />';
itemHTMLa[8] = '<img width="130" height="90" src="http://www.habitat25.fr/assets/images/nous_connaitre/nos_realisations/montbeliard_courbet_petite.jpg" alt="-" />';
itemHTMLb[1] = '<img width="200" height="140" src="http://www.habitat25.fr/assets/images/nous_connaitre/nos_realisations/st_vit_grande.JPG" alt="-" /><div style="background-color:#fff;-moz-opacity: 0.85;opacity:.85;filter: alpha(opacity=85);text-align:left;position:absolute;top:95px;left:0px;width:220px;height:50px;"><p>\r\n<strong>Commune de Saint-Vit</strong>\r\n</p>\r\n<p>\r\nConstruction de 27 logements locatifs THPE\r\n</p>\r\n</div><div style="text-align:left;position:absolute;top:95px;left:0px;width:220px;height:50px;"><p>\r\n<strong>Commune de Saint-Vit</strong>\r\n</p>\r\n<p>\r\nConstruction de 27 logements locatifs THPE\r\n</p>\r\n</div>';
itemHTMLb[2] = '<img width="200" height="140" src="http://www.habitat25.fr/assets/images/nous_connaitre/nos_realisations/seloncourt_grande.JPG" alt="-" /><div style="background-color:#fff;-moz-opacity: 0.85;opacity:.85;filter: alpha(opacity=85);text-align:left;position:absolute;top:95px;left:0px;width:220px;height:50px;"><p>\r\n<strong>Commune de Seloncourt</strong>\r\n</p>\r\n<p>\r\nConstruction de 15 logements locatifs\r\n</p>\r\n</div><div style="text-align:left;position:absolute;top:95px;left:0px;width:220px;height:50px;"><p>\r\n<strong>Commune de Seloncourt</strong>\r\n</p>\r\n<p>\r\nConstruction de 15 logements locatifs\r\n</p>\r\n</div>';
itemHTMLb[3] = '<img width="200" height="140" src="http://www.habitat25.fr/assets/images/nous_connaitre/nos_realisations/montbeliard_petit_chenois_grande.JPG" alt="-" /><div style="background-color:#fff;-moz-opacity: 0.85;opacity:.85;filter: alpha(opacity=85);text-align:left;position:absolute;top:95px;left:0px;width:220px;height:50px;"><p>\r\n<strong>Commune de&nbsp;Montb&eacute;liard - rue du Petit Ch&ecirc;nois</strong>\r\n</p>\r\n<p>\r\nConstruction de&nbsp;33 logements \r\n</p>\r\n</div><div style="text-align:left;position:absolute;top:95px;left:0px;width:220px;height:50px;"><p>\r\n<strong>Commune de&nbsp;Montb&eacute;liard - rue du Petit Ch&ecirc;nois</strong>\r\n</p>\r\n<p>\r\nConstruction de&nbsp;33 logements \r\n</p>\r\n</div>';
itemHTMLb[4] = '<img width="200" height="140" src="http://www.habitat25.fr/assets/images/nous_connaitre/nos_realisations/montbeliard_parc_grande.jpg" alt="-" /><div style="background-color:#fff;-moz-opacity: 0.85;opacity:.85;filter: alpha(opacity=85);text-align:left;position:absolute;top:95px;left:0px;width:220px;height:50px;"><p>\r\n<strong>Commune de Montb&eacute;liard</strong>&nbsp;<strong>- rue du Parc</strong>\r\n</p>\r\n<p>\r\nConstruction de 21 logements THPE \r\n</p>\r\n</div><div style="text-align:left;position:absolute;top:95px;left:0px;width:220px;height:50px;"><p>\r\n<strong>Commune de Montb&eacute;liard</strong>&nbsp;<strong>- rue du Parc</strong>\r\n</p>\r\n<p>\r\nConstruction de 21 logements THPE \r\n</p>\r\n</div>';
itemHTMLb[5] = '<img width="200" height="140" src="http://www.habitat25.fr/assets/images/nous_connaitre/nos_realisations/franois_grande.JPG" alt="-" /><div style="background-color:#fff;-moz-opacity: 0.85;opacity:.85;filter: alpha(opacity=85);text-align:left;position:absolute;top:95px;left:0px;width:220px;height:50px;"><p>\r\n<strong>Commune de Franois</strong>\r\n</p>\r\n<p>\r\nConstruction de 26 logements collectifs et pavillonnaires THPE\r\n</p>\r\n</div><div style="text-align:left;position:absolute;top:95px;left:0px;width:220px;height:50px;"><p>\r\n<strong>Commune de Franois</strong>\r\n</p>\r\n<p>\r\nConstruction de 26 logements collectifs et pavillonnaires THPE\r\n</p>\r\n</div>';
itemHTMLb[6] = '<img width="200" height="140" src="http://www.habitat25.fr/assets/images/nous_connaitre/nos_realisations/anteuil_grande.jpg" alt="-" /><div style="background-color:#fff;-moz-opacity: 0.85;opacity:.85;filter: alpha(opacity=85);text-align:left;position:absolute;top:95px;left:0px;width:220px;height:50px;"><p>\r\n<strong>Commune d&#39;Anteuil</strong>\r\n</p>\r\n<p>\r\nConstruction de 12 logements\r\n</p>\r\n</div><div style="text-align:left;position:absolute;top:95px;left:0px;width:220px;height:50px;"><p>\r\n<strong>Commune d&#39;Anteuil</strong>\r\n</p>\r\n<p>\r\nConstruction de 12 logements\r\n</p>\r\n</div>';
itemHTMLb[7] = '<img width="200" height="140" src="http://www.habitat25.fr/assets/images/nous_connaitre/nos_realisations/auxon_dessous_grande.JPG" alt="-" /><div style="background-color:#fff;-moz-opacity: 0.85;opacity:.85;filter: alpha(opacity=85);text-align:left;position:absolute;top:95px;left:0px;width:220px;height:50px;"><p>\r\n<strong>Commune d&#39;Auxon-Dessous - rue des Erables</strong> \r\n</p>\r\n<p>\r\nConstruction de 27 logements \r\n</p>\r\n</div><div style="text-align:left;position:absolute;top:95px;left:0px;width:220px;height:50px;"><p>\r\n<strong>Commune d&#39;Auxon-Dessous - rue des Erables</strong> \r\n</p>\r\n<p>\r\nConstruction de 27 logements \r\n</p>\r\n</div>';
itemHTMLb[8] = '<img width="200" height="140" src="http://www.habitat25.fr/assets/images/nous_connaitre/nos_realisations/montbeliard_courbet_grande.jpg" alt="-" /><div style="background-color:#fff;-moz-opacity: 0.85;opacity:.85;filter: alpha(opacity=85);text-align:left;position:absolute;top:95px;left:0px;width:220px;height:50px;"><p>\r\n<strong>Commune de&nbsp;Montb&eacute;liard - rue Courbet</strong>\r\n</p>\r\n<p>\r\nD&eacute;molition et <font class=\"hce-style1\">construction&nbsp;</font>de 31 logements&nbsp;\r\n</p>\r\n<p>\r\n&nbsp;\r\n</p>\r\n</div><div style="text-align:left;position:absolute;top:95px;left:0px;width:220px;height:50px;"><p>\r\n<strong>Commune de&nbsp;Montb&eacute;liard - rue Courbet</strong>\r\n</p>\r\n<p>\r\nD&eacute;molition et <font class=\"hce-style1\">construction&nbsp;</font>de 31 logements&nbsp;\r\n</p>\r\n<p>\r\n&nbsp;\r\n</p>\r\n</div>';


var dispoZoneOverHTML = new Array();

dispoZoneOverHTML[1] = 'Quartier de Planoise, Quartier de Planoise Zac, Quartier de Bregille,...<span class=\"mceEditorContainer\" id=\"mce_editor_2_parent\"><span class=\"mceToolbarContainer\" id=\"mce_editor_2_toolbar\"></span></span>\r\n';
dispoZoneOverHTML[2] = 'Quartier de Petite Hollande, Montb&eacute;liard - Batterie du Parc, Bavans, Maiche, Grand Charmont\r\n';
dispoZoneOverHTML[3] = 'Baume les Dames, Cleron, Etalans, Fertans, Laissey, Levier, Jougne, Novillars, Ornans, Montgesoye, Mouthier Hautepierre, Pelousey, Rougemont, Sancey le Grand, Sa&ocirc;ne, Valdahon, Vercel, Villiers le Lac, Vuillafans,...\r\n';
nbDispoZoneItem = 3;


var allHTML = '';
for (i=1; i<=nbItem; i++) {
  allHTML = allHTML + itemHTML[i] ;
}
minOffset = -((nbItem-1)*itemDist-visibleHeight);
maxOffset = (nbItem-1)*itemDist;


var middle=Math.floor((visibleHeight) / 2);
var offsetHeight=0;
var dynamicZone=null;
var pitch=0;
var y=middle;
var x = 0;
var dispox = 0;
var dispoy = 0;
var trigger=false;
var trigOver = true;

// Valeurs à modifier éventuellement :
var resol=0.3;		// == Résolution du déplacement (doit être >=1)
var hysteresis=75;	// == Distance en pixels entre le centre et les frontières 
			// de la zone morte (zone dans laquelle le curseur ne fait pas déplacer
			// la zone dynamique) (doit être >=0)
var timeOffset=50;	// == Durée entre deux déplacements en ms (doit être >=0)
//var height=2000;		// == Largeur de l'objet à déplacer en pixels (doit être >=0)


// Calcule la nouvelle position et déplace la zone dynamique
function move(){

	// Calcul de l'éventuel mouvement
        
	if(Math.abs(y-middle)>hysteresis && trigger){
		pitch=((Math.abs(y-middle)-hysteresis)^resol)/2000;
		
		//offsetHeight=Math.max(Math.min(offsetHeight+((-1)^(y-middle))*pitch,0),2*middle-height);
		decal = Math.floor(((-1)^(y-middle))*pitch);
		
		var isMove = new Array();
		for (i=1; i<=nbItem; i++) {
		  isMove[i] = false;
		  var newOffset = offsetItem[i] + decal;
      offsetItem[i] = offsetItem[i] + decal;
      
      if(newOffset<=minOffset) {
        var extItem = i+(nbItem-1);
        if(extItem>nbItem) {
          extItem=extItem-nbItem;
        }
        if(isMove[extItem]==true){
          offsetItem[i] = offsetItem[extItem] + itemDist;
        }
        else {
          offsetItem[i] = offsetItem[extItem] + itemDist + decal;
        }
        isMove[i] = true;
      }
      if(newOffset>=maxOffset) {
        var extItem = i-(nbItem-1);
        if(extItem<1) {
          extItem=extItem+nbItem;
        }
        if(isMove[extItem]==true){
          offsetItem[i] = offsetItem[extItem] - itemDist;
        }
        else {
          offsetItem[i] = offsetItem[extItem] - itemDist + decal;
        }
        isMove[i] = true;
      }
      if (isMove[i] == false) {
        offsetItem[i] = newOffset;
      }
      isMove[i] = true;
      if(itemO[i].style.top!=(offsetItem[i]+'px')){
        itemO[i].style.top = offsetItem[i]+'px';
      }
    }
    //for (i=1; i<=nbItem; i++) {
    //  itemO[i].style.top = offsetItem[i]+'px';
    //}
		
	}
	
	// Appel récursif à la fonction de déplacement

        /*if(document.all && lastItem) {
          overOffsetTop = offsetItem[lastItem]-1;
          overOffsetBottom = offsetItem[lastItem] + itemHeight + 1;
          if (y>overOffsetBottom) {
            defilOver(false,lastItem);
          }
          if (y<overOffsetTop) {
            defilOver(false,lastItem);
          }
        }*/

	timer = setTimeout('move()',timeOffset);

  
  
}

function defilTimer () {
  theTimer = theTimer + 1;
  var id = defilTrigId;
  if (theTimer>5) {
    theTimer = 0;
    if(defilTrig == true) {
      if(defilTrigAction){
        if(lastItem!=false && lastItem!=id){
          itemO[lastItem].innerHTML = itemHTMLa[lastItem];
        }
        itemO[id].innerHTML = itemHTMLb[id];
        lastItem = id;
      }
      else {
        itemO[id].innerHTML = itemHTMLa[id];
      }
      defilTrig = false;
    }
  }
  setTimeout('defilTimer()',10);
}

// Fonction (dés)activant le déplacement
function trigMove(value){
	trigger=value;
}

function findPos(el) {

	var x = y = 0;

	if(el.offsetParent) {
		x = el.offsetLeft;
		y = el.offsetTop;

		while(el = el.offsetParent) {
			x += el.offsetLeft;
			y += el.offsetTop;
		}
	}
	return {'x':x, 'y':y};
}

function defilOver(trig,id) {
  if(trig){
  //  itemO[id].innerHTML = itemHTMLb[id];
    defilTrigAction = true;
    defilTrigId = id;
  }
  else {
  //  itemO[id].innerHTML = itemHTMLa[id];
    defilTrigAction = false;
    defilTrigId = id;
  }
  defilTrig = true;
}

function dispoZoneOver(trig,id,pos) {
  var offSet = pos.y - 116 - O['dispoZone'].scrollTop ; // 146
  var maxY = offSet + 130;
  if(maxY<390){
  if(trig){
    dispoZoneItemBorderO[id].style.borderLeft = "1px solid #ffffff";
    dispoZoneItemBorderO[id].style.borderBottom = "1px solid #ffffff";
    dispoZoneItemBorderO[id].style.borderRight = "1px solid #ffffff";
    dispoZoneItemBorderO[id].style.borderTop = "1px solid #ffffff";
    O['dispoZoneOverDivTxtB'].style.display = "none";
    O['dispoZoneOverDivB'].style.display = "none";
    dispoZoneItemBorderO[id].style.borderLeft = "1px solid "+dispoBorderColor+"";
    dispoZoneItemBorderO[id].style.borderTop = "1px solid "+dispoBorderColor+"";
    dispoZoneItemBorderO[id].style.borderRight = "1px solid "+dispoBorderColor+"";
    dispoZoneItemBorderO[id].style.borderBottom = "1px solid #ffffff";
    O['dispoZoneOverDiv'].style.top = offSet+"px";
    O['dispoZoneOverDivTxt'].style.top = offSet+"px";
    O['dispoZoneOverDivTxt02'].innerHTML = dispoZoneOverHTML[id];
    O['dispoZoneOverDiv'].style.display = "block";
    O['dispoZoneOverDivTxt'].style.display = "block";
    trigMove(false);
  }
  else {
    O['dispoZoneOverDivTxtB'].style.display = "none";
    O['dispoZoneOverDivB'].style.display = "none";
    O['dispoZoneOverDivTxt'].style.display = "none";
    O['dispoZoneOverDiv'].style.display = "none";
    for (i=1; i<=nbDispoZoneItem; i++) {
      dispoZoneItemBorderO[i].style.borderLeft = "1px solid #ffffff";
      dispoZoneItemBorderO[i].style.borderRight = "1px solid #ffffff";
      dispoZoneItemBorderO[i].style.borderTop = "1px solid #ffffff";
      dispoZoneItemBorderO[i].style.borderBottom = "1px solid #ffffff";
    }
    trigMove(false);
  }
  }
  else {
  if(trig){
    dispoZoneItemBorderO[id].style.borderLeft = "1px solid #ffffff";
    dispoZoneItemBorderO[id].style.borderTop = "1px solid #ffffff";
    dispoZoneItemBorderO[id].style.borderRight = "1px solid #ffffff";
    dispoZoneItemBorderO[id].style.borderBottom = "1px solid #ffffff";
    O['dispoZoneOverDivTxt'].style.display = "none";
    O['dispoZoneOverDiv'].style.display = "none";
    offSet = pos.y - 124 - 210 - O['dispoZone'].scrollTop; // 150
    dispoZoneItemBorderO[id].style.borderLeft = "1px solid "+dispoBorderColor+"";
    dispoZoneItemBorderO[id].style.borderBottom = "1px solid "+dispoBorderColor+"";
    dispoZoneItemBorderO[id].style.borderRight = "1px solid "+dispoBorderColor+"";
    dispoZoneItemBorderO[id].style.borderTop = "1px solid #ffffff";
    O['dispoZoneOverDivB'].style.top = offSet+"px";
    O['dispoZoneOverDivTxtB'].style.top = offSet+"px";
    O['dispoZoneOverDivTxt01B'].innerHTML = dispoZoneOverHTML[id];
    O['dispoZoneOverDivB'].style.display = "block";
    O['dispoZoneOverDivTxtB'].style.display = "block";
    trigMove(false);
  }
  else {
    O['dispoZoneOverDivTxt'].style.display = "none";
    O['dispoZoneOverDiv'].style.display = "none";
    O['dispoZoneOverDivTxtB'].style.display = "none";
    O['dispoZoneOverDivB'].style.display = "none";
    for (i=1; i<=nbDispoZoneItem; i++) {
      dispoZoneItemBorderO[i].style.borderLeft = "1px solid #ffffff";
      dispoZoneItemBorderO[i].style.borderRight = "1px solid #ffffff";
      dispoZoneItemBorderO[i].style.borderTop = "1px solid #ffffff";
      dispoZoneItemBorderO[i].style.borderBottom = "1px solid #ffffff";
    }
    trigMove(false);
  }
  }
}


window.onload = function(){

  O['control'] = findDOM('control',0);

  O['dispoZone'] = findDOM('dispoZone',0);
  O['dispoZoneOver'] = findDOM('dispoZoneOver',0);

  O['dispoZoneOverDivTxt02'] = findDOM('dispoZoneOverDivTxt02',0);
  O['dispoZoneOverDiv'] = findDOM('dispoZoneOverDiv',0);
  O['dispoZoneOverDivTxt'] = findDOM('dispoZoneOverDivTxt',0);
  O['dispoZoneOverDivTxt'].style.display = "none";
  O['dispoZoneOverDiv'].style.display = "none";

  O['dispoZoneOverDivTxt01B'] = findDOM('dispoZoneOverDivTxt01B',0);
  O['dispoZoneOverDivB'] = findDOM('dispoZoneOverDivB',0);
  O['dispoZoneOverDivTxtB'] = findDOM('dispoZoneOverDivTxtB',0);
  O['dispoZoneOverDivTxtB'].style.display = "none";
  O['dispoZoneOverDivB'].style.display = "none";

  O['defilZone'] = findDOM('defilZone',0);
  O['defilZone'].innerHTML = allHTML;

  O['defilZone'].onmouseout = function(e) {
        if (!e) var e = window.event;
	var tg = (window.event) ? e.srcElement : e.target;
	if (tg.nodeName != 'DIV') return;
	var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
	while (reltg != tg && reltg.nodeName != 'BODY')
		reltg= reltg.parentNode
	if (reltg== tg) return;

      //if(lastItem!=false){
      //  defilOver(false,lastItem);
      //}
    };

  for (i=1; i<=nbItem; i++) {
    itemO[i] = findDOM('item-'+i,0);

    itemO[i].onmouseover = function(e) {
      var id = this.id.substr(5,1);
      //if(lastItem!=false && lastItem!=id){
      //  defilOver(false,lastItem);
      //}
      defilOver(true,id);
    };
    itemO[i].onmouseout = function(e) {
        if (!e) var e = window.event;
	var tg = (window.event) ? e.srcElement : e.target;
	if (tg.nodeName != 'DIV') return;
	var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
	while (reltg != tg && reltg.nodeName != 'BODY')
		reltg= reltg.parentNode
	if (reltg== tg) return;

      var id = this.id.substr(5,1);
      defilOver(false,id);

    };
  }
  
	O['defilZone'].onmousemove = function(e) {
		var ev = e || window.event;
		var posb = findPos(this);
		/*x = ev.clientX - posb.x + document.body.scrollLeft;*/
		y = ev.clientY - posb.y + document.body.scrollTop;
	};


  O['dispoZone'].onscroll = function(e) {
    O['dispoZoneOverDivTxt'].style.display = "none";
    O['dispoZoneOverDiv'].style.display = "none";
    O['dispoZoneOverDivTxtB'].style.display = "none";
    O['dispoZoneOverDivB'].style.display = "none";
    for (i=1; i<=nbDispoZoneItem; i++) {
      dispoZoneItemBorderO[i].style.borderLeft = "1px solid #ffffff";
      dispoZoneItemBorderO[i].style.borderRight = "1px solid #ffffff";
      dispoZoneItemBorderO[i].style.borderTop = "1px solid #ffffff";
      dispoZoneItemBorderO[i].style.borderBottom = "1px solid #ffffff";
    }
  }

  O['dispoZone'].onmouseout = function(e) {
    var pos = findPos(this);
      if(defilLastItem!=false){
        dispoZoneOver(false,defilLastItem,pos);
      }
  }

  O['dispoZoneOverDivB'].onmouseover = function(e) {
    var pos = findPos(this);
      if(defilLastItem!=false){
        dispoZoneOver(false,defilLastItem,pos);
      }
  }

  O['dispoZoneOverDiv'].onmouseover = function(e) {
    var pos = findPos(this);
      if(defilLastItem!=false){
        dispoZoneOver(false,defilLastItem,pos);
      }
  }

for (i=1; i<=nbDispoZoneItem; i++) {
    dispoZoneItemO[i] = findDOM('dispoZoneItem-'+i,0);
    dispoZoneItemO[i].onmouseout = function(e) {
        if (!e) var e = window.event;
	var tg = (window.event) ? e.srcElement : e.target;
	if (tg.nodeName != 'DIV') return;
	var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
	while (reltg != tg && reltg.nodeName != 'BODY')
		reltg= reltg.parentNode
	if (reltg== tg) return;
      var pos = findPos(this);
      if(defilLastItem!=false){
        dispoZoneOver(false,defilLastItem,pos);
      }
      trigMove(false);
    };

    dispoZoneSumTxtO[i] = findDOM('dispoZoneSumTxt-'+i,0);
    dispoZoneSumTxtO[i].onmouseover = function(e) {
      var pos = findPos(this);
      if(defilLastItem!=false){
        dispoZoneOver(false,defilLastItem,pos);
      }
      trigMove(false);
    };

    dispoZoneImgO[i] = findDOM('dispoZoneImg-'+i,0);
    dispoZoneImgO[i].onmouseover = function(e) {
      var pos = findPos(this);
      if(defilLastItem!=false){
        dispoZoneOver(false,defilLastItem,pos);
      }
      trigMove(false);
    };

    dispoZoneOverO[i] = findDOM('dispoZoneOver-'+i,0);
    dispoZoneItemBorderO[i] = findDOM('dispoZoneItemBorder-'+i,0);
    dispoZoneOverO[i].onmouseover = function(e) {
      var pos = findPos(this);
      var id = this.id.substr(14,1);
      if(defilLastItem!=false && defilLastItem!=id){
        dispoZoneOver(false,defilLastItem,pos);
      }
      dispoZoneOver(true,id,pos);
      trigMove(false);
    };
    dispoZoneOverO[i].onmouseout = function(e) {
        if (!e) var e = window.event;
	var tg = (window.event) ? e.srcElement : e.target;
	if (tg.nodeName != 'DIV') return;
	var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
	while (reltg != tg && reltg.nodeName != 'BODY')
		reltg= reltg.parentNode
	if (reltg== tg) return;
      var id = this.id.substr(14,1);
      var pos = findPos(this);
      dispoZoneOver(false,id,pos);
      defilLastItem = id;
      trigMove(false);
    };
}

  unclicO['unclicContent'] = findDOM('unclicContent',0);
  unclicO['unclicMarche'] = findDOM('unclicMarche',0);
  unclicO['unclicCarto'] = findDOM('unclicCarto',0);
  unclicO['unclicContact'] = findDOM('unclicContact',0);

  unclicO['unclicContent'].innerHTML = unclicHTML['Marche'];

    unclicO['unclicMarche'].onclick = function(e) {
      var id = this.id;
      unclicO['unclicContent'].innerHTML = unclicHTML['Marche'];
      trigMove(false);
    };

   unclicO['unclicMarche'].onmouseout = function(e) {
      var id = this.id;
      this.src = '/assets/templates/habitat25.com/images/btn_marche_out.jpg';
      trigMove(false);
    };

   unclicO['unclicMarche'].onmouseover = function(e) {
      var id = this.id;
      this.src = '/assets/templates/habitat25.com/images/btn_marche_over.jpg';
      trigMove(false);
    };

    unclicO['unclicCarto'].onclick = function(e) {
      var id = this.id;
      unclicO['unclicContent'].innerHTML = unclicHTML['Carto'];
      trigMove(false);
    };

   unclicO['unclicCarto'].onmouseout = function(e) {
      var id = this.id;
      this.src = '/assets/templates/habitat25.com/images/btn_carto_out.jpg';
      trigMove(false);
    };

   unclicO['unclicCarto'].onmouseover = function(e) {
      var id = this.id;
      this.src = '/assets/templates/habitat25.com/images/btn_carto_over.jpg';
      trigMove(false);
    };

    unclicO['unclicContact'].onclick = function(e) {
      var id = this.id;
      unclicO['unclicContent'].innerHTML = unclicHTML['Contact'];
      trigMove(false);
    };

   unclicO['unclicContact'].onmouseout = function(e) {
      var id = this.id;
      this.src = '/assets/templates/habitat25.com/images/btn_contact_out.jpg';
      trigMove(false);
    };

   unclicO['unclicContact'].onmouseover = function(e) {
      var id = this.id;
      this.src = '/assets/templates/habitat25.com/images/btn_contact_over.jpg';
      trigMove(false);
    };

};

document.onload = move();
document.onload = defilTimer();