// once the page has loaded, these functions will set up the page.
function init ()
{
        
        // store the images DIV, the images and the links as variables
        var imagesDiv = document.getElementById('images');
        var images = imagesDiv.getElementsByTagName('img');
        var linkages = imagesDiv.getElementsByTagName('a');
                                                
        // move through each of the images in the images DIV and add an onclick function
        for (i in images)
        {
                // The onlick function will display an image in the imgDisplay DIV
                images[i].onclick = function ()
                {
                        // Set a 'loading..' message for people with small bandwidth
                        document.getElementById('loading').innerHTML = "loading...";
                        
                        // Store the filename of the clicked image, and store its ALT text.  Then trim the filepath and add the 'img/' path
                        var fileName = this.src;
                        var exampleOf = this.alt;
                        var newSrc = 'img/' + fileName.substring(fileName.lastIndexOf('/')+1,fileName.length);

                        // Store the display Link for later
                        var container = document.getElementById('imgDisplayLink');
                        
                        // Store the imgContainer DIV and hide it if it's not already hidden.
                        var imgShell = document.getElementById('imgContainer');
                        imgShell.style.visibility = "hidden";
                        
                        // remove any image that might already be in the display link
                        if (container.firstChild != null)
                        {
                                container.removeChild (container.firstChild);
                        }
                        
                        // set up a new image using the alt text, set its ID and hide it for now.  The Image SRC
                        // has to be set AFTER the ONLOAD function otherwise IE will not render cached images.
                        var imgHolder = new Image();
                        imgHolder.alt = exampleOf;
                        imgHolder.id = "imgDisplay";
                        imgHolder.style.visibility = "hidden";
                        
                        // add the new image at the beginning of the display link
                        container.insertBefore (imgHolder, container.firstChild);

                        // Make sure we don't perform the following code until the image has fully loaded
                        // Otherwise the code might not get the correct dimensions etc..
                        imgHolder.onload = function()
                        {
                                // Check to see if the image is wider than it is high.  Depending on what we'll find, we'll set the percentage
                                // change in size that we require.  Pictures should be no wider than 350px or higher than 350px
                                if (imgHolder.width >= imgHolder.height)
                                {
                                        var percentDiff = 350 / imgHolder.width;									
                                }
                                else
                                {
                                        var percentDiff = 350 / imgHolder.height;
                                }

                                // set the new height and width
                                imgWidth = imgHolder.width * percentDiff;
                                imgHeight = imgHolder.height * percentDiff;
                                // and apply them
                                imgHolder.style.width = imgWidth + "px";
                                imgHolder.style.height = imgHeight + "px";
                                
                                // Next we want to grab the DIV containing the image and turn it into a nice frame.
                                // var imgShell = document.getElementById('imgContainer');
                                // Set the width and height to be larger than the image							
                                var newWidth = imgHolder.width + 20;
                                var newHeight = imgHolder.height + 30;
                                imgShell.style.width = newWidth + "px";
                                imgShell.style.height = newHeight + "px";
                                // Set the background, border, margin and textAlign
                                imgShell.style.background = "#fff";
                                imgShell.style.border = "2px solid #36c";
                                imgShell.style.margin = "0px auto";
                                imgShell.style.textAlign = "center";

                                // Finally we style and set the Caption text and link for the image
                                document.getElementById('exampleOf').style.width = imgShell.style.width;
                                document.getElementById('exampleOf').innerHTML = exampleOf;								
                                document.getElementById('imgDisplayLink').href = newSrc;

                                // Get rid of the 'loading..' message
                                document.getElementById('loading').innerHTML = "";

                                // Make the frame visible
                                imgShell.style.visibility = "visible";

                                // And make the image visible
                                imgHolder.style.visibility = "visible";
                        }
                        ;
                                                
                        // The SRC of the new image must be set AFTER the ONLOAD function so that
                        // IE renders cached images correctly.
                        imgHolder.src = newSrc;
                        container.style.visibility = "visible";

                }
                ;
        }
        
        // Go through all the thumbnail images disabling the links.  If javascript isn't enabled then the links enable
        // the user to see the larger images.
        for (l in linkages)
        {
                linkages.item(l).removeAttribute("href");
        }
        
}