//------------------[PUZZLE.JS]---DHTML/routines---------------------
//-------------------------------------------------------------------------
//° ·.¸¸,ø¤º°°º¤ø,¸¸.·°Copyright@-2004-VB'Breizh °·.¸¸,ø¤º°°º¤ø,¸¸.·°
//-------------------------------------------------------------------------
//---http://gilles.saunier.free.fr---gilles.saunier@neuf.fr---------------
//Cette librairie est libre de droit sous réserve de ne pas modifier cet en-tête
//si vous la perfectionnez ou l'enrichissez de nouvelles fonctions utiles,... 
//...ce serait sympa de m'en faire part.
//-------------------------------------------------------------------------
//@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
//-------------------------------------------------------------------------
var nn4 = document.layers;
var nn6 = document.getElementById && !document.all
var nn = nn4 || nn6;
var ie = document.all && !nn;
var DHTML = document.getElementById || document.all || document.layers;
//-----------------------------------------
var tab_image = new Array();
var tab_pieceok = new Array();
var Puzzle = new Object();
//-----------------------------------------
var mouseX, mouseY;
var deltaX = 0;
var deltaY = 0;
var calqueGD;
var dragmove = false;
//-----------------------------------------
if (nn6) {
  document.addEventListener("mousedown", js_down, true);
  document.addEventListener("mouseup", js_up, true);
  document.addEventListener("mousemove", js_move, true);}
else {
  if (nn4) {
    document.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP | Event.MOUSEMOVE);}
  document.onmousedown = js_down;
  document.onmouseup = js_up;
  document.onmousemove = js_move;
  document.onselectstart = js_check;}
//-----------------------------------------
function js_check() {
  if ((calqueGD !=null) && (calqueGD.length>0)) {
    return(false);}}
//-----------------------------------------
function js_move(e) {
  if (nn) {
       mouseX = e.pageX; mouseY = e.pageY;}
  else {
       mouseX = event.clientX + document.body.scrollLeft;
       mouseY = event.clientY + document.body.scrollTop;}
  if (dragmove) {
       move_absolute(calqueGD, mouseX-deltaX, mouseY-deltaY);}
return(false);
}
//-----------------------------------------
function js_down(e) {
  calqueGD = "";
  //var clicX = mouseX;
  //var clicY = mouseY;
  for(var i=0; i<Puzzle.nbH; i++) {
  for(var j=0; j<Puzzle.nbV; j++) {
      var posX = parseInt(getStyle("puzzle"+i+j).left)+i*Puzzle.W;
      var posY = parseInt(getStyle("puzzle"+i+j).top)+j*Puzzle.H;
      if ( (mouseX>posX) && (mouseY>posY) && (mouseX<posX+Puzzle.W) &&             (mouseY<posY+Puzzle.H) && moveable("puzzle"+i+j)) {
              calqueGD = "puzzle"+i+j;}}}
  if ((calqueGD != null) && (calqueGD.length > 0) && moveable(calqueGD)) {
    getStyle(calqueGD).zIndex = ++Puzzle.ordre;
    var posX = parseInt(getStyle(calqueGD).left);
    var posY = parseInt(getStyle(calqueGD).top);
    if (!isNaN(posX) && !isNaN(posY)) {
        deltaX = mouseX - posX;
        deltaY = mouseY - posY;}
    dragmove = true;}}
//-----------------------------------------
function moveable(piece) {
  var ww = true;
  for(var i=0; i<tab_pieceok.length; i++)
        ww &= tab_pieceok[i] != piece;
return(ww);}
//-----------------------------------------
function js_up(e) {
  dragmove = false;
  if ((calqueGD.length > 0) && moveable(calqueGD)) {
    var nbX = calqueGD.substr(6,1);
    var nbY = calqueGD.substr(7,1);
    var caseX = Puzzle.X + nbX * Puzzle.W;
    var caseY = Puzzle.Y + nbY * Puzzle.H;
    var posX = mouseX;
    var posY = mouseY;
    var x = (Math.floor((posX-Puzzle.X)/Puzzle.W)-nbX);
    x = x*Puzzle.W+Puzzle.X;
    var y = (Math.floor((posY-Puzzle.Y)/Puzzle.H)-nbY);
    y = y*Puzzle.H+Puzzle.Y;
    if ((posX > Puzzle.X) && (posX < Puzzle.X+Puzzle.W*Puzzle.nbH) &&
    (posY > Puzzle.Y) && (posY < Puzzle.Y+Puzzle.H*Puzzle.nbV)) {
      move_absolute(calqueGD, x+3, y+3);
      if ((posX > caseX) && (posY > caseY) && (posX < caseX+Puzzle.W) &&
      (posY < caseY+Puzzle.H)) {
        right_place(calqueGD, false, 3); //----(nb clicks)
        tab_pieceok[tab_pieceok.length] = calqueGD;
        getStyle(calqueGD).cursor = "pointer";}}
    calqueGD = "";
}}
//-----------------------------------------
function right_place(myRef, visible, clicks) {
  js_visibility(myRef, visible);
  if (clicks > 0) {
      setTimeout("right_place('"+myRef+"', "+(!visible)+", "+(clicks-1)+")", 300);}
  else {
      check_winner();}
}
//-----------------------------------------
function check_winner() {
  if (tab_pieceok.length == Puzzle.nbH*Puzzle.nbV) {
      alert("BRAVO !..Vous avez gagné !..");
      window.location.reload();}}
