lots of changes

2014-09-01 08:45:33 +02:00 · 2014-09-01 08:45:33 +02:00 · c2cae506c5
commit c2cae506c5
parent f63b911c23
6 changed files with 529 additions and 255 deletions
--- a/2dview.php
+++ b/2dview.php
@ -1,76 +1,23 @@
 <?php
 include("connectsql.php");
-function ImageCopyFliped($dst_im,$src_im,
-							$dst_x,$dst_y,
-							$src_x,$src_y,
-							$src_w,$src_h ){
-$img_temp =  imagecreatetruecolor($src_w, $src_h);
-imageCopy($img_temp, $src_im, //linker arm Spiegeln!!
-               0, 0,     /* imagecopy() an die Stelle ( 202, 0) in $Wiese, */
-               $src_x, $src_y,     /* der zu kopierende Bereich beginnt in $Sonne bei ( 0, 0) */
-               $src_w,$src_h);      /* und ist 96 Pixel breit und 90 Pixel hoch */
-               
-               
-               imageflip($img_temp,IMG_FLIP_HORIZONTAL);
-			   
-imageCopy($dst_im, $img_temp, //linker arm Spiegeln!!
-               $dst_x,$dst_y,     /* imagecopy() an die Stelle ( 202, 0) in $Wiese, */
-               0, 0,     /* der zu kopierende Bereich beginnt in $Sonne bei ( 0, 0) */
-               $src_w,$src_h);      /* und ist 96 Pixel breit und 90 Pixel hoch */
-	
-imagedestroy($img_temp)	;
-}
-
+include_once("functions.php");
 if (isset($_GET[id]) && is_numeric($_GET[id])) {
-	$sql = "SELECT * FROM `mt_skins` WHERE `id` = '$_GET[id]' LIMIT 0 , 1";
+	$id = $_GET[id];
+	$sql = "SELECT * FROM `mt_skins` LIMIT 0 , 100";
 	$result = mysql_query($sql);
-	$row = mysql_fetch_assoc($result);
+	while($row = mysql_fetch_assoc($result)){

-	
+	$id=$row[id];
 	$bin = base64_decode($row[img]);
-	
 	$img_src =  imagecreatefromstring($bin);
-	imagesavealpha($img_src,true);
-	$img_out =  imagecreatetruecolor(16, 32);
-	    $white = imagecolorallocatealpha($img_out, 255, 255, 255, 127);
-    imagefill($img_out, 0, 0, $white);
-	imagesavealpha($img_out,true);
-$background = $img_out;//imageCreateFromJPEG("images/wiese.jpg");
-$Sonne = $img_src;//imageCreateFromPNG("images/sonne.png");
-
-imageCopy($img_out, $img_src, //kopf
-               4, 0,     /* imagecopy() an die Stelle ( 202, 0) in $Wiese, */
-               8, 8,     /* der zu kopierende Bereich beginnt in $Sonne bei ( 0, 0) */
-               8, 8);      /* und ist 96 Pixel breit und 90 Pixel hoch */
-
-imageCopy($img_out, $img_src, //rechter arm
-               0, 8,     /* imagecopy() an die Stelle ( 202, 0) in $Wiese, */
-               44, 20,     /* der zu kopierende Bereich beginnt in $Sonne bei ( 0, 0) */
-               4, 12);      /* und ist 96 Pixel breit und 90 Pixel hoch */
-
-imageCopyFliped($img_out, $img_src, //linker arm Spiegeln!!
-               12, 8,     /* imagecopy() an die Stelle ( 202, 0) in $Wiese, */
-               44, 20,     /* der zu kopierende Bereich beginnt in $Sonne bei ( 0, 0) */
-               4, 12);      /* und ist 96 Pixel breit und 90 Pixel hoch */
-              
-imageCopy($img_out, $img_src, //bauch
-               4, 8,     /* imagecopy() an die Stelle ( 202, 0) in $Wiese, */
-               20, 20,     /* der zu kopierende Bereich beginnt in $Sonne bei ( 0, 0) */
-               8, 12);      /* und ist 96 Pixel breit und 90 Pixel hoch */
-
-               imageCopy($img_out, $img_src, //rechtes bein
-               4, 20,     /* imagecopy() an die Stelle ( 202, 0) in $Wiese, */
-               4, 20,     /* der zu kopierende Bereich beginnt in $Sonne bei ( 0, 0) */
-               4, 12);      /* und ist 96 Pixel breit und 90 Pixel hoch */
-               
-                imageCopyFliped($img_out, $img_src, //linkes bein Spiegeln!!
-               8, 20,     /* imagecopy() an die Stelle ( 202, 0) in $Wiese, */
-               4, 20,     /* der zu kopierende Bereich beginnt in $Sonne bei ( 0, 0) */
-               4, 12);      /* und ist 96 Pixel breit und 90 Pixel hoch */
-    imagesavealpha($img_out,true);           
-               	header("Content-Type: image/png");
-	imagepng ($img_out,NULL);
-
+	$size = 1;
+	$thumb = create2d($img_src,$size);
+               	//header("Content-Type: image/png");
+               	@mkdir("./skins");
+				@mkdir("./skins/".$size."");
+	imagepng($thumb,"./skins/".$size."/".$id.".png");
+	echo "saved ./skins/".$size."/".$id.".png<br>";
+	}
 } 
 else {
 	echo "missing or invalid param 'id'";
--- a/api/get.json.php
+++ b/api/get.json.php
@ -105,18 +105,25 @@ if (isset($_GET[apidoku])) {
 	}

 $sql = <<<SQL
-	 SELECT 
-	 `mt_skins`.id, 
-	 `mt_skins`.name, 
-	 `mt_skins`.author, 
-	 `mt_skins`.uploaded, 
-	 `mt_skins`.type, 
-	 mt_skins_licenses.name AS license,
-	 mt_skins_licenses.id AS license_id,
-	 `mt_skins`.img
-	FROM `mt_skins`
-	LEFT JOIN `mt_skins_licenses` ON `mt_skins_licenses`.id = `mt_skins`.license
-	 $sql LIMIT $offset,$per_page;
+select
+	`mt_skins`.id, 
+	`mt_skins`.name, 
+	`mt_skins`.author, 
+	`mt_skins`.uploaded, 
+	`mt_skins`.type, 
+	`mt_skins_licenses`.`name` AS license,
+	`mt_skins_licenses`.`id` AS license_id,
+	GROUP_CONCAT(`mt_tag`.`description` SEPARATOR ', ')AS tags,
+	`mt_skins`.img
+from `mt_skins` 
+left JOIN (`mt_skins_licenses`)
+ON (`mt_skins_licenses`.`id` = `mt_skins`.`license`
+) 
+left JOIN (`mt_skins_tag_map`,`mt_tag`)
+ON(`mt_skins_tag_map`.`mt_skins_id` = `mt_skins`.id 
+    AND `mt_skins_tag_map`.mt_tag_id = `mt_tag`.tag_id)
+GROUP BY `mt_skins`.id
+	 LIMIT $offset,$per_page;
 SQL;
 	//echo $sql;
 	$result = mysql_query($sql);
@ -130,7 +137,7 @@ SQL;
 				$hex = bin2hex($bin);
 				$row[img] = $hex;
 			}
