var availwidth, availheight, mybody, output;
var sorted_list = new Array();

var imgObjs = new Array(last-first);
var widths = new Array(last-first);
var heights = new Array(last-first);
var loaded = 0;

var total = last-first;
var cPercent = 0;

var barLayer = null;
var percentLayer = null;
var statLayer = null;

var IE = false;

availwidth = screen.availWidth;
availheight = screen.availHeight;


function isIE()
{
  if (/MSIE (\d+\.\d+);/.test(navigator.userAgent))
  { //test for MSIE x.x;
/*   var ieversion=new Number(RegExp.$1) // capture x.x portion and store as a number
   if (ieversion>=8)
    document.write("You're using IE8 or above")
   else if (ieversion>=7)
    document.write("You're using IE7.x")
   else if (ieversion>=6)
    document.write("You're using IE6.x")
   else if (ieversion>=5)
    document.write("You're using IE5.x")*/
    return true;
  }else{
    return false;
  }
}

function getLayer(layerID) {
  if (document.getElementById)
    return document.getElementById(layerID);
  else if (document.all)
    return document.all[layerID];
  else 
    return null;
}

function updateBar() {
  statLayer.innerHTML = "<font face=\"Arial\" color=\"#80ff80\"><B>" +loaded+ "/" +total+ "</B></font>";
  var percent = Math.round(loaded/total * 100);
  if (cPercent != percent)
  {
    cPercent = percent;
    barLayer.style.width = (cPercent*3) +"px";
    percentLayer.innerHTML = "<font color=\"#101010\"><B>" +cPercent+ "%</B></font>";
  }
  if (loaded == total)
  {
    init();
  }
}

function startLoading() {
  if (document.getElementById || document.all)
  {
    barLayer = getLayer("bar");
    percentLayer = getLayer("percent");
    statLayer = getLayer("stat");
    for (i=first; i<last; i++)
    {
      imgObjs[i-first] = new Image();
      imgObjs[i-first].onload = imgLoaded;
      imgObjs[i-first].onerror = imgFailed;
      imgObjs[i-first].src = animal_list[i][0];
    }
  }
  else
  {
    window.location.replace(url);
  }
}

function imgFailed() {
  alert("De volgende afbeelding kon niet geladen worden:\n" +this.src+ "\nDe website slaat dit bestand over.");
  loaded++;
  updateBar();
}

function imgLoaded() {
  widths[loaded] = imgObjs[loaded].width;
  heights[loaded] = imgObjs[loaded].height;
  loaded++;
  if (loaded>(last-first))
    return
  updateBar();
}

num_animals = last-first;
animals = new Array(num_animals);

xx = new Array(-5,-5,-4,-3,-2,0,2,3,4,5,5,4,3,2,0,-2,-3,-4,-5);
yy = new Array(-4,-4,-3,-2,0,0,0,-2,-3,-4,-4,-3,-2,0,0,0,-2,-3,-4);

// SPIRAL/CIRCLE
//xx = new Array;
//yy = new Array;
//for(i=0;i<32;i++)
//{
//  xx[i] = 128 * Math.cos(2*Math.PI*i/32);
//  yy[i] = 128 * Math.sin(2*Math.PI*i/32);
//}


//xx = new Array;
//yy = new Array;

// CIRCLE
//for(i=0;i<32;i++)
//{
//  xx[i] = 32 * Math.cos(2*Math.PI*i/32);
//  yy[i] = 32 * Math.sin(2*Math.PI*i/32);
//}

function show_func0()
{
}
function show_func1()
{
}
function animal(obj,x,y,species,desc,src)
{
  this.obj = obj;
  this.x = x;
  this.y = y;
  this.species = species;
  this.desc = desc;
  this.src = src;
  this.startx = x;
  this.starty = y;
  this.index = parseInt(Math.random()*19);
  this.radius = Math.random()*2;
// animals[i].func();
//this.func = show_func0;
} 

function reference_to( object, property ) {
   return function() {
      return object[property];
   }
}

function move_animals()
{
  for(i=first;i<last;i++)
  {
    animals[i-first].index++;
    if(animals[i-first].index>=xx.length)animals[i-first].index = 0;
    animals[i-first].x = animals[i-first].startx + xx[animals[i-first].index]*animals[i-first].radius;
    animals[i-first].y = animals[i-first].starty + yy[animals[i-first].index]*animals[i-first].radius;
    animals[i-first].obj.style.left = parseInt(animals[i-first].x) + "px";
    animals[i-first].obj.style.top = parseInt(animals[i-first].y) + "px";
  }
}

