var curImage=null;
var curTop="180px";
var curLeft="15%";
var docBottom;
var docRight;

function flipSquare(anImage) {
  if (document.getElementById) {
    var square=document.getElementById(anImage);
    if (square.style.visibility=="visible") { // square's visible -> user wants to hide it
      square.onmousedown=null; // kill the regular event handler
      curTop=square.style.top; curLeft=square.style.left; // remember last position...
      square.style.visibility="hidden"; // ...hide the square...
      square.style.top="0"; square.style.left="0"; // ...and move square to the top corner
      curImage=null;
    } else { // show the chosen square
      if (curImage!=null) { // something is shown already -> hide it
        var square2=document.getElementById(curImage);
        square2.onmousedown=null; // kill the event handler
        square2.style.visibility="hidden"; // hide the square...
        curTop=square2.style.top; curLeft=square2.style.left; // ...remember last position...
        square2.style.top="0"; square2.style.left="0"; // ...and move square to the top corner
      }
      square.style.top=curTop; square.style.left=curLeft; // move new square into the position...
      docBottom=8; var object=document.getElementById("bottom"); // a way to find the page bottom
      if (object.offsetParent!=null) {
        while (object.offsetParent!=null) {
          docBottom+=object.offsetTop;
          object=object.offsetParent;
        }
      } else if (object.y) { docBottom+=object.y; }
      if (document.body.scrollHeight>document.body.offsetHeight) { // don't even ask...
        docRight=document.body.scrollWidth;
      } else {
        docRight=document.body.offsetWidth;
      }
      square.style.visibility="visible"; // ...and show it
      square.onmousedown=myGrab; // now we can deal with messages
      curImage=anImage;
    }
  }
}

var hasMoved=false;
var lastTop=0;
var lastLeft=0;
var zeroX=0;
var zeroY=0;

function myGrab(e) {
  var leftClick=false;
  if (e) { // non-IE branch
    if (e.button==0) { leftClick=true; }
  } else { // IE branch
    var e=window.event;
    if (e.button==1) { leftClick=true; }
  }
  if (leftClick) {
    var mouseX=0;
    var mouseY=0;
    if (e.pageX||e.pageY) { // non-IE branch
      mouseX=e.pageX; mouseY=e.pageY;
    } else if (e.clientX||e.clientY) { // IE branch
      mouseX=e.clientX+document.body.scrollLeft;
      mouseY=e.clientY+document.body.scrollTop;
    }
    var square=document.getElementById(curImage);
    square.style.borderColor="#808080";
    lastTop=parseInt(square.style.top,10);
    lastLeft=parseFloat(square.style.left)*docRight/100.0;
    zeroX=mouseX; zeroY=mouseY;
    square.onmousemove=myDrag;
    square.onmouseup=myRelease; square.onmouseleave=myRelease;
//    document.body.ondrag=function () { return false; }; // these two lines prevent IE from selecting
//    document.body.onselectstart=function () { return false; }; // things I don't want to select
    return false;
  }
}

function myDrag(e) {
  hasMoved=true;
  if (!e) var e=window.event;
  var mouseX=0;
  var mouseY=0;
  if (e.pageX||e.pageY) { // non-IE branch
    mouseX=e.pageX; mouseY=e.pageY;
  } else if (e.clientX||e.clientY) { // IE branch
    mouseX=e.clientX+document.body.scrollLeft;
    mouseY=e.clientY+document.body.scrollTop;
  }
  var newTop=mouseY-zeroY+lastTop;
  var newLeft=mouseX-zeroX+lastLeft;
  if (newTop<0) { newTop=0; }
  if (newTop>docBottom) { newTop=docBottom; }
  if (newLeft<-32) { newLeft=-32; }
  if (newLeft>docRight-440) { newLeft=docRight-440; }
  var theLeft=(newLeft*100.0/docRight).toFixed(2);
  var square=document.getElementById(curImage);
  square.style.top=newTop.toString(10)+"px";
  square.style.left=theLeft.toString(10)+"%";
  return false;
}

function myRelease(e) {
  var square=document.getElementById(curImage);
  square.onmousemove=null; square.onmouseup=null; square.onmouseleave=null; // kill event handlers
//  document.body.ondrag=null; document.body.onselectstart=null;
  square.style.borderColor="#000000"; // set regular border
  if (!hasMoved) { // clicked & did not move -> killing the square
    square.onmousedown=null; // kill the last event handler
    square.style.visibility="hidden"; // hide the square...
    curTop=square.style.top; curLeft=square.style.left; // ...remember last position...
    square.style.top="0"; square.style.left="0"; // ...and move square to the top corner
    curImage=null;
  }
  hasMoved=false;
  return false; // event has been processed
}