//Use to create a preview image at the current cursor position
var imagePreview =
{
    previewElement: null, 			//This variable will hold a link to the preview image DOM Element
    xOffset: 0,           			//Number of pixels to offset the preview on the x axis of the cursor position
    yOffset: -120,           			//Number of pixels to offset the preview on the y axis of the cursor position
    timer: null,           			//A link to the delay timer if one is active
    className: "imageBoxPreview",  	//Set this to the CSS style that you would like to use for the preview window
    imageClassName: "previewImage", //Set this to the CSS style that you would like used for the image

    //show: Call this function to show an image preview
    //event - mouse event variable
    //filename - the path/filename of the image you want to display
    //width, height - the width and height of the preview window
    //delay - The number of milliseconds the user has to have the mouse on the object before the preview is shown
    show: function(event, imageID, node, filename, width, height, delay)
    {
        //Fix cursor position problem for IE
        imagePreview.fixCursorPosition(event);

        //Delay request by specified number of seconds
        if(delay > 0)
        {
            imagePreview.timer = setTimeout(function() { 
                imagePreview.show(event, imageID, node, filename, width, height, -1);
            }, delay);
        }
        //Our delay is up, make our preview visible and make sure the timer is cleared
        else if((delay == -1) && (imagePreview.previewElement !== null))
        {
            imagePreview.clearTimer();
            imagePreview.previewElement.style.visibility = "visible";
            return;
        }

        //Clear any pending timer if no delay was set
        if(delay <= 0) imagePreview.clearTimer();

        //Check to see if a preview is already being displayed, if so remove it
        if(imagePreview.previewElement !== null)
        {
            imagePreview.previewElement.parentNode.removeChild(imagePreview.previewElement);
            imagePreview.previewElement = null;
        }

        //Create the new preview element
        var parentElement = document.body;
        imagePreview.previewElement = document.createElement('div');

        imagePreview.previewElement.className = imagePreview.className;
        imagePreview.previewElement.style.width = width + "px";
        imagePreview.previewElement.style.height = height + "px";

        var coordinates = imagePreview.getAbsoluteCoordinates(imageID, node);
        imagePreview.previewElement.style.left = (coordinates.x + imagePreview.xOffset) + "px";
        imagePreview.previewElement.style.top = (coordinates.y  + imagePreview.yOffset) + "px";
        if(delay > 0) imagePreview.previewElement.style.visibility = "hidden";

        var image = document.createElement('img');
        image.alt = "";
        image.src = filename;
        image.className = imagePreview.imageClassName;

        imagePreview.previewElement.appendChild(image);
        parentElement.appendChild(imagePreview.previewElement);
    },
    //Destroy the current preview window
    hide: function()
    {
        //Clear any pending timer
        imagePreview.clearTimer();

        //Destroy the preview
        if(imagePreview.previewElement !== null)
        {
            imagePreview.previewElement.parentNode.removeChild(imagePreview.previewElement);
            imagePreview.previewElement = null;
        }
    },
    //Clear any pending timer
    clearTimer: function ()
    {
        if(imagePreview.timer !== null)
        {
            clearTimeout(imagePreview.timer);
            imagePreview.timer = null;
        }
    },
    //Fix cursor position offset if browser is IE
    fixCursorPosition: function(event)
    {
        //If pageX & pageY exist then no fix is necessary
        if((event.pageX) && (event.pageY)) return;

        //Create a pageX & pageY with the appropirate offset
        if((event.clientX) && (event.clientY))
        {
            event.pageX = event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
            event.pageY = event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
        }
    },
    //Returns the bottom right absolute coordinates of the node
    getAbsoluteCoordinates: function(imageID, node)
    {
        //Return object
        var coordinates = {
            x: 0,
            y: 0
        }

        //Create a link to the pushpin
        var pin = node;
        
        //Create a link to the image the pin is mapped on
        var e = document.getElementById(imageID);
        
        //Get the coordinates of the push pin
        var coords = pin.coords.split(',');
        var offsetWidth = parseInt(coords[2]);
        var offsetHeight = parseInt(coords[3]);
        
        //Add the width and height of the push pin
        coordinates.x = offsetWidth;
        coordinates.y = offsetHeight;

        //Loop through all the nodes parents adding up the offsets
        while(e.nodeName.toLowerCase() != "body")
        {
            coordinates.x += parseInt(e.offsetLeft);
            coordinates.y += parseInt(e.offsetTop);
            e = e.offsetParent;

            if (!e) break;   //Added to fix error with IE6 and 7.
        }

        return coordinates;
    }
}