var  maxImages = 15;
var images = new Array();
var imagesz = new Array();

function init(){
	unhide('enter');
	hide('mailto');

	preloadFrames();
	preloadBackgrounds();
}

function sendMail(url){
	var xhCon = new XHConn();
	var email = escape(document.forms[0].email.value);
	var message = escape(document.forms[0].message.value);
	if(!xhCon){
		alert("XMLHTTP is not working");
	}
	var fnWhenDone = function(oXML){
		var str = oXML.responseText;
		Sending(str); //alert(oXML.responseText);
	}
	xhCon.connect(url, "POST", 'email='+email+'&message='+message, fnWhenDone);
}

function Sending(str){
	hide("sendbutton");
	unhide("status");
	var b = Id("status");
	b.innerHTML = "" // '<div style="width: 100px; height: 25px; bgcolor: #fff;></div>';
	statusBar(1);
	// alert(str);
}

function statusBar(i){
	var b = Id("status");
	i = parseInt(i);
	if(i < 330){
		i += 5;
		b.style.width = i+"px";
		var p = parseInt(i/3.3);
		b.innerHTML = "sending mail: "+p+"%";
		t = setTimeout("statusBar('"+i+"')", 40);
	}
	else{
		b.innerHTML = "sending mail: DONE"
		t = setTimeout("enter()", 1000);
	}
}

function Mailform(){
	var mform = Id("Mailform");
	Id('status').style.width = "0px";
	hide('mailto');
	hide('Leave');
	hide('aboutTo');
	unhide('sendbutton');
	unhide('enter');
	pushCard(0, 'Mailform');
}

function aboutTo(){
	hide('aboutTo');
	hide('mailto');
	hide('Leave');
	unhide('enter');
	pushCard(0, 'about');
}		

function timedResize(id, timeout, dir){
	var box = document.getElementById(id);
	var height = parseFloat(box.style.height);
	if(height > initHeight){
		box.style.height = (height + parseInt(dir))+"px";
		setTimeout("timedResize('"+id+"', '"+ timeout + "', '"+dir + "')", timeout);
	}
	else{
		box.style.height = initHeight+"px";
	}
}


function getOffset(e){
	var x = 0;
	var y = 0;
	var xp = 0;
	var yp = 0;
	var p = e.offsetParent;
	
	while(p){
		yp += p.offsetTop;
		xp += p.offsetLeft;
		p = p.offsetParent;
		
	}
	
	while(e){
		x += e.offsetLeft;
		e = e.offsetParent;
	}
	
	x = x - xp;
	y = yp - yp;
	return Array(x, y);
}

var shift;

function printDebug(str){
	// c = document.getElementById("debug");
	// c.innerHTML = str;
}

function preloadFrames(){
	for(var i=0; i<maxImages; i++){
		images[i] = new Image();
		images[i].src = './frames/frame'+(i+1)+'.jpg';
	}
	for(var i=0; i<maxImages; i++){
		imagesz[i] = new Image();
		imagesz[i].src = './frames/frame'+(i+1)+'z.jpg';
	}
}

var backgrounds = new Array();

function preloadBackgrounds(){
	backgrounds['enter'] = new Image();
	backgrounds['Leave'] = new Image();
	backgrounds['Mailform'] = new Image();
	backgrounds['about'] = new Image();
	backgrounds['aboutWat'] = new Image();
	backgrounds['aboutHoe'] = new Image();
	backgrounds['aboutWie'] = new Image();
 
	backgrounds['enter'].src = './frames/Enter.jpg';
	backgrounds['Leave'].src = './frames/Leave.jpg';
	backgrounds['Mailform'].src = './frames/Mailform.jpg';
	backgrounds['about'].src = './frames/aboutWie.jpg';
	backgrounds['aboutWie'].src = './frames/aboutWie.jpg';
	backgrounds['aboutWat'].src = './frames/aboutWat.jpg';
	backgrounds['aboutHoe'].src = './frames/aboutHoe.jpg';

}



var d = 1;
var t;

function Id(id){
	return document.getElementById(id);
}

function turnCard(i){
	clearTimeout(t);
	pic = document.getElementById("aCard");
	pic.src = images[i].src;
	i += 2;
	printDebug(i);
	if(i < maxImages){
		t = setTimeout('turnCard('+i+')', 100);
	}
	else pic.src ="./frames/letzteframe.png";
}

function pushCard(i, id){
	clearTimeout(t);
	var c = Id("Card");

	if(i < images.length){
		var img = images[i].src;
		c.style.background = "#fff url('"+img+"')";
		i++;
		printDebug(img);
		t = setTimeout('pushCard('+i+', "'+id+'")', 30); // 10+Math.abs(vdelay-i));
	}
	else{
		printDebug(backgrounds[id]);
		c.style.background = "#fff url('"+backgrounds[id].src+"')";
		images.reverse();
		unhide(id);
	}
	
}

function setCardBg(id){
	var c = Id("Card");
	c.style.background = "#fff url('"+backgrounds[id].src+"')";
}

function unhide(id){
	var e = Id(id);
	e.style.visibility = "visible";
}

function hide(id){
	var e = Id(id);
	e.style.visibility = "hidden";
}

function enter(e){
	e = Id("enter");
	hide("status");
	hide("Mailform");
	hide("sendbutton");
	e.style.visibility = "hidden";
	e = Id("Leave");
	pushCard(0, 'Leave');
	unhide("mailto");
	unhide("aboutTo");
}

function leave(e){
	var id;
	if(e){
		if(e.target) e = e.target;
		else if(e.srcElement) e=  e.srcElement;
	}
	hide("mailto");
	hide("aboutTo");
	// hide element.
	e.style.visibility = "hidden";
	e = Id("enter");
	pushCard(0, 'enter');
}

function aboutWhat(e){
	if(e){
		if(e.target) e = e.target;
		else if(e.srcElement) e=  e.srcElement;
	}
	setCardBg(e.id);
}

function XHConn()
{
  var xmlhttp, bComplete = false;
  try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }
  catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
  catch (e) { try { xmlhttp = new XMLHttpRequest(); }
  catch (e) { xmlhttp = false; }}}
  if (!xmlhttp) return null;
  this.connect = function(sURL, sMethod, sVars, fnDone)
  {
    if (!xmlhttp) return false;
    bComplete = false;
    sMethod = sMethod.toUpperCase();

    try {
      if (sMethod == "GET")
      {
        xmlhttp.open(sMethod, sURL+"?"+sVars, true);
        sVars = "";
      }
      else
      {
        xmlhttp.open(sMethod, sURL, true);
        xmlhttp.setRequestHeader("Method", "POST "+sURL+" HTTP/1.1");
        xmlhttp.setRequestHeader("Content-Type",
          "application/x-www-form-urlencoded");
      }
      xmlhttp.onreadystatechange = function(){
        if (xmlhttp.readyState == 4 && !bComplete)
        {
          bComplete = true;
          fnDone(xmlhttp);
        }};
      xmlhttp.send(sVars);
    }
    catch(z) { return false; }
    return true;
  };
  return this;
}



	

/*
maxShift = 150;
var delay = 250


function shiftLayer(dir, s){
	s += dir*2;
	printDebug(s);
	if(Math.abs(s) >= maxShift || s < 25){
		 dir = -dir;
		 // shift = shift-maxShift;
	}
	var obj = document.getElementById("topShift");
	var pos = getOffset(obj);
	x = pos[0];
	x += dir;

	obj.style.left = x + "px";	
	setTimeout("shiftLayer("+dir+", "+s+")", delay);
}
*/