-
+			$row[tags] = explode(", ", $row[tags]);
 			$out[skins][] = $row;
 		}
 		$out[success] = true;
--- a/api/post.json.php
+++ b/api/post.json.php
@ -1,6 +1,35 @@
 <?php
 include ("../connectsql.php");
+if ($_POST[filtertype] == 'Author' && isset($_POST[filter])) {
+	$sql = "WHERE `mt_skins`.`author` LIKE '%" . mysql_real_escape_string($_POST[filter]) . "%'";
+} else if ($_POST[filtertype] == 'License' && isset($_POST[filter])) {
+	$sql = "WHERE `mt_skins_licenses`.name LIKE '%" . mysql_real_escape_string($_POST[filter]) . "%'";
+} else if ($_POST[filtertype] == 'Id' && isset($_POST[filter])) {
+	$sql = "WHERE `mt_skins`.`id` = '" . mysql_real_escape_string($_POST[filter]) . "'";
+} else if ($_POST[filtertype] == 'Name' && isset($_POST[filter])) {
+	$sql = "WHERE `mt_skins`.`name` LIKE '%" . mysql_real_escape_string($_POST[filter]) . "%'";
+} else {
+	$sql = "";
+}
+$filterarr = array();

+if ($_POST[name] and $_POST[name] != ""){
+	$filterarr[] = "`mt_skins`.`name` LIKE '%" . mysql_real_escape_string($_POST[name]) . "%'";
+}
+if ($_POST[author] and $_POST[author] != ""){
+	$filterarr[] = "`mt_skins`.`author` LIKE '%" . mysql_real_escape_string($_POST[author]) . "%'";
+}
+if ($_POST[license] and $_POST[license] != ""){
+	$filterarr[] = "`mt_skins_licenses`.`name` LIKE '%" . mysql_real_escape_string($_POST[license]) . "%'";
+}
+if ($_POST[id] and $_POST[id] != ""){
+	$ids = explode(",",$_POST['id']);//todo: check if here are some security leaks.
+	$filterarr[] = "`mt_skins`.`id` IN ('" . implode("','", $ids) . "')";
+}
+if (count($filterarr)>=1){
+	$sql = "WHERE " . implode(" AND ", $filterarr);
+}
+else $sql = "";
 function filenameReplaceBadChars($filename) {

 	$patterns = array("/\\s/", # Leerzeichen
@ -72,74 +101,71 @@ if (isset($_POST[apidoku])) {

 } elseif (isset($_POST[getlist], $_POST[page])) {

-	$sql = "";
-	$count = "SELECT count(*) FROM `mt_skins` " . $sql;
+	$count = "SELECT count(*) FROM `mt_skins` LEFT JOIN `mt_skins_licenses` ON `mt_skins_licenses`.id = `mt_skins`.license " . $sql;

 	$result = mysql_query($count) OR die("<pre>\n" . $count . "</pre>\n" . mysql_error());
 	$anzahl = mysql_result($result, 0);

-	if (!$anzahl) {
-		$out[page] = 1;
-		$out[pages] = 1;
-	} else {
+	if ($anzahl < 1) {
+	$out[page] = 0;
+	$out[pages] = 0;
+	$out[debug] = $count;
+	$out[success] = false;
+	$out[status_msg] = "ERROR: No skin found matching to your Filter\n please try another.";
+	
+} else {

-		// Festlegen der aktuellen Seite
-		$start = isset($_POST['page']) ? (int)$_POST['page'] : 1;
-		// Festlegen der Anzahl der angezeigten Datensätze
-		$per_page = isset($_POST['per_page']) ? (int)$_POST['per_page'] : 10;
-		if ($per_page < 1 AND $per_page > 100)
-			$per_page = 10;
-		// Berechnung der Seitenzahlen = Alle Datensätze geteilt durch Datensätze pro Seite
-		$num_pages = ceil($anzahl / $per_page);
+	// Festlegen der aktuellen Seite
+	$start = isset($_POST['page']) ? (int)$_POST['page'] : 1;
+	// Festlegen der Anzahl der angezeigten Datensätze
+	$per_page = isset($_POST['per_page']) ? (int)$_POST['per_page'] : 20;
+	if ($per_page != 5 AND $per_page != 10 AND $per_page != 20)
+		$per_page = 10;
+	// Berechnung der Seitenzahlen = Alle Datensätze geteilt durch Datensätze pro Seite
+	$num_pages = ceil($anzahl / $per_page);

-		// Überprüft, ob eine mögliche Seitenzahl übergeben wurde
-		if ($start < 1)
-			$start = 1;
-		if ($start > $num_pages)
-			$start = $num_pages;
+	// Überprüft, ob eine mögliche Seitenzahl übergeben wurde
+	if ($start < 1)
+		$start = 1;
+	if ($start > $num_pages)
+		$start = $num_pages;

-		$offset = ($start - 1) * $per_page;
-		$out[page] = $start;
-		$out[pages] = $num_pages;
-		$out[per_page] = $per_page;
-	}
-
-$sql = <<<SQL
+	$offset = ($start - 1) * $per_page;
+	$out[page] = $start;
+	$out[pages] = $num_pages;
+	$out[per_page] = $per_page;
+	$out[success] = true; 
+	
+$sql = <<<sql
 	 SELECT 
 	 `mt_skins`.id, 
 	 `mt_skins`.name, 
 	 `mt_skins`.author, 
 	 `mt_skins`.uploaded, 
 	 `mt_skins`.type, 
+	 `mt_skins`.img, 
+	 `mt_skins`.cape_compatible,
 	 mt_skins_licenses.name AS license,
-	 mt_skins_licenses.id AS license_id,
-	 `mt_skins`.img
+	 mt_skins_licenses.id AS license_id
 	FROM `mt_skins`
 	LEFT JOIN `mt_skins_licenses` ON `mt_skins_licenses`.id = `mt_skins`.license
-	 $sql LIMIT $offset,$per_page;
-SQL;
-	//echo $sql;
+	 $sql LIMIT $offset,$per_page; 
+sql;
+	$out[debug] = $sql;
 	$result = mysql_query($sql);
 	if ($result == false) {
 		$out[success] = false;
 		$out[errmsg] = 'ERROR: could not load Skin. Error in Mysql. MYSQL says: ' . mysql_error();
+		$out[sql] = $sql;
 	} else {
+		$output[data] = Array();
 		while ($row = mysql_fetch_assoc($result)) {
-			if (isset($_POST[outformat]) && $_POST[outformat] == "hex") {
-				$bin = base64_decode($row[img]);
-				$hex = bin2hex($bin);
-				$row[img] = $hex;
-			}
-
+			$row['tags'] = array();
 			$out[skins][] = $row;
+			$out[success]= true;
 		}
-		$out[success] = true;
 	}
-} elseif (isset($_POST[getskinbyplayer])) {
-	echo apiDokumentation();
-} else {
-	echo apiDokumentation();
-}
+	}}
 if ($out) {
 	header('Content-type: application/json');
 	$strout = json_encode($out, JSON_PRETTY_PRINT | JSON_NUMERIC_CHECK);
--- a/css/main.css
+++ b/css/main.css
@ -413,4 +413,107 @@ div.settingsWindow{
 }
 .valid {
 	box-shadow: 0 0 1.5px 1px green;
-}
+}
+
+.tags {
+  list-style: none;
+  margin: 0;
+  overflow: hidden; 
+  padding: 0;
+}
+
+.tags li {
+  float: left; 
+    font-family: Arial;
+    font-size: 12px;
+    font-weight: bold;
+    position: relative !important;
+    background: #8dc63f;
+    float: left;
+    padding: 7px 3px;
+    margin: 0 5px 5px 0;
+}
+.tags li:after {
+    content: "";
+    position: absolute !important;
+    z-index: 100;
+    top: 0;
+    left: 0;
+    border-right: #fff 7px solid;
+    border-bottom: #fff 7px solid;
+    -moz-border-radius: 0 0 20px 0;
+    -webkit-border-radius: 0 0 20px 0;
+    border-radius: 0 0 20px 0;
+}
+ 
+.tags li:before {
+    content: "";
+    position: absolute !important;
+    z-index: 100;
+    top: 0;
+    right: 0;
+    border-left: #fff 7px solid;
+    border-bottom: #fff 7px solid;
+    -moz-border-radius: 0 0 0 20px;
+    -webkit-border-radius: 0 0 0 20px;
+    border-radius: 0 0 0 20px;
+}
+a.tag  {
+    outline: 1px rgba(255,255,255,0.4) dashed;
+    border: 1px rgba(0,0,0,0.3) dashed;
+    padding: 4px 10px 4px 20px;
+    text-decoration: none;
+    color: rgba(255,255,255,0.5);
+    white-space: nowrap;
+}
+ 
+a.tag:hover {color: rgba(0,0,0,0.5);}
+    
+a.tag:after {
+    content: "";
+    position: absolute !important;
+    z-index: 100;
+    bottom: 0;
+    left: 0;
+    border-right: #fff 7px solid;
+    border-top: #fff 7px solid;
+    -moz-border-radius: 0 20px 0 0;
+    -webkit-border-radius: 0 20px 0 0;
+    border-radius: 0 20px 0 0;
+}
+ 
+a.tag:before {
+    content: "";
+    position: absolute !important;
+    z-index: 1000;
+    bottom: 0;
+    right: 0;
+    border-left: #fff 7px solid;
+    border-top: #fff 7px solid;
+    -moz-border-radius: 20px 0 0 0;
+    -webkit-border-radius: 20px 0 0 0;
+    border-radius: 20px 0 0 0;
+}
+
+#advancedfilter{
+	opacity:0.7;
+	width: 0px; 
+	background: #c9d0de; border: 1px solid #e1e1e1;
+	box-shadow: 0px 0px 8px #444;
+	position: absolute;
+	top:40px;
+	right:0px;
+	overflow:hidden;
+	transition-property: all;
+	transition-duration: 500ms;
+	transition-timing-function: ease-in-out;
+}
+
+#advancedfilter:hover{
+	opacity: 1.0;
+	
+}
+
+#advancedfilter input{
+	width:100%;
+}
--- a/index.html
+++ b/index.html
@ -18,7 +18,7 @@
 	<body>

 		<div id="toolbarleft" class="toolbar">
