JavaScript - Help Hiding Pictures Before Dom Is Loaded

var PenSize = "3";
var PenColor = "Black";
var LoadFile = "";
var UIstatus = "visible";
var CurrentNote = 0;
var BGcolor = "#C7C1A3";
var DataPath = "\Data\\";
var ImageExtension = ".img";
var FileList = [];
var SystemPath;
var UIstatusLandscape = "visible";
var UIstatusPortrate = "hidden";
var Server = "localhost";
var UserName = "guest";
var Password = "guest";
var NxtNote = new Image();
var Mode = "Landscape";
var DataLibrary = "notes.txt";

document.onkeyup = ToggleUI;

// Startup Script
if (document.addEventListener) 
{
  document.addEventListener("DOMContentLoaded", LoadEventListeners, false);
  alert("loaded");
}

function LoadEventListeners()
{
 // Event Listeners for UI Buttons
 var eventUp = document.getElementById("UpNote");
 var eventPlus = document.getElementById("AddNote");
 var eventSave = document.getElementById("SaveNote");
 var eventClear = document.getElementById("ClearNote");
 var eventDelete = document.getElementById("DeleteNote");
 var eventOptions = document.getElementById("Options");
 var eventDown = document.getElementById("DownNote");
 
 eventUp.addEventListener("click", NoteUp, false);
 eventPlus.addEventListener("click", AddNote, false);
 eventSave.addEventListener("click", SaveNote, false);
 eventClear.addEventListener("click", ClearSketch, false);
 eventDelete.addEventListener("click", DeleteNote, false);
 eventOptions.addEventListener("click", ConfigOptions, false);
 eventDown.addEventListener("click", NoteDown, false);
 
 // Event Listeners for the Options Dialogue
 var eventDown = document.getElementById("OptionsClose");
 eventDown.addEventListener("click", ConfigOptions, false);
 
 
 // Finish the Startup Process
 Init();
}   

function Init()
{
 // Get the System Path
 GetSystemPath("SketchBook.html");
 
 // Load All Filenames of the DataPath directory into an array
 var TmpLoad = LoadFromDisk(SystemPath + DataPath + DataLibrary);
 
 // Check to see if the Notebook is blank
 if(TmpLoad == null)
   {
	// The botebook is Blank
	alert("Notebook is Blank");
	return;
   }
   
 // Parse the CSV file data into an Array
 FileList = TmpLoad.split(",");

 //Load the first Note onto the canvas
 
   // if there are no notes in the directory, don't try to load anything
   if(FileList.length < 0)
      {
	   var Source = LoadFromDisk(FileList[CurrentNote]);
	   NxtNote.src = Source;
	   
	   // Load the NoteBookCounter  data into the innerHTML of it's DIV
	   // document.getElementById("NoteBookCounter").innerHTML = "<center><font size='2'>" + CurrentNote + " / " + FileList.length + "</font></center>";
	   
	   // Load the image data onto the canvas
       var canvas = document.getElementById('SketchPage').getContext('2d');
       canvas.drawImage(NxtNote , 0, 0);
	   return;
	  }
}

function ConfigOptions()
{
 if (document.getElementById("Options").style.visibility == "hidden")
    {
     document.getElementById("Options").style.visibility = "visible";
	}
 else
    {
     document.getElementById("Options").style.visibility = "hidden";
    }
 
 // Modify the variables of any selections that were made
 PenSize = document.getElementById('GetPenSize').value;
 PenColor = document.getElementById('GetPenColor').value;
}

