Untitled

<html>
<header>

<title>Beach Party Planner!</title>
<div id="title" style="text-align:center;">
<h1>Beach Planner!</h1>
<script lang="Javascript">

        function selectDisplay(selectedItem){

                hideAll()
                switch(selectedItem){


                case 'map':
                            document.getElementById("map").style.display = 'block';
                            break;
                case 'rainfall':
                            document.getElementById("rainfall").style.display = 'block';
                            break;
                case 'forecast':
                            document.getElementById("forecast").style.display = 'block';
                            break;
                case 'trafficcam':
                            document.getElementById("trafficcam").style.display = 'block';
                            break;
                case 'beachcam':
                            document.getElementById("beachcam").style.display = 'block';

                                    }
                }

         function hideAll(){
             document.getElementById("map").style.display = 'none';
             document.getElementById("rainfall").style.display = 'none';
             document.getElementById("forecast").style.display = 'none';
             document.getElementById("trafficcam").style.display = 'none';
             document.getElementById("beachcam").style.display = 'none';
         }

      function selectCam(selectedcamera)
            {
                switch(selectedcamera){
                    case 'cam1':
                        document.getElementById("image").src="http://131940.qld.gov.au//DMR.Controls/WebCams/DisplayImage.ashx?FilePath=\Metropolitan\MRMETRO-1214.jpg";
                        break;
                    case 'cam2':
                        document.getElementById("image").src="http://131940.qld.gov.au/DMR.Controls/WebCams/DisplayImage.ashx?FilePath=Metropolitan/Upper_MtGravatt_Pac_Mwy_Nth.jpg";
                        break;
                    case 'cam3':
                        document.getElementById("image").src="http://131940.qld.gov.au/DMR.Controls/WebCams/DisplayImage.ashx?FilePath=Metropolitan/Rochedale_Pac_Mwy_Sth.jpg";
                        break;
                    case 'cam4':
                        document.getElementById("image").src="http://131940.qld.gov.au//DMR.Controls/WebCams/DisplayImage.ashx?FilePath=\Gold_Coast\MRSCHD-305.jpg";
                        break;
                    case 'cam5':
                        document.getElementById("image").src="http://131940.qld.gov.au//DMR.Controls/WebCams/DisplayImage.ashx?FilePath=\Gold_Coast\MRSCHD-297.jpg";
                        break;
                    case 'cam6':
                        document.getElementById("image").src="http://131940.qld.gov.au/DMR.Controls/WebCams/DisplayImage.ashx?FilePath=Gold_Coast/smith-kumbari-east.jpg";
                        break;
                    case 'cam7':
                        document.getElementById("image").src="http://131940.qld.gov.au/DMR.Controls/WebCams/DisplayImage.ashx?FilePath=Gold_Coast/gch_theinlet.jpg";
                        break;

                        }

         }

</script>
</header>
<body>

<div id="buttons" style="margin: 0px auto 0px auto; text-align: center;">
   <input type=button  value="Map" onclick="selectDisplay('map')">
   <input type=button  value="Rainfall" onclick="selectDisplay('rainfall')">
   <input type=button  value="Forecast" onclick="selectDisplay('forecast')">
   <input type=button  value="Traffic Cam" onclick="selectDisplay('trafficcam')">
   <input type=button  value="Beach Cam" onclick="selectDisplay('beachcam')">
</div>

<div id="map" style="text-align:center; display: none;">
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.google.com/maps?f=d&amp;source=s_d&amp;saddr=22+York+St,+Wilston+QLD,+Australia&amp;daddr=QUT+-+Gardens+Point+campus,+2+George+St,+Brisbane+QLD,+Australia&amp;hl=en&amp;geocode=FTxoXf4dxeoeCSlrJfIs2lmRazHgzVHqWBWcjw%3BFSe5XP4dPgcfCSFehco3P0VAiynlFL1LEFqRazFehco3P0VAiw&amp;aq=0&amp;oq=22+york+street+&amp;sll=-46.073231,146.777344&amp;sspn=78.113536,178.417969&amp;mra=ls&amp;ie=UTF8&amp;t=m&amp;ll=-27.45386,153.022026&amp;spn=0.041812,0.023093&amp;output=embed"></iframe><br /><small>
</div>

<div id="rainfall" style="text-align:center;display:none;">
<img src="http://www.bom.gov.au/radar/IDR662.gif?20130516031448" alt="Sorry, no Rainfall data is available">
</div>


<div id="forecast" style="text-align:center;display:none;">
<img src="http://www.yr.no/place/Australia/Queensland/Brisbane/meteogram.png" alt="Sorry, no forecast data is available">
</div>


<div id="trafficcam" style="text-align:center;display:none;">
<img id="image" src="http://131940.qld.gov.au/DMR.Controls/WebCams/DisplayImage.ashx?FilePath=Gold_Coast/GrandisSth.jpg" alt="Sorry, no traffic cam is available">

</br>

<select>
    <option value="Camera 1" onclick="selectCam('cam1')">Cam1</option>
    <option value="Camera 2" onclick="selectCam('cam2')">Cam2</option>
    <option value="Camera 3" onclick="selectCam('cam3')">Cam3</option>
    <option value="Camera 4" onclick="selectCam('cam4')">Cam4</option>
    <option value="Camera 5" onclick="selectCam('cam5')">Cam5</option>
    <option value="Camera 6" onclick="selectCam('cam6')">Cam6</option>
</select>
</br>
<!-- <input type=button  value="cam" onclick="selectCam()"> -->
</div>


<div id="beachcam" style="text-align:center;display:none;">
<img src="http://webcams.bsch.au.com/surfers_paradise_se/760x570.jpg" alt ="Sorry, no beach cam is available">
</div>


</html>