//xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
//	Gatekeeper Educational Ltd
//	Contents of this file copyright F J Ahearn
//	If you use significant portions of the jscript much as is please leave this notice intact
//xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

//test only leave commented out
//wint=open("","test");
//wint.document.open("text/plain");
//wint.document.writeln(document.vlinkColor) ;
//document.getElementById("test").innerHTML="aaaaaaaa";

var numtiles; //Number tiles
var picname="tile"; //Root number of images
var picnum=0; //Root number of images
doDrag=false; //Drag and drop flag
var xoff,yoff; //offset of dragged span top/left from start mouse x,y
var xold,yold; //previous position of dragged span
var order=new Array(); //order of tiles 0=top left etc
var pic=0; //which picture shown
var maxpics=1;

//Size of main content area as designed (1152*864 screen) and scaling factors
cw=1152.0; ch=747.0;

//pointers to all elements - firefox cannot use .all
var divs=new Array(); //containers for both text and images - controls etc
var spans=new Array(); //drag and drop elements
var imgs=new Array(); //tile images
var inps=new Array(); //Names of pictures

//On open
window.onresize = new Function("window.location.href=window.location.href;");
window.onload = init;
function init()
{

//get pointers to all elements - firefox does not recognise .all
spans = document.getElementsByTagName("SPAN");
divs = document.getElementsByTagName("DIV");
imgs = document.getElementsByTagName("IMG");
inps = document.getElementsByTagName("INPUT");

//Number of pictures available
maxpics=inps.length;

//Size according to actual required width in VB at 1152 screen res
w = document.body.clientWidth; h = ch * w / cw;
if (h>document.body.clientHeight)
{	
  h=document.body.clientHeight;
  w = cw * h / ch;
}
wf=w / cw; hf=wf; 

for (t=0; t<divs.length; ++t) 
{  
  with (divs[t].style)
  { 
    ft = 1.0 * parseInt(fontSize,10);	 
    fontSize = Math.round(wf * ft) + 'px';
    left = Math.round(wf*pos(left))+'px'; top = Math.round(wf*pos(top))+'px'
    width = Math.round(wf*pos(width))+'px'; height = Math.round(wf*pos(height))+'px'	
  }
}
numtiles = spans.length;
for (t=0; t<numtiles; ++t) 
{  
  with (spans[t].style)
  { 
    left = Math.round(wf*pos(left))+'px'; top = Math.round(wf*pos(top))+'px'
    width = Math.round(wf*pos(width))+'px'; height = Math.round(wf*pos(height))+'px'
  }
}

//show title of 1st picture
document.getElementById("title").innerHTML=inps[0].name;

//get the up to date names from js file for mod by user
for (t=0; t<inps.length; ++t) inps[t].name = tilenames[t];

//set normal order then rearrange tiles
for (t=0; t<numtiles; ++t)  order[t]=t;
shuffle();
}

//general functions to change dimensions and position
function pos(val)
{
    return parseInt(val,10);
}

//Shuffle tiles - may not be in starting position/order ie 0,1,2 etc
function shuffle()
{

// each tile
for (t=0; t<numtiles; ++t) 
{  
 //Random number 0 to n-1 tiles
 m=Math.floor(Math.random()*numtiles);

 //keep log of new order
 tmp=order[t]; order[t]=order[m]; order[m]=tmp;

 //swap positions
 o=spans[order[m]].style;
 with (spans[order[t]].style)
 {
      tmp=left; left=pos(o.left)+'px'; o.left=tmp;
      tmp=top; top=pos(o.top)+'px'; o.top=tmp;
 }
}
}


//Drag and drop code

//Select chosen picture and start drag
document.onmousedown = mouseDown;
function mouseDown(e)
{

   //get event and target for ie or firefox
   //get mouse xy and pointer to selected item to be dragged
   if (e==null)
   {   
      e = window.event;
      x=e.clientX; y=e.clientY; dragitem=e.srcElement;
   }
   else
   {   
      x=e.pageX; y=e.pageY; dragitem=e.target;
   }

  //Only tiles are marked as draggable, not help buttons etc
  if (dragitem.lang!="drag") return;

  //want dragitem to be the span container, not the img
  dragitem = document.getElementById("s"+dragitem.id);

  //Start drag and drop of span containing item and get offset mouse from top left
  doDrag=true;
  with (dragitem.style)
  {
    xoff = x-pos(left);
    yoff = y-pos(top);

    //Store previous position
    xold = left; yold=top;

    //Put in front of other items
    zIndex = 4;
  }

  //allow mouse drag
  document.onmousemove = mouseMove;
  document.onmouseup = mouseUp;

  // cancel out any text selections - this stuff is essential!!!
  document.body.focus();
  document.onselectstart = function () { return false; };
  dragitem.ondragstart = function() { return false; };
  return false;
}