-	<button class="toolbarelem" onclick="resetView();">
+			<button class="toolbarelem" onclick="resetView();">
 				Reset View
 			</button>
 			<button title="create screenshot" onclick="getScreenshot();">
@ -59,17 +59,9 @@
 			<output id="max_pages">
 				?
 			</output>
-			&nbsp; | &nbsp; Filter:
-			<select id="filtertype">
-				<option>all</option>
-				<option>Author</option>
-				<option>License</option>
-				<option>Id</option>
-				<option>Name</option>
-			</select>
-			<input id="filter">
-			<button onclick="hashobj.filtertype = document.getElementById('filtertype').value;hashobj.filter = document.getElementById('filter').value;hashobj.page = document.getElementById('page').value;hashmodified();">
-				apply
+			&nbsp; | &nbsp;
+			<button class="toolbarelem" onclick="showfilter()">
+				Filter / Search
 			</button>
 			<button title="Settings" onclick="settings.showHide()"><img src="/img/configure.png">
 			</button>
@ -117,7 +109,6 @@
 				<viewpoint id="cam_top" position="0 23 0"  orientation="0 0.7071068286895752 0.70710676908493042 3.1413483619689941"></viewpoint>
 				<viewpoint id="cam_left" position="-30 0 0"  orientation="0 -0.99999994039535522 0.00017263348854612559 1.5707962512969971"></viewpoint>
 				<viewpoint id="cam_right" position="30 0 0"  orientation="0 0.99999994039535522 -0.00017263348854612559 1.5707962512969971"></viewpoint>
