JavaScript - Firefox Problem Ns_error_dom_security_err - Security Error 1000

var Note = document.getElementById("SketchPage").toDataURL();

var PenSize = "3";
var PenShape = "Circle";
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 UIstatus = "visible";
var Server = "localhost";
var NxtNote = new Image();

document.onkeyup = ToggleUI;

function Init()
{
 // Get the System Path
 GetSystemPath("SketchBook.html");
 
 // Load All Filenames of the DataPath directory into an array
 GetFileList(SystemPath + DataPath, FileList);
 
 //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 image data onto the canvas
       var canvas = document.getElementById('SketchPage').getContext('2d');
       canvas.drawImage(NxtNote , 0, 0);
	  }
}

function HideOptions()
{
 document.getElementById("Options").style.visibility = "hidden";
}

function ToggleUI(e)
{
 var KeyID = (window.event) ? event.keyCode : e.keyCode;
 
 var KeyValue = 18;
 
 // Use a key to hide the toolbars so that most of the screen is used for the UI
 if(KeyID == KeyValue)
   {
    if(UIstatus == "visible")
	  {
	   UIstatus = "hidden";
	   document.getElementById("UI").style.visibility = "hidden";
	   return;
	  }
	if(UIstatus == "hidden")
	  {
	   UIstatus = "visible";
	   document.getElementById("UI").style.visibility = "visible";
	  }
   }
 
}

function ShowOptions()
{
 document.getElementById("Options").style.visibility = "visible";
}

function UpdatePenSize()
{
 PenSize = document.getElementById('GetPenSize').value;
}

function UpdatePenShape()
{
 PenShape = document.getElementById('GetPenShape').value;
}

function UpdatePenColor()
{
 PenColor = document.getElementById('GetPenColor').value;
}
	  
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()
{
 // 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);
}

function NextNote(Direction)
{
 if(Direction == "up")
    {
	 // Display the previoius note
	 CurrentNote--;
	    // Make sure you don't incrimnet to a non-existant note
		if(CurrentNote <= 0)
		  {
		   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);
	 return;
	}
	
 if(Direction == "down")
    {
	 //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);
	 return;
	}
}

function DeleteNote()
{
 // Delete The current note
 DeleteFile(SystemPath + DataPath + FileList[CurrentNote]);
 
 // Reload the Directory List
    // Clear the FileList Array
	FileList = [];

  GetFileList(SystemPath + DataPath, FileList);

 // Load The Previous Note
 
 	 // Display the previoius note
	 CurrentNote--;
	    // Make sure you don't incrimnet to a non-existant note
		if(CurrentNote <= 0)
		  {
		   CurrentNote = FileList.length;
		  }
		  
	 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);
	 return;
 
}

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
 
 CurrentNote++;
 
 // Add the new Note File name to the end of the FileList Array
 FileList.push(CurrentNote + ImageExtension);
 
 // 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;
 var Note = document.getElementById("SketchPage").toDataURL();
}

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")
   {
    
    return;
   }
}
// ******************** 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 GetFileList(Directory, FileList)
{
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
var _nsILocalFile = Components.classes["@mozilla.org/file/local;1"]
      .createInstance(Components.interfaces.nsILocalFile);
// initialize path to work with
_nsILocalFile.initWithPath(Directory);
 
// get file interface implemenation
// this means that an XPCOM Class can implement multiple interface
var lv_oFile = _nsILocalFile.QueryInterface(Components.interfaces.nsIFile);
var lv_oEntries = lv_oFile.directoryEntries;
 
while(lv_oEntries.hasMoreElements())
{
   var lv_cFile = lv_oEntries.getNext()
     .QueryInterface(Components.interfaces.nsIFile).path;
   FileList.push(lv_cFile);
}
}

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);
}

<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Sketch Book v1.0</title>

<script src="SketchBook.js" type="text/javascript"></script>
<script src="JSxpcom.js" language="text/javascript"></script>




