/*
 * file:    mazeVisualGenerator.js
 * author:  Michael Laskowski
 * date:    1/31/2008
 * purpose: generate maze visual gui. Dynamically alter
 *          gui (ie. move user icon) in response to voiceXML
 *          handler events.

 * summary: 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");
  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
      //for 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"] = "carrot.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"] = "cake.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);
 }

 //for starting, highlight carrot
 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.
 * If a move results in being at a word, return true, else return false.
 */
Maze.prototype.moveIcon = function (spokenWord, jump) {
  var icon = document.getElementById("image_1,1");
  var iconContainer = null;
  var count = 0;
  var delay = function(ms) { var date = new Date();
                             var currDate = null;
                             do { currDate = new Date();
                                } while (currDate - date < ms);
                           }

  maze.move(spokenWord);
  iconContainer = icon.parentNode;
  iconContainer.removeChild(icon);
  //icon.parentNode.removeChild(icon);
  document.getElementById(this.currentPosition).firstChild.appendChild(icon);

  //icon move complete, now check if at a word
  if ( this.currentPosition == this.getWordPosition(spokenWord) ) {
    var imageContainer = document.getElementById(this.currentPosition).firstChild;
    var imageToRemove  = document.getElementById("image_" + this.currentPosition);
    imageContainer.removeChild(imageToRemove);

    this.makeNotAvailable(spokenWord);
    this.highlightAvailableWords(imageContainer);

    return true;
  }

  delay(550);
  return false;
}

//used in voiceXML help event to enumerate the available words
Maze.prototype.availableWordsString = function() {
  var wordListing = "";
  var words = this.availableWords();

  if (words.length == 1)
    return words[0];

  for (var i=0; i< (words.length-1); i++)
    wordListing += words[i] + ", ";

  wordListing += "or,   " + words[words.length-1];

  return wordListing;
}

/*
 * after getting a word, change highlighting to highlight the newly
 * available words.
 */
Maze.prototype.highlightAvailableWords = function(justGot) {
  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";
  }
}