/**
 * This file contains additional methods and fields for the Maze Object.
 * These methods/fields are concerned with visual layout and interactions
 * between the voice handler and the visual representation.
 */

/**
 * Lays out the graphical maze in the browser window
 */
Maze.prototype.generateMazeVisual = function() {
  var mazeContainer = document.getElementById("mazeContainer");
  mazeContainer.setAttribute("style", "position:absolute; left:25%");
  //
  var wordBox =document.getElementById("wordSaidBox")
  var wordP   = document.createElement("p");
  wordP.setAttribute("id", "currentWord");
  var wordSaid = document.createTextNode("none yet");
  wordP.appendChild(wordSaid);

  wordP.style.fontWeight = "bold";
  wordP.style.position   = "relative";
  wordP.style.top        = "5%";
  wordP.style.marginLeft = "75px";
  wordP.style.marginTop  = "0px";
  wordP.style.fontSize   = "15px";

  wordBox.appendChild(wordP);
  //


  //
  var cellPositionString;
  var cellData;

  for (var rows=0; rows<11; rows++) {
    for (var cols=0; cols<10; cols++) {
      cellPositionString = rows + "," + cols;
      cellData = this.getCell(cellPositionString);

      //create div that contains icon or images (the 'inner div')
      var contentDiv = document.createElement("div");

      //styles for inner div
      contentDiv.style.position  = "absolute";
      contentDiv.style.top       = "4px";
      contentDiv.style.left      = "4px";
      contentDiv.style.minWidth  = "55px";
      contentDiv.style.minHeight = "55px";

      //create div to hold inner div
      var cell = document.createElement("div");
      cell.setAttribute("id", cellPositionString);

      cell.style.position  = "absolute";
      cell.style.left      = (cols * 60) +"px";
      cell.style.top       = (rows * 60) + "px";
      cell.style.minWidth  = "60px";
      cell.style.minHeight = "60px";

      //add fill elements
      switch (cellPositionString) {
        case "0,9" :
        case "4,2" :
        case "4,5" :
        case "5,5" : cell.style.backgroundColor = "green";
      }

      //conditional border settings - this lays out maze walls and does some correcting
      //ugliness created by overlapping borders.
      var borderStyle = "2px solid green";
      for (var direction in cellData) {
        if (typeof cellData[direction] == "string" && cellData[direction] == "wall") {
          switch(direction) {
            case "north" :
              if (!rows == 0) {
                var cellToCheckId = (rows -1) + "," + cols;
                if (!document.getElementById(cellToCheckId).style.borderBottom == "2px solid green")
                  cell.style.borderTop = borderStyle;
              }
              else
                cell.style.borderTop = borderStyle;
             break;
            case "south" : cell.style.borderBottom = borderStyle;
                           break;
            case "east"  : cell.style.borderRight = borderStyle;
                           break;
            case "west"  :
              if (!cols == 0) {
                var cellToCheckId = (rows + "," + (cols-1));
                  if (!document.getElementById(cellToCheckId).style.borderBottom == "2px solid green")
                    cell.style.borderTop = borderStyle;
              }
              else
                cell.style.borderLeft = borderStyle;
          }
        }
      }
      cell.appendChild(contentDiv);
      mazeContainer.appendChild(cell);
    }  //end cols for loop
  } //end rows for loop

  //place images in maze
  var LWords = new Object();
  LWords["0,2"] = "leaf.GIF";
  LWords["0,7"] = "log.GIF";
  LWords["1,1"] = "boy2.GIF"
  LWords["1,3"] = "lettuce.GIF";
  LWords["2,6"] = "leg.GIF"
  LWords["4,1"] = "lollipop.GIF"
  LWords["4,4"] = "leopard2.GIF";
  LWords["4,6"] = "lips.GIF";
  LWords["4,9"] = "locust.GIF"
  LWords["5,7"] = "lighthouse.GIF";
  LWords["6,2"] = "lion.GIF";
  LWords["6,8"] = "lawnmower.gif";
  LWords["7,5"] = "ladybug.GIF";
  LWords["8,1"] = "lamp.GIF";
  LWords["8,6"] = "lemon3.GIF"
  LWords["9,7"] = "stop.GIF";
  LWords["10,6"] = "ladder.GIF";

 for (var imageLocation in LWords) {
   var imageElem = document.getElementById(imageLocation).firstChild;
   var newImage  = document.createElement("img");

   newImage.setAttribute("src", "images/" + LWords[imageLocation]);
   newImage.setAttribute("id", "image_" + imageLocation);
   imageElem.appendChild(newImage);
 }

 //get rid of stop sign, replace with end words - fix this later on
 var endLoc=document.getElementById("9,7");
 endLoc.firstChild.firstChild.style.display = "none";
 var textNode = document.createTextNode("END");
 endLoc.firstChild.style.color = "red";
 endLoc.firstChild.style.fontWeight  = "bold";
 endLoc.firstChild.style.marginTop = "6px";

 endLoc.firstChild.appendChild(textNode);


 //for starting, highlight leaf
 document.getElementById("image_"+"0,2").style.border = "2px solid yellow";
}

