// Define the BusyBox class (function) function BusyBox(id, instanceVarName, imageCount, imageName, imageExt, imageDelay) { // Initialize object this.id = id; this.ImageCount = imageCount; this.CurrentFrame = 0; this.ImageWidth = 0; this.ImageHeight = 0; this.ImageName = imageName; this.ImageExt = imageExt; this.ImageDelay = imageDelay; // Default to 250 milliseconds this.Enabled = true; // Retain the name of the instantiated object variable so that we can animate using the setTimeout statement this.instanceVarName = instanceVarName; // Allows us to stop the animation with clearTimeout(), should we ever want to this.timeout_id = null; // Cache (pre-load) images this.CacheImages(); } BusyBox.prototype.CacheImages = function() { // Instantiate the array to store the image references this.Images = new Array(this.ImageCount); // Load all the images to cache into the aniframes array for(var i = 0; i < this.ImageCount; i++) { this.Images[i] = new Image(); this.Images[i].src = this.ImageName + i + this.ImageExt; } } BusyBox.prototype.Animate = function() { // Display the current frame document.getElementById("animation").src = this.Images[this.CurrentFrame].src; // Increment the frame counter this.CurrentFrame = (this.CurrentFrame + 1)%this.ImageCount; // Display the next frame in (imageDelay) 250 milliseconds this.timeout_id = setTimeout(this.instanceVarName + ".Animate();", this.ImageDelay); } BusyBox.prototype.StopAnimate = function() { this.timeout_id = null; } BusyBox.prototype.Hide = function() { div = document.getElementById(this.id); div.style.visibility = "hidden"; } // This function displays the busy dialox box to the user. This function centers the // busy dialog box, makes it visible, and starts the animation. // This function will typically be called by the body event: BusyBox.prototype.Show = function() { if (this.Enabled) { div = document.getElementById(this.id); this.ImageWidth = div.clientWidth; this.ImageHeight = div.clientHeight; // Center the BusyBox in the window regardless of the scroll positions ImageLeft = (document.body.clientWidth - this.ImageWidth) / 2; ImageTop = (document.body.clientHeight - this.ImageHeight) / 2; ImageLeft = ImageLeft + document.body.scrollLeft; ImageTop = ImageTop + document.body.scrollTop; // Position and show the busy box div = document.getElementById(this.id); //div.style.top = ImageTop; //div.style.left = ImageLeft; div.style.visibility = "visible"; div.style.position = "absolute"; div.style.zIndex = "99999"; // Start the animation this.Animate(); } } /* Instantiate BusyBox object This code will be generated by the control (or page master) */ busyBox = new BusyBox("BusyBoxDiv", "busyBox", 4, "images/gears_ani_", ".gif", 125);