<!--
function onPageLoaded()
{
    checkBrowser();

	cur_difficulty = "Basic";
    cur_puzzle = "EarthOverUS";

    scorediv = document.getElementById('numcorrect_div');
    nummovesdiv = document.getElementById('numtried_div');
    statisticsdiv = document.getElementById('tried_correct_statistics');
    image_creditdiv = document.getElementById('image_credit');

    msgsdiv = document.getElementById('user_messages');
    
    ScrambleManager.getScrambleInfo(imageNameListCallback);
}

var imageNameListCallback = function(data)
{
	basicImages = data.basicImageNames;
	moderateImages = data.moderateImageNames;
	difficultImages = data.difficultImageNames;
	
	default_basic = data.default_basic;
	default_basic_num = data.default_basic_num;
	default_moderate = data.default_moderate;
	default_moderate_num = data.default_moderate_num;
	default_difficult = data.default_difficult;
	default_difficult_num = data.default_difficult_num;
	
	var imagePathsPairs = data.imagePaths;
	for (var j=0; j<imagePathsPairs.length; j++){
	    var pair = imagePathsPairs[j];
	    imagePaths[pair[0]] = pair[1];
	}
	
	var imageAttrsPairs = data.imageAttrs;
	for (var j=0; j<imageAttrsPairs.length; j++){
	    var pair = imageAttrsPairs[j];
	    imageAttr[pair[0]] = pair[1];
	}
	setupDifficultySelector();
    setupNameSelectors();

    setupPuzzle(cur_puzzle);
}

	
var basicImages;
var moderateImages;
var difficultImages;

var default_basic;
var default_basic_num;
var default_moderate;
var default_moderate_num;
var default_difficult;
var default_difficult_num;

var cur_difficulty = "Basic";
var totalPossibleScore = 16;  // basic
var score_factor = 1;

var imagePaths = new Array();
var imageAttr = new Array();

var cur_puzzle;
var pathHead = baseprefix;

var diffSelector;
function setupDifficultySelector()
{
    var difficultydiv = document.getElementById('difficulty_div');
    var initSels = difficultydiv.getElementsByTagName('select');
    var emptySel = initSels[0];
    diffSelector = emptySel.cloneNode(true);

    if ((detected_browser == "Safari") && (platform == "Windows") ){
        diffSelector.onchange = chooseDifficulty;
    } else {
        diffSelector.onclick = chooseDifficulty;
    }

    diffSelector.options[0] = new Option("Basic", "Basic");
    diffSelector.options[1] = new Option("Moderate", "Moderate");
    diffSelector.options[2] = new Option("Difficult", "Difficult");
    difficultydiv.replaceChild(diffSelector, emptySel);
}

var basicSelector;
var moderateSelector;
var difficultSelector;
var puzzlenamediv;
var image_creditdiv;

function setupNameSelectors()
{
    puzzlenamediv = document.getElementById('puzzlename_div');
    var initSels = puzzlenamediv.getElementsByTagName('select');
    var emptySel = initSels[0];
    basicSelector = emptySel.cloneNode(true);

    if ((detected_browser == "Safari") && (platform == "Windows") ){
        basicSelector.onchange = choosePuzzle;
    } else {
        basicSelector.onclick = choosePuzzle;
    }

    for (var k=0; k < basicImages.length; k++) {
        basicSelector.options[k] = new Option(basicImages[k], basicImages[k]);
        if (basicImages[k] == "EarthOverUS"){
            basicSelector.options[k].selected = true;
        }
    }
    puzzlenamediv.replaceChild(basicSelector, emptySel);

    moderateSelector = emptySel.cloneNode(true);

    if ((detected_browser == "Safari") && (platform == "Windows") ){
        moderateSelector.onchange = choosePuzzle;
    } else {
        moderateSelector.onclick = choosePuzzle;
    }

    for (var k=0; k < moderateImages.length; k++) {
        moderateSelector.options[k] = new Option(moderateImages[k], moderateImages[k]);
        
    }
    

    difficultSelector = emptySel.cloneNode(true);
    if ((detected_browser == "Safari") && (platform == "Windows") ){
        difficultSelector.onchange = choosePuzzle;
    } else {
        difficultSelector.onclick = choosePuzzle;
    }

    for (var k=0; k < difficultImages.length; k++) {
        difficultSelector.options[k] = new Option(difficultImages[k], difficultImages[k]);
    }
}

function replacePuzzleSelector(newSelector)
{
    puzzlenamediv = document.getElementById('puzzlename_div');
    var sels = puzzlenamediv.getElementsByTagName('select');
    var prevSel = sels[0];
    puzzlenamediv.replaceChild(newSelector, prevSel);
}

