//Internal variables
var _CorrectDrags = 0;
var _tickimgs = [];


function CalculateGridSizes()
{
   var controlbar = document.getElementById('controlbar');
   var targetgrid = document.getElementById('targetgrid');
   var sourcegrid = document.getElementById('sourcegrid');

   var availHeight = document.body.offsetHeight;
   availHeight -= controlbar.offsetHeight;
   
   targetgrid.style.height = Math.floor( 0.65 * availHeight ) + "px";   
   sourcegrid.style.height = Math.floor( 0.32 * availHeight ) + "px";
}

function FillGrids()
{
   //The 0 means use the 0th object image for each object
   PopulateGrid('targetgrid',objects, Options.shuffleObjects, 0);
   PopulateGrid('sourcegrid',letters, Options.shuffleLetters, Options.lettersImgIndex);
}


function CorrectDrag(dragTarget, dragItem)
{
   var tickimg = document.createElement('IMG');
   var playSound = false; // Should we play a sound as a result of this drag
   
   tickimg.src='gameimages/tick.gif';
   tickimg.style.position = 'absolute';
   tickimg.style.zIndex = '10';
   tickimg.style.left   = dragItem.offsetLeft + "px";
   tickimg.style.top    = dragItem.offsetTop + "px";
   tickimg.style.width  = dragItem.offsetWidth + "px";
   tickimg.style.height = dragItem.offsetHeight + "px";
   tickimg.maskingElem = dragItem; //Record which item the tick is supposed to cover
   
   _tickimgs.push(tickimg);
   
   dragItem.parentNode.appendChild(tickimg);

   var tickimg2 = document.createElement('IMG');
   
   tickimg2.src='gameimages/tick.gif';
   tickimg2.style.position = 'absolute';
   tickimg2.style.zIndex = '10';
   tickimg2.style.left   = dragTarget.offsetLeft + "px";
   tickimg2.style.top    = dragTarget.offsetTop + "px";
   tickimg2.style.width  = dragTarget.offsetWidth + "px";
   tickimg2.style.height = dragTarget.offsetHeight + "px";
   tickimg2.maskingElem = dragTarget;
   
   dragTarget.parentNode.appendChild(tickimg2);
   _tickimgs.push(tickimg2);
   
   //If they both have sounds, add an "a is for apple" sound to each tick
   if(dragTarget.audioElem && dragItem.audioElem) {
      var firstSound = dragItem.audioElem.cloneNode(true);
      tickimg.firstSound = firstSound;
      tickimg2.firstSound = firstSound;
      
      var isforSound = document.getElementById('audio_isfor').cloneNode(true);
      var thirdSound = dragTarget.audioElem.cloneNode(true);
                  
      firstSound.nextSound = isforSound;
      firstSound.addEventListener('ended',function () {this.nextSound.play();},false);
      
      isforSound.nextSound = thirdSound;
      isforSound.addEventListener('ended',function () {this.nextSound.play();},false);

      tickimg.addEventListener('click',function () {if( Options.sounds && Options.canPlaySounds) {this.firstSound.play();}},false);
      tickimg2.addEventListener('click',function () {if( Options.sounds && Options.canPlaySounds) {this.firstSound.play();}},false); 


      //we should play it - but not yet as we may want to tack on a well done noise if we're finished
      if( Options.sounds && Options.canPlaySounds) {
         playSound = true;
      }
   } 

   _CorrectDrags++; 
   
   if( _CorrectDrags == NumDragTargets ) {
      if( playSound ) {
         thirdSound.addEventListener('ended',function () {GameWon();},false);
      } else {
         window.setTimeOut('GameWon();',0.25);
      }
   }
   
   if( playSound) {
      tickimg.firstSound.play();
   }
}

function GameWon() {
      if( Options.sounds && Options.canPlaySounds) {
         var welldoneelem=document.getElementById('audio_welldone');
         
         if(welldoneelem && welldoneelem.play) {
            welldoneelem.play();
         }
      }

      alert("Well Done! Press OK to do it again.");
      
      for(var i = 0; i < _tickimgs.length; i++) {
         var img = _tickimgs[i];
         
         if(img.parentNode) {
            img.parentNode.removeChild(img);
         }
      }
      _CorrectDrags = 0;
      _tickimgs = [];

}

function IncorrectDrag(dragTarget, dragItem)
{
   if(Options.sounds && dragItem.audioElem) {
      dragItem.audioElem.play();
   }      
}


function UpdateTickPositions()
{
   for(var i = 0; i < _tickimgs.length; i++) {
      var img = _tickimgs[i];
      
      img.style.left   = img.maskingElem.offsetLeft + "px";
      img.style.top    = img.maskingElem.offsetTop + "px";
      img.style.width  = img.maskingElem.offsetWidth + "px";
      img.style.height = img.maskingElem.offsetHeight + "px";
   }
}