ImageHandler = {
    picsOA                  : new Array(),  //associative array of the picture objects
    enlargeContWidthOffset  : null,         //enlargement container width minus enlarged image width

    //Constructor
    init: function()    {
        this.enlargeContWidthOffset = 13;
    },

    loadImgSrc: function(index,src) {
        this.picsOA[index]       = new Image;
        this.picsOA[index].src   = src;
    },

    /*---------------------------------------------------------------------------------
     * Accessor methods
    ----------------------------------------------------------------------------------*/
    setEnlargeContWidthOffset: function(num) {
        this.enlargeContWidthOffset = num;
    },
    //--------------------------------------------------------------------------------
    getEnlargeContWidthOffset: function(num) {
        return this.enlargeContWidthOffset;
    },
    /*---------------------------------------------------------------------------------
     * Modifier methods
    ----------------------------------------------------------------------------------*/
    loadScaledImages: function(maxWidth, maxHeight) {
        if(!isNaN(maxWidth) && !isNaN(maxHeight) && maxWidth > 0 && maxHeight > 0) {
            var newDims = new Array();
            var width;
            var height;
            var imgCont;

            //cycle through the images cache and rescale each image
            for(var i in this.picsOA) {
                if(document.getElementById(i)) { //check if the image element exists
                    //store this pic's original width and height
                    width  = this.picsOA[i].width;
                    height = this.picsOA[i].height;

                    //calculate the rescaled dimensions for this pic to fit within maxWidth and maxHeight
                    newDims = this.calcNewDimensions(width, height, maxWidth, maxHeight);

                    //load the rescaled image
                    imgCont         = document.getElementById(i);
                    imgCont.width   = newDims["width"];
                    imgCont.height  = newDims["height"];
                    imgCont.src     = this.picsOA[i].src;
                }
            }
        }
    },
    //------------------------------------------------------------------------------

    loadScaledImage: function(picId, maxWidth, maxHeight){
        if(document.getElementById(picId) && !isNaN(maxWidth) && !isNaN(maxHeight) && maxWidth > 0 && maxHeight > 0) {
            var newDims = new Array();

            //get this pic's original width and height
            var width  = this.picsOA[picId].width;
            var height = this.picsOA[picId].height;

            //calculate the rescaled dimensions for this pic to fit within maxWidth and maxHeight
            newDims = this.calcNewDimensions(width, height, maxWidth, maxHeight);

            //load the rescaled image
            var imgCont     = document.getElementById(picId);
            imgCont.width   = newDims["width"];
            imgCont.height  = newDims["height"];
            imgCont.src     = this.picsOA[picId].src;
        }
    },
    //------------------------------------------------------------------------------

    loadScaledImageToImgId: function(imgId,picId, maxWidth, maxHeight)  {
        if(document.getElementById(imgId) && !isNaN(maxWidth) && !isNaN(maxHeight) && maxWidth > 0 && maxHeight > 0) {
            var newDims = new Array();

            //get this pic's original width and height
            var width  = this.picsOA[picId].width;
            var height = this.picsOA[picId].height;

            //calculate the rescaled dimensions for this pic to fit within maxWidth and maxHeight
            newDims = this.calcNewDimensions(width, height, maxWidth, maxHeight);

            //load the rescaled image
            var imgCont     = document.getElementById(imgId);
            imgCont.width   = newDims["width"];
            imgCont.height  = newDims["height"];
            imgCont.src     = this.picsOA[picId].src;
        }
    },
    //------------------------------------------------------------------------------

    calcNewDimensions: function(width, height, maxWidth, maxHeight){
        newDims = new Array();

        //scaling factors
        var xRatio = maxWidth / width;
        var yRatio = maxHeight / height;

        //calculate the new width and height
        if(width <= maxWidth && height <= maxHeight)  {	//image does not need resizing
            newDims["width"] 	= width;
            newDims["height"] 	= height;
        }
        else if(xRatio * height < maxHeight) {
            newDims["height"] = Math.round(xRatio * height);
            newDims["width"]  = maxWidth;
        }
        else {
            newDims["width"]  = Math.round(yRatio * width);
            newDims["height"] = maxHeight;
        }
        return newDims;
    },
    //------------------------------------------------------------------------------

    showEnlargement: function (enlargementContId) {
        var enlargementCont     = document.getElementById(enlargementContId);
        //display the enalrgement
        enlargementCont.style.width         = newDims["width"] + this.enlargeContWidthOffset + "px";
        enlargementCont.style.display       = "block";
        enlargementCont.style.visibility    = "visible";
    },
    //-----------------------------------------------------------------------------

    hideEnlargement: function(enlargementContId) {
        var enlargementCont = document.getElementById(enlargementContId);
        //hide the enlargement
        enlargementCont.style.display     = "none";
        enlargementCont.style.visibility  = "hidden";
    }
};