var move_x = 0;

 var move_y = 0;

 var down_x = 0;

 var down_y = 0;

 var up_x = 0;

 var up_y = 0;

 var trigger=false;

 var move = false;



 

 

function zone(event) {

   var bar = document.getElementById("bar");

   bar.setAttribute("value", event.clientX + " x " + event.clientY);

   

   move_x = event.clientX;

   move_y = event.clientY; 


   if (!trigger && move) {

     trigger = true;

     setTimeout('selection()', 10);

   }

 }



function down(event) {

   var bar2 = document.getElementById("bar2");

   bar2.setAttribute("value", event.clientX + " x " + event.clientY);



   down_x = event.clientX;

   down_y = event.clientY;


   trigger = false;

   move = true;



 }



function up(event) {

   var bar3 = document.getElementById("bar3");

   bar3.setAttribute("value", event.clientX + " x " + event.clientY);



   up_x = event.clientX;

   up_y = event.clientY;

   move = false;

   trace();
   unselct();
 }





function selection() {

        

  if(!move) return;

  
   largeur = Math.abs(move_x - down_x);

   left = Math.min(move_x, down_x);



   hauteur = Math.abs(down_y - move_y);

   top = Math.min(down_y, move_y);



  var rectangle = document.getElementById("rect_selection");

   rectangle.style.visibility = 'visible';

   rectangle.style.left = left+'px';

   rectangle.style.top = top+'px';

   rectangle.style.width = largeur+'px';

   rectangle.style.height = hauteur+'px';
   rectangle.style.Zindex = '1';
   trigger = false;
   


   //alert("Largeur :" + largeur + " Hauteur :" + hauteur + " Position Left :" + left + " Position Top :" + top);

   

 }


function trace() {

  
  var foo = document.getElementById("foo");
 

    
    largeur = Math.abs(up_x - down_x);

    left = Math.min(up_x, down_x);

    
    hauteur = Math.abs(down_y - up_y);

    top = Math.min(down_y, up_y);


  var rect = document.createElement("rect");
  var rect_select = document.getElementById("rect_selection");
  
   rect.setAttribute("id","rect");
   foo.insertBefore(rect, rect_select);
  
  var rect = document.getElementById("rect");

   rect.style.visibility = 'visible';

   rect.style.left = left+'px';

   rect.style.top = top+'px';

   rect.style.width = largeur+'px';

   rect.style.height = hauteur+'px';
   rect.style.backgroundColor = '#FFFFFF';
   rect.style.border = '2px solid';
   rect.style.borderColor = 'black';
  

  
   //alert("Largeur :" + largeur + " Hauteur :" + hauteur + " Position Left :" + left + " Position Top :" + top);

 }

function unselct() {

  var rectangle = document.getElementById("rect_selection");
   //rectangle.setAttribute("class", "rect_selection");
   rectangle.style.visibility = 'hidden';
 }