Huge changes; started deprecation of PHP's displayMap()

New JS function 'mapAsHTML(mapAsObject)'
getScores() will now return solutions if the map has expired.
Homepage now uses mapAsHTML.
Removed some padding on scoreboard.
scoresFormatPage() supports solutions if available. (This can be row-specific)
And tons of CSS - deprecating old CSS.

9 files changed, 523 insertions, 133 deletions

diff --git a/css/maps.css b/css/maps.css
index 0913320..57ddc7e 100644
--- a/css/maps.css
+++ b/css/maps.css
@@ -6,105 +6,175 @@
 	color:#FF2222;

 }

 

-.map_thumbnail {

+.map {

 	border-spacing: 1px;

 	background-size: 100%;

 }

-.map_thumbnail td {

+.map div {

 	border: 0px solid #000;

-	padding: 4px;

+	padding: 0px;

 	margin: 0px;

 	background-size: 100%;

 }

-.map_thumbnail .o {

+.map .w {

+	background-image:	url(../images/OverlayTileFaceted50b.png);

+	background-size: 100%;

+	transition:background-color 0.6s ease-out;

+	-webkit-transition:background-color 0.6s ease-out;

+	-o-transition:background-color 0.6s ease-out;

+	-moz-transition:background-color 0.6s ease-out;

+}

+.map .w:hover {

+	background-image: url(../images/OverlayTileFaceted30.png);

+}

+

+.map .o {

 	background-image: url(../images/OverlayTile10.png);

 	background-color: #F5FBFE

 }

-.map_thumbnail .r {

+.map .r {

 	background-image: url(../images/OverlayTileFaceted50b.png);

 	background-color: #b85555;

 }

-.map_thumbnail .s {

+.map .s {

 	background-image: url(../images/OverlayStart50b.png);

 	background-color: #fbfefb; 

 }

-.map_thumbnail .f {

+.map .s2 {

+	background-image: url(../images/OverlayStart2.png);

+	background-color: #fbfefb; 

+}

+.map .f {

 	background-image: url(../images/OverlayFinish50c.png);

 	background-color: #666; 

 }

-.map_thumbnail .x {

+.map .x {

 	background-image: url(../images/Path1xRock.png);

 	background-color: #fff; 

 }

-.map_thumbnail .x2 {

+.map .x2 {

 	background-image: url(../images/Path2xRock.png);

 	background-color: #fff; 

 }

 

 /* CHECKPOINTS */

-.map_thumbnail .c {

+.map .c {

 	background-image: url(../images/OverlayA50.png);

 	background-color: #F777FF; 

 }

-.map_thumbnail .c2 {

+.map .c2 {

 	background-image: url(../images/OverlayB50.png);

 	background-color: #FFFF11; 

 }

-.map_thumbnail .c3 {

+.map .c3 {

 	background-image: url(../images/OverlayC50.png);

 	background-color: #FF4466; 

 }

-.map_thumbnail .c4 {

+.map .c4 {

 	background-image: url(../images/OverlayD50.png);

 	background-color: #ff9911; 

 }

-.map_thumbnail .c5 {

+.map .c5 {

 	background-image: url(../images/OverlayE50.png);

 	background-color: #00FFFF; 

 }

 

-.map_thumbnail .t {

+/* TELEPORTS */

+.map .t {

 	background-image: url(../images/TeleportInW.png);

 	background-color: #3377AA; 

 }

-.map_thumbnail .t2 {

+.map .t2 {

 	background-image: url(../images/TeleportIn.png);

 	background-color: #44EE66; 

 }

-.map_thumbnail .t3 {

+.map .t3 {

 	background-image: url(../images/TeleportInW.png);

 	background-color: #992200; 

 }

-.map_thumbnail .t4 {

+.map .t4 {

 	background-image: url(../images/TeleportIn.png);

 	background-color: #55CCFF; 

 }

-.map_thumbnail .t5 {

+.map .t5 {

 	background-image: url(../images/TeleportInW.png);

 	background-color: #005533; 

 }

-.map_thumbnail .u {

+.map .u {

 	background-image: url(../images/TeleportOutW.png);

 	background-color: #3377AA;

 }

-.map_thumbnail .u2 {

+.map .u2 {

 	background-image: url(../images/TeleportOut.png);

 	background-color: #44EE66; 

 }

-.map_thumbnail .u3 {

+.map .u3 {

 	background-image: url(../images/TeleportOutW.png);

 	background-color: #992200; 

 }

-.map_thumbnail .u4 {

+.map .u4 {

 	background-image: url(../images/TeleportOut.png);

 	background-color: #55CCFF; 

 }

-.map_thumbnail .u5 {

+.map .u5 {

 	background-image: url(../images/TeleportOutW.png);

 	background-color: #005533; 

 }

+/* PATHING */

+.transition {

+	width:100%;

+	height:100%;

+	transition:background-color .5s ease-out;

+	-webkit-transition:background-color .5s ease-out;

+	-o-transition:background-color .5s ease-out;

+	-moz-transition:background-color .5s ease-out;

+}

+.map .path0-1 {

+	background-image: url(../images/paths/Path1-1.png);

+}

+.map .path0-2 {

+	background-image: url(../images/paths/Path1-2.png);

+}

+.map .path0-3 {

+	background-image: url(../images/paths/Path1-3.png);

+}

+.map  .path0-4 {

+	background-image: url(../images/paths/Path1-4.png);

+}

+.map .path1-1 {

+	background-image: url(../images/paths/Path2-1.png);

+}

+.map .path1-2 {

+	background-image: url(../images/paths/Path2-2.png);

+}

+.map .path1-3 {

+	background-image: url(../images/paths/Path2-3.png);

+}

+.map .path1-4 {

+	background-image: url(../images/paths/Path2-4.png);

+}

+

+.map .child {

+	width:100%;

+	height:100%;

+	position:relative;

+	display:inline-block;

+	background-size:100%;

+}

 

 

+.playable .o {

+	background-image: url(../images/OverlayTile10.png);

+	background-color: #F5FBFE;

+	transition:background-color .3s;

+	-webkit-transition:background-color .3s;

+	-o-transition:background-color .3s;

+	-moz-transition:background-color .3s;

+}

+.playable .o :hover

+{

+	background-image: url(../images/OverlayTileFaceted20.png);

+}

 

 

 /* grid stuff */

@@ -120,7 +190,7 @@
 

 .grid_outer {

 	position:relative;

-	padding: 2px 0 1px;

+	padding: 2px 3px 3px;

 	margin: 0 auto 2px;

 	background-color: #334;

 	border-radius: 2px;

@@ -171,10 +241,10 @@
 	padding: 0px;

 	margin: 0px;

 	border: 0px;

-	

+/* 

 	width: 35px;

 	height: 35px;

-

+ */

 }

 .grid_table

 {

@@ -211,7 +281,7 @@
 	width: 35px;

 	height: 35px;

 	line-height:3px;

-	background: url(../images/OverlayTileFaceted50b.png);

+	background-image: url(../images/OverlayTileFaceted50b.png);

 	background-size: 100%;

 	transition:background-color .3s;

 	-webkit-transition:background-color .3s;

@@ -247,25 +317,26 @@
 }

 .grid_td_gray {

 	background-color: #CCCCCC;

-	background: url(../images/OverlayTileFaceted50b.png);

+	background-image: url(../images/OverlayTileFaceted50b.png);

 }

 .grid_td_path {

-	background: #FFFFEE url(../images/OverlayTeleport.png);

+	background-image: url(../images/OverlayTeleport.png);

+	background-color: #FFFFEE;

 }

 

 .grid_td_blanks {

 	background: inherit;

 }

 .grid_td_walls {

-	background-color:	#F00;

-	background:	url(../images/OverlayTileFaceted50b.png);

+	/* background-color:	#F00; */

+	background-image:	url(../images/OverlayTileFaceted50b.png);

 	transition:background-color 1.6s ease-out;

 	-webkit-transition:background-color 1.6s ease-out;

 	-o-transition:background-color 1.6s ease-out;

 	-moz-transition:background-color 1.6s ease-out;

 }

 .grid_td_walls:hover {

-	background: url(../images/OverlayTileFaceted30.png);

+	background-image: url(../images/OverlayTileFaceted30.png);

 }

 

 .grid_td_active {

@@ -428,16 +499,16 @@
 	-moz-transition:background-color .5s ease-out;

 }

 .grid_td_path0-1 {

-	background: url(../images/paths/Path1-1.png);

+	background-image: url(../images/paths/Path1-1.png);

 }

 .grid_td_path0-2 {

-	background: url(../images/paths/Path1-2.png);

+	background-image: url(../images/paths/Path1-2.png);

 }

 .grid_td_path0-3 {

-	background: url(../images/paths/Path1-3.png);

+	background-image: url(../images/paths/Path1-3.png);

 }

 .grid_td_path0-4 {

-	background: url(../images/paths/Path1-4.png);

+	background-image: url(../images/paths/Path1-4.png);

 }

 .grid_td_path1-1 , .grid_td_path1-2, .grid_td_path1-3, .grid_td_path1-4  {

 	transition:background-color .5s ease-out;

@@ -446,16 +517,16 @@
 	-moz-transition:background-color .5s ease-out;

 }

 .grid_td_path1-1 {

-	background: url(../images/paths/Path2-1.png);

+	background-image: url(../images/paths/Path2-1.png);

 }

 .grid_td_path1-2 {

-	background: url(../images/paths/Path2-2.png);

+	background-image: url(../images/paths/Path2-2.png);

 }

 .grid_td_path1-3 {

-	background: url(../images/paths/Path2-3.png);

+	background-image: url(../images/paths/Path2-3.png);

 }

 .grid_td_path1-4 {

-	background: url(../images/paths/Path2-4.png);

+	background-image: url(../images/paths/Path2-4.png);

 }

 

 

diff --git a/css/page.css b/css/page.css
index db32892..a3d5b87 100644
--- a/css/page.css
+++ b/css/page.css
@@ -352,7 +352,7 @@ table.score {
 

 }

 table.score th, table.score td {

-	padding: 2px 4px 1px 4px;

+	padding: 0px 4px 0px 4px;

 }

 table.score td {

 	font-size:105%;

diff --git a/css/stats.css b/css/stats.css
index d028d0f..a0830da 100644
--- a/css/stats.css
+++ b/css/stats.css
@@ -176,6 +176,33 @@ td, th {
 }
 
 
+.scoreRow1 {
+	background-color:#262631;
+}
+.scoreRow2 {
+	background-color:#20202a;
+}
+.scoreRowSelf {
+	background-color: #343c57;
+}
+
+.scoreRowSolutionAvailable {
+	/* Temporary adjust for font changes */
+	font-size:105%;
+	transition:background .5s;
+	-webkit-transition:background .5s;
+	-o-transition:color .5s;
+	-moz-transition:color .5s;
+	cursor: default;
+}
+.scoreRowSolutionAvailable:hover {
+	background-color: #535D85;
+	transition:background 0s;
+	-webkit-transition:background 0s;
+	-o-transition:color 0s;
+	-moz-transition:color 0s;
+	cursor: pointer;
+}
 .scoreMedal {
 	text-align:right;
 }
diff --git a/do.php b/do.php
index b989da8..d38e039 100644
--- a/do.php
+++ b/do.php
@@ -100,7 +100,6 @@ if ($_GET['r'] == 'reqScorePage') {
 	if ($note !== false)

 		$json['notificationtext'] = $note;

 	

-	

 	$encoded = json_encode($json);

 	die($encoded);

 }

diff --git a/includes/datas.php b/includes/datas.php
index c6a0788..3f65466 100644
--- a/includes/datas.php
+++ b/includes/datas.php
@@ -905,8 +905,12 @@ function getScores($mapID, $pageNumber = 1, $pageDivide = 10) {
 		$result = mysql_query($sql) or die(mysql_error());
 		$row = mysql_fetch_assoc($result);
 		$myBestMoves = $row['moves'];
-		// echo "XX $myBestMoves XX ";
-		// echo "XX $userID XX ";
+	}
+	
+	$requestSolutions = '';
+	$currentMap = isCurrentMap($mapID);
+	if (!$currentMap) {
+		$requestSolutions = 'solutions.solution,';
 	}
 	
 	$sql = "
@@ -918,6 +922,7 @@ function getScores($mapID, $pageNumber = 1, $pageDivide = 10) {
 		users.displayColor,
 		users.wallColor,
 		users.wallEmblem,
+		$requestSolutions
 		solutions.dateModified as cdate
 	FROM 
 		`users`
diff --git a/js/mapspecs.js b/js/mapspecs.js
index 5c4141d..4adc3d1 100644
--- a/js/mapspecs.js
+++ b/js/mapspecs.js
@@ -19,6 +19,9 @@ else if (document.attachEvent) { // IE 8-
 	window.attachEvent("onload", ready);

 }

 

+var wallColor = false;

+var wallEmblem = false;

+

 var isChallenge = false;

 var isTutorial = false;

 

@@ -100,17 +103,12 @@ function grid_click(obj) {
 	if (obj.cv) {

 		//Removing a wall

 		obj.cv = false;

-		

-		//Reset childdiv to it's default.

-		childdiv.removeAttribute("class");

-		childdiv.setAttribute("class", "grid_inner");

-		//childdiv.style.backgroundColor = 'transparent';

 

-		//return the td obj back to it's default.

+		//Remove Customized Background Color & Image

 		obj.style.backgroundColor = '';

 		obj.style.backgroundImage = '';

-		obj.removeAttribute("class");

-		obj.setAttribute("class", "grid_td");

+		obj.setAttribute("class", "o");

+		childdiv.setAttribute("class", "child");

 		

 		blocks[mapid]++;

 		//Remove wall

@@ -123,16 +121,34 @@ function grid_click(obj) {
 		}

 		obj.cv = true;

 		

-		childdiv.removeAttribute("class");

-		childdiv.setAttribute("class", "grid_td_walls");

-		if (typeof playerWallColor === 'undefined' || playerWallColor == '')

-			obj.style.backgroundColor = '#666666';

-		else 

-			obj.style.backgroundColor = playerWallColor;

+		//Color goes on the bottom, Parent.

+		//Then the chosen emblem in the Parent.

+		// Then the emblem and color are smoothed with the faceted tile on top.

+		

+		//childdiv.removeAttribute("class");

+		childdiv.setAttribute("class", "child w");

+		

+		if (wallColor == false) {

+			if (typeof playerWallColor === 'undefined' || playerWallColor == '') {

+				wallColor = '#666666';

+				playerWallColor = '#666666';

+			} else {

+				wallColor = playerWallColor;

+			}

+		}

+		if (wallEmblem == false) {

+			if (typeof playerWallEmblem !== 'undefined' && playerWallEmblem !== '') {

+				wallEmblem = playerWallEmblem;

+			} 

+		}

+		console.log('using wallcolors:', wallColor, wallEmblem);

 		

-		if (typeof playerWallEmblem !== 'undefined' && playerWallEmblem !== '')

-			obj.style.backgroundImage="url(images/marks/"+playerWallEmblem+")";

+		obj.style.backgroundColor = wallColor;

 

+		if (wallEmblem !== false) {

+			obj.style.backgroundImage="url(images/marks/"+wallEmblem+")";

+		}

+		

 		//Add Wall

 		solution[mapid] += y+','+x+'.';

 		blocks[mapid]--;

@@ -159,6 +175,7 @@ function updateDsp(mapid, element, data) {
 

 function getmapdata(mapid) {

 

+	//console.log('getting data for mapID', mapid);

 	if (typeof(mapdata[mapid]) != 'object')

 		mapdata[mapid] = decryptJSON(jsonmapdata[mapid]);

 

@@ -220,13 +237,12 @@ function clearwalls(mapid) {
 			

 			//Reset childdiv to it's default.

 			childdiv.removeAttribute("class");

-			childdiv.setAttribute("class", "grid_inner");

+			childdiv.setAttribute("class", "child");

 

 			//return the td obj back to it's default.

 			obj.style.backgroundColor = '';

 			obj.style.backgroundImage = '';

-			obj.removeAttribute("class");

-			obj.setAttribute("class", "grid_td");

+			obj.setAttribute("class", "o");

 		}

 	}

 	solution[mapid] = undefined;

@@ -387,20 +403,6 @@ function doanimate(x, y, p, c, mapid, pathNumber) {
 	}

 	handle = document.getElementById(eid);

 	

-	//Maintain our original classname, no matter the cost!

-	origclass = handle.className;

-	if (	origclass == 'grid_td_path'+pathNumber+'-1' || 

-		origclass == 'grid_td_path'+pathNumber+'-2' || 

-		origclass == 'grid_td_path'+pathNumber+'-3' || 

-		origclass == 'grid_td_path'+pathNumber+'-4' ) {

-		// if (origclass == 'grid_td_animate' || origclass == 'grid_td_animate_pre' ) {

-		origclass = handle.classOrigName;

-	//setTimeout(handle.setAttribute('class', origclass), 850);

-	}

-	//handle.style.backgroundColor = mapdata[mapid].pathColor[pathNumber];

-	handle.classOrigName = origclass;

-	

-	

 	//Animate the first square in a path.

 	if (count[mapid] == 0 && !(c > 0)) {

 		count[mapid]--;

@@ -410,7 +412,6 @@ function doanimate(x, y, p, c, mapid, pathNumber) {
 			c = '2';

 	}

 	

-	

 	switch(c) {

 		//The path is moving to a new position

 		case '1': 		//1 - Up

@@ -423,18 +424,9 @@ function doanimate(x, y, p, c, mapid, pathNumber) {
 		

 			//Notify users on score levels;

 			switch(count[mapid]) {

-				//case mapjson[mapid].best:

-				//flashelement(mapid+',dspCount', 4, "#FF0000");

-				//break;

-				case 500:

-				case 400:

-				//case 350:

-				case 300:

-				//case 250:

-				case 200:

-				//case 150:

-				case 100:

-					//case 50:

+				case 100: case 200: case 300: case 400:

+				case 500: case 600: case 700: case 800:

+				case 900: case 1000: 

 					if (checkSound(mapid)) {

 						soundManager.setVolume('charm', 40);

 						soundManager.setPan('charm', 75)

@@ -445,21 +437,24 @@ function doanimate(x, y, p, c, mapid, pathNumber) {
 					break;

 			}

 		

-			childdiv = document.getElementById('child_'+handle.id);

-			if (childdiv.className.indexOf('grid_td_walls') < 0) {

-				childdiv.setAttribute('class', 'grid_td_path'+pathNumber+'-'+c);

+			var childID = 'child_'+handle.id;

+			childdiv = document.getElementById(childID);

+			if (childdiv.className.indexOf('w') < 0) {

+				childdiv.setAttribute('class', 'transition path'+pathNumber+'-'+c);

 			

 				handle.style.backgroundColor = mapdata[mapid].pathColor[pathNumber];

-			

-				var string = "if (document.getElementById('"+'child_'+eid+"').className == 'grid_td_path"+pathNumber+'-'+c+"')";

-				string += "document.getElementById('"+'child_'+eid+"').removeAttribute('class');";

+

+				var string = "if (document.getElementById('"+'child_'+eid+"').className == 'transition path"+pathNumber+'-'+c+"')";

+				string += "document.getElementById('"+'child_'+eid+"').setAttribute('class', 'child');";

 				setTimeout(string, 855);

-			

+

 				//Maintain disabled appearnce of checkpoints

 				if (handle.pressed == true) {

 					setTimeout("document.getElementById('"+eid+"').style.backgroundColor = '#dddddd';", 865);

 				} else {

-					setTimeout("document.getElementById('"+eid+"').style.backgroundColor = '';", 865);

+					string = "if (document.getElementById('"+childID+"').className.indexOf('w') < 0) ";

+					string += "document.getElementById('"+eid+"').style.backgroundColor = '';";

+					setTimeout(string, 865);

 				}

 			}

 

@@ -850,6 +845,185 @@ function setMute(value)
 	}

 }

 

+//Shows a solution temporarly

+function useSolution(mapid, inputSolution, moves, tempWallColor, tempWallEmblem) {

+	solution[mapid] = inputSolution;

+	var animateA = "showTempSolution(\""+mapid+"\", \""+inputSolution+"\", \""+moves+"\", \""+tempWallColor+"\", \""+tempWallEmblem+"\");";

+	var animateB = "showTempSolution(\""+mapid+"\", \""+inputSolution+"\", \""+moves+"\", false, false);";

+	setTimeout(animateA, 50);

+	setTimeout(animateB, 100);

+	setTimeout(animateA, 150);

+	setTimeout(animateB, 200);

+	setTimeout(animateA, 250);

+	setTimeout(animateB, 450);

+}

+//TODO

+function showTempSolution(mapid, tempSolution, moves, tempWallColor, tempWallEmblem) {

+

+	//console.log('showTempSolution', mapid, solution, moves, tempWallColor, tempWallEmblem);

+	var savedSolution = '';

+	if (typeof solution[mapid] !== 'undefined') {

+		savedSolution = solution[mapid];

+	}

+	wallEmblem = tempWallEmblem;

+	wallColor = tempWallColor;

+	

+	position = tempSolution.split('.');

+	

+	clearwalls(mapid);

+	for(var i in position) {

+		if (document.getElementById(mapid+','+position[i]) != undefined) {

+			object = document.getElementById(mapid+','+position[i]);

+			grid_click(object);

+			

+		}

+	}

+	if (moves && mapid) {

+		updateDsp(mapid, 'dspCount', moves+ " moves");

+	}

+	

+	mapdata[mapid].savedSolution = savedSolution;

+}

+

+function restoreSolution(mapid) {

+	showTempSolution(mapid, mapdata[mapid].savedSolution, 0, false, false);

+}

+

+

+//NEW MAP INSERTING METHOD

+//Map as object.

+function mapAsHTML(map, targetWidth, demo) {

+	

+	console.log("loading MapHTML for ", map);

+	map.mapid = map.ID;

+	console.log("MapID:", map.mapid);

+	console.log("MapObj", map);

+	mapdata[map.ID] = map;

+	

+	//595

+	if (!targetWidth) targetWidth = (map.width * 35);

+	var scale = map.width / targetWidth;

+	//alert(scale);

+	

+	var width = parseInt(map.width / scale);

+	var height = parseInt(map.height / scale);

+	var tileWidth = parseInt(width / map.width);

+	

+	width = tileWidth * map.width;

+	

+	var mapgrid = '';

+	

+	mapgrid += '<div style="clear:both;"></div><div class="map playable" style="width:'+width+'px; height:'+height+'px">';

+	for (var y in map.tiles) {

+		for (var x in map.tiles[y]) {

+			var type = map.tiles[y][x][0];

+			var value = map.tiles[y][x][1];

+			if (!value) value = '';

+			

+			//TODO: If we want to change this line to something that's not retarded _

+				// we'll need to do a TON of other work... See Blossom "Implement mapclass"

+			var oldy = (y*1)+1;

+			var idHandle = map.ID+','+oldy+','+x;

+			

+			// GOAL WOULD BE THIS LINE INSTEAD.. As it's not retarded.

+			//var idHandle = map.ID+','+x+','+y;

+			

+			//oldy is used for Position too... for now

+			if (type == 'o') {

+				mapgrid += "<div style='float:left; width:"+tileWidth+"px; height:"+tileWidth+"px; ' class='mapcell "+type+value+"' title='Position: "+x+","+oldy+"' id='"+idHandle+"' onClick='grid_click(this)' >";

+				mapgrid += "<div id='child_"+idHandle+"' class='child'></div></div>";

+			} else {

+				mapgrid += "<div style='float:left; width:"+tileWidth+"px; height:"+tileWidth+"px; ' class='mapcell "+type+value+"' title='Position: "+x+","+oldy+"' id='"+idHandle+"' >";

+				mapgrid += "<div id='child_"+idHandle+"' class='child'></div></div>";

+			}

+		}

+	}

+	mapgrid += '</div>';

+	

+	var r = '';

+	

+	//TODO: Track down where that 1 pixel is comingfrom, width-1 is a hack.

+	r += "<div id='"+map.ID+",outer' class='grid_outer' style='width:"+(width)+"px;height:"+(height+60)+"px;'>";

+	

+	r += "	<div class='grid_dsp_left dsp_60'>";

+	r += "		<div id='"+map.ID+",dspID' title='MapID: "+map.ID+"'>";

+	r += "		MapID: "+map.ID;

+	r += "		</div>";

+	r += "	</div>";

+	

+	r += "		<div id='"+map.ID+",dsptr' class='grid_dsp_right dsp_33'>";

+	r += "		<span id='"+map.ID+",dspWalls' class='grid_dsp_data'> ";

+	r += "		"+map.walls+" walls";

+	r += "		</span>";

+	r += "		<span>";

+	r += "		( <a href='javascript:resetwalls("+map.ID+")'>Reset</a> )";

+	r += "		</span>";

+	r += "	</div>";

+	

+	r += mapgrid;

+	

+	

+	r += "	<div id='"+map.ID+",dspbl' class='grid_dsp_left dsp_49'> ";

+	r += "	<input id='"+map.ID+",btn' type='button' onclick='doSend("+map.ID+")' value='Go!' />";

+	r += "	Speed:";

+	r += getSpeedOptions(map.ID);

+	r += "	</div>";

+	

+	// stopped here, mute button next

+

+	r += "	<div class='grid_dsp_mid dsp_16'>";

+	r += getMuteOption(map.ID);

+	r += "	</div>";

+	

+	r += "	<div id='"+map.ID+",dspbr' class='grid_dsp_right dsp_33'> ";

+	r += "		<div id='"+map.ID+",dspCount' class='grid_dsp_data'> ";

+	r += "		0 moves";

+	r += "		</div>";

+	r += "	</div>";

+	r += "</div>";

+	

+	return r;

+}

+

+function getMuteOption(mapID) {

+	var selectedSpeed = 2;

+	var r = '';

+	var checked = '';

+	if (getCookie('pref_mute') == 'true') {

+		checked = "checked='checked' ";

+	}

+	r += "<label><input onclick='setMute(this.checked)' type='checkbox' id='"+mapID+",mute' class='checkbox_mute' "+checked+"/>Mute</label>";

+	return r;

+}

+

+function getSpeedOptions(mapID) {

+	var listObj = new Object;

+	var selectedSpeed = 2;

+	if (getCookie('pref_speed')) {

+		selectedSpeed = getCookie('pref_speed');

+	}

+	listObj[1] = 'Slow';

+	listObj[2] = 'Med';

+	listObj[3] = 'Fast';

+	listObj[4] = 'Ultra';

+	var r = '';

+	r += "	<select onChange='savePref(\"speed\", this.value)' id='"+mapID+",speed'>";

+	for (var i in listObj) {

+		r += "<option value='"+i+"'";

+		if (i == selectedSpeed) r += "selected='selected'";

+		r += ">"+listObj[i]+"</option>";

+	}

+	r += "	</select>";

+	return r;

+}

+//END METHOD

+

+

+

+

+

+

+

 

 function savePref(pref, value) {

 	setCookie('pref_'+pref, value, 9999);

diff --git a/js/scores.js b/js/scores.js
index 840ba33..c327fe2 100644
--- a/js/scores.js
+++ b/js/scores.js
@@ -142,7 +142,24 @@ function scoresFormatPage(JO) {
 		var scoredTimeFormat = (false ? "mmm d, h:MM:ss TT" : "h:MM:ss TT");

 		var scoredTimeStr = scoredLocalTime.format(scoredTimeFormat);

 		

-		p = p+ "<tr style='"+styleClass+" background-color: "+u.background+"; color:"+u.displayColor+";' title='Scored "+scoredTimeStr+"'>";

+		var rowclass = 'scoreRow'+((i % 2)+1);

+		

+		if (u.isUser) {

+			rowclass = 'scoreRowSelf';

+		}

+		

+		if (u.solution) {

+			rowclass += ' scoreRowSolutionAvailable';

+			p += "<tr class='"+rowclass+"' ";

+			p += "onmouseover='showTempSolution(\""+JO.mapid+"\", \""+u.solution+"\", \""+u.moves+"\", \""+u.wallColor+"\", \""+u.wallEmblem+"\")'";

+			p += "onclick='useSolution(\""+JO.mapid+"\", \""+u.solution+"\", \""+u.moves+"\", \""+u.wallColor+"\", \""+u.wallEmblem+"\")'";

+			p += "onmouseout='restoreSolution(\""+JO.mapid+"\")' ";

+			p += " style='"+styleClass+" color:"+u.displayColor+";' title='Scored "+scoredTimeStr+"'>";

+		} else {

+			p = p+ "<tr class='"+rowclass+"' style='"+styleClass+" color:"+u.displayColor+";' title='Scored "+scoredTimeStr+"'>";

+		}

+		// background-color: "+u.background+";

+		

 		p = p+ "<td class='scoreMedal'>";

 		

 		if (u.medal == 'gold') {

@@ -225,7 +242,7 @@ function scoresFormatPageNavi(JO) {
 var membersPages = new Object;

 var membersCurrentPage = 1;

 var membersPageDivide = 50;

-var membersOrderBy = 'dateJoined';

+var membersOrderBy = 'totalMovesThisWeek';

 var membersOrder = 'DESC';

 

 function membersRequestPage(page) {

diff --git a/pages/home.php b/pages/home.php
index 7898a3c..f8841b5 100644
--- a/pages/home.php
+++ b/pages/home.php
@@ -1,6 +1,7 @@
 <?php

 

 include_once ('./includes/maps.php');

+include_once ('./includes/mapclass.php');

 include_once ('./includes/mapoftheday.php');

 include_once ('./includes/sqlEmbedded.php');

 include_once ('./includes/datas.php');

@@ -115,12 +116,10 @@ $adContent = "
 <div class="wrapper">

 

 

-<center>12/12/12 - We're introducing a new map & mechanic!

-I'd like to hear what you think about it!

-<br />Send me a line at the <a href="feedback">Feedback Page</a>.

-<br />Wir f&#252;hren eine neue Map und einen ne&#252;n Mechanismus ein!

-Ich w&#252;sste gern, was du davon h&#228;ltst!

-Schick mir einfach eine Zeile auf der <a href="feedback">Feedback-Seite</a>.

+<center>

+Tutorial, FAQ, and Challenge maps are broken. ^_^.

+<br />Still working on <a href='scores'>The Scores Page</a>.

+<br />Leave feedback in <a href='chat'>The Chat</a> as per usual.

 </center>

 

 <br />

@@ -228,7 +227,20 @@ function displayMaze($motd, $mapType) {
 	$r .=  "		<div style='text-align: center;'>";

 	$r .=  "			<div style='display:inline-block;margin: 0 auto;text-align: left;'>";

 	$r .=  "			<a href='javascript:requestSol(\"$mapID\");'><strong>Load your best solution</strong></a><br />";

-	$r .=  DisplayMap($map, $mapID); 

+	//TMP

+	

+	$mapObj = new map(getMapCode($mapID), $mapID);

+	$mapJSON = json_encode($mapObj);

+	

+	$r .= "<div id='innerMapDsp_$mapID'>";

+	$r .= "</div>";

+	$r .= "<script>";

+	$r .= "document.getElementById('innerMapDsp_$mapID').innerHTML = mapAsHTML(decryptJSON('$mapJSON'));";

+	$r .= "</script>";

+

+	

+

+	//$r .=  DisplayMap($map, $mapID); 

 	$r .=  "		</div></div>";

 	

 	$r .=  "		<div style='padding-top: 20px;'>";

diff --git a/pages/scores.php b/pages/scores.php
index 2a82efd..43bc7dc 100644
--- a/pages/scores.php
+++ b/pages/scores.php
@@ -51,6 +51,11 @@ if ($daysAgo < 1)
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

 <script type="text/javascript" src="js/jquery.keystrokes.min.js"></script>

 

+<script type="text/javascript">

+playerWallColor = '<?PHP echo isset($wallColor) ? $wallColor : ''; ?>';

+playerWallEmblem = '<?PHP echo isset($wallEmblem) ? $wallEmblem : ''; ?>';

+</script>

+

 <script>

 

 

@@ -83,11 +88,13 @@ $("#load_basic").click(function(){
 

 

 function displayMap(mapID) {

-	var urlString = 'ajax/scores.ajax.php?getmap=true&mapID='+mapID;

+	//var urlString = 'ajax/scores.ajax.php?getmap=true&mapID='+mapID;

+	var urlString = 'map/'+mapID;

 	$("#mapDisplay").fadeOut('fast');

 	//.html(ajax_load)

-	$("#mapDisplay").load(urlString, null, function() {$("#mapDisplay").fadeIn('slow');}); 

-	urlString = 'do.php?r=reqScorePage&reqPage=1&mapID='+mapID;

+	

+	//$("#mapDisplay").load(urlString, null, function() {$("#mapDisplay").fadeIn('slow');}); 

+	//urlString = 'do.php?r=reqScorePage&reqPage=1&mapID='+mapID;

 	//$("#scoreDisplay").html(ajax_load).load(urlString); 

 	

 	if (!$('#'+mapID+',dspScore').length) {

@@ -100,12 +107,12 @@ function displayMap(mapID) {
 	}

 	scoresShowPage(mapID, 1);

 	

-	// $.ajax({

-		// type: "GET",  

-		// url: "ajax/chat.ajax.php",  

-		// data: dataString, 

-		// success: function(data) {getChatDone(data);}

-	// });

+	$.ajax({

+		type: "GET",  

+		url: 'map/'+mapID,  

+		data: '', 

+		success: function(data) {$("#mapDisplay").html(mapAsHTML(decryptJSON(data), 595)).fadeIn('slow');}

+	});

 		// var newDiv = $('<div/>', {

 		// 'id': mapID+',dspScore',

 		// 'class': 'my-new-list',

@@ -113,6 +120,18 @@ function displayMap(mapID) {
 		// html: ''

 	// });

 }

+

+//TODO:

+function getMapOnce(mapid) {

+	if (typeof(mapdata[mapid]) != 'object') {

+		return mapdata[mapid];

+	}

+}

+

+// function request_path_done() {

+	// var JO = decryptJSON(ajax.response);

+// }

+

 function getMaplist(request) {

 	// daysAgo++

 	switch (request) {

@@ -137,7 +156,7 @@ function getMaplist(request) {
 	$("#mapNavigation").load(urlString, null, function() {$("#mapNavigation").show('slow');}); 

 }

 

-

+//TODO

 function handleJSONResponse(data) {

 	json = jQuery.parseJSON(data);

 	// $.each(json, function(key, user) {

@@ -145,6 +164,68 @@ function handleJSONResponse(data) {
 	// }

 }

 

+

+// var global = getCSSRule('.global');

+

+//TODO: Playing around with this:

+//setPlayerSettings(playerWallEmblem, playerWallColor);

+//function setPlayerSettings(wallEmblem, wallColor) {

+	//css(".playable .o:hover", "background-color", playerWallColor);

+	//css(".playable .o:hover", "background-image", "url(http://www.mazetd.4xg.net/images/marks/"+wallEmblem+")");

+//}

+// function css(selector, property, value) {

+    // for (var i=0; i<document.styleSheets.length;i++) {//Loop through all styles

+        // //Try add rule

+        // try { document.styleSheets[i].insertRule(selector+ ' {'+property+':'+value+'}', document.styleSheets[i].cssRules.length);

+        // } catch(err) {try { document.styleSheets[i].addRule(selector, property+':'+value);} catch(err) {}}//IE

+    // }

+// }

+

+

+

+

+

+//alert("I'm working on this page right now - this IS beta");

+

+var mymap = {"ID":502,"teleports":0,"checkpoints":4,"width":"15","height":"9","walls":"13","name":"","flags":null,"dateCreated":null,"dateExpires":null,"isBlind":false,"isMultiPath":false,"code":null,"tiles":[[["s",""],["o"],["o"],["o"],["r",""],["o"],["o"],["o"],["o"],["o"],["o"],["r",""],["o"],["o"],["f",""]],[["s",""],["r",""],["o"],["r",""],["o"],["o"],["o"],["c",3],["r",""],["c",2],["o"],["o"],["o"],["o"],["f",""]],[["s",""],["o"],["o"],["o"],["o"],["o"],["o"],["o"],["r",""],["o"],["o"],["o"],["o"],["o"],["f",""]],[["s",""],["o"],["o"],["o"],["o"],["o"],["o"],["o"],["o"],["o"],["o"],["o"],["o"],["o"],["f",""]],[["s",""],["o"],["o"],["r",""],["o"],["o"],["o"],["o"],["r",""],["o"],["r",""],["o"],["o"],["o"],["f",""]],[["s",""],["o"],["r",""],["r",""],["o"],["o"],["r",""],["r",""],["o"],["o"],["o"],["o"],["o"],["o"],["f",""]],[["s",""],["o"],["o"],["c",4],["r",""],["r",""],["o"],["c",""],["o"],["o"],["o"],["o"],["o"],["o"],["f",""]],[["s",""],["o"],["o"],["o"],["o"],["o"],["o"],["o"],["r",""],["o"],["o"],["o"],["o"],["o"],["f",""]],[["s",""],["o"],["o"],["o"],["o"],["o"],["o"],["o"],["o"],["o"],["o"],["o"],["o"],["o"],["f",""]]]};

+

+var Tile = {"Wall" : "w",

+"Empty" : "o",

+"Start" : "o",

+"Finish" : "o",

+"Checkpoint" : "o",

+"TileRock" : "o",

+"TeleportIn" : "o",

+"TeleportOut" : "o",

+"Unbuildable" : "o",

+"SinglePath" : "o"};

+

+

+function mapThumbnailHTML(map) {

+	var r = '<table class="map">';

+	for (var y in map.tiles) {

+		r += '<tr>';

+		for (var x in map.tiles[y]) {

+			var type = map.tiles[y][x][0];

+			var value = map.tiles[y][x][1];

+			if (!value) value = '';

+			r += "<td class='"+type+value+"'>";

+			r += '</td>';

+		}

+		r += '</tr>';

+	}

+	r += '</table>';

+	

+	//return r;

+	

+	//alert(r);

+	

+	//$("#tmp").html(r).show('slow');; 

+	//$("#tmp").html(mapAsHTML(map,100)).show('slow');; 

+}

+

+

+

 </script>

 

 

@@ -161,6 +242,10 @@ $todaysScoreMaps = getMapsPlayed($daysAgo);
 

 <div class="wrapper">

 

+<div id='tmp'>

+Work in progress

+</div>

+

 <div id='#displayDate' style='text-align:center;padding-bottom:7px;'>

 <h2 title='Maps that were played during this day'><? echo $dateAsStr; ?></h2>

 </div>

@@ -283,24 +368,24 @@ if ($specialMapName != '')
 

 

 

-function showStats(type) {

+//function showStats(type) {

 	//super usefulll

 	//var anchor = window.location.hash.substring(1);

 	

-	for (var i = 1; i <= 4; i++) {

-		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', '');

-	}

-	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(1);

+	// for (var i = 1; i <= 4; i++) {

+		// 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', '');

+	// }

+	// 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(1);

 </script>

 

 <script src="sounds/script/soundmanager.js"></script>