//================================ EVENT MOUSE MOVE CALLBACK FUNCTION
function zoomGetSize(type, div)
{
  if (type == 'w')
    var info = div.style.width;
  else if (type == 'h')
    var info = div.style.height;
  else if (type == 't')
    var info = div.style.top;
  else if (type == 'l')
    var info = div.style.left;
  else
    return 0;

  return parseInt(info.substr(0, info.length - 2), 10);
}

function pos(event, p_img, p_div, l_div, d_div, detail_img, name_img, alter)
{
  var img_path = 'img/';
  var img_ext = '.jpg';

  var small_img   = document.getElementById(p_img);
  var small_div   = document.getElementById(p_div);
  var viewer_div  = document.getElementById(l_div);
  var big_div   = document.getElementById(d_div);
  var img_detail  = document.getElementById(detail_img);
  var alter_div   = document.getElementById(alter);

  //======== get images size
  var small_img_width   = small_img.width;
  var small_img_height  = small_img.height;

//  alert('taille de l\'image normal : largeur : ' + small_img_width + ' px, hauteur :' + small_img_height + ' px');

  var img_detail_width  = img_detail.width;
  var img_detail_height   = img_detail.height;

//  alert('taille de l\'image zoom : largeur : ' + img_detail_width + ' px, hauteur :' + img_detail_height + ' px');

  var zoomW = zoomGetSize('w', viewer_div);
  var zoomH = zoomGetSize('h', viewer_div);

//  alert('taille de la loupe : largeur : ' + zoomW + ' px, hauteur :' + zoomH + ' px');

  //======== get interaction limit rect

  if (document.body)
  {
    var margeW = parseInt(((document.body.clientWidth - 275) / 2) - document.getElementById('mon_produit').scrollLeft);
    var margeH = parseInt(document.getElementById('mon_produit').scrollTop);
  }
  else
  {
    var margeW = parseInt(((window.innerWidth - 275) / 2) - document.getElementById('mon_produit').scrollLeft);
    var margeH = parseInt(document.getElementById('mon_produit').scrollHeight);
  }
  if (margeW < 0) margeW = 0;
  if (margeH < 0) margeH = 0;

//  alert(margeH);

//  var limit_left    = small_div.offsetLeft + marge; // zoomGetSize('l', small_div);
  var limit_left    = small_div.offsetLeft + 0; // zoomGetSize('l', small_div);
  var limit_top     = small_div.offsetTop + 0; // zoomGetSize('t', small_div)

//  alert('limite du déplacement : gauche : ' + limit_left + ' px, haute :' + limit_top + ' px');

  var limit_right   = limit_left + 273;
  var limit_bottom  = limit_top + 273;

//  alert('limite du déplacement : droite : ' + limit_right + ' px, basse :' + limit_bottom + ' px');

  var big_limit_left    = big_div.offsetLeft; // zoomGetSize('l', big_div);
  var big_limit_top     = big_div.offsetTop; // zoomGetSize('t', big_div)

//  alert('limite du zoom : gauche : ' + big_limit_left + ' px, haute :' + big_limit_top + ' px');
//  document.getElementById('debug').innerHTML = limit_top + 'px' + limit_left + 'px' + limit_right + 'px' + limit_bottom + 'px';

//======== get mouse position

mouseX = ((navigator.appName.substring(0,3) == "Net") || (navigator.appName.substring(0,3) == "Ope")) ? event.pageX  : event.x + limit_left;
mouseY = ((navigator.appName.substring(0,3) == "Net") || (navigator.appName.substring(0,3) == "Ope")) ? event.pageY  : event.y + limit_top;


//  document.getElementById('debugmouse').innerHTML = 'mouse X / Y : ' + mouseX + 'px' + mouseY + 'px' + '- scrool' + document.body.scrollTop + '/' + document.body.scrollLeft + ' - ' + document.getElementById('contenu_panier').offsetLeft + ' ' + document.getElementById('contenu_panier').offsetTop;


  //======== set limit position
  if(mouseX < limit_left || mouseX > limit_right || mouseY < limit_top || mouseY > limit_bottom)
  {
    viewer_div.style.display  = 'none';
    big_div.style.display   = 'none';
    alter_div.style.display   = 'block';
    return;
  }

  // on est en mode zoom
//alter_div.style.display = 'none';
//  big_div.style.display = 'block';

  // centre la loupe

  // viewer_div.style.display = 'inline';
  viewer_div.style.left     = (mouseX - limit_left - (zoomW / 2)) + 'px';
  viewer_div.style.top    = (mouseY - limit_top - (zoomH / 2)) + 'px';

  viewer_div.style.display  = 'block';

  // rapport de taille entre les deux images
  var rate_imgs_heigth    = img_detail_height / small_img_height;
  var rate_imgs_width     = img_detail_width / small_img_width;

  // cacul de l'offset de la grande image
  var offset_img_detail_top   = parseInt(zoomGetSize('t', viewer_div) * (img_detail_height / small_img_height));
  var offset_img_detail_left  = parseInt(zoomGetSize('l', viewer_div) * (img_detail_width / small_img_width));

//  document.getElementById('debugzoom').innerHTML = offset_img_detail_top + 'px' + offset_img_detail_left + 'px -  block : X / Y' + viewer_div.style.left + ' ' + viewer_div.style.top + '   ' + img_detail_height;

  if (offset_img_detail_top < 0) offset_img_detail_top = 0;
  if (offset_img_detail_left < 0) offset_img_detail_left = 0;

  var max_offset_limit_top = parseInt( (zoomGetSize('t', viewer_div) + zoomH) * rate_imgs_heigth)
  var max_offset_limit_left = parseInt( (zoomGetSize('l', viewer_div) + zoomW) * rate_imgs_width)


  if (max_offset_limit_top > (img_detail_height + (zoomW / 2) - 5)) offset_img_detail_top = (img_detail_height - (zoomH * rate_imgs_heigth) + (zoomW / 2) -5);
  if (max_offset_limit_left > (img_detail_width + (zoomH / 2) - 5)) offset_img_detail_left = (img_detail_width - (zoomW * rate_imgs_width) + (zoomH / 2) -5);



//  img_detail.src = img_path + name_img + img_ext;
//  img_detail.style.marginTop  = '-250px';
//  img_detail.style.marginLeft = '-650px';
  img_detail.style.marginTop  = -offset_img_detail_top + 'px';
  img_detail.style.marginLeft = -offset_img_detail_left + 'px';
  big_div.style.display     = 'block';
  //alter_div.style.display = 'none';
}