// JavaScript Document
var IE = (navigator.appName == "Microsoft Internet Explorer")?true:false
  
  if (!IE) document.captureEvents(Event.MOUSEMOVE)
  document.onmousemove = getMouseXY;

  var tempX, tempY;   

  function getMouseXY(e) {
    if (IE) { 
      tempX = event.clientX + document.body.scrollLeft;
      tempY = event.clientY + document.body.scrollTop;
    } 
    else { 
      tempX = e.pageX; 
      tempY = e.pageY;
    }  
    return true;
  }

function moveToTop()//set zindex to 3
 {
 var hpBubble = new Array()
hpBubble[0] = "TL"
hpBubble[1] = "TR"
hpBubble[2] = "TC"
hpBubble[3] = "BL"
hpBubble[4] = "BR"
hpBubble[5] = "BC"

for (i=0;i<hpBubble.length;i++)
 {
  if (document.getElementById(hpBubble[i]).style.zIndex > "4") {
  document.getElementById(hpBubble[i]).style.zIndex = "4";
  }
 }
}

//the difference between where the element is located and the position of the  mouse function.
 var theSpotX = 0;  var theSpotY = 0;

  function getObjectXY(theElement){
    elemPosX = theElement.offsetLeft;
    elemPosY = theElement.offsetTop;
    theElement = theElement.offsetParent;
    while(theElement != null){
      elemPosX += theElement.offsetLeft; 
      elemPosY += theElement.offsetTop;
      theElement = theElement.offsetParent;
    }
    theSpotX = elemPosX;  
    theSpotY = elemPosY;
    return true;
  }

//properties and position

  function StartDrag(elem,papa){
	papaElem = document.getElementById(papa);
    theID = elem.id;
    var fix = getObjectXY(elem);
	mamaX = papaElem.offsetLeft;
	mamaY = papaElem.offsetTop; 
	difX = theSpotX - tempX;
    difY = theSpotY - tempY;
	moveToTop();
	document.getElementById(theID).style.zIndex="5";
	document.getElementById(theID).style.filter="alpha(opacity=70)";
	document.getElementById(theID).style.opacity=".7";
    if(theDrag)window.clearInterval(theDrag);
    theDrag = setInterval("DragIt("+theID+")",1);
  }

  function DragIt(elem){
    elem.style.left = (tempX + difX)-mamaX;
    elem.style.top = (tempY + difY)-mamaY;
  }

  countScore = 4;
  theDrag=false;
 function CancelDrag(rangeX1,rangeX2,rangeY1,rangeY2,showme){ 
 if(theDrag){
      window.clearInterval(theDrag);
    }
  var nameElem = document.getElementById(theID);
   theScore = document.getElementById("score");
   theScore2 = document.getElementById("score2");
  nameElem.style.filter="alpha(opacity=100)";
  nameElem.style.opacity="1";
  var nameElemX = nameElem.offsetLeft-mamaX;
  var nameElemY = nameElem.offsetTop-mamaY;
  var rangeX1v = rangeX1-mamaX;
  var rangeX2v = rangeX2-mamaX;
  var rangeY1v = rangeY1-mamaY;
  var rangeY2v = rangeY2-mamaY;
  //game conditions------
 if(nameElemX>rangeX1v & nameElemX<rangeX2v & nameElemY>rangeY1v & nameElemY<rangeY2v){
      document.getElementById(showme).style.display="block";
	  theScore.style.color="#00F";
	  nameElem.style.display="none";
	  countScore--
	 theScore.innerHTML=countScore+" Pieces to go";
	  if(countScore == 1){
		  theScore.innerHTML="Only "+countScore+" more...";
		  }
	 if(countScore == 0){
		 theScore.style.fontWeight="bold";
		 theScore.style.fontSize="23px";
		 theScore.style.color="#F00";
		 theScore.innerHTML="Good Game!";
		 plyBlk = setInterval("playBlink()",50);
		 finPly=setTimeout("playOver()",2*1000);
		 
	 }
	 
   }
    
  }
  //---------------------------------------------------------------
   function playBlink(){ 
   if( theScore.innerHTML=="Good Game!"){
       bPly1=setTimeout("playBlink1()",100);
   }else{
	   bPly2=setTimeout("playBlink2()",100);
   }
  }
  function playBlink1(){ 
       theScore.innerHTML="";
  }
   function playBlink2(){ 
       theScore.innerHTML="Good Game!";
  }
  //---------------------------------------------------------------
  function playOver(){ 
        window.clearInterval(plyBlk);
	   theScore2.style.display="block";
	   theScore2.innerHTML="Play Again";
	   theScore2.style.textDecoration="underline";
	   theScore.style.display="none";
  }
  
  function playAgain(){
	  theScore.style.display="block";
//window.location.reload();
BCmv=document.getElementById("BC");
TLmv=document.getElementById("TL");
BLmv=document.getElementById("BL");
TRmv=document.getElementById("TR");
BCmv2=document.getElementById("BC2");
TLmv2=document.getElementById("TL2");
BLmv2=document.getElementById("BL2");
TRmv2=document.getElementById("TR2");
BCmv.style.top="200px";
BCmv.style.left="80px";
BCmv.style.display="block";
BCmv.style.filter="alpha(opacity=55)";
BCmv.style.opacity=".55";
TLmv.style.top="270px";
TLmv.style.left="46px";
TLmv.style.display="block";
TLmv.style.filter="alpha(opacity=55)";
TLmv.style.opacity=".55";
BLmv.style.top="245px";
BLmv.style.left="117px";
BLmv.style.display="block";
BLmv.style.filter="alpha(opacity=55)";
BLmv.style.opacity=".55";
TRmv.style.top="209px";
TRmv.style.left="26px";
TRmv.style.display="block";
TRmv.style.filter="alpha(opacity=55)";
TRmv.style.opacity=".55";
BCmv2.style.display="none";
TLmv2.style.display="none";
BLmv2.style.display="none";
TRmv2.style.display="none";
theScore2.style.display="none";
theScore.style.display="block";
theScore.style.color="#666";
theScore.innerHTML=" Click and Drag";
theScore.style.fontSize="16px";
theScore.style.fontWeight="normal";
countScore = 4;
  }
  
  function tipText(TTT){
	var tipp = document.getElementById(TTT);
	var tippW = tipp.offsetWidth;
	var tippH = tipp.offsetHeight;
	tipp.style.visibility = "visible";
	tipp.style.left = (tempX-tippW)-6;
    tipp.style.top = (tempY-tippH)-6;
  }
  function tipClose(TTT){
	var tipp = document.getElementById(TTT);
		tipp.style.visibility = "hidden";
  }
  document.getElementById("score2").style.display="none";
  document.getElementById("score").innerHTML=" Click and Drag";