$(document).ready(
    function() 
    { 
        //############################################################
        // Set up the zoomimage component for the large images
        //############################################################
        $("#divMain1 > a").zoomimage({
	        centered: true,
	        caption: false,
	        preload: "load"
        });
        
        $("#divMain2 > a").zoomimage({
	        centered: true,
	        caption: false,
	        preload: "load"
        });
        
        $("#divMain3 > a").zoomimage({
	        centered: true,
	        caption: false,
	        preload: "load"
        });
    
        //############################################################
        // Setup the image swapping
        //############################################################
        $("#hypThumb1").click(function () { 
            HideAll();
            $("#divMain1").show();
        });
        
        $("#hypThumb2").click(function () {  
            HideAll();
            $("#divMain2").show();
        });
        
        $("#hypThumb3").click(function () {  
            HideAll();
            $("#divMain3").show();
        });
    }
);

//############################################################
// Function to hide all main images in one go
//############################################################
function HideAll()
{
    $("#divMain1").hide();
    $("#divMain2").hide();
    $("#divMain3").hide();
}