function ToggleUI(e)
{
 var KeyID = (window.event) ? event.keyCode : e.keyCode;
 
 // KeyValue 18 is the  ALT key
 var KeyValue = 18;
 
 // Use a key to hide the toolbars so that most of the screen is used for the UI
 
 // ********** If the device is in Landscape Mode, toggle the Portrate-Style UI Toolbar
 if(Mode == "Landscape")
 {
 if(KeyID == KeyValue)
   {
    if(UIstatusLandscape == "visible")
	  {
	   UIstatusLandscape = "hidden";
	   document.getElementById("UI_Landscape").style.visibility = "hidden";
	   return;
	  }
	if(UIstatusLandscape == "hidden")
	  {
	   UIstatusLandscape = "visible";
	   document.getElementById("UI_Landscape").style.visibility = "visible";
	  }
   }
  }

 // ********** If the device is in Portrate Mode, toggle the Portrate-Style UI Toolbar
 if(Mode == "Portrate")
 {
 if(KeyID == KeyValue)
   {
    if(UIstatusPortrate == "visible")
	  {
	   UIstatusPortrate = "hidden";
	   document.getElementById("UI_Portrate").style.visibility = "hidden";
	   return;
	  }
	if(UIstatusPortrate == "hidden")
	  {
	   UIstatusPortrate = "visible";
	   document.getElementById("UI_Portrate").style.visibility = "visible";
	  }
   }
  }
 
}

function Draw(element, event) 
{
  document.addEventListener("mousemove", PenHandler, true);
  document.addEventListener("mouseup", upHandler, true);

  event.stopPropagation();
  event.preventDefault();
	
  function PenHandler(event) 
  {
  
    var x = event.clientX;
	var y = event.clientY;
    
    // mouse event goes here
	var canvas = document.getElementById("SketchPage");
    var ctx = canvas.getContext("2d");

	if (PenShape ="Circle")
	   {
	    // This draws a circle
        ctx.fillStyle = PenColor;
        ctx.beginPath();
        ctx.arc(x, y, PenSize, 0, Math.PI*2, true);
        ctx.closePath();
        ctx.fill();
	   }
	 
    event.stopPropagation();
  }

  function upHandler(event) 
  {
    document.removeEventListener("mouseup", upHandler, true);     
    document.removeEventListener("mousemove", PenHandler, true);
    event.stopPropagation();
  }

}

function SaveNote()
{
 alert("triggered");
 return;
 // Get the current file name
 var FileName = SystemPath + DataPath + CurrentNote + ImageExtension;

 // Convert the Canvas Data into a Base64 encoded PNG image
 var Note = document.getElementById("SketchPage").toDataURL();
 
 // Write the PNG file to the disk
 SaveToDisk(FileName, Note);
 
 // Update the Note Library file
   // Read in the current DataLibrary File's Data
   var Tmp = LoadFromDisk(SystemPath + DataPath + DataLibrary);
 
   var NewData = Tmp + CurrentNote + ImageExtension + ",";
   
   // Finally Save the updated DataLibrary file
   SaveToDisk(Tmp, NewData);
 
 alert("saved");
}

function NoteUp()
{
// Display the previoius note
	 CurrentNote--;
	    // Make sure you don't incrimnet to a non-existant note
		if(CurrentNote == -1)
		  {
		   CurrentNote = FileList.length;
		  }
		  
	  var Source = LoadFromDisk(FileList[CurrentNote]);
	  NxtNote.src = Source;
	 
	 // Load the image data onto the canvas
	 
	 // Clear the Pre-existing Canvas Data First
	  ClearSketch();
	  
	 var canvas = document.getElementById('SketchPage').getContext('2d');
     canvas.drawImage(NxtNote, 0, 0);
}

function NoteDown()
{
	 //Display the Next note
	 CurrentNote++;
	 	// Make sure you don't incrimnet to a non-existant note
		if(CurrentNote > FileList.length)
		  {
		   CurrentNote = 0;
		  }
	 var Source = LoadFromDisk(FileList[CurrentNote]);
	 NxtNote.src = Source;
	 
	 // Load the image data onto the canvas
	 
	 // Clear the Pre-existing Canvas Data First
	 ClearSketch();
	 var canvas = document.getElementById('SketchPage').getContext('2d');

     canvas.drawImage(NxtNote, 0, 0);
	 
	 // Update the NoteBookCounter  data into the innerHTML of it's DIV
     //document.getElementById("NoteBookCounter").innerHTML = "<center><font size='2'>" + CurrentNote + " / " + FileList.length + "</font></center>";
	 return;
}

