//Global Variables
var numPhotosPerRow = 0;
var numPhotos = 0;
var output = "";
var textSection;
var photoSection;
var backgroundColor;
var fontColor;

/**
 * setBackgroundColor()
 * id - the id of the object's color you are trying to change
 * value - the color value you want to set the background to
 *
 **/
function setBackgroundColor(id, value) {
   document.getElementById(id).style.background = value;
   backgroundColor = value;
}


/**
 * setFontColor()
 * value - the color value you want to set the background to
 *
 **/
function setFontColor(id, value) {
   document.getElementById(id).style.color = value;
   fontColor = value;
}

/**
 * setText()
 * id - the id of the object whose text you wish to set
 * value - the value of the text you wish to show
 *
 **/
function setText(id, value) {
   var location = document.getElementById(id);
   location.innerHTML=value;
   textSection = value;

//var p = document.createElement("p");
 
    
 
   //var text = document.createTextNode(value);
   


   //p.value(value);
/*
   location.appendChild(text);

  //value = value.replace("<p>", "\n  ");
   
   //alert(value);
   var node = document.createTextNode(value);

   //Delete all children already existing
   if (location.hasChildNodes()) {
      location.removeChild(location.firstChild);
   }
   location.appendChild(node);
*/
}

/**
 * setNumPhotos()
 * num - the number to set
 * 
 **/
function setNumPhotosPerRow(num) {
   numPhotosPerRow = num;
}


/**
 * createFields()
 * fieldId - the id of the place on the page to create the fields
 * buttonId - the id of where to place the buttons
 * num - the number of fields to create
 * 
 **/
function createFields(fieldId, buttonId, num) {
   numPhotos = num;

   var i = 0;
   var fieldNode = document.getElementById(fieldId);
   var buttonNode = document.getElementById(buttonId);

   //alert(document.getElementById(fieldId).nodeType);
   //document.getElementById(fieldId).style.visible = true;
   //document.getElementById(buttonId).style.visible = true;


   //Delete all children already existing
   while(fieldNode.hasChildNodes()) {
      fieldNode.removeChild(fieldNode.firstChild);
   }
    while(buttonNode.hasChildNodes()) {
      buttonNode.removeChild(buttonNode.firstChild);
   }  

   for (i; i < num; i++) {

      //Create A Break Between Loops
      var br = document.createElement("br");
      

      //Create input field
      var id = "showPhoto"+i;
      var newInput = document.createElement("input");
      newInput.setAttribute("width", 800);
      newInput.setAttribute("id", id);
      fieldNode.appendChild(newInput);
      fieldNode.appendChild(br);
   }    

      //Create button
      var newButton = document.createElement("input");
      newButton.setAttribute("type", "button");
      newButton.setAttribute("value", "Show Photos");
      newButton.style.background = "darkgreen";
      newButton.style.color = "white";
      newButton.onclick = displayPhotos;
      newButton.setAttribute("width", 150);
      buttonNode.appendChild(newButton);
      buttonNode.appendChild(br);

}

//Event Handler for Show Photo Button
function displayPhotos() {
   var location = document.getElementById("photoSpot");

   //Clear the table if one exists
   if (location.hasChildNodes()) {
      location.removeChild(location.firstChild);
   }

   //Create a new table in the location
   photoSection = "<table width='100%' cellspacing='2'>\n";
   var table = document.createElement("table");
 

   //Set the tables attributes
   table.setAttribute("width", "100%");
   table.setAttribute("cellspacing", "2");
   //table.style.border = "30px";

   location.appendChild(table);

   var tbody = document.createElement("tbody");
   table.appendChild(tbody);


   //Determine layout

   var cellSize = (location.scrollWidth / numPhotosPerRow) - (table.getAttribute("cellspacing") * numPhotosPerRow) - 20;
      
   var numRows = (numPhotos / numPhotosPerRow);

   if (numPhotosPerRow == 0) {
      alert("Please Confirm Number of Photos / Row");
      return;
   }

   //create the table
   var i = 0;
   var counter = 0;
   for (i=0; i < numRows; i++) {
      //create new row
      var row = document.createElement("TR");   
      tbody.appendChild(row);
      photoSection = photoSection + "<tr>\n";

      //create new cells
      var j = 0;
      for (j=0; j < numPhotosPerRow && j <= numPhotos; j++) {
            var cell = document.createElement("TD");
            
            //cell.style.border = "solid red 2px";
            row.appendChild(cell);
            photoSection = photoSection + "<td>\n";
           
            //create the image
            var image = document.createElement("IMG");
            var url = document.getElementById('showPhoto'+counter).value;
            if (url != "") {
	       image.setAttribute("src", url);
          
               //Set the size of each picture
               image.setAttribute("width", cellSize);
               image.setAttribute("height", cellSize/1.33);
               cell.appendChild(image);
               photoSection = photoSection + "<img src='"+ url +"' width='"+cellSize+"' height='"+cellSize/1.33+"'>\n";
            }
            photoSection = photoSection + "</td>\n";

            counter++;
      }
      photoSection = photoSection + "</tr>\n";

   }
 
   photoSection = photoSection + "</table>\n";

   printDOM();
}



/**
 * printDOM()
 * This will print out everything that we have done
 *
 **/
function printDOM() {
   var location = document.getElementById('finalCode');
   while (location.hasChildNodes()) {
      location.removeChild(location.firstChild);
   }

   var toWrite = "<table width='100%' style='background: " + backgroundColor +"' style='color: "+fontColor+"'>\n";
   toWrite = toWrite + "<tr>\n";
   toWrite = toWrite + "<td>\n";
   toWrite = toWrite + textSection + "\n";
   toWrite = toWrite + "</td>\n";
   toWrite = toWrite + "</tr>\n";
   toWrite = toWrite + "<tr>\n";
   toWrite = toWrite + "<td>\n";
   toWrite = toWrite + photoSection + "\n";
   toWrite = toWrite + "</td>\n";
   toWrite = toWrite + "</tr>\n";
   toWrite = toWrite + "</table>\n";
   var node = document.createTextNode(toWrite);
   document.getElementById('finalCode').appendChild(node);
}







/*******************
EXTRA CODE
      var j = 0;
      var temp = "";
      for (j=0; j < newButton.attributes.length; j++) {
         var node = newButton.attributes.item(j);
         temp = temp + node.nodeName + "\n";
      }
      //alert(temp);
********************/