var bilder = [];
var jetzt = new Date();
var auslaufen = 0;       // Wird auf 1 gesetzt, sobald der Benutzer auf die Eule geklickt hat.
var iw;

window.onload = function(){iw = setInterval(check_to_move, 100);}
window.onunload = function(){ window.clearInterval(iw);}


bilder[0] = {  "dateiname": "linde_transp_9s_439x437.gif",      
               "breite": 439,  
	       			 "hoehe": 437,  
               "dauer": 9,   
               "dargestellt":true, 
               "position_von_oben": 100, 
               "position_von_links":0, 
	       			 "ablaufzeit": jetzt.getTime()+12000,
	       			 "bildtyp": "baum"
};

bilder[1] = {  "dateiname": "pine-tree-transp_6s_293x431.gif",  "breite": 293,  "hoehe": 431,  "dauer": 7,   "dargestellt":true, "position_von_oben": 0, "position_von_links":0, "ablaufzeit": jetzt.getTime()+10000, "bildtyp": "baum"};
bilder[2] = {  "dateiname": "reh_transp_2komma5s_200x125.gif",        "breite": 200,  "hoehe": 125,  "dauer": 4, "dargestellt":true, "position_von_oben": 100, "position_von_links":766, "ablaufzeit": jetzt.getTime()+7200, "bildtyp": "bodentier"};
// Das Reh mšchte ich ganz vorne haben : z-Achse betrachten!
bilder[3] = {  "dateiname": "eule_transp_3komma3s_31x61.gif", "breite": 31,  "hoehe": 61,  "dauer": 4, "dargestellt":true, "position_von_oben": 10, "position_von_links": 700, "ablaufzeit": jetzt.getTime()+9000, "bildtyp": "vogel"};
bilder[4] = {  "dateiname": "pinie_transp_4komma5s_513x351.gif", "breite": 513,  "hoehe": 351,  "dauer": 5.5,  "dargestellt":true, "position_von_oben": 0, "position_von_links": 0, "ablaufzeit": jetzt.getTime()+5000, "bildtyp": "baum"};
bilder[5] = {  "dateiname": "Frost-Shrub-on-Misty-Day_transp_6komma5s_226x231.gif", "breite": 226,  "hoehe": 231,  "dauer": 7,  "dargestellt":true, "position_von_oben": 0, "position_von_links": 0, "ablaufzeit": jetzt.getTime()+6000, "bildtyp": "baum"};
bilder[6] = {  "dateiname": "kirschbaum_transp_4komma2s_577x404.gif", "breite": 577,  "hoehe": 404,  "dauer": 5,  "dargestellt":true, "position_von_oben": 0, "position_von_links": 0, "ablaufzeit": jetzt.getTime()+6000, "bildtyp": "baum"};
bilder[7] = {  "dateiname": "fuchs_transp_4s_76x62.gif", "breite": 76,  "hoehe": 62,  "dauer": 4,  "dargestellt":true, "position_von_oben": 0, "position_von_links": 0, "ablaufzeit": jetzt.getTime()+7000, "bildtyp": "baum"};

//Preload Images!

var dargestellte_bilder = [];
var nicht_dargestellte_bilder = [];

