Need help with Impossible JavaScript website assignment to finish coding

JS Code

// Create a global namespace object to be able to add more. Create a var in an object
var g={};

//Function for Ajax users
function createXMLHttpObeject(){
if(window.XMLHttpRequest){
g.request = new XMLHttpRequest();
}
else{
g.request = new ActiveXObject("MSXML2.XMLHTTP.3.0")

}
}

/////////////

function processData(){
if(g.request.readystate==4){
if(g.request.status==200){
g.data=g.request.responseText;
convertData();
}
}
}

/////////////

function convertData(){
//do the data conversion here
}

/////////////////////////////////////////////////////////////////////////////

function moveParaWithLoop(){
var start = g.para.offsetLeft;
while(start<1000){
start+=100;
g.para.style.left = start+"px";
}
}

function dropPara(){
if(g.para.removeEventListener){
document.removeEventListener("mousemove", movePara, false);
}
else{
document.detachEvent("mousemove", movePara);
}
}

function movePara(e){
var evt = e ||window.event;
g.x = evt.pageX || evt.clientX;
g.y = evt.pageY || evt.clientY;
g.para.style.left = g.x + g.diffX + "px";
g.para.style.top = g.y + g.diffY + "px";

}

function animatePara(e){
var evt = e ||window.event;
//target
g.objX = g.para.offsetLeft;
g.objY = g.para.offsetTop;
g.para.style.left = g.objX+"px";
g.para.style.top = g.objY+"px";
g.x = evt.pageX || evt.clientX;
g.y = evt.pageY || evt.clientY;
g.diffX = g.objX - g.x
g.diffY = g.objY - g.y
addEvent(document, "mousemove",movePara);
addEvent(document, "mouseup",dropPara);

}

function changePara(){
if(g.para.innerHTML=="My Stuff"){
g.para.innerHTML="this is new text";
g.para.style.backgroundColor="blue";
g.para.style.color="pink";
g.para.style.fontSize = "2em";
}

else{
g.para.innerHTML="My Stuff";
g.para.style.backgroundColor="blue";
g.para.style.color="pink";
g.para.style.fontSize = "2em";
}

}

/*
* This function will preload all the image files into the browser cache. Since
* all of the filenames are stored in arrays they will be combined into one temporary
* array that will be processed in a loop.
*/
function preloadImages(){
var pictures = g.bearImages.concat(g.spiderImages, g.signImages); // using the concat array method to merge the three arrays
var tempImage = new Image(); // create a temporary image object
for (var i=0; i<pictures.length; i++){
tempImage.src = pictures[i]; // assign a new file name to the image objects src property
}
}

/*
* Task 1 (event driven) - Rollover for bear image (only requires 1 function) - string methods are used in the if as the image src
* is stored as a path - here I am using slice in conjunction with lastIndexOf
* so that I can find the last '/'' and get all the characters after it to compare
* to the name stored in the bearImages array
*/
function rollover(){
if (img1.src.slice(img1.src.lastIndexOf("/")+1) == g.bearImages[0]){
img1.src = g.bearImages[1];
}
else {
img1.src = g.bearImages[0];
}

}

/*
* Task 2 (event driven) - Slideshow of spider images(better to have 2 functions, 1 to start
* and stop, the other to change the slides) - first step is to verify if show
* is already started or not - if our global g.slideShow has a value of
* zero then the slide show is not on so we will set the interval to call
* the function that will change the slide (changeSlide). If g.slideShow
* has a value other than zero it means that the show has started and we need
* to turn it off by clearing the interval
*/
function slideShow(){
if (g.slideShow){
clearInterval(g.slideShow);
g.slideShow = null;
}
else {
g.slideShow = setInterval(changeSlide,3000);
}
}

function changeSlide(){
g.slideCtr++;
if (g.slideCtr > g.spiderImages.length-1){
g.slideCtr = 0;
}
img2.src = g.spiderImages[g.slideCtr];
}

