From 954ab689e9a6dd9bf33b1e08e00a5d141910a244 Mon Sep 17 00:00:00 2001
From: Arthur Mayer <info@citex.net>
Date: Thu, 17 Mar 2011 15:43:28 +0100
Subject: [PATCH] scrollbuttons added and small change for css (because i want
 it so!)

---
 web/css/dynmap_style.css | 15 ++++++++++-----
 web/js/map.js            | 35 ++++++++++++++++++++++++++++++++++-
 2 files changed, 44 insertions(+), 6 deletions(-)

diff --git a/web/css/dynmap_style.css b/web/css/dynmap_style.css
index a9c2247b..903d65cd 100644
--- a/web/css/dynmap_style.css
+++ b/web/css/dynmap_style.css
@@ -418,6 +418,11 @@
 	background: url(images/scrollup.png) rgba(32,32,32,0.6);
 
 	margin-bottom: 4px;
+
+    -moz-border-radius: 2px;
+    -webkit-border-radius: 2px;
+    -o-border-radius: 2px;
+	border-radius: 2px;
 }
 
 .panel .scrolldown {
@@ -425,6 +430,11 @@
 	background: url(images/scrolldown.png) rgba(32,32,32,0.6);
 
 	margin-top: 4px;
+
+    -moz-border-radius: 2px;
+    -webkit-border-radius: 2px;
+    -o-border-radius: 2px;
+	border-radius: 2px;
 }
 
 .panel .scrollup:hover, .panel .scrolldown:hover {
@@ -454,11 +464,6 @@
 
 	background-repeat: no-repeat;
 	background-position: center;
-
-    -moz-border-radius: 2px;
-    -webkit-border-radius: 2px;
-    -o-border-radius: 2px;
-	border-radius: 2px;
 }
 
 .playerlist {
diff --git a/web/js/map.js b/web/js/map.js
index 67dd0cc3..afe5516a 100644
--- a/web/js/map.js
+++ b/web/js/map.js
@@ -182,13 +182,46 @@ DynMap.prototype = {
 			.appendTo(largeclock)
 		);
 		
+		// The scrollbuttons
+		// we need to show/hide them depending: if (me.playerlist.scrollHeight() > me.playerlist.innerHeight()) or something.
+		var upbtn = $('<div/>')
+		.addClass('scrollup')
+		.bind('mousedown mouseup', function(event){ 
+		    if(event.type == 'mousedown'){
+				playerlist.animate({"scrollTop": "-=300px"}, 3000, 'linear');
+		    }else{
+		        playerlist.stop(); 
+		    }
+		});
+		var downbtn = $('<div/>')
+		.addClass('scrolldown')
+		.bind('mousedown mouseup', function(event){ 
+		    if(event.type == 'mousedown'){ 
+				playerlist.animate({"scrollTop": "+=300px"}, 3000, 'linear');
+		    }else{ 
+		        playerlist.stop(); 
+		    }
+		});
+		
 		// The Player List
 		var playerlist;
 		$('<fieldset/>')
 			.append($('<legend/>').text('Players'))
-			.append(me.playerlist = playerlist = $('<ul/>').addClass('playerlist'))
+			.append(upbtn)
+			.append(me.playerlist = playerlist = $('<ul/>').addClass('playerlist')
+				.bind('mousewheel', function(event, delta){ 
+					this.scrollTop -= (delta * 10);
+					event.preventDefault();
+				})
+			)
+			.append(downbtn)
 			.appendTo(panel);
 		
+		playerlist.height(sidebar.innerHeight() - (playerlist.offset().top - worldlist.offset().top) - 64); // here we need a fix to avoid the static value, but it works fine this way :P
+		$(window).resize(function() {
+			playerlist.height(sidebar.innerHeight() - (playerlist.offset().top - worldlist.offset().top) - 64); // here we need a fix to avoid the static value, but it works fine this way :P
+		});
+		
 		// The Compass
 		var compass = $('<div/>')
 			.addClass('compass')