-				

 			</scene>
 		</x3d>
@ -133,6 +124,34 @@
 				</p>
 			</div>

+		</div>
+		<div id="advancedfilter">
+			<h2>Filter/Search</h2>
+			<form action="#" method="get" onsubmit="changeFilter(this);return false;" class="pure-form pure-form-stacked">
+				<fieldset>
+					<label for="ids">Skin Ids:</label>
+					<input type="text" id="ids" placeholder="e.g. 1,2 or 14,17 or 1" />
+
+					<label for="name">Name:</label>
+					<input type="text" id="name" placeholder="e.g. farmer" />
+
+					<label for="author">Author:</label>
+					<input type="text" id="author" placeholder="e.g. addi or Jordach" />
+
+					<label for="license">License:</label>
+					<input type="text" id="license" placeholder="e.g. CC BY-SA" />
+
+					<!--<label for="tagsfound">Tags must found (pre alpha):</label>
+					<input type="text" id="tagsfound" placeholder="Enter the the Tags. of Skin" />-->
+					<button type="submit" class="pure-button pure-button-primary">
+						&#x2714; apply
+					</button>
+					<button type="reset" class="pure-button">
+						&#x2718; reset
+					</button>
+				</fieldset>
+			</form>
+
 		</div>
 		<div id="settingsWindow" class="settingsWindow">
 			<h2>Settings</h2>
