From 2fb5da215a7b286b71f8c4d0126c72a06e41935e Mon Sep 17 00:00:00 2001
From: Patrick Davison <snapwilliam@gmail.com>
Date: Wed, 30 Jan 2013 03:23:26 -0800
Subject: Dynamic resizing of mapThumbnail.

---
 css/maps.css      |  2 --
 css/stats.css     | 35 ++++++++++++++++++++++++++++++++---
 includes/maps.php | 41 ++++++++++++++++++++++++++++++++++++-----
 pages/scores.php  | 17 ++++++++++++-----
 4 files changed, 80 insertions(+), 15 deletions(-)

diff --git a/css/maps.css b/css/maps.css
index 6c9b646..c6807a6 100644
--- a/css/maps.css
+++ b/css/maps.css
@@ -11,8 +11,6 @@
 	background-size: 100%;
 }
 .map_thumbnail td {
-	width:4px; 
-	height:4px;
 	border: 0px solid #000;
 	padding: 4px;
 	margin: 0px;
diff --git a/css/stats.css b/css/stats.css
index 6ddc38f..d028d0f 100644
--- a/css/stats.css
+++ b/css/stats.css
@@ -30,18 +30,47 @@
 	height: 0;
 }
 
+.mapNavBtn:hover {
+	background-color:#57a;
+}
+.mapNavCon {
+	height:200px;
+	width:900px;
+}
+.mapNavLeft {
+	float:left;
+	width:40px;
+	height:200px;
+	background-color:#358;
+}
+.mapNavRight {
+	float:right;
+	width:40px;
+	height:200px;
+	background-color:#358;
+}
+.mapNavCenter {
+	float:left;
+	height:200px;
+	height:200px;
+	width:820px;
+	background-color:#888;
+}
 #mapNavigation {
 	padding:15px;
 	background-color:#888;
 	border-radius:10px;
-	min-height:130px;
+	height:170px;
+	width:790px;
 	text-align:left;
+	white-space: nowrap;
 	overflow-x:hidden;
 	overflow-y:hidden;
-	width:1100px;
+
 }
+
 .mapThumbnail {
-	float:left;
+	display:inline-block;
 	padding: 10px;
 	background-color:#334;
 	margin: 7px;
diff --git a/includes/maps.php b/includes/maps.php
index e5b6fdc..9ee6984 100644
--- a/includes/maps.php
+++ b/includes/maps.php
@@ -290,17 +290,48 @@ function DisplayMap($mapMatrix, $idprefix = 1, $style = 'normal', $speed = NULL)
 function DisplayMapThumbnail($map, $link = false) {
 	$r = ''; //Prepare our return value:
 	
-	if ($link) 
-		$r .= "<table style='cursor:pointer' onclick='document.location.href=\"$link\"' class='map_thumbnail'>";
-	else
-		$r .= "<table class='map_thumbnail'>";
+
+	$tileWidth = 1 / $map->width;
+	$tileHeight = $goalSize / $map->height;
+	
+	$sourceWidth = $map->width;
+	$sourceHeight = $map->height;
+
+	$targetWidth = 150;
+
+	$sourceRatio = $sourceWidth / $sourceHeight;
+
+	// if ( $sourceRatio < $targetRatio ) {
+		 $scale = $sourceWidth / $targetWidth;
+	// } else {
+		 // $scale = $sourceHeight / $targetHeight;
+	// }
+
+	$resizeWidth = (int)($sourceWidth / $scale);
+	$resizeHeight = (int)($sourceHeight / $scale);
+	
+	//$height = $width / ($tileWidth / $tileHeight);
+	//$height = round($height);
+	
+	$width = $resizeWidth.'px';
+	$height = $resizeHeight.'px';
+	
+	//$height = '100px';
+	//if ($map-height > $map->width;)
 		
+	$size = $size.'%';
+	//$size = '1.2px';
+	if ($link) {
+		$r .= "<table style='cursor:pointer' onclick='document.location.href=\"$link\"' class='map_thumbnail'>";
+	} else {
+		$r .= "<table style='width:$width;height:$height;' class='map_thumbnail'>";
+	}
 	for ($y = 0; $y < $map->height; $y++) {		//Number of Rows
 		$r .= "<tr>";
 		for ($x = 0; $x < $map->width; $x++) {		//Number of Columns
 			$value = $map->tiles[$y][$x][TileValue];
 			$type = $map->tiles[$y][$x][TileType];
-			$r .= "<td class='$type$value'></td>";
+			$r .= "<td class='$type$value' style='width:$tileWidth%;'></td>";
 		}
 		$r .= "</tr>";
 	}
diff --git a/pages/scores.php b/pages/scores.php
index 3a79529..2a82efd 100644
--- a/pages/scores.php
+++ b/pages/scores.php
@@ -132,9 +132,9 @@ function getMaplist(request) {
 	}
 	
 	var urlString = 'ajax/scores.ajax.php?getmaplist=true&daysago='+daysAgo;
-	$("#mapNavigation").fadeOut('fast');
+	$("#mapNavigation").hide('fast');
 	//.html(ajax_load)
-	$("#mapNavigation").load(urlString, null, function() {$("#mapNavigation").fadeIn('slow');}); 
+	$("#mapNavigation").load(urlString, null, function() {$("#mapNavigation").show('slow');}); 
 }
 
 
@@ -159,7 +159,7 @@ $todaysScoreMaps = getMapsPlayed($daysAgo);
 
 ?>
 
-<div class="wrapper" style='width:1100px;'>
+<div class="wrapper">
 
 <div id='#displayDate' style='text-align:center;padding-bottom:7px;'>
 <h2 title='Maps that were played during this day'><? echo $dateAsStr; ?></h2>
@@ -169,9 +169,16 @@ $todaysScoreMaps = getMapsPlayed($daysAgo);
 <a href='javascript:getMaplist("prev");' title='Older'>&lt; Previous Day</a>
 <a href='javascript:getMaplist("next");' title='Newer'>Next Day &gt;</a>
 <a href='javascript:getMaplist("yesterday");' title='Now'>Yesterday &gt;&gt;</a>
-<div id='mapNavigation'>
-<? echo getMapNavigation($todaysScoreMaps); ?>
+<div class='mapNavCon'>
+	<div class='mapNavLeft mapNavBtn' onclick='$("#mapNavigation").scrollLeft(0)'>&lt;</div>
+	<div class='mapNavRight mapNavBtn' onclick='$("#mapNavigation").scrollLeft(1000)'>&gt;</div>
+	<div class='mapNavCenter'>
+		<div id='mapNavigation'>
+		<? echo getMapNavigation($todaysScoreMaps); ?>
+		</div>
+	</div>
 </div>
+<div style='clear:both'></div>
 <?
 
 	
-- 
cgit v1.2.3