/*
* Task 3 (event driven)- validate user submitted data and then display the user
* provided names forwards and backwards and the image of the specified
* horoscope sign(best with 3 functions, 1 to validate the user data,
* 1 to display the name, and the last to display the horoscope sign under
* the input fields) - note there is no form to submit as there is no form tag
*/
function validateName(){
var firstName = document.getElementById("firstName");
var lastName = document.getElementById("lastName");
var sign = document.getElementById("sign");
var errorchk = 0;

//some data validation (check that data was actually entered or has correct value)

// validate names
if (firstName.value){ //check if there is a value
if (firstName.value == "Enter your first name here"){ // access value property of input element
firstName.style.color = "red"; //unlike css we must quote all strings when setting properties via JavaScript
errorchk =1;
}
}
else {
firstName.value = "Enter your first name here"
firstName.style.color = "lightBlue";
errorchk=1;
}
if (lastName.value){
if (lastName.value == "Enter your last name here"){ // access value property of input element
lastName.style.color = "red";
errorchk = 1;
}
}
else {
lastName.value = "Enter your last name here";
lastName.style.color = "lightBlue";
errorchk = 1;
}

//validate horoscope
switch (sign.value.toLowerCase()){ //convert entered data to lower case
case "aquarius": // if any correctly spelled sign is entered drop to virgo code block
case "aaries":
case "cancer":
case "capricorn":
case "gemini":
case "leo":
case "libra":
case "pisces":
case "sagittarius":
case "scorpio":
case "taurus":
case "virgo":
var signOut = sign.value + ".jpg";
break;
default: //if no valid sign set error condition
sign.value = "Enter your horoscope sign here";
sign.style.color = "red";
errorchk = 1;
}

// test to see if an error occurred
if (errorchk) { // if an error was found set focus to firstName field and reset error counter
firstName.focus();
errorchk = 0;
}
else { // if no error found reset field colors to black (in case errors changed the color) and then display data and image
firstName.style.color = "black";
lastName.style.color = "black";
sign.style.color = "black";
displayName(firstName.value, lastName.value);
displaySign(signOut);
}
}

function displayName(first, last){
var header = document.getElementsByTagName("header")[0]
var namesOut = document.getElementsByTagName("span");
var fullName = first +" "+last;
var reversed="";
for (i = fullName.length-1; i >= 0; i--){
reversed += fullName[i];
}
namesOut[0].innerHTML = fullName;
namesOut[1].innerHTML = reversed;
header.style.fontSize ="1.5em";
header.style.textAlign = "center";
}

function displaySign(sign){
var img3 = document.getElementById("img3");
img3.style.display = "block";
img3.src = sign;
}

/*
* Task 4 - (no event trigger) - display your name and student id in the footer
*
*/
function displayCopyright(){
var footer = document.getElementsByTagName("footer")[0]; //using getElementsByTagName means we get an array
footer.innerHTML = Person.firstName+" "+Person.lastName+ " id# 73635473536464";
footer.style.color = "blue" ;
footer.style.textAlign = "right";
footer.style.fontSize = ".75em";
}

/*
* Init function will setup global variables, events and event listeners
* and also run any functions that are used to prepare for events or do not
* require events.
*/

window.onload = function(){/*To have Anonymous Function that's why we deleted the Init from the buttom Like exemple 7*/

// setup global variables in my global namespace
g.bearImages = ["panda.jpg", "polarbear.jpg"];//0=panda1=polarbear because I starts with Panda
g.spiderImages = ["buick.jpg", "green car.jpg", "lamborghini.jpg", "mazda rx8.jpg", "porsche.jpg" , "red car.jpg", "skyline.jpg"];
g.signImages = ["aquarius.jpg", "aries", "cancer.jpg", "capricorn", "gemini.jpg", "leo.jpg", "libra.jpg", "pisces.jpg", "sagittarius.jpg", "scorpio.jpg", "taurus.jpg", "virgo.jpg"];
g.img1 = document.getElementById("img1");
g.img2 = document.getElementById("img2");
g.slideShow = 0;
g.slideCtr = 0;
g.submit = document.getElementById("submit");
g.para=document.getElementById("text");
g.x = null;
g.y = null;
g.objX = null;
g.objY = null;

Person = {firstName:"JAMES", lastName:"BOND"};

// run required initialisation functions
preloadImages(); // used to cache the images for the rollover and the slideshow
displayCopyright(); // display your name and student number (normally site ,aps and copyright info go here)
moveParaWithLoop();
$("body").css("background-color","pink");
$("#sec1").css("background-color","green");
$("#sec2").css("background-color","gray");
$("#sec3").hide();
$("#sec3").fadeIn(5000);

// setup events for rollover and slideshow
addEvent(g.para, "mousedown",animatePara);
addEvent(g.para, "mouseover", changePara);
addEvent(g.para, "mouseout", changePara);
//addEvent(g.img1, "mouseover", rollover);
// addEvent(g.img1, "mouseout", rollover);
$("#img1").mouseover(rollover);
$("#img1").mouseout(rollover);
g.img2.onclick = slideShow; // using a property event instead of an event listener

// setup events for form handling - Note that the form will not be submitted
addEvent(g.submit, "click", validateName);

//Below shoud be in init AJAX
document.getElementById("btn").onclick = function(){
g.request.open("GET", "data.txt", true);
g.request.send (null);
g.request.onreadystatechange = ProcessData;
}
}