/**
 * Does actual move of user icon on maze
 * Needs to move the icon by removing from current location and adding to new location. If a spokenWord image
 * is at that new location, it needs to remove the spokenWord image as well.
 * This function also handles making a word not available.
 */
Maze.prototype.moveIcon = function (spokenWord, jump) {
  if (jump == '0,0') {
    //var oldPosition = maze.currentPosition;
    var newPosition = maze.move(spokenWord);
  }
  else {
    var newPosition      = jump;
    this.currentPosition = jump;
  }
  var icon        = document.getElementById("image_1,1");
  var iconContainer = icon.parentNode;

  //move icon out of current location
  iconContainer.removeChild(icon);

  //check if the new position holds a spokenWord image
  if ( newPosition == this.getWordPosition(spokenWord) ) {
    maze.makeNotAvailable(spokenWord);
    var containingElem = document.getElementById(newPosition).firstChild;
    var imageToRemove  = document.getElementById("image_" + newPosition);
    //remove it
    containingElem.removeChild(imageToRemove);
    this.gotAWord = true;

    this.highlightAvailableWords(containingElem);
  }
  document.getElementById(newPosition).firstChild.appendChild(icon);
}

//THE FOLLOWING ARE MAZE OBJECT PUBLIC VARIABLES THAT ARE USED TO SYNC UP
//THE VOICE HANDLER WITH THE VISUAL INTERFACE

/**
 * object variable is used to make sure voice handler welcome message
 * block is only executed once. After that block has been executed (ie.
 * visited by the FIA, this variable is set to 1.
 */
Maze.prototype.voiceHandlerCalls = 0;

/**
 * object variable is used to determine if a move in the maze got
 * a word (ie. by the user's icon being positioned at an l word.
 */
 Maze.prototype.gotAWord = false;

/**
 * object variable is used to determine if the voice handler form
 * has just been re entered.
 */
 Maze.prototype.reEntry = false;

/**
 * convienence variable to maintain the last maze word said.
 */
 Maze.prototype.lastWordSaid ="";

/**
 * handles a jump to a word if a word cannot be said to satisfaction of voice recognizer
 * after 3 tries
 */
 Maze.prototype.jumpPosition="0,0";

 /**
  * used in help event to enumerate the available words
  */
  Maze.prototype.availableWordsString = function() {
    var wordListing = "";
    var words = this.availableWords();
    for (var i=0; i< (words.length-1); i++)
      wordListing += words[i] + " ";

    wordListing += words[words.length-1];

    return wordListing;
  }

  Maze.prototype.highlightAvailableWords = function(justGot) {
    //get available words
    var availWords = this.availableWords();

    //take highlighting off just gotten word
    justGot.style.backgroundColor="white";

    var position;
    for (var i=0; i<availWords.length; i++) {
    //for each availabl word, get its reference container
    //then turn that container yellow
    position = this.getWordPosition(availWords[i]);
    document.getElementById("image_"+position).style.border="2px solid yellow";

    }
  }

  Maze.prototype.changeSpokenWordBox = function(spokenWord) {
    //change spokenword box
    var oldP = document.getElementById("currentWord");
    var oldText = oldP.firstChild;
    var newText = document.createTextNode(spokenWord);
    oldP.replaceChild(newText,oldText);
    return true;
  }