<?php
require_once("includes/quickmysql.php");

$possibleValues = array("home", "about", "projects", "contact");

if (isset($_GET["page"])){
  $page = $_GET["page"];
}else{
  // home page
  $page = "home";
}

$okToRequire = false;
for ($i = 0; $i < count($possibleValues); $i++){
  if ($page == $possibleValues[$i]){
    $okToRequire = true;
  }
}

if ($okToRequire == false){
  $page = "home";
}

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>

<title>Website</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){

$("#head").click(function(){
  window.location.href = "./";
});

var btn = $(".btn");
btn.mouseover(function(){
  $(this).css("background-color", "#999999");
}).mouseout(function(){
  $(this).css("background-color", "#666666");
}).click(function(){
  var page = $(this).text().toLowerCase();
  window.location.href = page;
});

});
</script>

<style type="text/css">
html, body {
    padding: 0px;
    margin: 0px;
    border: 0px;
  
    
    font-family : Georgia, serif;
}
#head{
  padding-top : 10px;
  background-color: #333333;
  width : 100%;
  height : 100px;
  color: #EFEFEF;
  cursor : pointer;
}
#centerHeader{
  width : 780px;
  padding-left: 20px;
  margin-left : auto;
  margin-right : auto;
}
#nav{
  padding-top : 4px;
  width : 100%;
  height : 30px;
  background-color: #CCCCCC;
  /*z-index :1;*/
}
#centerNav{
  width : 800px;
  margin-left : auto;
  margin-right : auto;
  margin-top : 0px;
}
.btn{
  padding : 3px;
  margin-right : 5px;
  background-color : #666666;
  color : white;
  float : left;
  cursor : pointer;
}
#content{
  margin-left: auto;
  margin-right:auto;
  width: 780px;
  padding: 10px;
  height: 100%;
  border : 1px solid gray;
  border-top : none;
  min-height : 600px;
}
</style>

</head>
<body>
<div id="head">
  <div id="centerHeader">
    <h1>Header</h1>
  </div>
</div>

<div id="nav">
  <div id="centerNav">
    <div class="btn">About</div>
    <div class="btn">Projects</div>
    <div class="btn">Contact</div>
  </div>
</div>

<div id="content">
  <?php  require_once($page . ".php"); ?>
</div>

</body>
</html>