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//stoping browswer todo something
}
function uploaded(http){
	if(http.status == 200){
	
		if(JSON.parse(http.responseText)){
		var answer = JSON.parse(http.responseText)
			if(answer.success){
			alert("uploaded successfull");
			}
			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("tFEHLER!nn Die Datei "+f.name+" kann nicht als Bild geöffnet werden!");
        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');
          eigenschaften.innerHTML = "Author: <input type='text' placeholder='enter the name of the Author' name='author' required> <br>"+
		  "License: <input type='text' placeholder='enter the license under that you would share this' name='license' required><br>"+
		  "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){

	xhr.request("getskins.php",page,gotSkins);
}


function gotSkins(http){
	if(http.status == 200){
	
		if(JSON.parse(http.responseText)){
		var answer = JSON.parse(http.responseText)
		var i = 0;	
			while(answer[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[i].type+";base64,"+answer[i].img  ; //das ist die data: url fuer die vorschau
          img.title =  answer[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[i].name+"'>"+answer[i].name+"</a><br>";
          //titel Ende
          var eigenschaften = document.createElement('span');
          eigenschaften.innerHTML = "Author: <a href='#!page:1,filtertype:Author,filter:"+answer[i].author+"'>"+answer[i].author+"</a> <br>"+
		  "License: <a href='#!page:1,filtertype:License,filter:"+answer[i].license+"'>"+answer[i].license+"</a> <br>"+
		  "Uploaded at: "+dateFormat(answer[i].uploaded)+"<br>"+
		  "<button onclick='download("+answer[i].id+")' class='download'>&nbsp;Download</button> <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.length < 1){
			alert("noting found matching you filter!")
		}
		else{
			useTexture("data:"+answer[0].type+";base64,"+answer[0].img);
		}	
		}
		
		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);
}
string = null;
delay = 100;
checkAnchor = null;//setTimeout(anchor, delay);
document.addEventListener("DOMContentLoaded", anchor, false);
function onAnchorChange(){
     var string = location.hash;
     if(string.indexOf('#!searchAuthor:') != -1){
          cmd = string.split(':');
          clearList();
          getSkins("page=1&search=Author&Author="+cmd[1]);
          document.getElementById('filter').value = cmd[1];

          document.getElementById('filtertype').selectedIndex = 1;
          //alert("the feature 'find more from Author'("+cmd[1]+") comming soon!")
          
     }
     else 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(':');
    query[decodeURIComponent(b[0])] = decodeURIComponent(b[1]);
  }

  return query;
}


  /* ==========================================================================
   download
   ========================================================================== */
  
function download(id){
	window.open('/download.php?id='+id,'_blank')
	//alert("the function 'download button' comming soon! use rightclick and 'save image' instead");
}


  /* ==========================================================================
   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"
}

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;   
}