Trying to Create a Class That Preloads scrollable Images

I am trying to load up images from a database dervied XML document. As the images get preloaded into an array I am then trying to allow the user to use the up/down key arrows to scroll through the images. The images must be stacked on one another (I am using z-index to do this). They are CT scan images of a brain.. so they must stack on top of one another so users can scroll.


I am getting it -- but not entirely. Despite my reading tutorials and experimenting and trying to learn on my own I can't seem to refer to the first method (called "preLoadImage") in the second one (called "keyDetectEvent") when the up/down arrow is pressed.

for instance, referring to myObject.preLoadImage() returns "undefined"

Also once I do manage to get the currently displayed image in the array image_url, I then have to change it's z-index to the highest number in the array so that it displays on top. I think I am going to do a style change to do this by changing the z-index to "image_url.length", correct?



// DEFINE the class constructor.
myClass = function() {
this.images = [];
};

// select the type of image group to load for this page
var groupid = 1;

// If you call these functions with the correct scope
// they will both refer to the same "images" Array.
myClass.prototype = {

preLoadImage: function() {

var div = document.getElementById('outputImages');
div.innerHTML = 'Loading Images...';

var sUrl = "php/loadCTScanXML.php?groupid=" +groupid;

var handleSuccess = function(o){

if(o.responseXML !== undefined){

var root = o.responseXML.documentElement;
var oTotalImages = root.getElementsByTagName('totalImages')[0].firstChild.nodeValue;

var x; // initialize the counter
// Format and display results in the response container.
for (x = 0; x < oTotalImages; x++) {

var oFilepath = root.getElementsByTagName('filepath')[x].firstChild.nodeValue;
var oFilenames = root.getElementsByTagName('filenames')[x].firstChild.nodeValue;
var oModality = root.getElementsByTagName('modality')[x].firstChild.nodeValue;

var imgSrc = "<span id=" + x + " style='position: relative; z-index: " + x + "'><img src='" + oFilepath + oFilenames + "'></img></span>";

div.innerHTML = imgSrc;


/* preload the images */

if (document.images) {

preload_image_object = new Image();
// set image url
image_url = new Image();
image_url[x] = imgSrc;

// var i = 0;
// for(i=0; i<= oTotalImages; i++)

// preload_image_object.src = image_url[i];

}else{

document.writeln("Your browser is too old. Please update it.");

}

} // end for loop

}

}

var handleFailure = function(o){

// document.writeln{"failed"};

}

var callback =
{
success:handleSuccess,
failure: handleFailure
// argument: { foo:"foo", bar:"bar" }
}

var request = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback);
},

keyDetectEvent: function(e) {

var evt = e || window.event;
var writeroot = document.getElementById('writeroot');
writeroot.innerHTML += 'keyCode is ' + evt.keyCode;
if(e.keyCode==38){
// if the up arrow is pressed then increment the currently displayed image up by one (ie. change cthead0004.jpg to cthead0005.jpg

}

if(e.keyCode==40){

// if the down arrow is pressed then increment the currently displayed image up by one (ie. change cthead0004.jpg to cthead0003.jpg

}
return document.defaultAction;

}

};

// Call the constructor to create one instance of the above class.
myObject = new myClass();

document.onkeypress=myObject.keyDetectEvent
window.onload = myObject.preLoadImage;




Any additional help would be greatly appreciated


live code here:

http://gabbr.com/sandbox/yahooui/yui.v2.2.0/ctscan2.php

notice anything fishy here...

/* preload the images */

if (document.images) {

preload_image_object = new Image();
// set image url
image_url = new Image();
image_url[x] = imgSrc;

// var i = 0;
// for(i=0; i<= oTotalImages; i++)

// preload_image_object.src = image_url[i];

}else{

document.writeln("Your browser is too old. Please update it.");

}