// Load the images in to an array for the random image swap
        MyImages = new Array();
        MyImages[0] = 'Images/HomePage/hp1.jpg';
        MyImages[1] = 'Images/HomePage/hp2.jpg';
        MyImages[2] = 'Images/HomePage/hp3.jpg';
        MyImages[3] = 'Images/HomePage/hp4.jpg';
        MyImages[4] = 'Images/HomePage/hp5.jpg';
        MyImages[5] = 'Images/HomePage/hp6.jpg';
        function SwapImage(imageNumber)
        {
           var hpImage = document.getElementById("imgMain")
           var thisImgLink = document.getElementById("imgLink" + imageNumber)
   
           //set the previous and next values
           
            switch (imageNumber)
            {
               case "1":
                    // Swap the image
                    hpImage.src = "Images/HomePage/hp1.jpg";
                    // Set the link number to red
                    thisImgLink.style.color = "#CC3333";
                    document.getElementById("next").style.display = "inline";
                    document.getElementById("prev").style.display = "none";                     //Hide the previous button
                    //tell the page what we clicked to we can use the next prev buttons
                    document.getElementById("currentImageNumber").value = imageNumber;
                    break;
               case "2":
                    hpImage.src = "Images/HomePage/hp2.jpg";
                    thisImgLink.style.color = "#CC3333";
                    document.getElementById("next").style.display = "inline";
                    document.getElementById("prev").style.display = "inline";
                    document.getElementById("currentImageNumber").value = imageNumber;
                     break;
               case "3":
                    hpImage.src = "Images/HomePage/hp3.jpg";
                    thisImgLink.style.color = "#CC3333";
                    document.getElementById("next").style.display = "inline";
                    document.getElementById("prev").style.display = "inline";
                    document.getElementById("currentImageNumber").value = imageNumber;
                     break;
               case "4":
                    hpImage.src = "Images/HomePage/hp4.jpg";
                    thisImgLink.style.color = "#CC3333";
                    document.getElementById("next").style.display = "inline";
                    document.getElementById("prev").style.display = "inline";
                    document.getElementById("currentImageNumber").value = imageNumber;
                     break;
               case "5":
                    hpImage.src = "Images/HomePage/hp5.jpg";
                    thisImgLink.style.color = "#CC3333";
                    document.getElementById("next").style.display = "inline";
                    document.getElementById("prev").style.display = "inline";
                    document.getElementById("currentImageNumber").value = imageNumber;
                    break;
               case "6":
                    hpImage.src = "Images/HomePage/hp6.jpg";
                    thisImgLink.style.color = "#CC3333";
                    document.getElementById("next").style.display = "none";
                    document.getElementById("prev").style.display = "inline";
                    document.getElementById("currentImageNumber").value = imageNumber;
                    break;
            }
            
            // Set the rest of the links back to gray
            for(i = 1; i <= 6; i++)
            {
             if(i != parseInt(imageNumber))
                {
                document.getElementById("imgLink" + i).style.color = "#888888"
                }
            }
            
        }
        
        // Go back one image
          function prev()
            {
                
                var currentImageNumber = document.getElementById("currentImageNumber").value
                var prevImageNumber = parseInt(currentImageNumber) - 1
                SwapImage(String(prevImageNumber))
                
            }
            
        // Move forward one image
        function next()
        {
              var currentImageNumber = document.getElementById("currentImageNumber").value
              var nextImageNumber = parseInt(currentImageNumber) + 1
              SwapImage(String(nextImageNumber))
          }

      
         // Random image called on page load
          function randomImage() {
              document.getElementById("imgMain").setAttribute("src", MyImages[Math.round(Math.random() * 5)])
          }