<!--
function onPageLoaded() {
	PictureMemoryManager.getPictureMemoryInfo(pixmemcallback);
}

var pixmemcallback = function(data)
{
	attribs = data.attribs;
	imageTypes = data.imageTypes;
	imageTypeCounts = data.imageTypeCounts;
	numImageTypes = imageTypes.length;
	imageMemGroups = data.imageMemGroups;
		
	for (var i=0; i<imageTypes.length; i++){
		var type = imageTypes[i];
		var count = imageTypeCounts[i];
		var imageMemGroup = imageMemGroups[i];
		imagePaths[type] = new Array();
		for (var j=0; j<imageMemGroup.length; j++){
			imagePaths[type][j] = imageMemGroup[j];
		}
		attibutions[type] = attribs[i];
	}

	checkBrowser();
    numcorrectdiv = document.getElementById('numcorrect_div');
    nummovesdiv = document.getElementById('numtried_div');
    statisticsdiv = document.getElementById('tried_correct_statistics');
    statisticsdiv = statisticsdiv.parentNode.removeChild(statisticsdiv);

    setupInitialPuzzleOutline();
}


var imageTypes;
var imageTypeCounts;
var numImageTypes;
var imageMemGroups;
var attribs;
var imagePaths = new Array();
var attibutions = new Array();

/**
Build more memory collections along the following lines from Wikpedia->Wikimedia
Famous scientists: Darwin, Einstin, Planck, ... [multiple groups]
Mountains: Matterhorn, Everest, ...
etc....
*/

var pathHead = baseprefix;
var numHorizPics = 5;

var seriesPermutation = new Array();
var seriesPermutationUsed = new Array();
var seriesPermIndex = 0;

var imageArray = new Array();

var upperPixDiv = new Array();
upperPixDiv[0] = 'u-0';
upperPixDiv[1] = 'u-1';
upperPixDiv[2] = 'u-2';
upperPixDiv[3] = 'u-3';
upperPixDiv[4] = 'u-4';
var upperPixDivObj = new Array();

var lowerPixDiv = new Array();
lowerPixDiv[0] = 'l-0';
lowerPixDiv[1] = 'l-1';
lowerPixDiv[2] = 'l-2';
lowerPixDiv[3] = 'l-3';
lowerPixDiv[4] = 'l-4';
var lowerPixDivObj = new Array();

var correctMidDiv = new Array();
correctMidDiv[0] = 'c-0';
correctMidDiv[1] = 'c-1';
correctMidDiv[2] = 'c-2';
correctMidDiv[3] = 'c-3';
correctMidDiv[4] = 'c-4';
var correctMidDivObj = new Array();

var permute0 = new Array();
var permute1 = new Array();

var permutation = new Array();
var permused = new Array();

var imageArray = new Array();
var imageInUse = false;
var pictureContainer;
var activeImageIndicator = false;
var activeSquare = false;     // Reference to active puzzle square
var squareArray = new Array(); // Array with references to all the squares
var puzzleSolved=false;

var emptySquare_x;
var emptySquare_y;
var revealedImage = false;

var colWidth=75;
var rowHeight=75;

var playing = false;
var nummoves = 0;
var numcorrect = 0;
var totalPossibleScore=10;

var numcorrectdiv;
var nummovesdiv;
var statisticsdiv;

var flashOnTimer = true;
var flashMode = 1;  //0 = off; 1 = on
var flashTime;
var flashOnTimeLimit = 3;  //clockticks
var clocktick = 1000;       //millisecs

var detected_browser;
var version;
var platform;

var pixMoveOffsetX = 0;
var pixMoveOffsetY = 0;