function get_obj_width()
{
  

}

function clear_div(id)
{
  obj = document.getElementById(id);
  obj.innerHTML = "";
//alert("clear");
}

function close_div(id)
{
  obj = document.getElementById(id);
  obj.style.visibilty = "hidden";
  obj.style.display = "none";
//alert("close");
}

function open_div(id)
{
  obj = document.getElementById(id);
  obj.style.visibilty = "visible";
  obj.style.display = "block";
}

function givefocuszoek(obj, src, title)
{
  availwidth = mybody.clientWidth;
  availheight = mybody.clientHeight;

  open_div("lijst");
  dest = document.getElementById("imgfound");
  dest.innerHTML = "";
  dest.innerHTML += "<center><img class='toshow' name='gezocht' id='zoekpict' src='" + sorted_list[obj][0] + "'>";
  dest.innerHTML += "<div style=\"position:absolute; left:0px; top:50px;\"><img src=\"./img/1by1.gif\" width=\"" + document.getElementById("lijst").clientWidth + "\" height=\"" + document.getElementById("lijst").clientHeight + "\">";
  dest.innerHTML += "<div id='tekst' class='tekst'>" + sorted_list[obj][1] + "</div>";
  dest.innerHTML += "</center>";
  dest.style.top = 0 +"px";
  dest.style.left = 0 +"px";
  dest.style.visibility = "visible";
  dest.style.display = "block";
}

function replaceHtml(el, html) {
	var oldEl = typeof el === "string" ? document.getElementById(el) : el;
	/*@cc_on // Pure innerHTML is slightly faster in IE
		oldEl.innerHTML = html;
		return oldEl;
	@*/
	var newEl = oldEl.cloneNode(false);
	newEl.innerHTML = html;
	oldEl.parentNode.replaceChild(newEl, oldEl);
	/* Since we just removed the old element from the DOM, return a reference
	to the new element, which can be used to restore variable references. */
	return newEl;
};

function givefocus(obj, src, title)
{
  availwidth = mybody.clientWidth;
  availheight = mybody.clientHeight;

  dest = document.getElementById("inthepicture");

  osnum = null;
  for(i = 0; i < dna.length; i++)
  {
    if(animal_list[obj][1] == dna[i][1])
    {
      osnum = dna[i][0];
      break;
    }
  }


	content = "<table width='100%' cellpadding='0' cellspacing='0' border='0' align='center'><tr><td align='center'><div style=\"\"><img src='" + animal_list[obj][0] + "'></div><div style=\"position:absolute; left:0px; top:0px;\"><img src=\"./img/1by1.gif\" width=\"" + widths[obj-first] + "\" height=\"" + heights[obj-first] + "\"></div></td></tr></table>";
	content += "";

	flash = '&nbsp;';
	  if(animal_list[obj][2]!="0")
	{
		flash = "<object type=\"application/x-shockwave-flash\" data=\"player7.swf\" width=\"24\" height=\"20\"><param name=\"movie\" value=\"player7.swf\" /><param name=\"FlashVars\" value=\"mp3=" + animal_list[obj][2] + "&showslider=0&width=24&showstop=0&bgcolor1=64f60d&bgcolor2=64f60d&buttoncolor=000000&buttonovercolor=ffffff\"/><param name='wmode' value='transparent'></object>";
	}

//	content += "<div style=\"width:100%; position:absolute: top:80px; \"><table width='100%' cellpadding='0' cellspacing='0' border='0'><tr><td>" + flash + "</td><td align='right' width='70%'><a href=\"http://www.ontwerpstudio.nu/shop/product_info.php?products_id="+ osnum + "&cPath=33\" target='_blank'><img src='./img/winkelwagen.gif' border='0'></a></td></tr></table></div>";

//	content += "<tr><td align='center'><div id='tekst' style=' white-space: nowrap;'>" + animal_list[obj][1];
//  content += "</div></td></tr></table>";
	content += "<div id='tekst' style=' white-space: nowrap; position: absolute; top:" + heights[obj-first]*.75 + "px; left:0px;' class='tekst'><table width='80%' cellpadding='0' cellspacing='0' border='0'><tr><td>" + flash + "</td><td></td><td class='tekst' style=' white-space: nowrap;'>&nbsp;" + animal_list[obj][1] + "</td></tr></table></div>";

  if(IE)
  {
    replaceHtml("inthepicture",content);
  }else{
    dest.innerHTML = content;
  }

  dest.style.top = Math.random()*(availheight - heights[obj-first]-50) +"px";
  dest.style.left = Math.random()*(availwidth - widths[obj-first]) +"px";
  dest.style.visibility = "visible";
  dest.style.display = "block";
}