//-----------------------------------------
function add_image(URL) {
  indice = tab_image.length;
  tab_image[indice] = new Array();
  tab_image[indice][0] = URL;
  tab_image[indice][1] = new Image();
  tab_image[indice][1].src = URL;}
//-----------------------------------------
function init_game(posX, posY, def, max) {
  Puzzle.X = posX;
  Puzzle.Y = posY;
  if (isNaN(max))
  max = 6;
  if ((def<1) || (def > max))
  def = max;
  Puzzle.max = max;
  Puzzle.nbH = def;
  Puzzle.nbV = def;
  Puzzle.ordre = 0;
  document.write("<STYLE>");
  document.write("#cadre { position:absolute; left:"+posX+"; top:");
  document.write(posY+"; background-color:FBE9A2;}");
  document.write("#puzzle { position:absolute; left:"+posX+"; top:");
  document.write(posY+"; background-color:FBE9A2;}");
  for(var i=0; i<Puzzle.max; i++)
  for(var j=0; j<Puzzle.max; j++) {
        document.write("#puzzle"+i+j+" { position:absolute; ");
        document.write("visibility:hidden;}");
    }
  document.write("</STYLE>");
  document.write("<TABLE BORDER=0><TR>");
  document.write("<TD><FORM><INPUT TYPE=BUTTON VALUE='Play Game...' ");
  document.write("onClick='js_play();js_help();'></FORM></TD>");
  document.write("<TD VALIGN=BASELINE>Horizontal :</TD><TD>");
  document.write(fill_select("nbH", def)+"</TD>");
  document.write("<TD VALIGN=BASELINE>Vertical :</TD><TD>");
  document.write(fill_select("nbV", def)+"</TD>");
  document.write("<TD VALIGN=BASELINE>Image :</TD>");
  document.write("<TD><FORM><SELECT ");
  document.write("onChange='load_image(this.selectedIndex);'>");
  for(var i=0; i<tab_image.length; i++)
    document.write("<OPTION>"+tab_image[i][0]+"</OPTION>");
  document.write("</SELECT></FORM></TD>");
  document.write("</TR></TABLE>");
  Puzzle.indice_image = 0;
  if (nn4) {
      document.write("<DIV ID='cadre'><IMG galleryimg=no WIDTH=");
      document.write((tab_image[Puzzle.indice_image][1].width-6));
      document.write(" HEIGHT="+(tab_image[Puzzle.indice_image][1].height-6));
      document.write(" SRC='../images/leurre1x1.gif'></DIV>");}
  else {
      document.write("<DIV ID='cadre'><IMG galleryimg=no STYLE='visibility: hidden;' ");
      document.write("SRC='"+tab_image[0][0]+"'></DIV>");}
  document.write("<DIV ID='puzzle'><IMG galleryimg=no SRC='"+tab_image[0][0]+"'></DIV>");
  for(var i=0; i<Puzzle.max; i++) {
  for(var j=0; j<Puzzle.max; j++) {
      document.write("<DIV ID='puzzle"+i+j+"'><IMG galleryimg=no SRC='");
      document.write(tab_image[0][0]+"'></DIV>");}}}
//-----------------------------------------
function size_image(myRef) {
  if (!document.images) {return;}
      for (i=0;i<document.images.length;i++) {
            if ((document.images[i].id)==myRef) {var sel=i;}}
  Puzzle.W= document.images[sel].width;
  Puzzle.H= document.images[sel].height;
return(Puzzle.W,Puzzle.H);}
//-----------------------------------------
function fill_select(myRef, def) {
  var msg = "<FORM><SELECT onChange='Puzzle."+myRef;
  msg += "=this.selectedIndex+1;'>";
  for(var i=1; i<=Puzzle.max; i++) {
      var select = (i == def) ? " selected" : "";
      msg += "<OPTION"+select+">"+i+"</OPTION>";}
  msg += "</SELECT></FORM>";
return(msg);}
//-----------------------------------------
function load_image(indice) {
  Puzzle.indice_image = indice;
  if (nn4) {
      var contenu = "<IMG galleryimg=no HEIGHT=3 SRC=''../images/leurre1x1.gif''><BR><IMG galleryimg=no WIDTH=3";
      contenu += " SRC='Vide.gif'><IMG galleryimg=no SRC='"+tab_image[indice][0]+"'>";
      js_write("puzzle", contenu);}
  else {
      js_write("puzzle", "<IMG galleryimg=no SRC='"+tab_image[indice][0]+"'>");}
   js_visibility("puzzle", true);
  for(var i=0; i<Puzzle.max; i++) {
  for(var j=0; j<Puzzle.max; j++) {
        js_visibility("puzzle"+i+j, false);
        js_write("puzzle"+i+j, "<IMG galleryimg=no SRC='"+tab_image[indice][0]+"'>");}}}