function checkBrowser()
{
    BrowserDetect.init();
    detected_browser = BrowserDetect.browser;
    version = BrowserDetect.version;
    platform = BrowserDetect.OS;

    if (detected_browser == "Firefox"){
        pixMoveOffsetX = -204 - 44;
        pixMoveOffsetY = -286  - 5;
    } else if (detected_browser == "Safari" ){
        pixMoveOffsetX = -204 - 50;
        pixMoveOffsetY = -285 -  5;
    } else if ((detected_browser == "Explorer") && (version == "6")){
        pixMoveOffsetX = -84;
        pixMoveOffsetY = -186;
    } else if ((detected_browser == "Explorer") && (version == "7")){
        pixMoveOffsetX = -184; 
        pixMoveOffsetY = -266; 
    }
}


function setupInitialPuzzleOutline()
{
  pictureContainer = document.getElementById('picture_memory_container');
  for (var i=0; i<5; i++)
  {
    lowerPixDivObj[i] = document.getElementById( lowerPixDiv[i] );
    lowerPixDivObj[i] = pictureContainer.removeChild( lowerPixDivObj[i] );

    correctMidDivObj[i] = document.getElementById( correctMidDiv[i] );
    correctMidDivObj[i] = pictureContainer.removeChild( correctMidDivObj[i] );
  }
}


function setupPuzzleOutline()
{
  pictureContainer = document.getElementById('picture_memory_container');
  cleanLower();
  for (var i=0; i<5; i++)
  {
     try 
     {
         if (upperPixDivObj[i] != null){
            var kids = upperPixDivObj[i].getElementsByTagName('img');
            if (kids.length > 0){
              for (var k=0; k<kids.length; k++){
                 upperPixDivObj[i].removeChild(kids[k]);  
              }
            }
         }
     } catch (e) {  }
  }
}

function cleanLower()
{
  for (var i=0; i<5; i++)
  {
     try 
     {
         var xx = pictureContainer.removeChild( lowerPixDivObj[i] );
         var kids = lowerPixDivObj[i].getElementsByTagName('img');
         if (kids.length > 0){
           for (var k=0; k<kids.length; k++){
              lowerPixDivObj[i].removeChild(kids[k]);  
           }
         }
         pictureContainer.removeChild( correctMidDivObj[i] );
     } catch (e) {  }
  }
}
    
function initialStartGame()
{
  pictureContainer = document.getElementById('picture_memory_container');
  pictureContainer.style.display="block";
  var textdiv = document.getElementById('intro_text');
  textdiv.parentNode.insertBefore(statisticsdiv, textdiv);

  textdiv.innerHTML='';
  textdiv.parentNode.removeChild(textdiv);

  setupStartStop();

  startGame();
}


function startGame()
{
  setupPuzzleOutline();
  setStopStartBtns(false, false);
  playing = true;
  puzzleSolved=false;
  var statisticsdiv = document.getElementById('tried_correct_statistics');
  statisticsdiv.style.display='block';
  numcorrect = 0;
  nummoves = 0;
  numcorrectdiv.innerHTML = numcorrect;
  nummovesdiv.innerHTML = nummoves;

  var msgdiv = document.getElementById('pix_mem_user_messages');
  msgdiv.innerHTML='Memorize this picture sequence for 3 seconds:';  

  displayPicsUpper(); 
  flashOn();
  start_timer();
}

function stopGame()
{
    stop_play();
}

function stop_play()
{
    var cur_time = new Date();
    elapsed_time = cur_time.getTime() - start_time.getTime();
    stop_timer();
    playing = false;
    setStopStartBtns(true, false);
    var msgdiv = document.getElementById('pix_mem_user_messages');
    msgdiv.innerHTML = "";
    clearLowerRow();
    if (puzzleSolved) {
      var msgcontent = "All Correct! Bonus = 5"; 
      msgdiv.innerHTML = msgcontent;
      numcorrect +=  5 ;
      numcorrectdiv.innerHTML = numcorrect;
    } else {
      showSolutionWithCorrections();
    }
    var userNum = sbCookieData.usernum;
    Record.recordNumCorrectPlusMovesWithMax(taskId, nummoves, numcorrect, elapsed_time, totalPossibleScore, userNum);
}