function closefocus()
{
  dest = document.getElementById("inthepicture");
  dest.innerHTML = "";
}

function setpos(name)
{
  obj = document.getElementById(name);
  obj.style.left = 100 + Math.random() * 600 + "px";
  obj.style.top = 70 + Math.random() * 400 + "px";
}

function show_counter()
{
  p = document.getElementById("counter");
  p.innerHTML = output;
  p.style.top = 110 + "px";
  p.style.left = availwidth - infoimg.width + "px";
  p.style.visibility = "visible";
}

function show_props(obj)
{
  var str = "";

  for(prop in obj)
  {
    str += prop + " value: " +obj[prop]+"<br>";
  }
  o = document.getElementById("props");
  o.innerHTML = str;
}

function show_nav()
{
if(first>0)
{
  p = document.getElementById("navright");
  p.style.top = availheight - document.navright.height + "px";
  p.style.left = availwidth - document.navright.width + "px";
  p.style.visibility = "visible";
}
if(last<animal_list.length)
{
  p = document.getElementById("navleft");
  p.style.top = availheight - document.navleft.height + "px";
  p.style.left = 0 + "px";
  p.style.visibility = "visible";
}
  p = document.getElementById("pagenav");
  p.style.left = (availwidth - p.offsetWidth)/2 + "px";
  p.style.top = availheight - 50 + "px";
//  p.style.top = availheight - p.scrollHeight + "px";

  p.style.visibility = "visible";
//show_props(p);
}

function show_selected(name)
{
  el = document.zoekform.elements[name].selectedIndex;
//clearInterval(pauseInterval);
  givefocuszoek(el);
}

function show_lijst()
{
  o = document.getElementById("lijst");
  o.style.top = 10 + "px";
  if(o.offsetWidth>0)
  {
    o.style.left = (availwidth - o.offsetWidth)/2 + "px";
  }
  else
  {
    o.style.left = (availwidth - 400)/2 + "px";
  }
  o.style.visibility = "visible";
  o.style.display = "block";
//alert(availwidth + ", " + o.offsetWidth + ", " + o.style.left);
}

function show_zoek()
{
  o = document.getElementById("zoek");
  o.style.top = 132 + "px";
  o.style.left = availwidth - infoimg.width + "px";
  o.style.visibility = "visible";
}

function show_dierenshop()
{
  o = document.getElementById("dierenshop");
//  o.style.top = 158 + "px";
  o.style.top = 132 + "px";
  o.style.left = availwidth - infoimg.width + "px";
  o.style.visibility = "visible";
}

function drawpics()
{
  if(mybody)
  {
//    mybody = document.getElementById("body");
    availwidth = mybody.clientWidth;
    availheight = mybody.clientHeight;

    for(i=first;i<last;i++)
    {
//      animals[i-first] = new animal(document.getElementById("an00" + eval(i+1)), Math.random()*(availwidth-100), Math.random()*(availheight-75), animal_list[i][1] , "kuus " + eval(i), animal_list[i][0]);
      animals[i-first] = new animal(document.getElementById("an00" + eval(i+1)), Math.random()*(availwidth-100), Math.random()*(availheight-75), animal_list[i][1] , "kuus " + eval(i), animal_list[i][0],i);

      with(animals[i-first])
      {
        obj.style.left = animals[i-first].x;
        obj.style.top = animals[i-first].y;
      }
    }
//    show_klik();
    show_info();
    show_doemee();
    show_counter();
    show_nav();
    show_zoek();
//    show_dierenshop();
  }
}

function checkform(form) {
  var f = document.forms['form'];
    for (var x=0; form.elements[x]; x++ ) {
        if (form.elements[x].value == ""){
            if(form.elements[x].id != "nocheck" ) {
              alert( "Vergeten het '" + form.elements[x].name + "' veld in te vullen?" );
              form.elements[x].focus();
            return false ;
            }
        }
    }
}

function show_klik()
{
  availwidth = document.getElementById("body").clientWidth;
  availheight = document.getElementById("body").clientHeight;

  o = document.getElementById("klik");
  o.innerHTML = "<img name='klik' src='./img/klik.png'>";
  o.style.width = infoklik.width + "px";
  o.style.height = infoklik.height + "px";
  o.style.top = 0 + "px";
  o.style.left = availwidth - infoklik.width + "px";
  o.style.zIndex = 10;
  o.style.visibility = "visible";
}

