/* GLOBALS : Settings of the diaporama */
  //ARRAY containing the pictures to set in the diaporama
  var tab_img = new Array;    
  tab_img[0] = '../newphoto/home/PhotoFront.jpg'
  tab_img[1] = '../newphoto/home/anim_ext.JPG'        
  tab_img[2] = '../newphoto/home/anim_ext2.JPG'        
  tab_img[3] = '../newphoto/home/panoramiquechristo.JPG'        
  tab_img[4] = '../newphoto/home/anim_pyra3.JPG'        
  tab_img[5] = '../newphoto/home/anim_pyra.JPG' 
  //tab_img[6] = '../newphoto/home/anim_sal.JPG'       
  /* Diaporama Title */
  var diaptitle = ""
  /* N seconds of fading time     */
  var fadeLength = 1; 
  /* M times the fading time     */
  var timeout = 2;    
  /* Standby : 1-we start on pause / 0-to start on fade */
  var standby = 1;    
  /* IMAGE width : 566px */
  /* IMAGE height : 373px */
  /* END GLOBALS : Settings of the diaporama */
  
  /* inner div opacity : 0 and up to 100 to hide the outer div */
  var opacInner = 0;
  /* Current picture to display : index 0 of the picture array */
  var next = 0;

  /* timer pointer */
  var timer;

  /* user direct choice */
  var UserChoice = 0xFFFFFFFF;

  /* activate trace : 1-Activate / 0-deactivate */
  var traceActivated = 0;

  /* TRACING function : writes all needed information in the inner div */  
  function traceAll(innerDivid, outerDivid) {
    if (traceActivated == 1) {
      document.getElementById(innerDivid).innerHTML = "Opac= <b>"+opacInner+"</b><br>"
                                                  + "Next= <b>" + next +"</b><br>"
                                                 + "Standby= <b>" + standby +"</b><br>"
                                                 + "outer="+ document.getElementById(outerDivid).style.backgroundImage +"<br>"
                                                 + "inner="+ document.getElementById(innerDivid).style.backgroundImage +"<br>";
    }
  }

  /* INITIALIZATION function : sets default picture, create picture list, starts process */
  function init (innerDivid, outerDivid, listDivid, titleDivId) {
    /* INFORMATION ON FADING AND PAUSE */
    traceAll(innerDivid, outerDivid);

    /* We set the Diaporama Title */
    if (diaptitle != "") {
      document.getElementById(titleDivId).innerHTML = diaptitle;     
    } else {
      document.getElementById(titleDivId).style.height = "0px";     
      document.getElementById(titleDivId).style.fontSize = "0px";     
      document.getElementById(titleDivId).style.backgroundColor = "white";
      document.getElementById(titleDivId).style.border = "0px solid";
    }
    /* We set the background image of the inner div (if that was not already done) */
    document.getElementById(outerDivid).style.backgroundImage = "url("+tab_img[0]+")";     

     setList(listDivid);
    updateList(listDivid);

    /* Next picture to display : index 1 of the picture array */
    next = 1;

    /* launch an action on a regular basis                     */
    /* ------------------------------------------------------ */
    /* if fadeLength is 1 seconds :                            */
    /* ------------------------------------------------------ */
    /* 10 x 1 = the function is called every 10millisecondes  */
    /* there are 100 opacity levels 10 x 100 = 1 second       */
    /* ------------------------------------------------------ */
    /* if fadeLength is 3 seconds :                            */
    /* ------------------------------------------------------ */
    /* 10 x 3 = the function is called every 30millisecondes  */
    /* there are 100 opacity levels 30 x 100 = 3 secondes     */
    timer = setTimeout("changeOpac('"+innerDivid+"','"+outerDivid+"','"+listDivid+"')", fadeLength * 10);
    /* We could hav use : setInterval("changeOpac()", fadeLength * 10);  */
    /* and avoid calling setTimeout("changeOpac()", fadeLength * 10);    */
    /* at the end of the changeOpac function, but the problem with        */
    /* setInterval is that it does not wait for the function to be ended */
    /* to relaunch it again : so we could overload the navigator         */
    
  }
 
  /* OPACITY MANAGEMENT function : sets the opacity of a div for all navigators */
  function setOpacity(divid, opac) {
    /* OPACITY manipulation for various browsers : */
    var object = document.getElementById(divid).style;
    object.opacity = (opac / 100);
    object.MozOpacity = (opac / 100);
    object.KhtmlOpacity = (opac / 100);
    object.filter = "alpha(opacity=" + opac + ")";
  }

  /* MAIN PROCESS function that does everything : fade and pause */
  function changeOpac(innerDivid, outerDivid, listDivid) 
  {  
    if (UserChoice != 0xFFFFFFFF) {
      opacInner = 0;
      standby = 1;
      /* next is choice plus 1 */
      document.getElementById(outerDivid).style.backgroundImage = "url("+tab_img[UserChoice]+")";
      document.getElementById(innerDivid).style.backgroundImage = "url("+tab_img[UserChoice]+")";
      setOpacity(innerDivid, 100);
      //alert("selected is "+UserChoice);
      next = UserChoice;      
      updateList(listDivid);
      next++;
      if (next > (tab_img.length-1)) {
        next = 0;
      }
      UserChoice = 0xFFFFFFFF;
    } else {
      /* INFORMATION ON FADING AND PAUSE : to be under comment tags */
      traceAll(innerDivid, outerDivid);

      if (standby == 0) {
        /* If we are not in a standby phase */
    
        /* OPACITY manipulation for various browsers : */
        setOpacity(innerDivid, opacInner);
        /* We increment the opacity for the next call */
        opacInner+=10;
        /* We set the background image of the inner div (if that was not already done) */
        document.getElementById(innerDivid).style.backgroundImage = "url("+tab_img[next]+")";     
        if ((opacInner%100 == 0) && (opacInner != 0))  {
          /* If we've reached the opacity of 100 (inner is totally shown) */
          /* Reset the opacity to 0 for the next fading effect */
          opacInner = 0;
          /* Set the outer div background image (that is now hidden by the inner div) */
          /* to the background image of the inner div  */
          document.getElementById(outerDivid).style.backgroundImage = "url("+tab_img[next]+")";
          /* get the index of the next picture we'll display */
          next++;
          if (next > (tab_img.length-1)) {
            next = 0;
          }
          /* Get in standby : for the user to have time appreciate the new picture */
          standby = 1;
        }
      } else {
        /* If we are not in a standby phase */
        /* Increment standby */
        standby++; 
    
        /* ----------------------------------------------------------------------- */
        /* if fadeLength is 1 seconds the function is called every 10millisecondes */
        /* then if timeout is 1 we will wait until standby equals :                 */
          /* (1 x 100) = 100 : 100 x 10 milli = 1 second                             */
        /* ----------------------------------------------------------------------- */
        /* if fadeLength is 3 seconds the function is called every 30millisecondes */
        /* then if timeout is 2 we will wait until standby equals :                 */
        /* (2 x 100) = 200 : 200 x 30 milli = 6 seconds                             */
        if ((timeout == 0) || ((standby % (timeout*100)) == 0)) {
          standby = 0;
          updateList(listDivid);
        }
      }
    }
    /* Relaunch the process */
    timer = setTimeout("changeOpac('"+innerDivid+"','"+outerDivid+"','"+listDivid+"')", fadeLength * 10);
  }
  
  /* PICTURE LIST DIV creation  */
  function setList(listDivid) {
    var debdiv     = "<div id=\"lstItem_";
    var mid1div    = "\" class=\"item\" onclick=\"javascript:directChoice(";
    var mid2div    = ");\">";
    var debImg     = "<img src=\"";
    var finImg     = "\">";
    var findiv     = "</div>";
    var cnt = next;
    var i = 0;
    var content = "";
    /* file the list div with all the miniatures of the pictures */
    for (i=0; i< tab_img.length; i++)  {
      if (cnt > (tab_img.length-1)) {
        cnt = 0;
      }
      content += debdiv+cnt+mid1div+cnt+mid2div+debImg+tab_img[cnt]+finImg+findiv;
      cnt++;
    }
    content += "<br>";
    document.getElementById(listDivid).innerHTML = content;
  }

  /* PICTURE LIST DIV ITEM SELECTED update */
  function updateList(listDivid) {
    var cnt = next;
    if (cnt == 0) {
      cnt = tab_img.length-1;
    } else {
      cnt--;
    }
    for (i=0; i< tab_img.length; i++)  {
      document.getElementById("lstItem_"+i).className = "item";
    }
    document.getElementById("lstItem_"+next).className = "itemSelected";
  }

  /* SET the user choice that will override all process the next time the timeout occurs */
  function directChoice(choice) {
    UserChoice = choice;
  }