function DeleteNote()
{
 // Delete The current note
 alert("Deleting Page - " + FileList[CurrentNote]);
 
 // Remove the file from the File System
 DeleteFile(FileList[CurrentNote]);
 
 // Remove the Element containing the FileName to be deleted from the array
 for (var x = 0; x < FileList.length; x++)
     {
	  if(FileList[x] == CurrentNote + ImageExtension)
	    {
	     FileList.splice[x];
		 return;
		}
	 }

 // Rewrite the Library File
 var TmpData = "";
 for (var x = 0; x < FileList.length; x++)
     {
	  TmpData = TmpData + FileList[x] + ",";
	 }
     // Write the new Library File
	 SaveToDisk(SystemPath + DataPath + DataLibrary, TmpData);
	 
 // Load The Previous Note
 
 // Display the previoius note
 CurrentNote--;
	    
 // Make sure you don't incrimnet to a non-existant note
 if(CurrentNote == -1)
   {
    CurrentNote = FileList.length;
   }
 
 // If the DataLibrary is zero length - just clear the Canvas and Return
 
 var TmpLoad = LoadFromDisk(SystemPath + DataPath + DataLibrary);
 if(TmpLoad == null)
   {
    CurrentNote = 0;
    ClearSketch();
	return;
   }
 
   // Your about to place a new image on the Canvas
   // Clear the Current Canvas Data First
   ClearSketch();
   
   var Source = LoadFromDisk(FileList[CurrentNote]);
   NxtNote.src = Source;
    	 
   // Load the image data onto the canvas
   var canvas = document.getElementById("SketchPage");
   var context = canvas.getContext("2d");
   canvas.drawImage(NxtNote, 0, 0);
}

function AddNote()
{
 // Add a note to the notebook and at the end of the File List
 // **** Later this function should be modified to be an INSERT function rather than just an add
 // Just incase the user needs to go back an edit and add more things to their notebook
 
 var NumberOfNotes = FileList.length;
 CurrentNote = NumberOfNotes + 1;
 
 // Clear the Canvas
 ClearSketch();
 
 // Write a blank image file to the Data directory so that we have the actual file there
 
 var FileName = SystemPath + DataPath + CurrentNote + ImageExtension;
 
 // Write it to the disk
 SaveToDisk(FileName, "Null Content");
 
 // Add the new Note Data to the end of the array
 FileList.length++;
 FileList[FileList.length] = CurrentNote + ImageExtension;
 
 // Rewrite the Data Library File
 TmpData = "";
 for (var x = 0; x < FileList.length; x++)
     {
	  TmpData = TmpData + FileList[x] + ",";
	 }
 
 // Write the new Data Library to the Disk
 SaveToDisk(SystemPath + DataPath + DataLibrary, TmpData);
	 
 // Refresh the Directory List
 FileList = [];
 
 // Load All Filenames of the DataPath directory into an array
 var TmpLoad = LoadFromDisk(SystemPath + DataPath + DataLibrary);
 
 // Parse the CSV file data into an Array
 FileList = TmpLoad.split(",");
}

function ClearSketch()
{
 // Clear the contents of the Canvas
 
 //Draw a rectangle that covers the canvas
 var canvas = document.getElementById("SketchPage");
 var ctx = canvas.getContext("2d");

 ctx.fillStyle = BGcolor;
 ctx.fillRect (0, 0, canvas.width, canvas.height);
}

function Crypt(method)
{
 // This function will Encrypt or Decrypt All the NoteData
 if(method == "encrypt")
   {
    
    return;
   }
 
 if(method == "decrypt")
   {
    
    return;
   }
}

