/***************************************
*
*  bibliothèque de programmes Javascript
*  pour effectuer des zooms en place.
*
*  Programme préparé dans le cadre de l'enseignement
*  de l'Université de Caen par
*  - Hervé Le Crosnier (herve@info.unicaen.fr)
*  - Jean-Marc Lecarpentier (jml@info.unicaen.fr)
*
*  Licence GPL (http://www.gnu.org/copyleft/gpl.html)
*
*  Pour mieux connaître les enseignements proposés
*  pour la programmation de sites internet :
*  http://www.info.unicaen.fr
*
*  Dans le code html, on dispose d'une division
*  cachée en position: absolute nommée "reservoir"
*  soit :
*
*  <div id="zoom">
*  <div class="hautZoom" onclick="cache()">
*     <a href="javascript:void(0)" onclick="cache()">Fermer</a></div>
*  <div class="imageZoom" onclick="cache()">
*      <a href="javascript:void(0)" onclick="cache()">
*      <img id="imZoom" src="images/blank.gif" alt="" /></a></div>
*  </div><!-- fin de la div de Zoom -->
*
*  et la feuille de style correspondante :
*
*  #zoom { 
*    visibility: hidden;
*    background-color: black;
*    color: white;
*    margin: auto;
*    width: 70%;
*    min-width: 750px;
*    position: absolute;
*    left: 100px;
*   }
*
*  #zoom .hautZoom { 
*    background-color: black;
*    color: white;  
*    text-align: right;
*    margin: auto;
*    padding: 5px 5px 15px 0px;
*   }
*  #zoom .imageZoom a { 
*    background-color: black;
*    color: white;  
*    text-decoration: none;
*    text-align: right;
*   }
*  #zoom .hautZoom a { 
*    text-align: right;
*    background-color: black;
*    color: white;  
*    text-decoration: none;
*   }
*  #zoom .imageZoom { 
*    text-align: center;
*    margin: auto;
*    padding: 20px;
*   }
*  #zoom .imageZoom img { 
*    border: 0px;
*    text-align: center;
*    margin: 20px 0px 20px 0px;
*    margin: auto;
*   }
*
*  On considère que les imagettes sont
*  du type  toto_250.jpg et les grandes images
*  sont nommées toto_700.jpg.
*
*  On peut considérer d'autres conventions,
*  comme de nommer les imagettes toto_thumb.png
*  et la grande image équivalente toto.png
*  dans ce cas, on change la ligne
*  cible=O.src.replace("250", "700");
*  par
*  cible=O.src.replace("_thumb", "");
*
*  ce programme fonctionne sous les navigateurs
*  connus (firefox, mozilla et IE au delà de 5
*
*  La division apparaît près du bord de la
*  zone de visualisation (viewport) et non en
*  fonction de la page.
*  
*  le système de preload des images permet 
* d'avoir des effets immédiats lorsque l'on
* clique sur une imagette.
*  Il est inspiré de
*  http://www.webreference.com/programming/javascript/gr/column3/
*
*  On a choisi de laisser une partie visible de la
*  page en dessous, afin d'inciter l'usager
* néophyte à cliquer et non à utiliser la touche
*  "back" de son navigateur.
*
*****************************************/

preload=false;


function zoom(O) {
/*    if (!preload) { 
     alert("Les images ne sont pas encore toutes chargées. Cliquez à nouveau sur l'image après avoir fermé cette alerte"); 
    } else { */
        if (O.src.match("thumb")) {
	   cible=O.src.replace("thumb", "web");
        }
        if (O.src.match("icone")) {
	   cible=O.src.replace("icone", "web");
        }
	reservoir=document.getElementById("zoom");
	reservoir.style.visibility="hidden";
	newIm=new Image;
	newIm.src=cible;
	newIm.alt=O.alt;
        newIm.style.height=O.style.height;
	document.getElementById("imZoom").src=newIm.src;
	document.getElementById("imZoom").alt=newIm.alt;
	if (window.innerHeight) {
	    pos = window.pageYOffset;
	} else if (document.documentElement && document.documentElement.scrollTop) {
	    pos = document.documentElement.scrollTop;
	} else if (document.body) {
	    pos = document.body.scrollTop;
	}
	reservoir.style.top=(pos + 5)+"px";
	reservoir.style.visibility='visible';
 /*   } */
}

function cache() {
  reservoir=document.getElementById("zoom");
  reservoir.style.visibility="hidden";
document.getElementById("imZoom").src='http://zerlo.com/chpeugeot/images/blank.gif';
}


function onPreloadOK(images, nbImages) {
  preload=true;
}


function preparerPreLoad() {
  images=new Array();
  for (i=0; i<document.images.length; i++) {
    if (document.images[i].src.match("thumb")) {
      newSrc=document.images[i].src.replace("thumb", "web");
    } else {
      if (document.images[i].src.match("icone")) {
        newSrc=document.images[i].src.replace("icone", "web");
      }
    }
    images.push(newSrc);
  }
  ip= new ImagePreloader(images, onPreloadOK);
}


/***********************************
*
*  Image préloader
*  pris sur :
*  http://www.webreference.com/programming/javascript/gr/column3/
*
************************************/

function ImagePreloader(images, callback) {

   // store the call-back
   this.callback = callback;

   // initialize internal state.
   this.nLoaded = 0;
   this.nProcessed = 0;
   this.aImages = new Array;

   // record the number of images.
   this.nImages = images.length;

   // for each image, call preload()
   for ( var i = 0; i < images.length; i++ )
      this.preload(images[i]);
}

ImagePreloader.prototype.preload = function(image)
{
   // create new Image object and add to array
   var oImage = new Image;
   this.aImages.push(oImage);

   // set up event handlers for the Image object
   oImage.onload = ImagePreloader.prototype.onload;
   oImage.onerror = ImagePreloader.prototype.onerror;
   oImage.onabort = ImagePreloader.prototype.onabort;

   // assign pointer back to this.
   oImage.oImagePreloader = this;
   oImage.bLoaded = false;

   // assign the .src property of the Image object
   oImage.src = image;
}

ImagePreloader.prototype.onComplete = function()
{
   this.nProcessed++;
   if ( this.nProcessed == this.nImages ) {
      this.callback(this.aImages, this.nLoaded);
   }
}

ImagePreloader.prototype.onload = function()
{
   this.bLoaded = true;
   this.oImagePreloader.nLoaded++;
   this.oImagePreloader.onComplete();
}

ImagePreloader.prototype.onerror = function()
{
   this.bError = true;
   this.oImagePreloader.onComplete();
}

ImagePreloader.prototype.onabort = function()
{
   this.bAbort = true;
   this.oImagePreloader.onComplete();
}