function show_doemee()
{
  availwidth = document.getElementById("body").clientWidth;
  availheight = document.getElementById("body").clientHeight;

  o = document.getElementById("doemeebutton");
  o.innerHTML = "<div onclick=\"Test.click('doemee','doemee.xml');\" onmouseover=\"document.doemeeimg.src='./img/doemeehover.png'\" onmouseout=\"document.doemeeimg.src='./img/doemee.png'\"><img name='doemeeimg' src='./img/doemee.png'></div>";
  o.style.width = infoimg.width + "px";
  o.style.height = infoimg.height + "px";
  o.style.top = 0 + "px";
  o.style.left = availwidth - infoimg.width + "px";
  o.style.zIndex = 10;
  o.style.visibility = "visible";
}

function show_voegtoe()
{
  availwidth = document.getElementById("body").clientWidth;
  availheight = document.getElementById("body").clientHeight;

  o = document.getElementById("doemee");
  o.style.left = 150 + "px";
  o.style.top = 150 + "px";
  o.style.width = (availwidth - 300) + "px";
  o.style.height = (availheight - 300) + "px";
  o.innerHTML = doemee;
}

function show_info()
{
  availwidth = document.getElementById("body").clientWidth;
  availheight = document.getElementById("body").clientHeight;

  o = document.getElementById("storybutton");
//  o.innerHTML = "<div onclick=\"show_story();\" onmouseover=\"document.info.src='./img/infohover.png'\" onmouseout=\"document.info.src='./img/info.png'\"><img name='info' src='./img/info.png'></div>";
//  o.innerHTML = "<div onclick=\"javascript:Test.click();\" onmouseover=\"document.info.src='./img/infohover.png'\" onmouseout=\"document.info.src='./img/info.png'\"><img name='info' src='./img/info.png'></div>";
  o.style.width = infoimg.width + "px";
  o.style.height = infoimg.height + "px";
//  o.style.top = 223 + "px";
//  o.style.top = 197 + "px";
  o.style.top = 132 + "px";
  o.style.left = availwidth - infoimg.width + "px";
  o.style.zIndex = 10;
  o.style.visibility = "visible";
}

function show_story()
{
  availwidth = document.getElementById("body").clientWidth;
  availheight = document.getElementById("body").clientHeight;

  o = document.getElementById("story");
  o.style.left = 50 + "px";
  o.style.top = 50 + "px";
  o.style.width = (availwidth - 100) + "px";
  o.style.height = (availheight - 100) + "px";
  o.innerHTML = story;
}

function init()
{
  IE = isIE();

  o = document.getElementById("preloader");
  o.innerHTML = "";
  o.style.width = "0px";
  o.style.height = "0px";

  mybody = document.getElementById("body");

  for(i=first;i<last;i++)
  {
/*    allimages += "<div class=\"animal\" id=\"an00" + eval(i+1) + "\" onmouseover=\"givefocus(" + eval(i) + ",'" + animal_list[i][0] + "','" + animal_list[i][1] + "');\"><table><tr><td background='" + animal_list[i][0] + "'><img src=\"./img/1by1.gif\" width=\"50\"></td></tr></table></div>";*/
    allimages += "<div class=\"animal\" id=\"an00" + eval(i+1) + "\" onmouseover=\"givefocus(" + eval(i) + ",'" + animal_list[i][0] + "','" + animal_list[i][1] + "');\"><div style=\"position:absolute; left:0px; top:0px;\"><img src='" + animal_list[i][0] + "'width=\"50\"></div><div style=\"position:absolute; left:0px; top:0px;\"><img src=\"./img/1by1.gif\" width=\"50\" height=\"" + heights[i-first]*50/widths[i-first] + "\"></div></div>";
  }

//alert (document.images[1].clientHeight);
  o = document.getElementById("allimages");
  o.innerHTML = allimages;

//  o = document.getElementById("inhoud");
//  o.innerHTML = mycontent;

  drawpics();
  document.zoekform.elements["zoekveld"].selectedIndex = 0;

  pauseInterval = setInterval("move_animals()",90);
}

infoimg = new Image();
infoimg.src = "./img/info.png";
infoklik = new Image();
infoklik.src = "./img/klik.png";
closesign = new Image();
closesign.src = "./img/close.png";
navright = new Image();
navright.src = "./img/arrowright.png";
navleft = new Image();
navleft.src = "./img/arrowleft.png";

window.onload = startLoading;
window.onresize = drawpics;