new layout

author: raylu <raylu@mixpanel.com> 2011-11-05 03:04:49 -0700
committer: raylu <raylu@mixpanel.com> 2011-11-05 03:04:49 -0700
commit: cf4af138b16da878404cf3319d5d988dacee198a (patch)
tree: 41187e9c8206657f9f5138de70c5e5a6f447a251
parent: 264ed976da6b3012209386a76520327faeddf82e (diff)
download: pathery-cf4af138b16da878404cf3319d5d988dacee198a.tar.xz
17 files changed, 441 insertions, 425 deletions
diff --git a/css/mapstyle.css b/css/maps.css
index cfaea48..035672a 100644
--- a/css/mapstyle.css
+++ b/css/maps.css
@@ -1,23 +1,15 @@
 .grid_dsp_data {
 	padding:1px;
-	font-style:italic;
 	font-weight:bold;
 }
 
-.grid_outer
-{
+.grid_outer {
 	position:relative;
-	padding: 0px;
-	margin-top: 10px;
-	margin-bottom: 1px;
-	padding-top:2px;
-	padding-bottom:1px;
-	margin-left:auto;
-	margin-right:auto;
-	border-top: 1px solid #000;
-	border-left: 1px solid #000;
-	border: 0px solid #000;
-	background-color: #333399;
+	padding: 2px 0 1px;
+	margin: 0 auto;
+	background-color: #334;
+	border-radius: 2px;
+	box-shadow: 0 0 2px #777;
 }
 .grid_outer a
 {
@@ -46,7 +38,8 @@
 .grid_dsp_mid,
 .grid_dsp_right {
 	overflow: hidden;
-	position:relative;
+	white-space: nowrap;
+	position: relative;
 	float: left;
 	padding:2px;
 	color: #FFFFFF;
diff --git a/css/page.css b/css/page.css
new file mode 100644
index 0000000..2689aec
--- /dev/null
+++ b/css/page.css
@@ -0,0 +1,119 @@
+body {
+	font-size: 16px;
+	font-family: helvetica, sans-serif;
+	text-shadow: rgba(0,0,0,.01) 0 0 1px; /* this is definitely not a webkit-specific hack to fix font aliasing */
+	background-color: #121212;
+	color: #ddd;
+	margin: 0;
+}
+
+p {
+	margin-top: 0;
+}
+
+form {
+	display: inline;
+}
+
+a:link, a:visited, a:active {
+	text-decoration: underline;
+	color: #FFFFCC;
+	transition:color .4s ease-out;
+	-webkit-transition:color .4s ease-out;
+	-o-transition:color .4s ease-out;
+	-moz-transition:color .4s ease-out;
+}
+a:hover {
+	color: #EEDDBB;
+	text-decoration: none;
+	transition:color 0s ease-out;
+	-webkit-transition:color 0s ease-out;
+	-o-transition:color 0s ease-out;
+	-moz-transition:color 0s ease-out;
+}
+
+.wrapper {
+	width: 900px;
+	margin: 0 auto;
+}
+
+.float {
+	float:left;
+}
+.lfloat {
+	float:right;
+}
+
+#topbar {
+	padding: 15px 15px;
+	margin: 0 auto 40px;
+	text-align: center;
+	position: relative; /* for #user */
+	min-width: 900px;
+	background: -moz-linear-gradient(top, #252525, #121212);
+	background: -webkit-linear-gradient(top, #252525, #121212);
+}
+#topbar a.nav {
+	background-color: #222;
+	margin-right: 15px;
+	padding: 7px 10px;
+	border-radius: 5px;
+	text-decoration: none;
+	border: 1px solid #333;
+	box-shadow: 0 0 1px #444;
+}
+#topbar a.nav.selected, #topbar a.nav:hover {
+	border: 1px solid #222;
+	background-color: #2c2c2c;
+}
+#topbar #user {
+	position: absolute;
+	right: 25px;
+	top: 5px;
+	text-align: right;
+}
+
+#difficulties {
+	width: 100%;
+	text-align: center;
+	margin-bottom: 25px;
+}
+#difficulties a {
+	margin: 0 10px;
+	color: #ddd;
+	background-color: #334;
+	padding: 3px 10px;
+	border-radius: 5px;
+	text-decoration: none;
+	border: 1px solid #446;
+	box-shadow: 0 0 1px #445;
+}
+#difficulties a.selected, #difficulties a:hover {
+	background-color: #446;
+	border: 1px solid #223;
+}
+
+table.score {
+	border: 1px solid #777;
+	background-color: #252530;
+	color: #ccc;
+	margin: 40px auto 0;
+}
+table.score th, table.score td {
+	padding: 5px;
+}
+table.score th {
+	border: 1px solid #777;
+}
+
+#copy {
+	text-align: center;
+	margin: 40px auto 0;
+}
+#copy iframe {
+	border: none;
+	width: 95px;
+	height: 21px;
+	vertical-align: text-bottom;
+	overflow: hidden;
+}
diff --git a/css/pagestyle.css b/css/pagestyle.css
deleted file mode 100644
index b882bfe..0000000
--- a/css/pagestyle.css
+++ /dev/null
@@ -1,62 +0,0 @@
-body {
-	font-size: 16px;
-	font-family: cantarell, helvetica, sans-serif;
-	text-shadow: rgba(0,0,0,.01) 0 0 1px; /* this is definitely not a webkit-specific hack to fix font aliasing */
-	background-color: #121212;
-	color: #ffffff;
-
-	min-width: 800px;
-	margin: 0;
-	padding: 6px;
-}
-
-form {
-	display: inline;
-}
-
-a:link, a:visited, a:active {
-	text-decoration: underline;
-	color: #FFFFCC;
-	transition:color .4s ease-out;
-	-webkit-transition:color .4s ease-out;
-	-o-transition:color .4s ease-out;
-	-moz-transition:color .4s ease-out;
-}
-a:hover {
-	color: #EEDDBB;
-	text-decoration: none;
-	transition:color 0s ease-out;
-	-webkit-transition:color 0s ease-out;
-	-o-transition:color 0s ease-out;
-	-moz-transition:color 0s ease-out;
-}
-
-.col1 {
-	float: left;
-	width: 25%;
-	min-width: 300px;
-	padding: 0 25px;
-}
-.col2 {
-	float: left;
-	width: 50%;
-	margin: 0 auto;
-}
-
-.float {
-	float:left;
-}
-.lfloat {
-	float:right;
-}
-
-.topbar {
-	background: #002266;
-	/*
-	background: #000044 url(../images/OverlayStart50i.png);
-	height:35px;
-	*/
-	width: 95%;
-	padding: 5px 15px;
-	margin: 0 auto;
-}
diff --git a/css/statsstyle.css b/css/stats.css
index a15636f..c36c1d0 100644
--- a/css/statsstyle.css
+++ b/css/stats.css
@@ -1,3 +1,11 @@
+.col1 {
+	float: left;
+	margin-right: 30px;
+}
+.col2 {
+	float: left;
+	width: 450px;
+}
 table {
 	border-collapse: collapse;
 }