--- a/js/main.js
+++ b/js/main.js
@ -267,6 +267,30 @@ function initDragDrop() {

 document.addEventListener('DOMContentLoaded', initDragDrop, false);

+function makeTags(taglist) {
+
+	// Make the list itself which is a <ul>
+	var listElement = document.createElement("ul");
+	listElement.className = "tags";
+	if (taglist.length >=1) {
+		for (var i = 0; i < taglist.length; ++i) {
+
+		// create a <li> for each one.
+		var listItem = document.createElement("li");
+		var link = document.createElement("a");
+		link.className = "tag arrow";
+		// add the item text
+		link.innerHTML = taglist[i];
+		//add the 
+		listItem.appendChild(link);
+		// add listItem to the listElement
+		listElement.appendChild(listItem);
+		}
+	}
+	
+	return listElement;
+}
+
 /* ==========================================================================
 load skins and write them
 ========================================================================== */
@ -279,7 +303,9 @@ function clearList() {
 function getSkins(page) {
 	copy = document.getElementById('dnd').outerHTML;
 	document.getElementById('skinlist').innerHTML = copy + "<b>Loading. Please wait...</b>";
-	xhr.request("getskins.php", page, gotSkins);
+	var get = location.hash.split("#")[1];
+	var page = URIHash.get(page,1);
+	xhr.request("api/post.json.php", "getlist=1&per_page=30&page="+page+"&"+get, gotSkins);
 }

 config = {};
@ -302,22 +328,14 @@ function gotSkins(http) {
 				elem.selectedIndex = answer.page - 1;
 				if (answer.page > 1) {
 					var block = document.createElement('div');
-					var string = location.hash;
-					if (string.indexOf('#!') != -1) {
-						cmd = string.split('!');
-						var obj = parseQuery(cmd[1]);
-						obj.page = answer.page - 1;
-						var str = decodeQuery(obj);
-					} else {
-						var str = "page:" + (answer.page + 1);
-					}
-					block.innerHTML = "go back to <a href='#!" + str + "'> page " + (answer.page - 1) + "</a> ";
+
+					block.innerHTML = "go back to <a href='#' onclick='goPage("+(answer.page - 1)+");return false'> page " + (answer.page - 1) + "</a> ";
 					block.className = "option";
 					document.getElementById('skinlist').insertBefore(block, null);
 				}
 				var i = 0;
-				while (answer.data[i]) {
-					var skin = answer.data[i];
+				while (answer.skins[i]) {
+					var skin = answer.skins[i];
 					var license = Licenses[skin.license_id];
 					Skinlist[Number(skin.id)] = new Skin(skin.id, skin.name, skin.img, skin.type, skin.author, license, skin.uploaded, skin.cape_compatible);
 					var block = document.createElement('div');
@ -328,7 +346,7 @@ function gotSkins(http) {
 						//css klasse zuweisen fuers aussehen ;)
 						img.src = "./skins/1/" + skin.id + ".png";
 						//das ist die data: url fuer die vorschau
-						img.title = answer.data[i].name;
+						img.title = skin.name;
 						//als titel noch der dateiname.
 						img.dataset.img = "data:" + skin.type + ";base64," + skin.img;
 						img.addEventListener('click', function() {
@ -339,7 +357,7 @@ function gotSkins(http) {
 						//css klasse zuweisen fuers aussehen ;)
 						img.src = "data:" + skin.type + ";base64," + skin.img;
 						//das ist die data: url fuer die vorschau
-						img.title = answer.data[i].name;
+						img.title = skin.name;
 						//als titel noch der dateiname.
 						img.addEventListener('click', function() {
 							useTexture(this.src);
@ -348,13 +366,19 @@ function gotSkins(http) {
 					//bild ende

 					var titel = document.createElement('span');
-					titel.innerHTML = "Name: <a href='#!page:1,filtertype:Name,filter:" + answer.data[i].name + "'>" + answer.data[i].name + "</a><br>";
+					titel.innerHTML = "Name: <a href='#' onclick='URIHash.set(\"name\",\""+skin.name+"\");return false'>" + skin.name + "</a><br>";
 					titel.className = "autor";
 					//titel Ende
 					var eigenschaften = document.createElement('span');
-					eigenschaften.innerHTML = "<span class='rightbuttons'><button onclick='download(" + answer.data[i].id + ")' class='download'>&nbsp;Download</button> " + "<button onclick='shareSkin.show(" + answer.data[i].id + ")' class='permalink'>&nbsp;Share</button>" + "<button onclick='report(" + answer.data[i].id + ")' class='report'>&nbsp;Report</button></span> <br>" + "Author: <a href='#!page:1,filtertype:Author,filter:" + answer.data[i].author + "'>" + answer.data[i].author + "</a> <br>" + "License: <a href='#!page:1,filtertype:License,filter:" + answer.data[i].license + "'>" + answer.data[i].license + "</a> &nbsp;" + "<a href='" + getLicenseById(answer.data[i].license_id).url + "' onclick='showLicenseInfo(" + answer.data[i].license_id + ");return false;'><img src=" + getLicenseById(answer.data[i].license_id).imgurl + "></a> <br>" + "Uploaded at: " + dateFormat(answer.data[i].uploaded) + "<br>";
+					eigenschaften.innerHTML = "<span class='rightbuttons'><button onclick='download(" + skin.id + ")' class='download'>&nbsp;Download</button> " + "<button onclick='shareSkin.show(" + skin.id + ")' class='permalink'>&nbsp;Share</button>" + "<button onclick='report(" + skin.id + ")' class='report'>&nbsp;Report</button></span> <br>";
+					eigenschaften.innerHTML += "Author: <a href='#' onclick='URIHash.set(\"author\",\""+skin.author+"\");return false'>" + skin.author + "</a> <br>";
+					eigenschaften.innerHTML += "License: <a href='#' onclick='URIHash.set(\"license\",\""+skin.license+"\");return false'>" + skin.license + "</a> &nbsp;" + "<a href='" + getLicenseById(skin.license_id).url + "' onclick='showLicenseInfo(" + skin.license_id + ");return false;'><img src=" + getLicenseById(skin.license_id).imgurl + "></a> <br>";
+					eigenschaften.innerHTML += "Uploaded: <span class='timeago' title='" + dateFormat(skin.uploaded) + "'> " + dateFormat(skin.uploaded) + "</span><br>";
+					eigenschaften.innerHTML += "Tags (pre-alpha): ";
+					var taglist = makeTags(skin.tags);
+					eigenschaften.insertBefore(taglist, null);
 					var warning = document.createElement('span');
-					if (Skinlist[Number(skin.id)].cape_compatible == false) {//if the skin is not compatible
+					if (skin.tags["unfinished cape"]) {//if the skin is not compatible
 						block.className += " invalid";
 						warning.className = "warning";
 						warning.innerHTML = "This skin is maybe not compatible with the upcomming minetest 0.4.10 <a class='actionlink' href='/helpfiles/cape_compatible.html' onclick='showHelp(\"cape_compatible\");return false;'>What does this message mean</a>";
@ -372,26 +396,18 @@ function gotSkins(http) {
 					//anschliesend den block einfuegen
 					i++;
 				}
-
+				//ende der while schleife.
+				timeAgo();//ausfuehren, damit das datum angezeigt wird.
 				if (answer.page < answer.pages) {
 					var block = document.createElement('div');
-					var string = location.hash;
-					if (string.indexOf('#!') != -1) {
-						cmd = string.split('!');
-						var obj = parseQuery(cmd[1]);
-						obj.page = answer.page + 1;
-						var str = decodeQuery(obj);
-					} else {
-						var str = "page:" + (answer.page + 1);
-					}
-					block.innerHTML = "End of page " + answer.page + ". <br><a href='#!" + str + "'>continue on the next page</a> ";
+					block.innerHTML = "End of page " + answer.page + ". <br><a href='#' onclick='goPage("+(answer.page - 1)+");return false''>continue on the next page</a> ";
 					block.className = "option";
 					document.getElementById('skinlist').insertBefore(block, null);
 				} ;
-				if (answer.data.length < 1) {
+				if (answer.skins.length < 1) {
 					alert("noting found matching your filter!");
 				} else {
-					useTexture("data:" + answer.data[0].type + ";base64," + answer.data[0].img);
+					useTexture("data:" + answer.skins[0].type + ";base64," + answer.skins[0].img);
 				}
 			} else {
 				TINY.box.show({
@ -417,110 +433,201 @@ function gotSkins(http) {
 /* ==========================================================================
 read the anchor
 ========================================================================== */
-oldhash = 'something';
-delay = 500;
-checkAnchor = null;
-hashobj = {
-	page : 1,
-	filter : "",
-	filtertype : "all"
-};
-defaulthash = {
-	page : 1,
-	filter : "",
-	filtertype : "all"
+/**
+ * Copyright 2009 by David Kerkeslager
+ * Released under the BSD License (http://davidkerkeslager.com/license.txt).
+ *
+ * This library defines an object-literal which allows one to store key/value pairs after the hash (#) in the URI.
+ * The syntax of the storage is modeled after the way that GET variables are stored after the question mark (?) in
+ * the URI.
+ *
+ * Example URI: "http://www.foo.com/index.html#foo=bar&baz=quux"
+ *
+ * Note: it should be obvious that this should not be used for storing private data of any kind.
+ */

-};
+var URIHash =
+{
+	/**
+	 * Dump the contents of the URI hash into an associative array. If the hash is invalid, the method returns
+	 * undefined.
+	 */
+	dump : function()
+	{
+		var hash = document.location.hash;
+		var dump = new Array();

-function anchor() {
-	var newhash = location.hash;
-	if (oldhash != newhash) {
-		console.log("hash wurde veraendert");
-		if (newhash.indexOf('#!') != -1) {
-			console.log("kopiere neue daten in den hash");
-			cmd = newhash.split('!');
-			obj = parseQuery(cmd[1]);
-			for (var i in obj) {
-				if (obj.hasOwnProperty(i)) {
-					if (hashobj[i] != undefined)//wert existiert
-					{
-						hashobj[i] = obj[i];
-					}
-				}
-			}
+		if(hash.length == 0) return dump;

-		} else {
-			console.log("kein befehl gefunden,verwende default hash");
-			hashobj = defaulthash;
-		};
-		if (hashobj.filtertype == 'all') {
-			hashobj.filter = '';
+		hash = hash.substring(1).split('&');
+
+		for(var key in hash)
+		{
+			var pair = hash[key].split('=');
+
+			if(pair.length != 2 || pair[0] in dump)
+				return undefined;
+
+			// escape for storage
+			dump[unescape(pair[0])] = unescape(pair[1]);
 		}
-		oldhash = newhash;
-		onAnchorChange();
-	};
-	checkAnchor = setTimeout(anchor, delay);
-};

-document.addEventListener("DOMContentLoaded", anchor, false);
+		return dump;
+	},

-function hashmodified() {
-	var str = decodeQuery(hashobj);
-	location.hash = "#!" + str;
-}
+	/**
+	 * Takes an associative array and stores it in the URI as a hash after the # prefix, replacing any pre-
+	 * existing hash.
+	 */
+	load : function(array)
+	{
+		var first = true;
+		var hash = '';

-function onAnchorChange() {
-	console.debug(hashobj);
-	obj = hashobj;
-	clearList();
-	var get = "page=" + obj.page;
-	document.getElementById('filtertype').selectedIndex = 0;
-	//document.getElementById('filter').value = '';
-	//document.getElementById('filter').disabled = true;
-	if (obj.filtertype != undefined && obj.filter != undefined) {
-		get += "&filtertype=" + obj.filtertype + "&filter=" + obj.filter + "";
-		document.getElementById('filter').value = obj.filter;
-		document.getElementById('filter').disabled = false;
-		switch(obj.filtertype) {
-			case "Author":
-				document.getElementById('filtertype').selectedIndex = 1;
-				break;
-			case "License":
-				document.getElementById('filtertype').selectedIndex = 2;
-				break;
-			case "Id":
-				document.getElementById('filtertype').selectedIndex = 3;
-				break;
-			case "Name":
-				document.getElementById('filtertype').selectedIndex = 4;
-				break;
-			default:
-				document.getElementById('filtertype').selectedIndex = 0;
-				break;
+		for(var key in array)
+		{
+			if(!first) hash += '&';
+			hash += escape(key) + '=' + escape(array[key]);
+			first = false;
 		}
+
+		document.location.hash = hash;
+	},
+
+	/**
+	 * Get the value of a key from the hash.  If the hash does not contain the key or the hash is invalid,
+	 * the function returns the default.
+	 */
+	get : function(key,_default)
+	{
+		return (this.dump()[key]) ? this.dump()[key] : _default;
+	},
+
+	/**
+	 * Set the value of a key in the hash.  If the key does not exist, the key/value pair is added.
+	 */
+	set : function(key,value)
+	{
+		var dump = this.dump();
+		dump[key] = value;
+
+		var hash = new Array();
+
+		for(var key in dump)
+			hash.push(escape(key) + '=' + escape(dump[key]));
+
+		document.location.hash = hash.join('&');
 	}
-	getSkins(get);
+};

-}
-
-function parseQuery(qstr) {
+if (location.hash.indexOf('#!') != -1) {
+	console.log("found old hashsystem, trying to replace with new one");
+	cmd = location.hash.split('!');
 	var query = {};
-	var a = qstr.split(',');
+	var a = cmd[1].split(',');
 	for (var i in a) {
 		var b = a[i].split(':');
 		if (b[0] != '')
 			query[decodeURIComponent(b[0])] = decodeURIComponent(b[1]);
 	}
+	switch(query.filtertype) {
+			case "Author":
+				var load = {};
+				load.author = query.filter;
+				load.page = query.page;
+				URIHash.load(load);
+				break;
+			case "License":
+					var load = {};
+				load.license = query.filter;
+				load.page = query.page;
+				URIHash.load(load);
+				break;
+			case "Id":
+				var load = {};
+				load.id = query.filter;
+				load.page = query.page;
+				URIHash.load(load);
+				break;
+			case "Name":
+				var load = {};
+				load.name = query.filter;
+				load.page = query.page;
+				URIHash.load(load);
+				break;
+			default:
+				console.log("no querry.filtertype found");
+				break;
+		}

-	return query;
-}
+} 

-function decodeQuery(qobj) {
-	var str = "";
-	for (var attr in qobj) {
-		str += attr + ':' + qobj[attr] + ",";
+var oldhash = null;
+function anchor() {
+	var newhash = location.hash;
+	if (oldhash != newhash) {
+		
+		oldhash = newhash;
+		//URIHash.load();
+		getSkins(URIHash.get('page','1'));
+	};
+	checkAnchor = setTimeout(anchor, 500);
+};
+
+if (location.hash.indexOf('#!') != -1) {
+	console.log("kopiere neue daten in den hash");
+	cmd = newhash.split('!');
+	obj = parseQuery(cmd[1]);
+	for (var i in obj) {
+		if (obj.hasOwnProperty(i)) {
+			if (hashobj[i] != undefined)//wert existiert
+			{
+				hashobj[i] = obj[i];
+			}
+		}
 	}
-	return str;
+
+} 
+
+document.addEventListener("DOMContentLoaded", anchor, false);
+/** ==========================================================================
+ Function to show hide the filter
+ param 1 = bool show 
+ if true then show
+ if false then hide
+ if undefined or something other toggle;
+
+ ========================================================================== */
+function showfilter(show){
+	var filterelem = document.getElementById("advancedfilter");
+	if(show == true){
+		filterelem.style.width = "300px";
+	}
+	else if (show == false){
+		filterelem.style.width = "0px";
+	}
+	
+	else{
+		if(filterelem.style.width == "300px")
+		filterelem.style.width = "0px";
+		else filterelem.style.width = "300px";
+	}
+	
+}
+/**
+ * this function is caled when the filter changes
+ */
+function changeFilter(form){
+	var ids = form.ids.value;
+	var name = form.name.value;
+	var author = form.author.value;
+	var license = form.license.value;
+	var load = new Array();
+	if(ids !="") load.id = ids;
+	if(name !="") load.name = name;
+	if(author !="") load.author = author;
+	if(license !="") load.license = license;
+	URIHash.load(load);
 }

 /* ==========================================================================
@ -579,8 +686,7 @@ function dateFormat(mysqldate) {

 function goPage(page) {
 	if (Number(page) >= 1) {
-		hashobj.page = page;
-		hashmodified();
+	URIHash.set("page",page);
 	}

 }
@ -761,4 +867,70 @@ function nextElements() {
 		global_laden = true;
 		console.log("hochgescrollt zu "+diff);
 	}
-} 
+}
+document.addEventListener('load', timeAgo);
+function timeAgo(selector) {
+
+    var templates = {
+        prefix: "",
+        suffix: "",
+        seconds: "Just Now",
+        minute: "about a minute",
+        minutes: "%d minutes ago",
+        hour: "about an hour ago",
+        hours: "about %d hours ago",
+        day: "a day ago",
+        days: "%d days ago",
+        month: "about a month ago",
+        months: "%d months ago",
+        year: "about a year ago",
+        stNimerleinsTag: "Sankt-Nimmerleins-Day",
+        years: "%d years ago"
+    };
+    var template = function(t, n) {
+        return templates[t] && templates[t].replace(/%d/i, Math.abs(Math.round(n)));
+    };
+
+    var timer = function(time) {
+        if (!time)
+            return;
+        time = time.replace(/\.\d+/, ""); // remove milliseconds
+        time = time.replace(/-/, "/").replace(/-/, "/");
+        time = time.replace(/T/, " ").replace(/Z/, " UTC");
+        time = time.replace(/([\+\-]\d\d)\:?(\d\d)/, " $1$2"); // -04:00 -> -0400
+        time = new Date(time * 1000 || time);
+		//console.log(time);
+        var now = new Date();
+        var seconds = ((now.getTime() - time.getTime()) * .001) ;
+        var minutes = seconds / 60;
+        var hours = minutes / 60;
+        var days = hours / 24;
+        var years = days / 365;
+
+        return templates.prefix + (
+                seconds < 45 && template('seconds', seconds) ||
+                seconds < 90 && template('minute', 1) ||
+                minutes < 45 && template('minutes', minutes) ||
+                minutes < 90 && template('hour', 1) ||
+                hours < 24 && template('hours', hours) ||
+                hours < 42 && template('day', 1) ||
+                days < 30 && template('days', days) ||
+                days < 45 && template('month', 1) ||
+                days < 365 && template('months', days / 30) ||
+                years < 1.5 && template('year', 1) ||
+                years < 120 && template('stNimerleinsTag', 100) ||
+                template('years', years)
+                ) + templates.suffix;
+    };
+
+    var elements = document.getElementsByClassName('timeago');
+    for (var i in elements) {
+        var $this = elements[i];
+        if (typeof $this === 'object') {
+            $this.innerHTML = timer($this.getAttribute('title') || $this.getAttribute('datetime'));
+        }
+    }
+    // update time every minute
+    setTimeout(timeAgo, 10000);
+
+};