//view.js

function insertSnippet(content){
  //takes html from a seperate file and injects it into the document

  if ($(content)){
    clearElement("login");
    clearElement("registration");
    new Ajax.Updater(content, './html_snippets/'+ content +'.txt?rand='+ Math.floor(Math.random()*999999), {
    method: 'get'});
  }else{
    return false;
  }
}

function updateErrorBox(message){
  //insert message into errorBox and make it visible
  $('errorBox').style.visibility = "visible";
  $('errorBox').innerHTML = message;
}

function replaceWithSuccessBox(ID, message){
  $(ID).innerHTML = "<div id='successBox'>" + message + "</div>";
}

function redirect(page){
  window.location = page;
}

function clearElement(ID){
  $(ID).innerHTML = "";
}

function displayTestTable(tests){
  clearElement("mainInstruction");
  $('testTableContainer').innerHTML = "<span class='action' onclick='signOut();'>Log out</span> &nbsp;<a class='action' href='mailto:webmaster@memoryplanter.com'>Mail webmaster</a>";
  testTable = new recordTable({id: "testTable", border: "0", cellPadding: "0px", cellSpacing: "0px", "class": "testTable"}, "testTable");
  testTable.addTh({id: "th", colSpan: "3"}, "Problem Groups");
  testTable.addTr({});
  testTable.addTd({"class":"colHeader"}, "Group Name");
  testTable.addTd({"class":"colHeaderEnd", colSpan: "2"}, "Options");
  testTable.addTf({id: "tf", colSpan: "3"}, "<input type='button' class='buttonClass' id='cancelButton' value='Cancel' onclick='insertTestTable(\"TestName\", \"asc\");'></input> <input type='button' class='buttonClass' id='commitButton' value='Commit Changes' onclick='commitTestChanges();'></input>");
  if (errors != ""){
    testTable.addTr({});
    testTable.addTd({id: "recordErrorBox", colSpan: "3"}, errors.replace(/\n/g, "<br>"));
  }
  testTable.createRecModel([{field: "TestName", width: "200px", maxlength: "25", inputClass: "twoFieldInput"},{}, {width: "10px", deleteButton: "true" }]);
  testTable.createDeleteModel({button:{caption: "x", "buttonClass":"deleteButton"}, "recordClass":"deletedRecord"});
  $("testTableContainer").appendChild(testTable.returnTable());

  count=1;

  while(eval("tests.Test" + count)){
    eval("testName = tests.Test" + count + ".TestName;");
    eval("testID = tests.Test" + count + ".TestID;");
    eval("testOn = tests.Test" + count + ".TestOn;");
    testOn == "t"? testText = "<b>Test</b>":testText = "Test";
    testTable.addExistingRec(testID, [{contents: testName}, {contents: "<a href='fctest.html?groupID=" + testID + "'>" + testText + "</a> &nbsp;&nbsp; <a href='manageProblems.html?groupID="+ testID + "'>Manage</a>"}, {}]);

    count++;
  }
  testTable.setRecLimit(tests.testQuota, tests.numTests);
  testTable.addNewRec();
}

function displayImportTable(tests){
  $("importInstruction").innerHTML = "<div id='instructionBox'>We have received problems to be imported. Please enter a name for a problem group in the text box and click import next to it or click import next to an already existing problem group.</div>";
  $("importContainer").innerHTML = "<div class='action' onclick='signOut();'>Log out</div> ";
  var importTable = new dynamicTable({id: "importTable", border: "0px", cellpadding: "0px", cellspacing: "0px", "class":"importTable"});

  importTable.addTh({colSpan:"2"}, "Import To");

  count=1;

  while(eval("tests.Test" + count)){
    eval("testName = tests.Test" + count + ".TestName;");
    eval("testID = tests.Test" + count + ".TestID;");
    importTable.addTr({});
    importTable.addTd({width:"10px"},'<input type="button" class="buttonClass" value="Import" onclick="importProblems(' + testID + ');"></input>');
    importTable.addTd({},testName);
    if (gn == testName) gn = "";
    count++;
  }

  if (tests.numTests < tests.testQuota){
    importTable.addTr({});
    importTable.addTd({width:"10px"},'<input type="button" class="buttonClass" value="Import" onclick="importCreate(\'newTestName\');"></input>');
    importTable.addTd({},'<input type="text" id="newTestName" maxlength="25" value="'+gn+'"></input>');
  }


  $("importContainer").appendChild(importTable.returnTable());
  

//  testTable.setRecLimit(tests.testQuota, tests.numTests);
//  testTable.addNewRec();
}