function permuteSeries()
{
  for (var j=0; j<numImageTypes; j++){
    seriesPermutationUsed[j] = 0;
  }
  for (var j=0; j<numImageTypes; j++){
    var trial =  Math.floor(Math.random()*numImageTypes);
    if (seriesPermutationUsed[trial] == 1)
    {
      var t2 = trial;
      for (var k=0; k<numImageTypes; k++){
        if (t2 < numImageTypes-1){
          t2++;
        } else {
          t2 = 0;
        }
        if (seriesPermutationUsed[t2] == 0) {
          trial = t2;
          break;
        }
      }
    }
    seriesPermutation[j] = trial;
    seriesPermutationUsed[trial] = 1;
  }
}


function permute(ul)
{
  for (var j=0; j<numHorizPics; j++){
    permused[j] = 0;
  }
  for (var j=0; j<numHorizPics; j++)
  {
    var trial =  Math.floor(Math.random()*numHorizPics);
    if (permused[trial] == 1)
    {
      var t2 = trial;
      for (var k=0; k<numHorizPics; k++){
        if (t2 < numHorizPics-1){
          t2++;
        } else {
          t2 = 0;
        }
        if (permused[t2] == 0) {
          trial = t2;
          break;
        }
      }
    }
    permutation[ul, j] = trial;
    permused[trial] = 1;
  }
}

function setupImageArray(imageType)
{
  for (var i=0; i<5; i++){
    imageArray[i] = new Image();
    imageArray[i].src = pathHead + imagePaths[imageType][i];
  }
}

function displayPicsUpper()
{
  if (seriesPermIndex > seriesPermutation.length-2){
       permuteSeries();
       seriesPermIndex = 0;
  } else {
       seriesPermIndex++;
  }
  var trial =  seriesPermutation[seriesPermIndex];
  var imageType = imageTypes[trial];
  setupImageArray(imageType);
  permute(0);

  for (var i=0; i < numHorizPics; i++)
  {
    var pdiv = upperPixDivObj[i];
    if (pdiv == null){
        pdiv = document.getElementById( upperPixDiv[i] );
        upperPixDivObj[ i ] = pdiv;
    }
    pdiv.style.display='none';
  
    var img = document.createElement('img');
    var pi = permutation[ 0, i ];
    img.src = imageArray[pi].src;
    pdiv.pix = imageArray[pi].src;
    pdiv.soln = imageArray[pi].src;
    pdiv.appendChild(img);
    pdiv.style.display = 'block';
  }
  
  var attribDiv = document.getElementById("pix_attrib");
  attribDiv.innerHTML=attibutions[imageType];
}

function hidePictures()
{
  var imgs;
  for (var i=0; i < 5; i++){
    imgs = upperPixDivObj[ i ].getElementsByTagName('img');
    upperPixDivObj[ i ].removeChild( imgs[ 0 ] );
    upperPixDivObj[ i ].pix="";
  }

  var msgdiv = document.getElementById('pix_mem_user_messages');
  msgdiv.innerHTML='Now move the lower pictures to their correct positions in the upper boxes:';
  displayPicsLower();
  setStopStartBtns(false, true);
}

function displayPicsLower()
{
  permute(1);

  for (var i=0; i<5; i++)
  {
    var pdiv = lowerPixDivObj[i];
    pictureContainer.appendChild( pdiv );

    pdiv.style.display='none';
    lowerPixDivObj[ i ] = pdiv;
  
    var img = document.createElement('img');
    var pi = permutation[ 1, i ];
    img.src = imageArray[pi].src;
    pdiv.pix = imageArray[pi].src;
    img.onmousedown = initPixMove;
    pdiv.appendChild(img);
    pdiv.style.display = 'block';
  }
  document.body.onmousemove = pixMove;
  document.body.onmouseup = stopMovePix;
}

function clearLowerRow()
{
  for (var i=0; i<5; i++)
  {
    var pdiv = lowerPixDivObj[i];
    pictureContainer.removeChild( pdiv );
  }
}