</head>
<body onLoad="Init();">
<div id="SketchPageView">
<canvas id="SketchPage" width="480" height="640" style="background: #C7C1A3; position: absolute; top: 0px; left: 0px;" onmousedown="Draw(this, event);"></canvas>
</div>

<div id="Options" style="position: absolute; visibility: hidden; top: 100px; left: 50px;">

<table cellwidth="100" border="0" cellpadding="0" cellspacing="0" height="50">
<tbody><tr><td><img src="./Image/TL-black.PNG" height="19" width="19"></td><td bgcolor="#bce0f8"><center><b>Options</b></center><img src="./Image/delete.png" style="position:absolute; top: 2px; left: 150px; height: 18; width: 18;" onClick="HideOptions();"></td><td><img src="./Image/TR-black.PNG" height="19" width="19"></td></tr>
<tr><td bgcolor="#bce0f8"></td>

<td bgcolor="#bce0f8">

<div style="border: 1px solid black;">
<table>
<tbody><tr>
<td><center>Pen Size</center></td><td><center>Color</center></td>
</tr>
<tr>
<td>
<select id="GetPenSize" onchange="UpdatePenSize();">
  <option value="1">1 px</option>
  <option value="2">2 px</option>
  <option value="3">3 px</option>
  <option value="4">4 px</option>
  <option value="5">5 px</option>
</select>
</td>
<td>
<select id="GetPenColor" onchange="UpdatePenColor();">
  <option value="Black">Black</option>
  <option value="White">White</option>
  <option value="Red">Red</option>
  <option value="Blue">Blue</option>
  <option value="Green">Green</option>
  <option value="Brown">Brown</option>
</select>
</td>
</tr>
<tr>
<td><input value="Restore" onclick="RestoreData();" type="button"></td><td><input value="Backup" onclick="BackupData();" type="button"></td>
</tr>
<tr>
<td><input value="Encrypt" onclick="EncryptData();" type="button"></td><td><input value="DeCrypt" onclick="DecryptData();" type="button"></td>
</tr>
</tbody></table>
</div>
</td>
<td bgcolor="#bce0f8"></td></tr>
<tr><td><img src="./Image/BL-black.PNG" height="19" width="19"></td> <td bgcolor="#bce0f8"></td><td align="right"><img src="./Image/BR-black.PNG" height="19" width="19"></td></tr>
</tbody></table>
</div>
<table id="UI" style="position: absolute; top: 0px; left: 412px; visibility: visible;" border="0" cellpadding="0" cellspacing="0" width="40">
<tbody><tr><td><img src="./Image/TL-black.PNG" height="19" width="19"></td><td bgcolor="#bce0f8"></td><td><img src="./Image/TR-black.PNG" height="19" width="19"></td></tr>
<tr><td bgcolor="#bce0f8"></td>
<td bgcolor="#bce0f8" height="600">
<img src="./Image/up.png" style="width: 30px; height: 30px;" alt="up" onclick="NextNote('up');"><br><br><br><br>
<img src="./Image/plus.png" style="width: 30px; height: 30px;" alt="add" onclick="AddNote();"><br><br><br><br>
<img src="./Image/save.png" style="width: 30px; height: 30px;" alt="save" onclick="SaveNote();"><br><br><br><br>
<img src="./Image/clear.png" style="width: 30px; height: 30px;" alt="clear" onclick="ClearSketch();"><br><br><br><br>
<img src="./Image/delete.png" style="width: 30px; height: 30px;" alt="delete" onclick="DeleteNote();"><br><br><br><br>
<img src="./Image/gear.png" style="width: 30px; height: 30px;" alt="options" onclick="ShowOptions();"><br><br>
<img src="./Image/down.png" style="width: 30px; height: 30px;" alt="down" onclick="NextNote('down');">
</td>
<td bgcolor="#bce0f8"></td>       </tr>
<tr><td><img src="./Image/BL-black.PNG" height="19" width="19"></td> <td bgcolor="#bce0f8"></td>   <td align="right"><img src="./Image/BR-black.PNG" height="19" width="19"></td></tr>
</tbody></table>
</body></html>