function addProbTablePageNav(parentID, numProblems){
  if (lowerLimit != 0){
    lowerLimit-resultLimit<0? newLowerLimit=0: newLowerLimit = lowerLimit - resultLimit;
    $(parentID).innerHTML += "<span class='pageNavButton' onclick='insertProblemTable(\""+groupID+"\", \""+orderBy+"\", \""+orderDir+"\", \""+newLowerLimit+"\", \""+resultLimit+"\" );'>&lt;</span>";
  }else{
    $(parentID).innerHTML += "<span class='pageNavButtonHidden'>&lt;</span>";
  }
  var maxProblem = parseInt(lowerLimit) + parseInt(resultLimit);
  if (numProblems > maxProblem){
    newLowerLimit = maxProblem;
    $(parentID).innerHTML += "<span class='pageNavButton' onclick='insertProblemTable(\""+groupID+"\", \""+orderBy+"\", \""+orderDir+"\", \""+newLowerLimit+"\", \""+resultLimit+"\" );'>&gt;</span>";
  }else{
    $(parentID).innerHTML += "<span class='pageNavButtonHidden'>&gt;</span>";
  }
}

function displayFlashCardTest(problems){
  problemCard = new flashCard(problems, "testContainer", "problemCard", "flashCardTest", "saveFCTestResults("+problems.groupID+");" );
}

function displayMessage(elementID, messageString){
  optionsTable = "<table id='options', border='0px', cellPadding='0px', cellSpacing='0px', class='optionsTable'>";
  optionsTable += "<tr><td><a href='main.html' class='action'>Main Menu</a></td></tr></table>";
  $(elementID).innerHTML = optionsTable + messageString;
}

function displayProblemTable(problems){  
  var pronField = 0;
  problems.showPron == "t"? pronField = 1: pronField = 0;
  problems.showPron == "t"? hideShowPron = "Hide": hideShowPron = "Show";

  optionsTable = "<table id='options', border='0px', cellPadding='0px', cellSpacing='0px', class='optionsTable'>";
  optionsTable += "<tr><td><a href='main.html' class='action'>Main Menu</a> &nbsp; <span onclick='togglePronunciation();' class='action'>"+hideShowPron+" Pronunciation</span></td>";
  optionsTable += "<td class='pageNav', id='pageNavTop'></td></tr>";
  optionsTable += "</table>";
  
  $("problemTableContainer").innerHTML = optionsTable;

  addProbTablePageNav('pageNavTop', problems.numProblems);

  problemTable = new recordTable({id: "problemTable", border: "0", cellPadding: "0px", cellSpacing: "0px", "class": "testTable"}, "problemTable");
  problemTable.addTh({id: "th", colSpan: 3+pronField}, problems.groupName);
  problemTable.addTr({});
  problemTable.addTd({"class":"colHeaderClick", onclick:"insertProblemTable(\""+groupID+"\", \"Problem\", \"asc\", \"0\", \""+resultLimit+"\"  );"}, "Problem");

  if (problems.showPron == "t")
    problemTable.addTd({"class":"colHeaderClick", onclick:"insertProblemTable(\""+groupID+"\", \"Pronunciation\", \"asc\", \"0\", \""+resultLimit+"\"  );"}, "Pronunciation");

  problemTable.addTd({"class":"colHeaderEndClick", colSpan:"2", onclick:"insertProblemTable(\""+groupID+"\", \"Solution\", \"asc\", \"0\", \""+resultLimit+"\"  );"}, "Solution");

  problemTable.addTf({id: "tf", colSpan: 3+pronField}, "<input type='button' class='buttonClass' id='cancelButton' value='Cancel' onclick='insertProblemTable(\""+groupID+"\", \""+orderBy+"\", \""+orderDir+"\", \""+lowerLimit+"\", \""+resultLimit+"\"  );'> </input><input type='button' class='buttonClass' id='commitButton' value='Commit Changes' onclick='commitProblemChanges(\""+groupID+"\");'></input>");
  if (errors != ""){
    problemTable.addTr({});
    problemTable.addTd({id: "recordErrorBox", colSpan: 3+pronField}, errors.replace(/\n/g, "<br>"));
  }
  problemTable.createDeleteModel({button:{caption: "x", "buttonClass":"deleteButton"}, "recordClass":"deletedRecord"});
  if (problems.showPron == "t"){
    problemTable.createRecModel([{field: "Problem", width: "140px", maxlength: "256", inputClass: "threeFieldInput"},{field: "Pronunciation", width: "140px", maxlength: "256", inputClass: "threeFieldInput"}, {field: "Solution", width: "140px", maxlength: "256", inputClass: "threeFieldInput"}, {width: "10px", deleteButton: "true" }]);
  }else{
    problemTable.createRecModel([{field: "Problem", width: "210px", maxlength: "256", inputClass: "twoFieldInput"}, {field: "Solution", width: "210px", maxlength: "256", inputClass: "twoFieldInput"}, {width: "10px", deleteButton: "true" }]);
  }
  
  $("problemTableContainer").appendChild(problemTable.returnTable());

  count=0;

  while(problems[count]){
    if (problems.showPron == "t"){
      problemTable.addExistingRec(problems[count].ProblemID, [{contents: problems[count].Problem}, {contents: problems[count].Pronunciation}, {contents: problems[count].Solution}, {}]);
    }else{
      problemTable.addExistingRec(problems[count].ProblemID, [{contents: problems[count].Problem}, {contents: problems[count].Solution}, {}]);
    }

    count++;
  }
  problemTable.setRecLimit(problems.problemQuota, problems.numProblems);
  problemTable.addNewRec();
}