//-----------------------------------------
function js_play() {
  js_visibility("puzzle", false);
  var nb_x = Puzzle.nbH;
  var nb_y = Puzzle.nbV;
  var source = tab_image[Puzzle.indice_image][0];
  Puzzle.W = Math.round(tab_image[Puzzle.indice_image][1].width / nb_x);
  Puzzle.H = Math.round(tab_image[Puzzle.indice_image][1].height/ nb_y);
  for(var i=0; i<Puzzle.max; i++) {
  for(var j=0; j<Puzzle.max; j++) {
        var calque = "puzzle"+i+j;
        js_visibility(calque, false);
        if ((i < nb_x) && (j < nb_y)) {
          js_clipping(calque,i*Puzzle.W,j*Puzzle.H,(i+1)*Puzzle.W,(j+1)*Puzzle.H);
          js_visibility("puzzle"+i+j, true);}}}
js_mix();}
//-----------------------------------------
function js_mix() {
  var tab_calque = new Array();
  for(var i=0; i<Puzzle.nbH; i++)
  for(var j=0; j<Puzzle.nbV; j++)
        tab_calque[tab_calque.length] = new Array(i, j);
  for(var i=0; i<100; i++) {
        var x1 = Math.floor(Math.random()*tab_calque.length);
        var x2 = Math.floor(Math.random()*tab_calque.length);
        xtemp = tab_calque[x1];
        tab_calque[x1] = tab_calque[x2];
        tab_calque[x2] = xtemp;}
  var k = 0;
  for(var i=0; i<Puzzle.nbH; i++) {
  for(var j=0; j<Puzzle.nbV; j++) {
        var calque = "puzzle"+tab_calque[k][0]+tab_calque[k][1];
        var deltaX = Math.floor((i-tab_calque[k][0])*Puzzle.W);
        var deltaY = Math.floor((j-tab_calque[k][1])*Puzzle.H);
        move_absolute(calque,deltaX+tab_image[Puzzle.indice_image][1].width
                           +Puzzle.X+30,deltaY+Puzzle.Y+3);
        getStyle(calque).cursor = "pointer";
        k++;}}
}
//-----------------------------------------
function js_help() {
  var help = "Les pieces du puzzle sont melangees.\n\n";
  help += "Deplacez et posez chaque piece,\n";
  help += "a la bonne place sur la partie gauche.\n";
  help += "Quand une piece a trouve sa place,\n";
  help += "elle se met a clignoter.\n\n";
  help += "BONNE CHANCE !..";
  alert(help);}
//-----------------------------------------
function getObject(myRef) {
    if (nn6) {object = document.getElementById(myRef);}
    else if (nn4) {object = document.layers[myRef];}
    else {object = document.all[myRef];}
return(object);}
//-----------------------------------------
function getStyle(myRef) {
    if (nn6) {style = document.getElementById(myRef).style;}
    else if (nn4) {eval("style = document."+myRef);}
    else {style = document.all[myRef].style;}
return(style);}
//-----------------------------------------
function js_visibility(myRef, flag) {
    getStyle(myRef).visibility = (flag) ? 'visible' : 'hidden';}
//-----------------------------------------
function js_write(myRef, texte) {
  if (nn4) {
      getObject(myRef).document.write(texte);
      getObject(myRef).document.close();}
  else {
      getObject(myRef).innerHTML = texte;}}
//-----------------------------------------
function js_clipping(myRef, x1, y1, x2, y2) {
  if (nn4) {
      getStyle(myRef).clip.left = x1;
      getStyle(myRef).clip.top = y1;
      getStyle(myRef).clip.right = x2; 
      getStyle(myRef).clip.bottom =  y2;}
  else if (nn6) {
      getStyle(myRef).clip = "rect("+y1+" "+x1+" "+y2+" "+x2+")";}
  else {
      getStyle(myRef).clip = "rect("+y1+" "+x2+" "+y2+" "+x1+")";}}
//-----------------------------------------
function move_absolute(myRef, abscisse, ordonnee) {
  getStyle(myRef).left = abscisse;
  getStyle(myRef).top = ordonnee;}
//-----------------------------------------
function move_relative(myRef, deltaX, deltaY) {
  getStyle(myRef).left += deltaX;
  getStyle(myRef).top += deltaY;}
//-----------------------------------------