function disableSelectors(bValue)
{
    diffSelector.disabled = bValue;
    puzzlenamediv = document.getElementById('puzzlename_div');
    var sels = puzzlenamediv.getElementsByTagName('select');
    var curSel = sels[0];
    curSel.disabled = bValue;
}

    // default values:
var rows = 3;
var cols = 4;
    
var imageArray = new Array();
var imageInUse = false;
var puzzleContainer;
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 msgsdiv;

var emptySquare_x;
var emptySquare_y;
var revealedImage = false;

var colWidth;
var rowHeight;

var playing = false;
var nummoves = 0;
var curscore = 0;
var scorediv;
var nummovesdiv;
var statisticsdiv;

var detected_browser;
var version;
var platform;

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


var pCleft = 0;
var pCtop = 0;
function setupPuzzle(puzzleName)
{
    puzzleContainer = document.getElementById('puzzle_container');
    var puzzlePath = pathHead + imagePaths[puzzleName];
    var puzzlePathType = typeof(puzzlePath);
    if (puzzlePathType == "undefined"){
        	/* puzzleName doesn't correspond to any path */
        return;
    }
    var puzzleImage = imageArray[puzzleName];
    var puzzleImageType = typeof(puzzleImage);

    if (puzzleImageType == "undefined"){
        /* must load image */
        imageArray[puzzleName] = document.createElement('img');
        imageArray[puzzleName].src = puzzlePath;
    }
    imageInUse = imageArray[puzzleName];
    puzzleContainer.innerHTML = '';
    waitToInstallImage();

    image_creditdiv.style.display="none";
    var imageAttrib = imageAttr[puzzleName];
    if (imageAttrib != ''){
        image_creditdiv.innerHTML = "Image credit: " + imageAttrib;
        image_creditdiv.style.display="block";
    }

}

function waitToInstallImage()
{
    if(imageInUse.width>0){
        installImage();    
    }else{
        setTimeout('waitToInstallImage()',100);    
    }
}

function choosePuzzle()
{
    var chosenPuzzleName = this.value;
    setupPuzzle(chosenPuzzleName)
}

function chooseDifficulty()
{
    var chosenDifficulty = this.value;
    if (chosenDifficulty == "Basic"){
        replacePuzzleSelector(basicSelector)
        cur_difficulty = "Basic";
        score_factor = 1;
        totalPossibleScore = 16;
        setupPuzzle(default_basic);
        moderateSelector.options[default_basic_num].selected = true;
    } else if (chosenDifficulty == "Moderate") {
        replacePuzzleSelector(moderateSelector)
        cur_difficulty = "Moderate";
        score_factor = 2;
        totalPossibleScore = 32;
        setupPuzzle(default_moderate);
        moderateSelector.options[default_moderate_num].selected = true;
    } else {
        replacePuzzleSelector(difficultSelector)
        cur_difficulty = "Difficult";
        score_factor = 3;
        totalPossibleScore = 48;
        setupPuzzle(default_difficult);
        difficultSelector.options[default_difficult_num].selected = true;
    }
}

function startGame()
{
    setStopStartBtns(false, true);
    disableSelectors(true);
    
    if(document.getElementById('revealedImage')){
        var obj = document.getElementById('revealedImage');
        obj.parentNode.removeChild(obj);
    }
    
    startPuzzle();
    puzzleSolved=false;
    statisticsdiv.style.display = 'block';

    stop_timer();
    reset_timer();
    playing = true;
    scramble();
    curscore = 0;
    nummoves = 0;
    scorediv.innerHTML = curscore;
    nummovesdiv.innerHTML = nummoves;
    msgsdiv.innerHTML = "";
}

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);
    disableSelectors(false);
    if (puzzleSolved) {
       var msgcontent = "Puzzle Solved!  Bonus = " + (5 * score_factor);
       msgsdiv.innerHTML = msgcontent;
       curscore +=  (5 * score_factor);
       scorediv.innerHTML = curscore;
    }
    var userNum = sbCookieData.usernum;
    Record.recordNumCorrectPlusMovesWithMax(taskId, nummoves, curscore, elapsed_time, totalPossibleScore, userNum);
}

function resetImage()
{
    stop_timer();
    curscore = 0;
    nummoves = 0;
//    document.messageform.umsg.value="";
    initPuzzle();
}