//Move item
document.onmousemove = mouseMove
function mouseMove(e)
{

//If dragging Move div with mouse
if (doDrag)
{
   //get event for ie or firefox
   //get mouse xy 
   if (e==null)
   {   
      e = window.event;
      x=e.clientX; y=e.clientY;
   }
   else
   {   
      x=e.pageX; y=e.pageY;
   }

   //drag with mouse
   with (dragitem.style) {left = (x-xoff)+'px';  top = (y-yoff)+'px';
}
}
return false	
}

document.onmouseup = mouseUp
function mouseUp(e)
{

//If dragging an item
if (doDrag)
{

  //stop dragging
  doDrag=false;

  //get event for ie or firefox
  if (e==null)
  {   
      e = window.event;
      x=e.clientX; y=e.clientY;
  }
  else
  {   
      x=e.pageX; y=e.pageY;
  }

  //Check which array element currently holds the number of the dragged span
  //The dragitem number
  numdrag = -1;
  for (n=0; n<numtiles; n++) 
  {
      if (order[n]==dragitem.lang)
      {
         numdrag=n;
         break;
       }
  }

  //Check which array element hold the number of the span it is over
  numspan = -1;
  for (n=0; n<numtiles; n++) 
  {  

      //ignoring self
      with (spans[order[n]])
      {
        if (id!=dragitem.id)
        {
          with (style)
          {  
	
            //If cursor within drop area note drop item
            if (x>=pos(left))
              if (x<(pos(left)+pos(width)))
                if (y>=pos(top))
                 if (y<(pos(top)+pos(height)))
                 {
	    	    numspan=n;
                    break;
                 }
          }
        }
      }
  }

  //If over another span
  if (numspan>=0)
  {
        //swap positions using the original not current dragged position of dragged item
        o=spans[order[numspan]].style;
        with (spans[order[numdrag]].style)
        {
            left=pos(o.left)+'px'; top=pos(o.top)+'px';
            o.left=xold; o.top=yold;
        }

        //keep log of new order
        tmp=order[numspan]; order[numspan]=order[numdrag]; order[numdrag]=tmp;

        //check if in order
        finish=true;
  	for (n=0; n<numtiles; n++) 
  	{  
		if (n!=order[n]) {finish=false; break;}

	}
        if (finish) document.getElementById("result").style.visibility="visible";

  }

  //Otherwise put item back where it was
  else
  { 
    with (dragitem.style){left = xold; top = yold;}
  }

  //restore normal layer position
  dragitem.style.zIndex=2;

  //stop dragging
  document.onmouseup = null;
  document.onmousemove = null;
  dragitem.style.cursor = "default";
  doDrag=false;
}
}

//scroll button to change picture
function moveNext(o)
{

 pic++;
 if (pic>=maxpics) pic=0;

 //all tile images
 //This only works for 9 tiles - not generalised
 imgs[0].src = "tile"+pic+"_1x1.jpg"
 imgs[1].src = "tile"+pic+"_1x2.jpg"
 imgs[2].src = "tile"+pic+"_1x3.jpg"
 imgs[3].src = "tile"+pic+"_2x1.jpg"
 imgs[4].src = "tile"+pic+"_2x2.jpg"
 imgs[5].src = "tile"+pic+"_2x3.jpg"
 imgs[6].src = "tile"+pic+"_3x1.jpg"
 imgs[7].src = "tile"+pic+"_3x2.jpg"
 imgs[8].src = "tile"+pic+"_3x3.jpg"

 //show title and hide prompt
 document.getElementById("title").innerHTML=inps[pic].name;
 document.getElementById("result").style.visibility="hidden";

 //Shuffle tiles
 shuffle();
}

//Mouse cursor over buttons except during animation
function on(o){o.style.cursor="pointer";}
function off(o){o.style.cursor="default";}

//help
function showhelp() {document.getElementById("help").style.visibility="visible";}
function hidehelp() {document.getElementById("help").style.visibility="hidden";}
function hidebox() {document.getElementById("result").style.visibility="hidden";}