function Archive(method)
{
 // This function will Restore or Backup all NoteData to a network resource
 if(method == "restore")
   {
    
    return;
   }
 
 if(method == "backup")
   {
    for(var x = 0; x > FileList.legth; x++)
	    {
         // Read the data of each note
	     var NoteData = LoadFromDisk(FileList[x]);
	
	     // Upload the Note to the Server
	     var Url = Server + "/Backup.php?" + x + "?" + NoteData;
	     ajaxRequest(Url);
		}
    return;
   }
}

// These are the Ajax Functions for Sending and Recieving Files

function callback(serverData, serverStatus) 
{ 
 alert(serverData);                                                    // Called automatically when we get data back from server
}                                                                      // Display an alert box with the recieved data

var url='http://somedomain.com/getdata.php?doc=sometext.txt';          // This is the URL we will call.
function ajaxRequest(url) 
{
   var AJAX = null;                                                    // Initialize the AJAX variable.
   if (window.XMLHttpRequest) 
      {                                                                // Does this browser have an XMLHttpRequest object?
       AJAX = new XMLHttpRequest();                                    // Yes -- initialize it.
      } 
   
   AJAX.onreadystatechange = function() {                              // When the browser has the request info..
      if (AJAX.readyState == 4 || AJAX.readyState == "complete") 
	     {                                                             //  see if the complete flag is set.
          callback(AJAX.responseText, AJAX.status);                    // Pass the response to our processing function
         }                                                             // End Ajax readystate check.
   }
   
   AJAX.open("GET", url, true, UserName, Password);                    // Open the url this object was set-up with.
   AJAX.send(null);                                                    // Send the request.
}
// ******************** These are the XPCOM Functions ************************

function GetSystemPath(ApplicationName)
{
 // This function should Detect the system directory of the app
 // and return that string as the  SystemPath variable
 // You must supply the filename of the HTML file that it is being called from
 // I suppose later i could add the code to detect the HTML's actual file name
 // It's on the ToDo List...
 
 var GetSysPath = self.location;
 GetSysPath = GetSysPath + "";
 Get = GetSysPath.replace("file:///" , "");
 Get = Get.replace(/\//g , "\\");
 Get = Get.replace(ApplicationName, "");
 SystemPath = Get;
 return SystemPath;
}

function DeleteFile(FileName)
{
 // Delete a local file
 netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
 var aFile = Components.classes["@mozilla.org/file/local;1"].createInstance();
 if (aFile instanceof Components.interfaces.nsILocalFile)
    {
     aFile.initWithPath(FileName);
     aFile.remove(false);
    }
}

function SaveToDisk(filepath, content) {
	try {
		netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
	} catch (e) {
		alert("Permission to save file was denied.");
	}
	var file = Components.classes["@mozilla.org/file/local;1"]
		.createInstance(Components.interfaces.nsILocalFile);
	file.initWithPath( filepath );
	if ( file.exists() == false ) {
		file.create( Components.interfaces.nsIFile.NORMAL_FILE_TYPE, 420 );
	}
	var outputStream = Components.classes["@mozilla.org/network/file-output-stream;1"]
		.createInstance( Components.interfaces.nsIFileOutputStream );

	outputStream.init( file, 0x04 | 0x08 | 0x20, 420, 0 );
	var output = content;
	var result = outputStream.write( output, output.length );
	outputStream.close();
}

function LoadFromDisk(filePath)
{
 if(window.Components)
   try
   {
    netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
    var file = Components.classes["@mozilla.org/file/local;1"].createInstance(Components.interfaces.nsILocalFile);
    file.initWithPath(filePath);
    if (!file.exists())
    return(null);
    var inputStream = Components.classes["@mozilla.org/network/file-input-stream;1"].createInstance(Components.interfaces.nsIFileInputStream);
    inputStream.init(file, 0x01, 00004, null);
    var sInputStream = Components.classes["@mozilla.org/scriptableinputstream;1"].createInstance(Components.interfaces.nsIScriptableInputStream);
    sInputStream.init(inputStream);
    return(sInputStream.read(sInputStream.available()));
   }
   catch(e)
   {
    //alert("Exception while attempting to load\n\n" + e);
    return(false);
   }
return(null);
}