function installImage()
{
    if(document.getElementById('revealedImage')){
        var obj = document.getElementById('revealedImage');
        obj.parentNode.removeChild(obj);
    }
    var revealedImage = document.createElement('div');
    revealedImage.style.display='none';
    revealedImage.id='revealedImage';
    revealedImage.className='revealedImage';
    var img = document.createElement('img');
    img.src = imageInUse.src;
    revealedImage.appendChild(img);
    puzzleContainer.appendChild(revealedImage);
    revealedImage.style.display = 'block';

    colWidth = Math.round(imageInUse.width / cols)-1;
    rowHeight = Math.round(imageInUse.height / rows)-1;

    puzzleContainer.style.width = colWidth * cols + (cols * 1) + 'px';
    puzzleContainer.style.height = rowHeight * rows + (rows * 1) + 'px';
}

function initialStartGame()
{
    var textdiv = document.getElementById('intro_text');
    textdiv.parentNode.insertBefore(statisticsdiv, textdiv);
    textdiv.innerHTML='';
    textdiv.parentNode.removeChild(textdiv);
  
    if(document.getElementById('revealedImage')){
        var obj = document.getElementById('revealedImage');
        obj.parentNode.removeChild(obj);
    }

  setupStartStop();
  startGame();
}

function waitForImageLoad()
{
    if(imageInUse.width>0){
        startPuzzle();    
    }else{
        setTimeout('waitForImageLoad()',100);    
    }
}

function startPuzzle()
{
    puzzleContainer.innerHTML = '';

    var subDivs = puzzleContainer.getElementsByTagName('DIV');
    for(var no=0;no<subDivs.length;no++){
        subDivs[no].parentNode.removeChild(subDivs[no]);
    }
    activeImageIndicator = false;
    squareArray.length = 0; 

    installImage();
        
    colWidth = Math.round(imageInUse.width / cols)-1;
    rowHeight = Math.round(imageInUse.height / rows)-1;
    puzzleContainer.style.width = colWidth * cols + (cols * 1) + 'px';
    puzzleContainer.style.height = rowHeight * rows + (rows * 1) + 'px';
    
    if(navigator.appVersion.indexOf('5.')>=0 && navigator.userAgent.indexOf('MSIE')>=0){
        puzzleContainer.style.width = colWidth * cols + (cols * 1) + 20 + 'px';
        puzzleContainer.style.height = rowHeight * rows + (rows * 1) + 20 + 'px';            
        
    }       
    if(!revealedImage){
        revealedImage = document.createElement('DIV');
        revealedImage.style.display='none';    
        revealedImage.innerHTML = '';
        
    }
    for(var i=0; i<rows; i++)
    {
        for(var j=0; j<cols; j++){
            if(j==cols-1 && i==rows-1){
                emptySquare_x = (j * colWidth) + (j);    
                emptySquare_y = (i * rowHeight) + (i);    
                break;
            }
            var newDiv = document.createElement('DIV');
            newDiv.id = 'square_' + j + '_' + i;
            newDiv.onmouseover = displayActiveImage;
            newDiv.onclick = moveImage;
            newDiv.className = 'square';
            newDiv.style.width = colWidth + 'px';
            newDiv.style.height = rowHeight + 'px';    
            newDiv.style.left =  (j * colWidth) + (j) + 'px';
            newDiv.style.top =  (i * rowHeight) + (i) + 'px';
            newDiv.setAttribute('initPosition',(j * colWidth) + (j) + '_' + (i * rowHeight) + (i));
            
            var img = document.createElement('img');
            img.src = imageInUse.src;
            img.style.position = 'absolute';
            img.style.left = 0 - (j * colWidth) + 'px';
            img.style.top = 0 - (i * rowHeight) + 'px';      
  
            newDiv.appendChild(img);                
            puzzleContainer.appendChild(newDiv);          
            squareArray.push(newDiv);
        }
    }    
}

function scramble()
{
    start_timer();
    var currentRow = cols-1;
    var currentCol = rows-1;
    
    document.getElementById('revealedImage').style.display='none';
    
    for(var j=0;j<rows;j++)
    {
        for(var k=0; k<cols; k++)
        {
            if(j<rows.length || k<cols.length)
            {
                var el = document.getElementById('square_' + k + '_' + j);
                if(el){
                    el.style.left = (k * colWidth) + (k) + 'px';
                    el.style.top = (j * rowHeight) + (j) + 'px';    
                }else{
                    initPuzzle();
                    return;
                }
            }            
        }
    }        
    

    var lastPos=false;
    var countMoves = 0;
    var lim=50*cols*rows;
    while (countMoves < lim )
    {
        var dir = Math.floor(Math.random()*4);
        var readyToMove = false;
        if (dir==0 && currentRow>0 && lastPos!=1) // Moving peice down
        {    
            currentRow = currentRow-1;    
            readyToMove = true;
        }                
        if (dir==1 && currentRow< (rows-1) && lastPos!=0) // Moving peice up
        {    
            currentRow = currentRow+1;
            readyToMove = true;
        }    
        if (dir==2 && currentCol>0 && lastPos!=3) // Moving peice right
        {
            currentCol = currentCol -1;
            readyToMove = true;
        }    
        if (dir==3 && currentCol<(cols-1) && lastPos!=2) // Moving peice right
        {
            currentCol = currentCol + 1;
            readyToMove = true;
        }
        if (readyToMove)
        {
            activeSquare = document.getElementById('square_' + currentCol + '_' + currentRow);
            moveImage(false,true);    
            lastPos = dir;
            countMoves++;
        }
    }
    return;
}