@@ -5,7 +13,7 @@ td, th {
 	padding: 3px;
 }
 .lbrow {
-	background: #000000;
+	background: #000;
 	transition:background .5s;
 	-webkit-transition:background .5s;
 		-o-transition:color .5s;
@@ -13,7 +21,7 @@ td, th {
 	cursor: default;
 }
 .lbrow:hover {
-	background: #338899;
+	background: #356;
 	transition:background 0s;
 	-webkit-transition:background 0s;
 	-o-transition:color 0s;
@@ -22,4 +30,3 @@ td, th {
 .hidden-stats {
 	display: none;
 }
-
diff --git a/errors.php b/errors.php
index be8a890..1ac48db 100644
--- a/errors.php
+++ b/errors.php
@@ -1,15 +1,9 @@
 <?PHP
 
-
-
-
-
 Echo "You're here because of error: $_GET[error] ";
 
 Echo "<br />$_SERVER[HTTP_REFERER]";
 
 Echo "<br /><a href='http://www.pathery.com'>Go back to Home</a>";
 
-
-
-?>
-\ No newline at end of file
+?>
diff --git a/globe.php b/globe.php
index 8fb1994..811dbf6 100644
--- a/globe.php
+++ b/globe.php
@@ -6,7 +6,7 @@ session_start();
 //include_once 'db.inc.php';
 
 
-$mydomain = "http://www.mazetd.4xg.net";
+$mydomain = "http://pathery.raylu.net";
 
 //https://www.google.com/accounts/o8/id?id=AItOawl4GX29ka40T4ZeuXnR2FVsP4LZWaED_T8
 //https%3A%2F%2Fwww.google.com%2Faccounts%2Fo8%2Fid%3Fid%3DAItOawl
diff --git a/includes/datas.php b/includes/datas.php
index 0d3d0c5..912eea8 100644
--- a/includes/datas.php
+++ b/includes/datas.php
@@ -1 +1,52 @@
-<?PHP
-// For interaction with the SQL database.
-//
-include_once('db.inc.php');
-//Select Stats/Scores.
-function topScores($mapid, $top = 5) {
-	$sql = "
-	SELECT 
-		timediff(solutions.dateModified, TIMESTAMP(CURDATE())) as diff,
-		users.displayName as display,
-		solutions.moves as m,
-		users.ID as ID
-	FROM 
-		`users`
-		JOIN `solutions`
-			ON users.ID = solutions.userID
-	WHERE solutions.mapID = '$mapid'
-	ORDER BY solutions.moves DESC, solutions.dateModified ASC
-	LIMIT $top
-	";
-	$result = mysql_query($sql);
-	if (mysql_num_rows($result) > 0) {
-		$output .= "<table style='border:1px solid #FFF'>";
-		$output .= "<tr>";
-		$output .= "<th style='border:1px solid #ccc'>Rank</th>";
-		$output .= "<th style='border:1px solid #ccc'>Name</th>";
-		$output .= "<th style='border:1px solid #ccc'>Moves</th>";
-		$output .= "<th style='border:1px solid #ccc'>Time taken</th>";
-		$output .= "</tr>";
-		while (list($diff, $display, $moves, $userID) = mysql_fetch_row($result)) {
-			$i++;
-			if ($_SESSION['userID'] == $userID)
-				$output .= "<tr style='background-color: #338899;'>";
-			else
-				$output .= "<tr>";
-			
-			$output .= "<td>$i</td>";
-			$output .= "<td><span title='UserID: $userID'>$display</span></td>";
-			$output .= "<td>$moves</td>";
-			$output .= "<td>$diff</td>";
-			//$output .= "<b>$i. <span title='UserID: $userID'>$display</span> with $moves moves. In $diff<br /></b>";
-			$output .= "</tr>";
-		}
-		$output .= "</table>";
-	}
-	return $output;
-}
-?>
-\ No newline at end of file
+<?PHP
+// For interaction with the SQL database.
+//
+
+include_once('db.inc.php');
+
+//Select Stats/Scores.
+function topScores($mapid, $top = 5) {
+	$sql = "
+	SELECT 
+		timediff(solutions.dateModified, TIMESTAMP(CURDATE())) as diff,
+		users.displayName as display,
+		solutions.moves as m,
+		users.ID as ID
+	FROM 
+		`users`
+		JOIN `solutions`
+			ON users.ID = solutions.userID
+	WHERE solutions.mapID = '$mapid'
+	ORDER BY solutions.moves DESC, solutions.dateModified ASC
+	LIMIT $top
+	";
+	$result = mysql_query($sql);
+
+	if (mysql_num_rows($result) > 0) {
+		$output .= "<table class='score'>";
+		$output .= "<tr>";
+		$output .= "<th>Rank</th>";
+		$output .= "<th>Name</th>";
+		$output .= "<th>Moves</th>";
+		$output .= "<th>Time taken</th>";
+		$output .= "</tr>";
+		while (list($diff, $display, $moves, $userID) = mysql_fetch_row($result)) {
+			$i++;
+			if ($_SESSION['userID'] == $userID)
+				$output .= "<tr style='background-color: #356;'>";
+			else
+				$output .= "<tr>";
+			
+			$output .= "<td>$i</td>";
+			$output .= "<td><span title='UserID: $userID'>$display</span></td>";
+			$output .= "<td>$moves</td>";
+			$output .= "<td>$diff</td>";
+			//$output .= "<b>$i. <span title='UserID: $userID'>$display</span> with $moves moves. In $diff<br /></b>";
+			$output .= "</tr>";
+		}
+		$output .= "</table>";
+	}
+	return $output;
+}
+
+?>
diff --git a/includes/db.inc.php b/includes/db.inc.php
index 9287ed2..198cf40 100644
--- a/includes/db.inc.php
+++ b/includes/db.inc.php
@@ -1,12 +1,11 @@
 <?php
 
-
 global $mysqlid;
-$db_host = "db2894.perfora.net";
-$db_user = "dbo362854667";
-$db_name = "db362854667";
-$db_pass = "mazes4me";
+$db_host = 'localhost';
+$db_user = 'pathery';
+$db_name = 'pathery';
+$db_pass = 'pathery';
 $mysqlid = @mysql_connect($db_host,$db_user, $db_pass) or die("Cannot connect to database.");
 @mysql_select_db($db_name, $mysqlid) or die("Invalid database.");
 
-?>
-\ No newline at end of file
+?>
diff --git a/includes/header.php b/includes/header.php
index b402025..1e24e8c 100644
--- a/includes/header.php
+++ b/includes/header.php
@@ -1,6 +1,6 @@
 <?PHP
 
-function htmlHeader() {
+function htmlHeader($css) {
 ?>
 <!DOCTYPE html>
 <html xml:lang="en" lang="en">
@@ -8,13 +8,22 @@ function htmlHeader() {
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
     <title>pathery.com</title>
 
-    <link href="css/mapstyle.css" rel="stylesheet" type="text/css" />
-    <link href="css/pagestyle.css" rel="stylesheet" type="text/css" />
-    <link href="css/statsstyle.css" rel="stylesheet" type="text/css" />
-    <script src="js/ajax.js" type="text/javascript"></script>
-    <script src="js/mapspecs.js" type="text/javascript"></script>
+    <link href="css/page.css" rel="stylesheet" type="text/css" />
+    <link href="css/maps.css" rel="stylesheet" type="text/css" />
+	<?php
+	foreach ($css as $c) {
+		echo "<link href=\"css/$c.css\" rel=\"stylesheet\" type=\"text/css\" />";
+	}
+	?>
+    <script src="js/ajax.js" async="async"></script>
+    <script src="js/mapspecs.js" async="async"></script>
+</head>
+<?
+}
 
-    <script type="text/javascript">
+function htmlFooter() {
+?>
+    <script>
     var _gaq = _gaq || [];
     _gaq.push(['_setAccount', 'UA-371072-3']);
     _gaq.push(['_trackPageview']);
@@ -28,45 +37,40 @@ function htmlHeader() {
 		fo.rel = 'stylesheet';
 		fo.type = 'text/css';
 		fo.href = "http://fonts.googleapis.com/css?family=Cantarell:400,700";
-		var l = document.getElementsByTagName('link')[0]; l.parentNode.insertBefore(fo, l);
+		var l = document.getElementsByTagName('link')[0]; l.parentNode.appendChild(fo);
+		document.getElementsByTagName('body')[0].style.fontFamily = 'cantarell, helvetica, sans-serif';
     })();
-    </script>
-</head>
-<?
-}
-
-function htmlfooter() {
+	</script>
 
+</body>
+</html>
+<?
 }
 
 function topbar($links) {
-	echo '<div class="topbar">';
+	echo '<div id="topbar">';
 
 	$page = $_GET[page];
 	if ($page == '')
 		$page = 'home';
-	$first = true;
 	foreach ($links as $key => $value) {
-		if ($first)
-			$first = false;
-		else
-			echo ' | ';
 		if ($page == $key)
-			echo "<b><a href='?page=$key'>$value</a></b>";
-		else 
-			echo "<a href='?page=$key'>$value</a>";
+			$selected = " selected";
+		else
+			$selected = "";
+		echo "<a href='?page=$key' class='nav$selected'>$value</a>";
 	}
 
-	echo "\t<div class='lfloat'>";
+	echo "<div id='user'>";
 	if ($_SESSION['accepted'] == 1) {
-		echo "Logged in as <a href='?page=cp' title='change name'>$_SESSION[displayName]</a>.\n";
-		echo "<a href='?page=logout'>Logout</a>";
+		echo "Logged in as <a href='?page=cp' title='change name'>$_SESSION[displayName]</a><br>";
 		if ($_SESSION['displayName'] == 'noname')
-			echo "<a href='?page=cp' title='change name'>Update your name</a>";
+			echo "<a href='?page=cp' title='change name'>Update your name</a> | ";
+		echo "<a href='?page=logout'>Logout</a>";
 	} else
-		echo "<a href='?page=login'>Sign in using Google</a>";
+		echo "<a href='?page=login'>Sign in with Google</a>";
+	echo "</div>";
 
-	echo "\t</div>";
 	echo "</div>";
 }
 
diff --git a/includes/maps.php b/includes/maps.php
index a1bbc95..901a946 100644
--- a/includes/maps.php
+++ b/includes/maps.php
@@ -146,7 +146,7 @@ function DisplayMap($mapMatrix, $idprefix = 1, $style = 'normal', $speed = NULL)
 		$output .= "<input id='$idprefix,btn' type='button' onclick='doSend($idprefix)' value='Test' />";
 		$output .= "
 			<div style='display:none;'>
-			<input type='checkbox' id='$idprefix,mute' checked=true />
+			<input type='checkbox' id='$idprefix,mute' checked='checked' />
 			<select id='$idprefix,speed'>
 			$rOption
 			</select>
diff --git a/js/mapspecs.js b/js/mapspecs.js
index 2494800..79e93aa 100644
--- a/js/mapspecs.js
+++ b/js/mapspecs.js
@@ -23,8 +23,6 @@ var mapjson = new Array();
 var htmlscores = '';
 
 function loadSol(sol) {
-	//alert("Temporary debug");
-	//document.getElementById('debug').innerHTML = "<br />Exe1...";
 	if (sol == null) 
 		if (document.getElementById('mapsol') != undefined) 
 			sol = document.getElementById('mapsol').innerHTML;
@@ -37,15 +35,12 @@ function loadSol(sol) {
 		
 		clearwalls(mapid);
 		
-		//document.getElementById('debug').innerHTML += "<br />"+mapid+','+position[1];
 		for(var i in position) {
-			//document.getElementById('debug').innerHTML += "<br />"+mapid+','+position[i];
 			if (document.getElementById(mapid+','+position[i]) != undefined) {
 				object = document.getElementById(mapid+','+position[i]);
 				grid_click(object);
 				
 			}
-			//alert(soldata[i]);
 		}
 	}
 }
@@ -62,7 +57,6 @@ function grid_click(obj) {
 	if (solution[mapid] == undefined) {
 		getmapdata(mapid);
 	}
-	//alert(obj.cv);
 	
 	//Is this placing a wall, or removing one?
    if (obj.cv) {
@@ -74,14 +68,11 @@ function grid_click(obj) {
 		//IE 7
 		obj.style.backgroundColor = '';
       blocks[mapid]++;
-		//alert(obj.id);
 		//Remove wall
 		solution[mapid] = solution[mapid].replace('.'+y+','+x+'.', '.');
-		//alert(y+','+x+'.');
    } else {
 		//Placing a wall
       if (blocks[mapid] < 1) {
-         //alert("Outa blocks!");
 			updateDsp(mapid, 'dspWalls', "OUT!");
 			//document.getElementById(mapid+',dspWalls').innerHTML = "OUT!";
          return;
@@ -116,14 +107,11 @@ function updateDsp(mapid, element, data) {
 }
 
 function getmapdata(mapid) {
-	//alert(typeof(JSON));
 	if (typeof(JSON) == 'undefined') {
-		//alert("We're using EVAL instead");
 		text = document.getElementById(mapid+',mapdata').innerHTML;
 		mapdata[mapid] = !(/[^,:{}\[\]0-9.\-+Eaeflnr-u \n\r\t]/.test(text.replace(/"(\\.|[^"\\])*"/g, ''))) && eval('(' + text + ')');
 		//mapdata[mapid] = eval(document.getElementById(mapid+',mapdata').innerHTML);
 	} else {
-		//alert("We're using JSON");
 		mapdata[mapid] = JSON.parse(document.getElementById(mapid+',mapdata').innerHTML);
 	}
 	
@@ -144,35 +132,28 @@ function doSend(mapid) {
 	reqstr = "";
 	reqstr += "&mapcode="+mapdata[mapid].code;
 	reqstr += "&mapid="+mapid;
-	//alert (mapdata[mapid].code);
 	reqstr += "&solution="+solution[mapid];
 	
-	//alert(reqstr);
 	//document.getElementById('dispdo').innerHTML = "http://mazetd.4xg.net/do.php?r=getpath"+reqstr
 	
-	//alert("request string:"+reqstr);
    ajax.requestFile = "do.php?r=getpath"+reqstr; //prepare strdata
    ajax.onCompletion = request_path_done; // Specify function to be executed on response.
    ajax.runAJAX();// Do it!
 }
 
 function requestSol(solid) {
-	//alert("requesting solution id:" + solid);
 	ajax.requestFile = "do.php?r=getsol&solutionid="+solid; //prepare strdata
    ajax.onCompletion = requestSolDone; // Specify function to be executed on response.
    ajax.runAJAX();// Do it!
 }
 
 function requestSolDone() {
-	//alert("request complete");
 	
 	if (typeof(JSON) == 'undefined') {
-		//alert("We're using EVAL instead AGAIN.");
 		text = ajax.response;
 		var JO = !(/[^,:{}\[\]0-9.\-+Eaeflnr-u \n\r\t]/.test(text.replace(/"(\\.|[^"\\])*"/g, ''))) && eval('(' + text + ')');
 		//mapdata[mapid] = eval(document.getElementById(mapid+',mapdata').innerHTML);
 	} else {
-		//alert("We're using JSON again");
 		var JO = JSON.parse(ajax.response);
 	}
 	
@@ -184,16 +165,13 @@ function clearwalls(mapid) {
 	if (solution[mapid] == undefined) return;
 	walls = solution[mapid].split('.');
 	for(var i in walls) {
-		//alert(walls[i]);
 		tmp = walls[i].split(',');
 		eid = mapid+','+tmp[0]+','+tmp[1];
-		//alert('eid:'+eid);
 		if (document.getElementById(eid) != undefined) {
 			obj = document.getElementById(eid);
 			obj.setAttribute("class", "grid_td");
 			obj.style.backgroundColor = '';
 			obj.cv = false;
-			//alert("exe");
 		}
 	}
 	solution[mapid] = undefined;
@@ -209,22 +187,18 @@ function resetwalls(mapid) {
 
 function request_path_done() {
 	//document.getElementById('mapdisplay').innerHTML = ajax.response;
-	//alert ("resp: "+ajax.response);
 	//if (ajax.response == undefined) return;
 	
 	if (typeof(JSON) == 'undefined') {
-		//alert("We're using EVAL instead AGAIN.");
 		text = ajax.response;
 		var JO = !(/[^,:{}\[\]0-9.\-+Eaeflnr-u \n\r\t]/.test(text.replace(/"(\\.|[^"\\])*"/g, ''))) && eval('(' + text + ')');
 		//mapdata[mapid] = eval(document.getElementById(mapid+',mapdata').innerHTML);
 	} else {
-		//alert("We're using JSON again");
 		var JO = JSON.parse(ajax.response);
 	}
 	
 	mapjson[JO.mapid] = JO;
 	
-	//alert ("resp: "+ajax.response);
 	// if (typeof(JSON) == undefined) {
 		// var JO = eval(ajax.response);
 	// } else {
@@ -235,18 +209,16 @@ function request_path_done() {
 	}
 	
 	for(var i in JO.error) {
-		alert('\n JO error ' + JO.error[i]);
+		console.error('\n JO error ' + JO.error[i]);
 	}
 	
 	//document.getElementById('disp').innerHTML = JO.map;
 	
 	if (JO.blocked) {
-		alert("Path is blocked make sure there is a way for it to go!");
+		alert("The path is blocked!");
 		return;
 	}
 	//document.write(JO.map);
-	//alert ("moves: "+JO.moves);
-	//alert ("path: "+JO.start);
 	//document.getElementById('disppath').innerHTML = JO.path;
 	//document.getElementById('disptotalmoves').innerHTML = JO.moves;
 	var disptext = "Record: "+JO.best+" by "+JO.bestby;
@@ -268,7 +240,6 @@ function animatePath(path, mapid, start) {
 	x = tmp[1];
 	
 	p = path;
-	//alert("Begin");
 	//t = p.length;
 	t = '';
 	//count[mapid] = 0;
@@ -279,9 +250,7 @@ function animatePath(path, mapid, start) {
 
 function animatePathDone(mapid) {
 	document.getElementById(mapid+',btn').disabled = false;
-	//alert("animate done..." + htmlscores);
 	if (htmlscores) {
-		//alert("showing scores...");
 		updateDsp(mapid, 'dspScore', htmlscores);
 		htmlscores = '';
 	}
@@ -292,18 +261,14 @@ function animatePathDone(mapid) {
 
 function request_scores_done() {
 
-	//alert("score request complete");
 	//Get scores.
 	if (typeof(JSON) == 'undefined') {
-		//alert("We're using EVAL instead AGAIN.");
 		text = ajax.response;
 		var JO = !(/[^,:{}\[\]0-9.\-+Eaeflnr-u \n\r\t]/.test(text.replace(/"(\\.|[^"\\])*"/g, ''))) && eval('(' + text + ')');
 		//mapdata[mapid] = eval(document.getElementById(mapid+',mapdata').innerHTML);
 	} else {
-		//alert("We're using JSON again");
 		var JO = JSON.parse(ajax.response);
 	}
-	//alert("scores saveing " + JO.scores);
 	htmlscores = JO.scores;
 }
 
@@ -332,7 +297,6 @@ function doanimate(x, y, p, c, mapid) {
 	if (count[mapid] == undefined) {
 		count[mapid] = 0;
 	}
-	//alert("test");
 	if (snake[mapid] == undefined) {
 		snake[mapid] = new Array();
 		snake[mapid]['color'] = '#4444bb';
@@ -346,7 +310,7 @@ function doanimate(x, y, p, c, mapid) {
 	eid = mapid+','+x+','+y;
 	//Verify.
 	if (document.getElementById(eid) == undefined) {
-		alert("Path exited field..?");
+		console.error("Path exited field...?");
 		animatePathDone(mapid);
 		return;
 	}
@@ -361,7 +325,6 @@ function doanimate(x, y, p, c, mapid) {
 	// if (origclass == 'grid_td_animate' || origclass == 'grid_td_animate_pre' ) {
 		origclass = handle.classOrigName;
 		//setTimeout(handle.setAttribute('class', origclass), 850);
-		//alert('ex ' + origclass);
 	}
 	//handle.style.backgroundColor = snake[mapid]['color'];
 	handle.classOrigName = origclass;
@@ -391,7 +354,6 @@ function doanimate(x, y, p, c, mapid) {
 			if (checkSound(mapid)) {
 				soundManager.play('charm');
 			}
-			//alert("count-hit: "+count[mapid]);
 			//Flash
 			flashelement(mapid+',dspCount', 4);
 			break;
@@ -410,7 +372,6 @@ function doanimate(x, y, p, c, mapid) {
 		
 		string = "if (document.getElementById('"+eid+"').className == 'grid_td_path"+c+"') ";
 		string += "document.getElementById('"+eid+"').className = '"+origclass+"';";
-		//alert (string);
 		setTimeout(string, 855);
 		//And incase that didn't work...
 		//setTimeout("document.getElementById('"+eid+"').className = '"+origclass+"'", 7500);
@@ -419,7 +380,6 @@ function doanimate(x, y, p, c, mapid) {
 		if (handle.pressed == true) {
 			setTimeout("document.getElementById('"+eid+"').style.backgroundColor = '#dddddd';", 865);
 		} else {
-			//alert(eid);
 			setTimeout("document.getElementById('"+eid+"').style.backgroundColor = '';", 865);
 		}
 		
@@ -616,7 +576,6 @@ function doanimate(x, y, p, c, mapid) {
 				//soundManager.play('002');
 				//soundManager.play('003');
 			}
-			//alert(tpEid);
 			document.getElementById(eid).style.backgroundColor='#CCCCCC';
 			document.getElementById(tpEid).style.backgroundColor='#CCCCCC';
 			//flashelement(eid, 7);
@@ -639,7 +598,6 @@ function doanimate(x, y, p, c, mapid) {
 }
 
 function flashelement(eid, times, color, speed) {
-	//alert("exe"+eid);
 	if (document.getElementById(eid) == undefined) return;
 	if (!color) {
 		color = "#FFFF44";
diff --git a/pages/about.php b/pages/about.php
index eb1ada8..4328014 100644
--- a/pages/about.php
+++ b/pages/about.php
@@ -5,28 +5,25 @@ htmlHeader();
 <body>
 <?php
 topbar($Links);
-
-echo "<br />";
-echo "<br />";
-
 ?>
 
-<center>
-<br />Email us: <a href='mailto:snapems@gmail.com'>snapems@gmail.com</a>
-<br />
-<h3>Created by:</h3> <span title='AKA Snap'>Patrick Davison</span> and <span title='Goes by "Rex"'>Rex Ounekeo</span>
-<br />
-<h3>Special thanks:</h3>
-<h4>Programmers:</h4>
-raylu
-<h4>Testers:</h4>
-Steven Gosling
-<br />Patrick's Family
-<br />Josh 
-<br />Rory Matthias Quentin Maison
-<br />Matt
-<br />
-</center>
+<div class="wrapper">
+	Email us: <a href='mailto:snapems@gmail.com'>snapems@gmail.com</a>
+	<br />
+	<h3>Created by:</h3>
+	Patrick Davison (Snap) and Rex Ounekeo
+
+	<h3>Special thanks:</h3>
+	<h4>Programmers:</h4>
+	raylu
+	<h4>Testers:</h4>
+	Steven Gosling
+	<br />Patrick's Family
+	<br />Josh 
+	<br />Rory Matthias Quentin Maison
+	<br />Matt
+</div>
 
-</body>
-</html>
+<?php
+htmlFooter();
+?>
diff --git a/pages/admin.php b/pages/admin.php
index b4e53be..d825ebc 100644
--- a/pages/admin.php
+++ b/pages/admin.php
@@ -1,4 +1,4 @@
-<?PHP
+<?php
 htmlHeader();
 ?>
 
@@ -225,9 +225,5 @@ function createThumbnail($mapMatrix, $idprefix, $width, $height) {
 	return $output;
 }
 
-
-
-
+htmlFooter();
 ?>
-</body>
-</html>
diff --git a/pages/faq.php b/pages/faq.php
index 9bac845..302a7f8 100644
--- a/pages/faq.php
+++ b/pages/faq.php
@@ -1,43 +1,32 @@
-<?PHP
+<?php
 htmlHeader();
 ?>
 
 <body>
 <?php
 topbar($Links);
-
 ?>
 
+<div class="wrapper">
 
 <h2>Questions and Answers</h2>
 
 </br >
 <h3>Can you explain how the pathing works?</h3>
-The pathing trys to find the best route possible.
+The pathing tries to find the best route possible.
 In open areas there's lots of identical paths for it to take;
 To choose which path it will go it follows these priorities:
 <b> UP, RIGHT, DOWN, LEFT.</b>
-This means that the path will go UP as far as it can first- then, right, down, left.
+This means that the path will go UP as far as it can first &ndash; then right, down, left.
 <br />If the path is going to the TOP RIGHT from the BOTTOM LEFT, the path will go UP all the way to the top, then RIGHT.
 <br />If the path is going to the BOTTOM LEFT, from the TOP RIGHT, the path will go all the way DOWN and then LEFT.
 <br />TOP LEFT, from BOTTOM RIGHT, UP, then LEFT.
 <br />So, BOTTOM LEFT, from TOP RIGHT? If you answer "DOWN then LEFT" you are correct!
-<br />If you answered "uhhmm.. What's up with the directions in caps." then you get a bonus point!
-<br />Remember, teleports are Traps, and does not effect the path choice.
-<br />
-<br />
-<h3>Why use Google to sign in?</h3>
-'OpenID' allows websites to use 3rd party servers to identify you.
-<br />We ask Google for your E-mail address, which you have to approve.
-<br />Basically, we send you to Google, and ask who you are, (You're not a robot, right?)
-<br />Google responds saying they know you, and gives me a code to identify you with, if you login again.
-<br />Many sites have started adopting this method of registration/login  due to the safety it provides,
-not just for me, but for YOU.
-<br />There's no chance I can leak a password, because I never recieve one. - Plus you don't have to make up/remember another password.
-
-
+<br />If you answered "uhhmm.. what's up with the directions in caps?" then you get a bonus point!
+<br />Remember, teleports are traps and do not effect the path choice.
 
+</div>
 
-
-</body>
-</html>
-\ No newline at end of file
+<?php
+htmlFooter();
+?>
diff --git a/pages/home.php b/pages/home.php
index 8bd7d11..044fc5f 100644
--- a/pages/home.php
+++ b/pages/home.php
@@ -1,10 +1,8 @@
 <?PHP
-htmlHeader();
+htmlHeader(array('stats'));
 ?>
 
 <body>
-<script type="text/javascript" src="sounds/script/soundmanager.js"></script>
-
 <?php
 include('./includes/maps.php');
 include('./includes/mapoftheday.php');
@@ -16,63 +14,57 @@ $numday = date('w');
 $numday = intval($numday);
 switch ($numday) {
 	case 0:
-	$mapstyle = 'Thirty';
-	break;
+		$mapstyle = 'Thirty';
+		break;
 	case 1:
-	$mapstyle = 'Simple';
-	break;
+		$mapstyle = 'Simple';
+		break;
 	case 2:
-	$mapstyle = "ABC's";
-	break;
+		$mapstyle = "ABC's";
+		break;
 	case 3:
-	$mapstyle = 'Teleport Madness';
-	break;
+		$mapstyle = 'Teleport Madness';
+		break;
 	case 4:
-	$mapstyle = 'Rocky Maze';
-	break;
+		$mapstyle = 'Rocky Maze';
+		break;
 	case 5:	//Friday
-	$mapstyle = 'Side to Side';
-	break;
+		$mapstyle = 'Side to Side';
+		break;
 	case 6:	//Saturday
-	$mapstyle = "Seeing Double";
-	break;
+		$mapstyle = "Seeing Double";
+		break;
 }
 
-$normal = 'Normal';
-$easy = 'Simple';
-$hard = 'Complex';
+$easy = '<a href="?page=home&amp;maptype=easy">Simple</a>';
+$normal = '<a href="?page=home&amp;maptype=normal">Normal</a>';
+$hard = '<a href="?page=home&amp;maptype=hard">Complex</a>';
 
-$today = date('l');
-//if ($today == 'Sunday' OR $today == 'Saturday')
-	//$today = 'Weekend Map';
-//else
-	$today .= "'s";
-$special = "$today $mapstyle";
+$today = date('l') . "'s";
+$special = "<a href=\"?page=home&amp;maptype=day\">$today $mapstyle</a>";
 
 switch ($_GET['maptype']) {
+	case "easy":
+	case "1":
+	default:
+		$maptype = 1;
+		$easy = '<a href="?page=home&amp;maptype=easy" class="selected">Simple</a>';
+		break;
 	case "normal":
 	case "2":
-	$maptype = 2;
-	$normal = '<b>Normal</b>';
-	break;
-
+		$maptype = 2;
+		$normal = '<a href="?page=home&amp;maptype=normal" class="selected">Normal</a>';
+		break;
 	case "hard":
 	case "3":
-	$maptype = 3;
-	$hard = '<b>Complex</b>';
-	break;
-
+		$maptype = 3;
+		$hard = '<a href="?page=home&amp;maptype=hard" class="selected">Complex</a>';
+		break;
 	case "day":
 	case "4":
-	$maptype = 4;
-	$special = "<b>$special</b>";
-	break;
-
-	case "easy":
-	case "1":
-	default:
-	$maptype = 1;
-	$easy = '<b>Simple</b>';
+		$maptype = 4;
+		$special = "<a href=\"?page=home&amp;maptype=day\" class=\"selected\">$today $mapstyle</a>";
+		break;
 }
 
 //$motd = getMapOfTheDay();
@@ -83,7 +75,6 @@ topbar($Links);
 $mapID = $motd['id'];
 $map = $motd['map'];
 $userID = $_SESSION['userID'];
-$date = date("m-d-y");
 //$mergesolution = mergeMapSolution($map, $mysolution);
 $topscores = topScores($motd['id'], 30);
 $topscorediv = "<div id='$mapID,dspScore'>\n$topscores\n</div>";
@@ -91,89 +82,39 @@ $mergesolution = $map;
 
 ?>
 
-<br>
-<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com/pages/Pathery/176985129018434&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font&amp;colorscheme=dark&amp;height=21" style="border:none; overflow:hidden; width:95px; height:21px; float:right"></iframe>
-
-<div class="col1">
-	<p>
-	<strong>News:</strong><br>
-	<strong>We've moved to pathery.com</strong> (look up, you're already there)! You'll need to re-login with Google.
-	<br />Don't worry &ndash; we've saved all your solutions and history (soon you'll even be able to see them! hehe).
-	</p>
-	<p>Maps for <?php echo "$date" ?>:
-	<br><a href='?page=home&amp;maptype=easy'><? echo $easy; ?></a>
-	<br><a href='?page=home&amp;maptype=normal'><? echo $normal; ?></a>
-	<br><a href='?page=home&amp;maptype=hard'><? echo $hard; ?></a>
-	<br><a href='?page=home&amp;maptype=day'><? echo $special; ?></a>
-	</p>
-	<p>
-	New maps are generated daily at 9:00 PM Pacific Time.
-	<br>
-	</p>
-
-	<? echo $topscorediv; ?>
-</div>
-
-<div class="col2" style="text-align: center">
-<?
-if ($_SESSION['accepted'] != 1) {
-	?>
-	New? Check out <a href='?page=howtoplay'>How to Play</a>
-	<br /><span style="background-color: #444; font-weight: bold">
-	The object of the game is to make the longest maze.</span>
-	<br /><a href='?page=login'>Sign in using Google</a> to have your best solution saved.
+<div class="wrapper">
 	<?
-} else
-	echo "<br />";
-	
+	echo "<div id='difficulties'>";
+	echo "$easy";
+	echo "$normal";
+	echo "$hard";
+	echo "$special";
+	echo "</div>";
 
-	
-echo "<br />$date<br /><a href='?page=home&amp;maptype=easy'>$easy</a> | ";
-echo "<a href='?page=home&amp;maptype=normal'>$normal</a> | ";
-echo "<a href='?page=home&amp;maptype=hard'>$hard</a> | ";
-echo "<a href='?page=home&amp;maptype=day'>$special</a>";
+	echo DisplayMap($mergesolution, $mapID);
 
+	$mysolution = getSolution($userID, $mapID);
+	$solutiondiv .= "<div id='mapsol' style='visibility:hidden;display:none'>";
+	$solutiondiv .=  $mapID.":".$mysolution;
+	$solutiondiv .=  '</div>';
 
-echo DisplayMap($mergesolution, $mapID);
-
-$mysolution = getSolution($userID, $mapID);
-$solutiondiv .= "<div id='mapsol' style='visibility:hidden;display:none'>";
-//$solutiondiv .= "<div id='mapsol'>";
-$solutiondiv .=  $mapID.":".$mysolution;
-$solutiondiv .=  '</div>';
-
-echo $solutiondiv;
-
-//Start tests
-
-// echo "<br /><br />map $map mapid $mapID userID $userID";
-// $mysolution = getSolution($userID, $mapID);
-// $mysolution = formSolution($mysolution);
-// echo " last-best solution $mysolution";
-// $mergesolution = mergeMapSolution($map, $mysolution);
-// echo " merge sol1: $mergesolution <br />";
-// $mergesolution = seperateMapSolution($mergesolution);
-// $mergesolution = formSolution($mergesolution);
-// echo " merge sol2: $mergesolution <br />";
-
-//echo "<br /><div id='debug'>tmp debug data</div><br />";
-
-//End tests
-//
-//
-//	<meta property="og:title" content="Pathery - The Game"/>
-//	<meta property="og:site_name" content="Pathery.com"/>
-// <meta property="og:image" content="http://www.pathery.com/  some sort of logo.... "/>
+	echo $solutiondiv;
 
+	echo $topscorediv;
 ?>
 
-	<br />
-	<br />Copyright &copy; 2011 pathery.com
-	
+	<div id="fb">
+	</div>
 </div>
 
-<script type="text/javascript">soundManagerInit();</script>
+<div id="copy">
+	<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com/pages/Pathery/176985129018434&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font&amp;colorscheme=dark&amp;height=21"></iframe>
+	Copyright &copy; 2011 pathery.com
+</div>
 
+<script src="sounds/script/soundmanager.js" async="async"></script>
+<script type="text/javascript">soundManagerInit();</script>
 
-</body>
-</html>
+<?php
+htmlFooter();
+?>
diff --git a/pages/howtoplay.php b/pages/howtoplay.php
index 294e89f..bfad879 100644
--- a/pages/howtoplay.php
+++ b/pages/howtoplay.php
@@ -1,5 +1,5 @@
-<?PHP
-htmlHeader();
+<?php
+htmlHeader(array('tutorial'));
 ?>
 
 <body>
@@ -29,74 +29,99 @@ $tpmap = displaymap(GenerateMapByCode($tpcode), 3, 'example');
 
 ?>
 
-<h1>Tutorial</h2>
-<p>
-<br />The object of the game is to make the longest maze.
-<br />The "Snake" (name pending) must go to all the checkpoints.
-<br />It starts from the red arrows:
-<table><tr><td class='grid_td_start'></td></tr></table> 
-and goes to the blue arrows:
-<table><tr><td class='grid_td_finish'></td></tr></table> 
-<br />Build a maze by clicking to place blocks. You can remove a block by clicking it again.
-<br />It must be able to make it through your maze, so no walling completely!
-<br />Try it:
-<div style='width:200px;'>
-<? echo $basicmap; ?>
+<div class="wrapper">
+
+<div id="tut-0" class="hidden">
+	<h1 style="margin-bottom: 0">Tutorial</h1>
+	<p>
+	<br />The object of the game is to make the longest maze.
+	<br />The "Snake" (name pending) must go to all the checkpoints.
+	<br />It starts from the start squares:
+	<table><tr><td class='grid_td_start'></td></tr></table> 
+	and goes to the end squares:
+	<table><tr><td class='grid_td_finish'></td></tr></table> 
+	<br />Build a maze by clicking to place blocks. You can remove a block by clicking it again.
+	<br />It must be able to make it through your maze, so no walling completely!
+	</p>
+	<p>Try it:
+	<? echo $basicmap; ?>
+	</p>
+	<br />
+	<a href="javascript:showTutorial(1)" class="next">Next</a>
 </div>
-</p>
-<br /><h2>Checkpoints:</h2>
-<table>
-	<tr>
-		<td class='grid_td_cpa'></td>
-		<td class='grid_td_cpb'></td>
-		<td class='grid_td_cpc'></td>
-		<td class='grid_td_cpd'></td>
-		<td class='grid_td_cpe'></td>
-	</tr>
-</table>
-<p>
-The path must reach all these (if they exist) before going to finish. Try it:
-
-<div style='width:200px;'>
-<? echo $cpmap; ?>
+
+<div id="tut-1" class="hidden">
+	<h2>Checkpoints:</h2>
+	<table>
+		<tr>
+			<td class='grid_td_cpa'></td>
+			<td class='grid_td_cpb'></td>
+			<td class='grid_td_cpc'></td>
+			<td class='grid_td_cpd'></td>
+			<td class='grid_td_cpe'></td>
+		</tr>
+	</table>
+	<p>
+		The path must reach all these (if they exist) before going to finish. Try it:
+		<? echo $cpmap; ?>
+	</p>
+	<br /><br />
+	<p>
+	Tip: - Try to combine odd-letters with each other;
+	<br />I.E. If A, B, C exist, try to make a box around A and C, then maze the entrance to the box.
+	<br />This way, the path enters the box for A, leaves for B, returns for C, and leaves for the exit.
+	This would make the path go through your maze 4 times!
+	</p>
+	<a href="javascript:showTutorial(2)" class="next">Next</a>
+	<a href="javascript:showTutorial(0)" class="next">Back</a>
 </div>
-<br />
-<br />
-<br />Tip: - Try to combine odd-letters with each other;
-<br />I.E. If A, B, C exist, try to make a box around A and C, then maze the entrance to the box.
-<br />This way, the path enters the box for A, leaves for B, returns for C, and leaves for the exit.
-This would make the path go through your maze 4 times!
-</p>
-<h2>Teleports:</h2>
-<table>
-	<tr>
-		<td><b>Teleport 1:</b></td>
-		<td class='grid_td_tp1_in' ></td>
-		<td class='grid_td_tp1_out' ></td>
-	</tr>
-	<tr>
-		<td><b>Teleport 2:</b></td>
-		<td class='grid_td_tp2_in' ></td>
-		<td class='grid_td_tp2_out' ></td>
-	</tr>
-</table>
-<p>
-<br />Teleport tiles are traps. When the path goes across the "IN" tile, it gets thrown to the "OUT" tile.
-<br />The path will not avoid teleports. Check this example out:
-<div style='width:200px;'>
-<? echo $tpmap; ?>
+
+<div id="tut-2" class="hidden">
+	<h2>Teleports:</h2>
+	<table class="padded">
+		<tr>
+			<td>Teleport 1:</td>
+			<td class='grid_td_tp1_in' ></td>
+			<td class='grid_td_tp1_out' ></td>
+		</tr>
+		<tr>
+			<td>Teleport 2:</td>
+			<td class='grid_td_tp2_in' ></td>
+			<td class='grid_td_tp2_out' ></td>
+		</tr>
+	</table>
+	<p>
+	<br />Teleport tiles are traps. When the path goes across the "IN" tile, it gets thrown to the "OUT" tile.
+	<br />The path will not avoid teleports. Check this example out:
+	<div style='width:200px;'>
+	<? echo $tpmap; ?>
+	</div>
+	<br />
+	<br />
+	Implementing a teleport into your maze can have a big impact.
+	</p>
+
+	<br /><p>That should be enough information to get you started.
+	<br />Now <a href='?page=home'>go try it out!</a>
+	</p>
+	<a href="javascript:showTutorial(1)" class="next">Back</a>
 </div>
-<br />
-<br />
-Implementing a teleport into your maze can have a big impact.
-</p>
-
-<br /><p>That should be enough information to get you started.
-<br />Now <a href='?page=home'>go try it out!</a>
-<br /></p>
-<br />
-<br />
-<br />
-
-</body>
-</html>
+
+</div>
+
+<script>
+function showTutorial(type) {
+	for (var i = 0; i < 3; i++) {
+		var elem = document.getElementById("tut-" + i);
+		if (elem.className.indexOf('hidden') < 0)
+			elem.className += 'hidden';
+	}
+	var elem = document.getElementById("tut-" + type);
+	elem.className = elem.className.replace('hidden', '');
+}
+showTutorial(0);
+</script>
+
+<?php
+htmlFooter();
+?>
diff --git a/pages/leaderboard.php b/pages/leaderboard.php
index c8f03b8..290f23b 100644
--- a/pages/leaderboard.php
+++ b/pages/leaderboard.php
@@ -1,11 +1,10 @@
-<?PHP
-htmlHeader();
+<?php
+htmlHeader(array('stats'));
 ?>
 
 <body>
 
 <?php
-
 topbar($Links);
 
 include('./includes/maps.php');
@@ -14,9 +13,6 @@ include('./includes/datas.php');
 
 include_once ('./includes/db.inc.php');
 
-echo '<br /><br />';
-
-
 $tStats = getStat(1);
 $yStats = getStat(2);
 
@@ -78,18 +74,18 @@ function getStat ($type) {
 	return displayStats($result, $statname);
 }
 
+?>
 
+<div class="wrapper">
 
-?>
-<div style="padding-left: 400px">
-<a href="javascript:showStats(0)">Overall</a> |
-<a href="javascript:showStats(1)">Simple</a> |
-<a href="javascript:showStats(2)">Normal</a> |
-<a href="javascript:showStats(3)">Complex</a> |
-<a href="javascript:showStats(4)">Special</a> |
-<a href="javascript:showStats(5)">Week/Month</a>
+<div id="difficulties">
+<a href="javascript:showStats(0)" id="dl-0">Overall</a>
+<a href="javascript:showStats(1)" id="dl-1">Simple</a>
+<a href="javascript:showStats(2)" id="dl-2">Normal</a>
+<a href="javascript:showStats(3)" id="dl-3">Complex</a>
+<a href="javascript:showStats(4)" id="dl-4">Special</a>
+<a href="javascript:showStats(5)" id="dl-5">Week/Month</a>
 </div>
-<br />
 
 <div id="yms-0">
 	<div class="col1">
@@ -100,7 +96,6 @@ function getStat ($type) {
 	</div>
 </div>
 
-
 <?
 function yesterdayMaze($mapType, $name) {
 	$sql = "SELECT 
@@ -204,7 +199,7 @@ function mysql_field_array( $query ) {
 
 // $data[1]['columnname'] == 'my data';
 
-yesterdayMaze(1, 'Easy');
+yesterdayMaze(1, 'Simple');
 yesterdayMaze(2, 'Normal');
 yesterdayMaze(3, 'Complex');
 yesterdayMaze(4, 'Special');
@@ -221,6 +216,7 @@ yesterdayMaze(4, 'Special');
 	</div>
 </div>
 
+</div>
 
 <script>
 function showStats(type) {
@@ -228,9 +224,18 @@ function showStats(type) {
 		var elem = document.getElementById("yms-" + i);
 		if (elem.className.indexOf('hidden-stats') < 0)
 			elem.className += 'hidden-stats';
+		elem = document.getElementById("dl-" + i);
+		elem.className = elem.className.replace('selected', '');
 	}
 	var elem = document.getElementById("yms-" + type);
 	elem.className = elem.className.replace('hidden-stats', '');
+	elem = document.getElementById("dl-" + type);
+	if (elem.className.indexOf('selected') < 0)
+		elem.className += 'selected';
 }
 showStats(0);
 </script>
+
+<?php
+htmlFooter();
+?>
author	raylu <raylu@mixpanel.com>	2011-11-05 03:04:49 -0700
committer	raylu <raylu@mixpanel.com>	2011-11-05 03:04:49 -0700
commit	cf4af138b16da878404cf3319d5d988dacee198a (patch)
tree	41187e9c8206657f9f5138de70c5e5a6f447a251
parent	264ed976da6b3012209386a76520327faeddf82e (diff)
download	pathery-cf4af138b16da878404cf3319d5d988dacee198a.tar.xz