function useTexture(src) {
	var canvas = document.getElementById('myCanvas');
	var img = new Image();
	img.onload = function() {
		if (canvas.getContext) {
			var context = canvas.getContext('2d');
			context.clearRect(0, 0, canvas.width, canvas.height);
			context.drawImage(img, 0, 0, canvas.width, canvas.height);
			canvas.parentNode._x3domNode.invalidateGLObject();
		}
	};
	img.src = src;

}

function uploadSkin(e) {
	e.preventDefault();
	e.stopPropagation();
	var author = this.author.value;
	var name = this.name.value;
	var license = this.license.value;
	var img = this.img.value;
	xhr.request(this.action, "author=" + author + "&name=" + name + "&license=" + license + "&img=" + img, uploaded);
	//alert("hi "+this.name.value+",n thanks that you want to upload your skin. but the upload function is not ready atm.")
	return false;
}

function uploaded(http) {
	if (http.status == 200) {

		if (JSON.parse(http.responseText)) {
			var answer = JSON.parse(http.responseText);
			if (answer.success) {
				TINY.box.show({html:'Uploaded successfully!',animate:false,close:false,mask:false,boxid:'success',autohide:3,top:-14,left:-17});
			} else {
				alert("Error: " + answer.status_msg);
			}
		} else {
			alert("Something is wrong: the answer of the server is " + http.getResponseText());
		}

	} else {
		alert("Something is wrong: the answer of the server is " + http.status + " " + http.statusText);
	}

}

function abort() {

	var childNode = this.parentNode;
	childNode.parentNode.removeChild(childNode);
}

/* ==========================================================================
 Drag & drop file handler
 ========================================================================== */

function handleFileSelect(evt) {
	evt.stopPropagation();
	evt.preventDefault();

	var dateien = (this.id == 'skinlist') ? evt.dataTransfer.files : evt.target.files;
	// jenachdem ob ueber drag drop oder durchsuchen ausgewaehlt wurde.
	//in dateien sind jetzt alle dateien gespeichert die ausgewahlt wurden
	for (var i = 0, f; f = dateien[i]; i++) {//alle dateien nacheinander auslesen...
		if (!f.type.match('image.*')) {//fals was anderes als ein bild dabei sein sollte
			alert("ERROR!\n\n could not open the file " + f.name + " as an image");
			continue;
		}

		var reader = new FileReader();

		// wenn die datei geladen ist dann soll die gleich in ein img tag geschrieben werden
		reader.onload = (function(Datei) {
			return function(e) {
				// Vorschau bzw. thumbnail rendern
				var block = document.createElement('div');
				block.className = "option";
				var img = new Image();
				img.className = 'thumb';
				//css klasse zuweisen fuers aussehen ;)
				img.src = e.target.result;
				//das ist die data:// url fuer die vorschau
				img.title = Datei.name;
				//als titel noch der dateiname.
				img.addEventListener('click', function() {
					useTexture(img.src);
				}, false);
				//bild ende
				var form = document.createElement('form');
				form.action = "upload.php";
				form.method = "get";
				form.addEventListener('submit', uploadSkin, false);
				form.addEventListener('reset', abort, false);
				var titel = document.createElement('span');
				titel.innerHTML = "Name: <input type='text' placeholder='please enter a name' name='name' required><br>";
				//titel Ende
				var eigenschaften = document.createElement('span');
				var author = document.createElement('lable');
				author.innerHTML = "Author: <input type='text' placeholder='enter the name of the Author' name='author' required>";
				var license = document.createElement('lable');
				var licenseselect = document.createElement('select');
				licenseselect.name = "license";
				//var br = document.createElement('br');
				for(index in Licenses){
					  var NeuerEintrag = new Option(Licenses[index].name, Licenses[index].id, false, true);
					  licenseselect.options[licenseselect.length] = NeuerEintrag;

				}
				license.innerHTML +="License:"; 
				license.insertBefore(licenseselect, null);
				license.innerHTML +="{helplink}"; 
				eigenschaften.insertBefore(author, null);
				eigenschaften.insertBefore(document.createElement('br'), null);
				eigenschaften.insertBefore(license, null);
				eigenschaften.insertBefore(document.createElement('br'), null);
				eigenschaften.innerHTML += "Mime Type: " + Datei.type + "<br>" + "Size: " + Datei.size / 1024 + " Kb<br>" + "<input type='hidden' value='" + img.src + "' name='img'>" + 
					"<button type='submit' class='addimg'>Upload!</button><button type='reset' class='abort'>discard!</button>";
				//Eigenschaften ende
				block.insertBefore(img, null);
				//das bild ins div schieben.
				form.insertBefore(titel, null);
				//titel einfügen
				form.insertBefore(eigenschaften, null);
				//zu guter letzt die Eigenschaften
				block.insertBefore(form, null);
				//zu guter letzt die Eigenschaften
				document.getElementById('skinlist').insertBefore(block, document.getElementById("dnd"));
				//anschliessend den block einfuegen
			};
		})(f);

		reader.readAsDataURL(f);

	}
}