function checkGameFinished()
{
    var string = "";

    var squareWidth = colWidth + 1;
    var squareHeight = rowHeight + 1;        
    var squareCounter = 0;
    var errorsFound = false;
    var correctSquares = 0;
    for (var prop in squareArray)
    {
        var currentCol = squareCounter % cols; 
        var currentRow = Math.floor(squareCounter/cols);
        var correctLeft = currentCol * squareWidth;
        var correctTop = currentRow * squareHeight;
        if (squareArray[prop].style.left.replace('px','') != correctLeft || squareArray[prop].style.top.replace('px','') != correctTop)
        {
            //return;            
        }else{
            correctSquares++;
        }
            
        squareCounter++;    
    }    
    
    curscore = correctSquares * score_factor;
    if(correctSquares == ((cols * rows) -1))
    {
        playing = false;
        revealImage();
        puzzleSolved=true;
        stop_play();
    }else{
        scorediv.innerHTML = curscore;
        nummovesdiv.innerHTML = nummoves;
    }
}

var currentOpacity = 0;
function revealImage()
{
    if(currentOpacity==100)currentOpacity=0;
    var obj = document.getElementById('revealedImage');
    obj.style.display = 'block';
    currentOpacity = currentOpacity +2;
    if(document.all){
        obj.style.filter = 'alpha(opacity='+currentOpacity+')';
    }else{
        obj.style.opacity = currentOpacity/100;
    }
    
    if(currentOpacity<100)setTimeout('revealImage()',10);
    
}

function displayActiveImage()
{
    if (!playing)return;
    if (!activeImageIndicator)
    {
        activeImageIndicator = document.createElement('DIV');
        activeImageIndicator.className = 'activeImageIndicator';
        puzzleContainer.appendChild(activeImageIndicator);
        activeImageIndicator.onclick = moveImage;
    }
    activeImageIndicator.style.display='block';
    activeImageIndicator.style.left = this.offsetLeft +  'px';
    activeImageIndicator.style.top = this.offsetTop + 'px';
    activeImageIndicator.style.width = this.style.width;
    activeImageIndicator.style.height = this.style.height;
    activeImageIndicator.innerHTML = '<span></span>';
    activeSquare = this;
}

function moveImage(e,fromShuffleFunction)
{
    if (!playing){
        alert("Please press the Start button to begin");
        return;
    }
    if(!activeSquare){
      return;
    }
    nummoves++;
    if (!fromShuffleFunction){
    nummovesdiv.innerHTML = nummoves;
    }

    var currentLeft = activeSquare.style.left.replace('px','') /1;
    var currentTop = activeSquare.style.top.replace('px','') /1;
    
    var diffLeft = Math.round((currentLeft - emptySquare_x) / colWidth);
    var diffTop = Math.round((currentTop - emptySquare_y) / rowHeight);    
    
    if(((diffLeft==-1 || diffLeft==1) && diffTop==0) || ((diffTop==-1 || diffTop==1) && diffLeft==0)){    // Moving right
        activeSquare.style.left = emptySquare_x + 'px';
        activeSquare.style.top = emptySquare_y + 'px';
        emptySquare_x = currentLeft;
        emptySquare_y = currentTop;    
        activeSquare = false;    
        if(activeImageIndicator){
          activeImageIndicator.style.display = 'none';
        }
        if(!fromShuffleFunction){
          checkGameFinished();    
        }
    }
}

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

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

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

function displayPerfData(response)
{
    genericDisplayPerfData('Scramble Puzzle', response);
    return false;
}

function findPos(obj) {
	var curleft = curtop = 0;
	if (obj.offsetParent) {
		do {
			curleft += obj.offsetLeft;
			curtop += obj.offsetTop;
		} while (obj = obj.offsetParent);
	}
	return [curleft,curtop];
}

// -->