function GetElementLeft(element)
{
    // Get elment's offsetLeft.
    var x = element.offsetLeft;

    // Recurse up the tree of elements adding offsetLeft each time.
    element = element.offsetParent;
    while(element != null)
    {
        x = parseInt(x) + parseInt(element.offsetLeft);
        element = element.offsetParent;
    }
    return x;
}

function GetElementTop(element)
{    
    // Get elment's offsetTop.
    var y = element.offsetTop;

    // Recurse up the tree of elements adding offsetTop each time.
    element = element.offsetParent;
    while(element != null)
    {
        y = parseInt(y) + parseInt(element.offsetTop);
        element = element.offsetParent;
    }
    return y;
}

function ShowGalleryPicture(imgSrcname)
{
    //alert("ShowGalleryPicture:");

    // Retrieve "main_gallery_picture", i.e. the root div of the entire picture assemby.
    var assembly = document.getElementById("main_gallery_picture");
	if(assembly.style.visibility == "visible")
	{
		return;
	}

	// Make the whole picture assembly visible.
	assembly.style.visibility = "visible";

	// Create a new image. Note that the source images are assumed to be of the correct size
    // to avoid scaling.
	var img = document.createElement("img");
	img.src = imgSrcname;
	img.id = "main_gallery_picture_imgbox_img";
	img.style.width = '640px';
	img.style.height = '480px';
	img.style.margin = '0px';
	img.style.border = '0px';
	img.style.padding = '0px';
	img.style.position = 'static';

	// Append the image to the div called "main_gallery_picture_imgbox".
	var imgbox = document.getElementById("main_gallery_picture_imgbox");
	imgbox.style.width = img.style.width;
	imgbox.style.height = img.style.height;
	imgbox.appendChild(img);

	// Get the outer div that will contain our assembly.
	var outerDiv = document.getElementById("main_content_area");
	var outerDivLeft = GetElementLeft(outerDiv);
	var outerDivTop = GetElementTop(outerDiv);
	var outerDivWidth = outerDiv.clientWidth;
	var outerDivHeight = outerDiv.clientHeight;

	// Center the "main_gallery_picture" div in the outer div.
	assembly.style.left = (outerDivLeft + ((outerDivWidth - parseInt(img.style.width)) /2)) + 'px';
	assembly.style.top = outerDivTop +'px';

	// Allow user to close picture by clicking on or moving mouse off the image.
	if(img.addEventListener)
	{
	    img.addEventListener('click', HideGalleryPicture, false);
	    img.addEventListener('mouseout', HideGalleryPicture, false);
	} 
	else 
	{
	    img.attachEvent('onclick', HideGalleryPicture);
	    img.attachEvent('onmouseout', HideGalleryPicture);
    }
}

function HideGalleryPicture()
{
    //alert("HideGalleryPicture:");

    var assembly = document.getElementById("main_gallery_picture");
	if(assembly.style.visibility == "visible")
	{
		// Hide the entire assembly.
		assembly.style.visibility = "hidden";

		// Clean up event listeners.
		var img = document.getElementById("main_gallery_picture_imgbox_img");
		if(img.removeEventListener)
        {
            img.removeEventListener('click', HideGalleryPicture, false);
            img.removeEventListener('mouseout', HideGalleryPicture, false);
		}
		else
        {
            img.detachEvent('onclick', HideGalleryPicture);
            img.detachEvent('onmouseout', HideGalleryPicture);
		}
		
        // Detach the image (which will clean up the image).
		var imageBox = document.getElementById("main_gallery_picture_imgbox");
		imageBox.removeChild(img);
		//alert("HideGalleryPicture: AllDone.");
	}
}

function OpenPopup(obj, imgSrcname) 
{
    //alert("OpenPopup:");

    // Retrieve "main_popup", i.e. the root of the entire popup assemby.
    var popup = document.getElementById("main_popup");
    if(popup.style.visibility == "visible")
    {
        return;
    }

    // Make the whole popup assembly visible.
    popup.style.visibility = "visible";

    // Create a new image.
    var img = document.createElement("img");
    img.src = imgSrcname;
    img.id = "main_popup_img";
    img.style.width = 'auto';
    img.style.height = 'auto';
    img.style.margin = '0px';
    img.style.border = '0px';
    img.style.padding = '0px';
    img.style.position = 'static';

    // Append the image to the div called "main_popup".
    popup.style.left = GetElementLeft(obj) -32 + 'px';
    popup.style.top = GetElementTop(obj) -96 + 'px';
    popup.appendChild(img);

    // Allow user to close popup by moving mouse off the image.
    if(img.addEventListener)
    {
        img.addEventListener('mouseout', ClosePopup, false);
    }
    else
    {
        img.attachEvent('onmouseout', ClosePopup);
    }
}

function ClosePopup()
{
    //alert("ClosePopup:");

    var popup = document.getElementById("main_popup");
    if(popup.style.visibility == "visible")
	{
		// Hide the entire popup assembly.
	    popup.style.visibility = "hidden";

	    // Clean up event listeners.
	    var img = document.getElementById("main_popup_img");
	    if(img.removeEventListener)
        {
            img.removeEventListener('mouseout', ClosePopup, false);
	    }
        else
        {
            img.detachEvent('onmouseout', ClosePopup);
        }
        
        // Detach the image (which will clean up the image).
		popup.removeChild(img);
		//alert("ClosePopup: All done.");
	}
}