function showSolutionWithCorrections()
{
    for (var j = 0; j < 5; j++)
    {
        var usqj = upperPixDivObj[j];
        var cdiv = correctMidDivObj[j];
        var content;
        if (usqj.soln == usqj.pix){
            cdiv.style.background = "green";
            content = '&nbsp;  O';
        } else {
            cdiv.style.background = "red";
            content = '&nbsp;  X';
        }
        if (j == 4){
            content += "<BR>";
        }
        cdiv.innerHTML = content;
        pictureContainer.appendChild( cdiv );
    }

    for (var j = 0; j < 5; j++)
    {
        var usqj = upperPixDivObj[j];

        var sqClass;
        if (usqj.soln == usqj.pix){
            sqClass = "pix_square_low_green";
        } else {
            sqClass = "pix_square_low_green";
        }

        var pdiv = lowerPixDivObj[j];
        pdiv.style.display='none';
        pdiv.style.marginTop = "10px";

	var pdiv_imgs = pdiv.getElementsByTagName('img');
        for (var k=0; k<pdiv_imgs.length; k++){
            pdiv.removeChild(pdiv_imgs[k]);
        }
        var img = document.createElement('img');
        img.src = usqj.soln;
        pdiv.appendChild(img);
        pdiv.style.display = 'block';
        pdiv.style.marginTop = "10px";
        pictureContainer.appendChild( pdiv );
    }
}

function getLeftPos(inputObj)
{
  var returnValue = inputObj.offsetLeft;
  while((inputObj = inputObj.offsetParent) != null) {
    returnValue += inputObj.offsetLeft;
  }
  return returnValue;
}

function getTopPos(inputObj)
{
  var returnValue = inputObj.offsetTop;
  while((inputObj = inputObj.offsetParent) != null){
      returnValue += inputObj.offsetTop;
  }
  return returnValue;
}

var pixCounter  = 0;
var pixMoveTarget = false;

var pixMove_initMouseX;
var pixMove_initMouseY;

var pixInitX;
var pixInitY;

var pixMoveCounter = -1;
var pixToMove = false;

function initPixMove(e)
{
  if(document.all)e = event;

        // this = the Image element, and this.parentNode = the DIV element
        // for a pix, as created in displayUpperPics
  pixMoveTarget = this.parentNode.parentNode;

  pixToMove = this.parentNode;
//alert("ipm: pixToMove="+pixToMove.id);
  pixMoveCounter = 0;
  pixMove_initMouseX = e.clientX;
  pixMove_initMouseY = e.clientY;

  var pccoords = findCoords(pictureContainer);
  var thiscoords = findCoords(this.parentNode);
  pixInitX = thiscoords[0] - pccoords[0] ;
  pixInitY = thiscoords[1] - pccoords[1] ;

  startPixMove();
  return false;
}

var isMoving = false;

function startPixMove()
{
        if(pixMoveCounter>=0 && pixMoveCounter<10){
            pixMoveCounter = pixMoveCounter + 1;
            setTimeout('startPixMove()',10);
        }

    if( pixToMove && !isMoving && pixMoveCounter>=10)
    {
        document.getElementById('movingPixContainer').style.left= ((pixInitX/1) - pixMoveOffsetX) +'px';
        document.getElementById('movingPixContainer').style.top= ((pixInitY/1) - pixMoveOffsetY) +'px';

        var selectedId = pixToMove.id;

        var movingDiv = document.createElement('div');
        movingDiv.id = selectedId;

        var imgs = pixToMove.getElementsByTagName('img');
        var movingImage = imgs[0];
        movingDiv.appendChild(movingImage);
        
        document.getElementById('movingPixContainer').appendChild(movingDiv);
        isMoving = true;
    }        
//    document.body.onmousemove = pixMove;
}