function handleDragOver(evt) {
	evt.stopPropagation();
	evt.preventDefault();
	evt.dataTransfer.dropEffect = 'copy';
}

function initDragDrop() {
	// Event listener Eintragen
	var dropZone = document.getElementById('skinlist');
	dropZone.addEventListener('dragover', handleDragOver, false);
	dropZone.addEventListener('drop', handleFileSelect, false);
	document.getElementById('files').addEventListener('change', handleFileSelect, false);
}

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

/* ==========================================================================
 load skins and write them
 ========================================================================== */

function clearList() {
	copy = document.getElementById('dnd').outerHTML;
	document.getElementById('skinlist').innerHTML = copy;
}

function getSkins(page) {
	copy = document.getElementById('dnd').outerHTML;
	document.getElementById('skinlist').innerHTML = copy+"<b>Loading. Please wait...</b>";
	xhr.request("getskins.php", page, gotSkins);
}

function gotSkins(http) {
	if (http.status == 200) {

		if (JSON.parse(http.responseText)) {
			var answer = JSON.parse(http.responseText);
			if(answer.success){
				clearList();
				var elem = document.getElementById("page");
				for (var i = 1; i <= answer.pages; i++) {
	
					var option = new Option(i, i);
	
					elem.options[i - 1] = option;
				}
				document.getElementById("max_pages").value = answer.pages;
				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.className = "option";
					document.getElementById('skinlist').insertBefore(block, null);
				}
				var i = 0;
				while (answer.data[i]) {
					var block = document.createElement('div');
					block.className = "option";
					var img = new Image();
					img.className = 'thumb';
					//css klasse zuweisen fuers aussehen ;)
					img.src = "data:" + answer.data[i].type + ";base64," + answer.data[i].img;
					//das ist die data: url fuer die vorschau
					img.title = answer.data[i].name;
					//als titel noch der dateiname.
					img.addEventListener('click', function() {
						useTexture(this.src);
					}, false);
					//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.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='permalink(" + answer.data[i].id + ")' class='permalink'>&nbsp;Permalink</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> <br>" + "Uploaded at: " + dateFormat(answer.data[i].uploaded) + "<br>";
	
					//Eigenschaften ende
					block.insertBefore(img, null);
					//das bild ins div schieben.
					block.insertBefore(titel, null);
					block.insertBefore(eigenschaften, null);
					//zu guter letzt die Eigenschaften
					document.getElementById('skinlist').insertBefore(block, null);
					//anschliesend den block einfuegen
					i++;
				}

				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.className = "option";
					document.getElementById('skinlist').insertBefore(block, null);
				} ;
				if (answer.data.length < 1) {
					alert("noting found matching your filter!");
				} else {
					useTexture("data:" + answer.data[0].type + ";base64," + answer.data[0].img);
				}
			}
			else {
				TINY.box.show({html:'<h1>oops :/</h1> <h2>an error happend! </h2><u><b>Errmsg:</b></u><pre>'+answer.status_msg+'</pre><br><b>you may can try it again,but if you still get this mesage than you should report the bug at the <a href="https://project.king-arthur.eu/projects/minetest-skin-db" >project page</a> or at the <a href="https://forum.minetest.net/viewtopic.php?id=4497">minetest forum thread</a>',animate:false,close:true,boxid:'error'});
			}
			
		} else {
			alert("Something is wrong: the status of http is: " + http.getResponseText());
		}

	} else {
		alert("Something is wrong: the answer of the server is " + http.status + " " + http.statusText);
	}

}

//document.addEventListener("DOMContentLoaded", function(){ getSkins(1) }, false);