function check_to_move(){
  dargestellte_bilder = [];
  nicht_dargestellte_bilder = [];  

  for (var i = 0; i < bilder.length; i++){ // Feststellen, welche Bilder ÇabgelaufenÈ sind ... entsprechende Arrays Šndern.
    jetzt = new Date();
    if (bilder[i].dargestellt == true){
      if (bilder[i].ablaufzeit < jetzt){ // Bild ist abgelaufen, wird aber noch dargestellt: Ersatz durch leer.gif
				document.getElementById(i).src = "pics/leer.gif";
				bilder[i].dargestellt = false;
				nicht_dargestellte_bilder.push(i);
      }
      else {dargestellte_bilder.push(i);}
    }
    else {nicht_dargestellte_bilder.push(i);}
  }

	if (auslaufen == 1){ // Alle Bilder ausblenden lassen und dann das Intervall lšschen.
		if(dargestellte_bilder.length == 0){
			window.clearInterval(iw);
			make_door_appear(); // Dann die Tor-Animation starten.
			return;
		}
		else {return};
	}

 aussen:
  for (var i = 0; i < nicht_dargestellte_bilder.length; i++){ 
    if (Math.random() < 0.05){
      // Mšgliche Position des neu darzustellenden Bildes
      dims = getWindowDims();
	  	//document.getElementById('t').value = dims.X + " " + dims.Y;
      position_von_oben  = parseInt(Math.random()*(dims.Y-bilder[nicht_dargestellte_bilder[i]].hoehe));
      if (bilder[nicht_dargestellte_bilder[i]].bildtyp == "baum"){
				position_von_oben  = parseInt(Math.random()*50)+dims.Y-150-bilder[nicht_dargestellte_bilder[i]].hoehe; // Von unten ca. 150 Pixel Abstand
      }
      if (bilder[nicht_dargestellte_bilder[i]].bildtyp == "bodentier"){
				position_von_oben  = parseInt(Math.random()*50)+dims.Y-100-bilder[nicht_dargestellte_bilder[i]].hoehe; // Von unten ca. 100 Pixel Abstand
      }
      position_von_links = parseInt(Math.random()*(dims.X-bilder[nicht_dargestellte_bilder[i]].breite));

      jetzt = new Date();
      bilder[nicht_dargestellte_bilder[i]].dargestellt = true;
      bilder[nicht_dargestellte_bilder[i]].position_von_oben = position_von_oben;
      bilder[nicht_dargestellte_bilder[i]].position_von_links = position_von_links;
      bilder[nicht_dargestellte_bilder[i]].ablaufzeit = jetzt.getTime()+bilder[nicht_dargestellte_bilder[i]].dauer*1000;
      dargestellte_bilder.push(nicht_dargestellte_bilder[i]);
      window.document.getElementById("div"+nicht_dargestellte_bilder[i]).style.top=position_von_oben;
      window.document.getElementById("div"+nicht_dargestellte_bilder[i]).style.left=position_von_links;
      document.getElementById(nicht_dargestellte_bilder[i]).src = "pics/"+bilder[nicht_dargestellte_bilder[i]].dateiname;
    }
  }
}
// Neues Konzept: Es gibt X Bilder in einem Objekt/Array einerseits mit Bildspezifischen Angaben (Breite/Hšhe/Dateiname/Dauer), andererseits auch Felder fŸr den Status der Darstellung (ist_dargestellt/position/ablaufzeit).
// Check_to_move geht nun jeweils durch die Bilder und schaut, was zu tun gibt:Ist das Bild noch dargestellt und nicht abgelaufen: nichts machen; ist das Bild noch dargestellt und schon abgelaufen: entsprechend markieren; ist das Bild nicht dargestellt und abgelaufen: neue Position suchen, Kollision berechnen, wenn problemlos: darstellen und Status Šndern, wenn Kollision, dann zum nŠchsten Bild weitergehen.
// Auf diese Weise gibt es keine mšglichkeit mehr, dass das gleiche Bild mehr als einmal dargestellt wird, was zu den erfahrenen Problemen gefŸhrt hat.
// Damit es aber vorkommen kann, dass das ÇgleicheÈ Bild mehrfach gleichzeitig dargestellt werden kann, muss es unter verschiedenen Namen mehrfach vorhanden sein.

function make_door_appear(){
	document.getElementById("i8").style.visibility = 'visible';
	document.getElementById("i8").style.display = 'block';
	document.getElementById("strich").style.visibility = 'visible';
	document.getElementById("strich").style.display = 'block';
	document.getElementById("formular").style.visibility = 'visible';
	document.getElementById("formular").style.display = 'block';

	dims = getWindowDims();
	animateCSS(document.getElementById("i8"), 80, 25,
		{
			bottom:function(f,t) {return parseInt(195)+ "px"; },
			left:  function(f,t) {return parseInt(f*6-290) + "px";},
			width: function(f,t) {return parseInt(150) + "px";}
		});

	animateCSS(document.getElementById("formular"), 80, 25,
		{
			left:  function(f,t) {return parseInt(f*6-150) + "px";},
		}, focus_on_code);
}

function focus_on_code(){
	document.getElementById("code").focus();
}

function TDim(pX, pY)
{
  this.X = pX;
  this.Y = pY;
}

function getWindowDims()
{
  var dims = new TDim(0, 0);
  if (self.innerHeight) // all except Explorer
  {
	  dims.X = self.innerWidth;
  	dims.Y = self.innerHeight;
  }
  else if (document.documentElement && document.documentElement.clientHeight)
	  // Explorer 6 Strict Mode
  {
	  dims.X = document.documentElement.clientWidth;
  	dims.Y = document.documentElement.clientHeight;
  }
  else if (document.body) // other Explorers
  {
    dims.X = document.body.clientWidth;
    dims.Y = document.body.clientHeight;
  }
  return dims;
}