var changeInProgress = false;
var indexSmallPhoto;
var indexPhotoSmall = new Array ();
var selected;
var norm;

//this function is used to display the thumbnail image in the main image block.
function displayAsMainImage (obj, src) {
    var topImage = document.getElementById ('Top_Image');
    var bottomImage = document.getElementById ('Bottom_Image');
    if (topImage.src != obj.src) {
        if (indexSmallPhoto) {
            //set the default border of the thumbnail.
            //indexSmallPhoto.className = norm;
        } else {
            //document.getElementById ('Small_Photo_0_0').className = norm;
        }
        indexSmallPhoto = obj;
        //indexSmallPhoto.className = selected;
        //setting the bottom image to the top.. used as a placeholder.
        bottomImage.src = topImage.src;
        //fade in the new image.
        changeOpac (1,'Top_Image');
        //display the new image.
        bottomImage.style.display = "block";
        topImage.src = obj.src;
        if (!changeInProgress) {
            opacity ('Top_Image',1,100, 1000);
        }
    }
}

//this function does the fade in of the new picute.
function opacity(id, opacStart, opacEnd, millisec) { 
        changeInProgress = true;
        //speed for each frame 
        var speed = Math.round(millisec / 100); 
        var timer = 0; 

        //determine the direction for the blending, if start and end are the same nothing happens 
        if(opacStart > opacEnd) { 
                for(var i = opacStart; i >= opacEnd; i--) { 
                setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed)); 
                timer++; 
                } 
        } else if(opacStart < opacEnd) { 
                for(var i = opacStart; i <= opacEnd; i++) { 
                        setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed)); 
                        timer++; 
                } 
        }
        
        setTimeout("changeInProgress = false;",(timer * speed));
} 

        //change the opacity for different browsers 
function changeOpac(opacity, id) { 
        var object = document.getElementById(id).style; 
        object.opacity = (opacity / 100); 
        object.MozOpacity = (opacity / 100); 
        object.KhtmlOpacity = (opacity / 100); 
        object.filter = "alpha(opacity=" + opacity + ")"; 
}