function pixMove(e)
{
    if( isMoving && pixMoveCounter>=10 )
    {
//alert("pixMove");
        if(document.all){e = event;}
        document.getElementById('movingPixContainer').style.left = 
            e.clientX - pixMove_initMouseX + (pixInitX/1  - pixMoveOffsetX) + 'px' ;
        document.getElementById('movingPixContainer').style.top = 
            e.clientY/1 - pixMove_initMouseY/1 + (pixInitY/1  - pixMoveOffsetY) + 'px';
    }
}

function stopMovePix(e)
{
  isMoving = false;

  if ( pixMoveCounter==-1 ) {
        return;
    }
    pixMoveCounter = -1;
    if(document.all)e = event;
    var moveObj = document.getElementById('movingPixContainer');

    var divs = document.getElementById('movingPixContainer').getElementsByTagName('DIV');
    if(divs.length==0){
        return;
    }
    var leftPos = (moveObj.style.left.replace('px','')/1) + pixMoveOffsetX;
    var topPos =  (moveObj.style.top.replace('px','')/1)  + pixMoveOffsetY;

    var foundSq = false;
    var imgs = moveObj.getElementsByTagName('img');
    var movingImage = imgs[0];
    var pccoords = findCoords(pictureContainer);
    for (var j = 0; j < 5; j++)
    {
        var usqj = upperPixDivObj[j];
        var usqjimgs = usqj.getElementsByTagName('img');
                              //alert("  usqjimgs.length="+usqjimgs.length);
        if ( usqjimgs.length==0)
        {
            var thiscoords = findCoords(usqj);
            usqLeft = thiscoords[0] - pccoords[0] ;
            usqTop = thiscoords[1] - pccoords[1] ;

            var diffL = Math.abs(usqLeft - leftPos);
            var diffT = Math.abs(usqTop - topPos);
            if (diffL < 33 && diffT < 33)
            {
               usqj.appendChild(movingImage);
               foundSq = true;
               nummoves++;
               usqj.pix = pixToMove.pix;

	       pixToMove.pix = "";
               break;
            }
        }
    }

    if (!foundSq){
        pixToMove.appendChild(movingImage);
    }
    pixToMove = false;

    pixMove_initMouseX = 0;
    pixMove_initMouseY = 0;
    pixInitX = 0;
    pixInitY = 0;
    document.getElementById('movingPixContainer').style.left= '0px';
    document.getElementById('movingPixContainer').style.top= '0px';

    numcorrect = 0;
    for (var j = 0; j < 5; j++)
    {
        var usqj = upperPixDivObj[j];
        if (usqj.soln == usqj.pix){
            numcorrect++;
        }
    }
    nummovesdiv.innerHTML = nummoves;
    numcorrectdiv.innerHTML = numcorrect;

    var numTopEmpty = 0;
    for (var j = 0; j < 5; j++)
    {
   
        var usqj = upperPixDivObj[j];
        var usqjimgs = usqj.getElementsByTagName('img');
        if ( usqjimgs.length==0){
           numTopEmpty++;
        }
    }
//alert("numEmpty="+numTopEmpty + " numcorrect="+numcorrect);

    if (numcorrect == 5){
        puzzleSolved = true;
        stop_play();
    } else if (numTopEmpty == 0) {
        stop_play();
    }
}


	// -------------- INSTRUCTIONS ------------

function showInstructions()
{
    var ipath= 'picture-memory-instructions'
    var entry_win=window.open(
                     ipath,
                     'Picture_Memory_Instructions',
                     'height=560,width=650');
    return false;
}

	//-------- Performance Display code -------------

function displayPerfData(response)
{
    genericDisplayPerfData('Picture Memory', response);
    return false;
}

	//--------Elapsed time code -------------

function doFlash()
{
   if (flashTime == 0)
   {
      var lastFlashMode = flashMode;
      flashMode = 1 - flashMode;
      if (flashMode == 0){
         hidePictures();
         setStopStartBtns(false, true);
         flashTime = 1000000;
      } 
   } else {
     flashTime--;
   }
}

function  flashOn()
{
  flashMode = 1;
  flashTime = flashOnTimeLimit;
}

// -->