JavaScript - That Javascript Remdering Menu Is Loaded Last In Help Plz

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

<script type="text/javascript">
$(function() {	
	$("#intro_video").overlay({
	mask: {
		color: '#000',
		loadSpeed: 1000,
		startOpacity: 0,
		zIndex: 9997,
		opacity: .85
	},
	top: 131,
	closeOnClick: true,
	load: true,

onLoad: function(){
var $overlay = this;
setTimeout(function(){$overlay.close()}, 44000)
	}});
  });

</script>

<div id="slideshow">
    <img src="Image/image1.jpg" alt="Slideshow Image 1" class="active" />
    <img src="Image/image2.jpg" alt="Slideshow Image 2" />
    <img src="Image/image3.jpg" alt="Slideshow Image 3" />
    <img src="Image/image4.jpg" alt="Slideshow Image 4" />
</div>

function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    // uncomment the 3 lines below to pull the images in random order
    
    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );


    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 4000 );//speed of changing image
});

var table1_column_settings = [
    [32,40],          // ito score - First column values more than 5 will be red, 2-5 will be yellow, less than 2 will be green
    [11,12],          // schedule
    [14,15],           // cost
    [11,12],	      // execution
    [9,10],	      // commercial
    [41,50]          // total
    ];


// Loop through all cells in a table, coloring each one according to column-specific thresholds
function color_cells(table, column_settings)
{
    // How many rows are in the table?
    var num_rows = table.rows.length;
    
    // Loop through all rows.
    for (var r = 0; r < num_rows; r++)
    {
        // Get a reference to the current row.
        var this_row = table.rows[r];
        // How many cells are in this row?
        var num_cells = this_row.cells.length;
        
        // Loop through all cells in this row.
        for (var c = 0; c < num_cells; c++)
        {
            // Get a reference to the cell.
            var this_cell = this_row.cells[c];
            
            // Get the numerical value of the first (and only) node inside the cell.
            var cell_value = parseFloat(this_cell.firstChild.nodeValue);
            // If it's a number (literally if it's not not not-a-number)
            if (!isNaN(cell_value))
            {
                // Apply the color according to the thresholds for this column number (c).
                if (cell_value > column_settings[c][1]) this_cell.style.backgroundColor= "red";
                else if (cell_value > column_settings[c][0]) this_cell.style.backgroundColor= "yellow";
                else this_cell.style.backgroundColor = "green";
            }
        }
    }
}

</TBODY>
</table>

<script> color_cells(document.getElementById("table1"), table1_column_settings);</script>

//I TRIED LIKE THIS <script> window.onload=color_cells(document.getElementById("table1"), table1_column_settings);</script> AND IT DIDNT WORK

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
  <div id="header"></div>
  <div id="nav">
  <a href="home.html" target="frame">Home</a> <a href="the_band.html" target="frame">The Band</a>
  <a href="News.html" target="frame">News</a> <a href="gallery.html" target="frame">Gallery</a> 
  <a href="contact.html" target="frame">Contact</a>
  </div> 
  <iframe id="frame"></iframe>
  <div id="footer"></div>
</div>
</body>
</html>

div#container {
    height: 100%;
    width: 100%;
}
div#header {
    top: 0px;
    width: 100%;
    height: 80px;
    position: fixed;
    background-color: transparent;
    text-align: center;
}
div#nav {
    font-family: MgSouvenirLight;
    font-size: 18pt;
    color: #FF0;
    top: 120px;
    width: 100%;
    height: 40px;
    position: fixed;
    text-decoration: none;
    font-weight: bolder;
    font-variant: normal;
}
div#footer {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    bottom: 0px;
    position: fixed;
    height: 30px;
    width: 100%;
    text-align: center;
    color: #fff;
 }
#frame {
    position: absolute;
    top: 200px;
    bottom: 40px;
    width: 800px;
    border: none;
    left: 120px;
    height: auto;
}
a:link {
    font-family: MgSouvenirLight;
    font-size: 18pt;
    color: #FF0;
}
a:visited {
    font-family: MgSouvenirLight;
    font-size: 18pt;
    color: #FF0;
}
a:hover {
    font-family: MgSouvenirLight;
    font-size: 18pt;
    font-style: italic;
    color: #FC0;
}

$(window).load(function(){ // On window load. This waits until images have loaded which is essential

		
						// Fade in images so there isn't a color "pop" document load and then on window load
						$("#our-work img").animate({opacity:1},500);
		
						// clone image
						$('#our-work img').each(function(){
							var el = $(this);
							el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0","margin-left":"64px;"}).insertBefore(el).queue(function(){
								var el = $(this);
								el.parent().css({"width":this.width,"height":this.height});
								el.dequeue();
							});
							this.src = grayscale(this.src);
						});
						
						// Fade image 
						$('#our-work img').mouseover(function(){
							$(this).parent().find('img:first').stop().animate({opacity:1}, 1000);
						})
						$('.img_grayscale').mouseout(function(){
			$(this).stop().animate({opacity:0}, 1000);
	});		
});
					
	
					// Grayscale w canvas method
					function grayscale(src){
						var canvas = document.createElement('canvas');
						var ctx = canvas.getContext('2d');
						var imgObj = new Image();
						imgObj.src = src;
						canvas.width = imgObj.width;
						canvas.height = imgObj.height; 
						ctx.drawImage(imgObj, 0, 0); 
						var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
						for(var y = 0; y < imgPixels.height; y++){
							for(var x = 0; x < imgPixels.width; x++){
								var i = (y * 4) * imgPixels.width + x * 4;
								var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
								imgPixels.data[i] = avg; 
								imgPixels.data[i + 1] = avg; 
								imgPixels.data[i + 2] = avg;
							}
						}
						ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
						return canvas.toDataURL();
				}