/* ==========================================================================
 read the anchor
 ========================================================================== */

function anchor() {

	if (string != location.hash) {
		onAnchorChange();
		string = location.hash;
	}
	checkAnchor = setTimeout(anchor, delay);
}
document.addEventListener("DOMContentLoaded", anchor, false);

string = null;
delay = 100;
checkAnchor = null;
hashobj = {};
function hashmodified(){
	var str = decodeQuery(hashobj);
	location.hash = "#!"+str;
}
function onAnchorChange() {
	var string = location.hash;
	if (string.indexOf('#!') != -1) {
		cmd = string.split('!');
		obj = parseQuery(cmd[1]);
		console.debug(obj);
		clearList();
		var get = "";
		if (obj.page)
			get += "page=" + obj.page + "";
		if (obj.filtertype && obj.filter) {
			get += "&filtertype=" + obj.filtertype + "&filter=" + obj.filter + "";
			document.getElementById('filter').value = obj.filter;
			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;
			}
		}
		getSkins(get);

	} else {
		clearList();
		getSkins("page=1");
		document.getElementById('filter').value = '';
		document.getElementById('filtertype').selectedIndex = 0;

	}
}

function parseQuery(qstr) {
	var query = {};
	var a = qstr.split(',');
	for (var i in a) {
		var b = a[i].split(':');
		if (b[0]!='')
		query[decodeURIComponent(b[0])] = decodeURIComponent(b[1]);
	}

	return query;
}
function decodeQuery(qobj){
	var str = "";
	for (var attr in qobj) {
   	str += attr + ':' +qobj[attr]+",";
	}
	return str;
}
/* ==========================================================================
 skinlist buttons
 ========================================================================== */

function download(id) {
	window.open('/download.php?id=' + id, '_blank');
}

function permalink(id) {
	var html = "this is your permamentlink to the skin file. just copy it and share it with other people.<br>"+
	"<pre>"+ location.protocol +"//"+ location.hostname + location.pathname + "#!page:1,filtertype:Id,filter:" + id;
	TINY.box.show({html:html});
}
function report(id) {
	
	TINY.box.show({url:"reportSkin.php",post:"id="+id});
}

function submitReport(form) {
	
	TINY.box.fill("reportSkin.php",1,"id="+form.id.value+"&text="+form.text.value+"&topic="+form.topic.value);
	return false;
}
function resetReport(form) {
		TINY.box.hide();
		return false;
}
/* ==========================================================================
 toolbar functions
 ========================================================================== */

function resetView() {
	document.getElementById('3dprev').runtime.resetView();
}

function getScreenshot() {
	screenshot = document.getElementById('3dprev').runtime.getScreenshot();
	window.open(screenshot, '_blank', "width=512,height=512");
}

function dateFormat(mysqldate) {
	var date = Date.createFromMysql(mysqldate);
	console.debug(date);
	return mysqldate;
	//todo! shuld output something like "just now" or "today at 17:30" or "12.12.12"
}

function goPage(page){
	hashobj.page = page;
	hashmodified();
}

Date.createFromMysql = function(mysql_string) {
	if ( typeof mysql_string === 'string') {
		var t = mysql_string.split(/[- :]/);

		//when t[3], t[4] and t[5] are missing they defaults to zero
		return new Date(t[0], t[1] - 1, t[2], t[3] || 0, t[4] || 0, t[5] || 0);
	}

	return null;
};

/* ==========================================================================
 licenses functions
 ========================================================================== */
var Licenses = new Array();
function getLicenses(){
	xhr.request("api/get.json.php?licenses", null, gotLicenses);
}
function gotLicenses(http){
	Licenses = JSON.parse(http.responseText).licenses;
	//console.debug(Licenses);
}
function getLicenseById(id){
	for(var element in Licenses){
		if(Licenses[element].id==id)
			return Licenses[element];
	}
	return undefined; 
}
function showLicenseInfo(id){
	var license = getLicenseById(id);
	if(license.type == "url"){
		TINY.box.show({iframe:license.url,boxid:'frameless',width:900,height:600,fixed:false,maskid:'bluemask',maskopacity:40});
	}else{
		TINY.box.show({html:license.text,boxid:'frameless',width:750,height:450,fixed:false,maskid:'bluemask',maskopacity:40});
	}
}
getLicenses();