// JavaScript Document
window.onload = init;


////////////////////////////////////////////////////////////////////////////

function init()
{
  // Pose des écouteurs associés au menu
  //
 
  
  // Pose des trois écouteurs associés au div déplaçable :
  // onmousedown, onmousemove, onmouseup
  //
  var elt = document.getElementById('div1');
  elt.onmousedown = attrape;
  elt.onmousemove = deplace;
  elt.onmouseup = relache;
  var elt2 = document.getElementById('div2');
  elt2.onmousedown = attrape2;
  elt2.onmousemove = deplace2;
  elt2.onmouseup = relache;
}

////////////////////////////////////////////////////////////////////////////


////////////////////////////////////////////////////////////////////////////

// Ces variables doivent nécessairement être globales :
// - pour être accessibles à la fois à attrape() deplace() et relache()
// - pour que leur contenu soit conservé entre 2 appels de fonctions
//
var posDepartSourisX;
var posDepartSourisY;
var posDepartBlocX;
var posDepartBlocY;
var appuiBouton = false;

function attrape(ev)
{
  if (!ev) ev = window.event;
  posDepartSourisX = ev.clientX;
  posDepartSourisY = ev.clientY;
  var elt = document.getElementById('div1');
  var stl;
  if (window.getComputedStyle) stl = getComputedStyle(elt, null)
  else stl = elt.currentStyle; // pour IE
  posDepartBlocX = parseInt(stl.left.replace('px',''));
  posDepartBlocY = parseInt(stl.top.replace('px',''));
  appuiBouton = true;
}
function attrape2(ev)
{
  if (!ev) ev = window.event;
  posDepartSourisX = ev.clientX;
  posDepartSourisY = ev.clientY;
  var elt = document.getElementById('div2');
  var stl;
  if (window.getComputedStyle) stl = getComputedStyle(elt, null)
  else stl = elt.currentStyle; // pour IE
  posDepartBlocX = parseInt(stl.left.replace('px',''));
  posDepartBlocY = parseInt(stl.top.replace('px',''));
  appuiBouton = true;
}

function deplace(ev)
{
  if (!ev) ev = window.event;
  if(appuiBouton) {
    var deplacementSourisX = ev.clientX - posDepartSourisX;
    var deplacementSourisY = ev.clientY - posDepartSourisY;
    var e = document.getElementById('div1');
    e.style.left = posDepartBlocX + deplacementSourisX + 'px';
    e.style.top = posDepartBlocY + deplacementSourisY + 'px';
  }
}
function deplace2(ev)
{
  if (!ev) ev = window.event;
  if(appuiBouton) {
    var deplacementSourisX = ev.clientX - posDepartSourisX;
    var deplacementSourisY = ev.clientY - posDepartSourisY;
    var e = document.getElementById('div2');
    e.style.left = posDepartBlocX + deplacementSourisX + 'px';
    e.style.top = posDepartBlocY + deplacementSourisY + 'px';
  }
}

function relache()
{
  appuiBouton = false;
}