function initOverlay(nr){
	getFormVal();
	var oh = document.getElementById("overlay").offsetHeight;
	if (oh<10){
		oh=600;
	}
	var mt = (oh - 500)/2;
	mt=50;
	
	h = (document.body.offsetHeight+100)*2;
	
	document.getElementById("ecard").innerHTML='<div class="ecard" style="margin-top:'+mt+'px"><div id="motiv"></div><div id="toolbar"></div></div>';
	document.getElementById("overlay").style.height=h+'px';
	setMotiv(nr);
	initToolbar1();	
}

function getFormVal(){
	if(document.forms['ecard']){
		nachricht = document.forms['ecard'].elements['nachricht'].value;
		email_an = document.forms['ecard'].elements['email_an'].value;
		email_von = document.forms['ecard'].elements['email_von'].value;
		name_an = document.forms['ecard'].elements['name_an'].value;
		name_von = document.forms['ecard'].elements['name_von'].value;		
	}

	if(!nachricht)nachricht = '';
	if(!email_an)email_an = '';
	if(!email_von)email_von = '';
	if(!name_an)name_an = '';
	if(!name_von)name_von = '';
}

function setMotiv(nr){	
	cur_motiv = nr;
	var schliessen = '<a href="?action=0" class="schliessen_motiv" alt="Schließen" title="Schließen"></a>';
	document.getElementById("motiv").innerHTML = '<img src="'+eval("motiv_"+nr)+'" width="630" height="435" />'+schliessen;
}
function initToolbar1(){
	var titel = '<h2>Bitte wählen Sie ein Motiv für Ihre E-Card!</h2>';
	var zurueck = '<a onclick="javascript:zurueck();" class="zurueck"><img src="fileadmin/images/ecard_zurueck.jpg" /></a>';
	var vor = '<a onclick="javascript:vor();" class="vor"><img src="fileadmin/images/ecard_vor.jpg" /></a>';
	var weiter = '<a onclick="javascript:initForm();" class="weiter">Weiter</a>';
	document.getElementById("toolbar").innerHTML = titel+zurueck+vor+weiter;
}
function zurueck(){
	if(cur_motiv!=0){
		var new_motiv = cur_motiv-1;
	}else{
		var new_motiv = anz_motive;
	}	
	setMotiv(new_motiv);
}
function vor(){
	if(cur_motiv!=anz_motive){
		var new_motiv = cur_motiv+1;
	}else{
		var new_motiv = 0;
	}	
	setMotiv(new_motiv);	
}

function initForm(){
	var bild = eval("motiv_"+cur_motiv);
	var form ='<form method="post" name="ecard" action="?action=send">';
	var logo = '<img src="fileadmin/images/logo184.gif" class="logo" />';
	var marke = '<div class="marke"><img src="'+bild+'" /></div>';
	var stempel = '<div class="stempel"></div>';
	var tf_nachricht = '<label for="nachricht">Ihre Nachricht</label><textarea class="txt_area" cols="35" rows="5" name="nachricht" id="ec_nachricht">'+nachricht+'</textarea>';
	var ipt_name_von = '<label for="name_von">Ihr Name</label><input class="ipt_ecard" type="text" name="name_von" id="ec_name_von" value="'+name_von+'" />';
	var ipt_mail_von = '<label for="email_von">Ihre E-Mail Adresse</label><input class="ipt_ecard" type="text" name="email_von" id="ec_email_von" value="'+email_von+'" />';
	var ipt_name_an = '<label for="name_an">Name des Empfängers</label><input class="ipt_ecard" type="text" name="name_an" id="ec_name_an" value="'+name_an+'" />';
	var ipt_mail_an = '<label for="email_an">E-Mail Adresse des Empfängers</label><input class="ipt_ecard" type="text" name="email_an" id="ec_email_an" value="'+email_an+'" />';
	var ipt_motiv = '<input type="hidden" value ="" name="motiv" class="hidden" />';
	var bemerkung = '<span class="bemerkung">Die Daten werden nur für den Versand dieser E-Card verwendet und nicht an Dritte weitergegeben.</span>';
	var schliessen = '<a href="?action=0" class="schliessen" alt="Schließen" title="Schließen"></a>';
	document.getElementById("motiv").innerHTML = form+'<div class="ecard_links">'+logo+tf_nachricht+'</div><div class="ecard_rechts">'+schliessen+marke+stempel+ipt_name_von+ipt_mail_von+'<div class="abstand"></div>'+ipt_name_an+ipt_mail_an+ipt_motiv+'<p id="fehler"></p>'+bemerkung+'</div></form>';
	initToolbar2();
}
function initToolbar2(){
	var sendenB = '<a onclick="javascript:sendEcard();" class="weiter">Senden</a>';
	var vorschauB = '<a onclick="javascript:initVorschau();" class="weiter">Vorschau</a>';
	var weiterB = '<a onclick="javascript:initOverlay('+cur_motiv+');" class="weiter">Zurück</a>';
	var titel = '<h2 class="step2">Bitte füllen Sie alle Textfelder aus!</h2>';
	document.getElementById("toolbar").innerHTML = titel+weiterB+vorschauB+sendenB;
} 

function initVorschau(){
	if(checkComplete()==1)
	{
		getFormVal();
		var bild = eval("motiv_"+cur_motiv);
		var logo = '<img src="fileadmin/images/logo184.gif" class="logo" />';
		var schliessen = '<a href="?action=0" class="schliessen" alt="Schließen" title="Schließen"></a>';
		var marke = '<div class="marke"><img src="'+bild+'" /></div>';
		var stempel = '<a href ="spenden.html" target="_blank" class="stempel" alt="Spenden" title="Spenden" ></a>';
		var temp_nachricht = nachricht.replace(/\n/g,'<br />');
		var show_nachricht = '<div class="nachricht">'+temp_nachricht+'</div>';
		var absender = '<div class="absender"><p>Diese Malteser E-Card ist von:</p><p><span>'+name_von+'</span> <br /> '+email_von+'</p></div>';		
		
		var tf_nachricht = '<label for="nachricht">Ihre Nachricht</label><textarea class="txt_area" cols="35" rows="5" name="nachricht" id="ec_nachricht">'+nachricht+'</textarea>';
		var ipt_name_von = '<label for="name_von">Ihr Name</label><input class="ipt_ecard" type="text" name="name_von" id="ec_name_von" value="'+name_von+'" />';
		var ipt_mail_von = '<label for="email_von">Ihre E-Mail Adresse</label><input class="ipt_ecard" type="text" name="email_von" id="ec_email_von" value="'+email_von+'" />';
		var ipt_name_an = '<label for="name_an">Name des Empfängers</label><input class="ipt_ecard" type="text" name="name_an" id="ec_name_an" value="'+name_an+'" />';
		var ipt_mail_an = '<label for="email_an">E-Mail Adresse des Empfängers</label><input class="ipt_ecard" type="text" name="email_an" id="ec_email_an" value="'+email_an+'" />';
		var ipt_motiv = '<input type="hidden" value ="" name="motiv" class="hidden" />';
		var formular = '<form style="visibility:hidden;" method="post" name="ecard" action="?action=send">'+ipt_motiv+ipt_mail_an+ipt_name_an+tf_nachricht+ipt_name_von+ipt_mail_von+'</form>';
		/*var buttonC = '<a href="?action=create" class="weiter create">Eigene E-Card erstellen und versenden!</a>';*/
		document.getElementById("motiv").innerHTML = '<div class="ecard_links area" onclick="javascript:initShow();">'+logo+show_nachricht+'</div><div class="ecard_rechts area" onclick="javascript:initShow();">'+schliessen+marke+stempel+absender+'</div>'+formular;
		initToolbar3();
	}
}

function initToolbar3(){
	var weiterB = '<a onclick="javascript:initForm();" class="weiter">Ändern</a>';
	var sendenB = '<a onclick="javascript:sendEcard();" class="weiter">Senden</a>';
	var titel = '<h2 class="step2 vorschau">Bitte prüfen Sie Ihre Eingaben!</h2>';
	document.getElementById("toolbar").innerHTML = titel+weiterB+sendenB;
}


function sendEcard (){
	if(checkComplete()==true)
	{
		document.ecard.submit();
	}
}
function checkComplete(){
	var fehler =0;
	
	var nachricht = document.getElementById("ec_nachricht");
	if(nachricht.value.length<1){
		fehler=1;
		nachricht.style.borderColor="#c10005";
	}else{
		nachricht.style.borderColor="#928F7C";
	}
	
	var name_von = document.getElementById("ec_name_von");
	if(name_von.value.length<1){
		fehler=2;
		name_von.style.borderColor="#c10005";
	}else{
		name_von.style.borderColor="#928F7C";
	}
	
	var email_von = document.getElementById("ec_email_von");
	if(email_von.value.length<1){
		fehler=3;
		email_von.style.borderColor="#c10005";
	}else{
		email_von.style.borderColor="#928F7C";
	}
	
	var name_an = document.getElementById("ec_name_an");
	if(name_an.value.length<1){
		fehler=4;
		name_an.style.borderColor="#c10005";
	}else{
		name_an.style.borderColor="#928F7C";
	}
	
	var email_an = document.getElementById("ec_email_an");
	if(email_an.value.length<1){
		fehler=5;
		email_an.style.borderColor="#c10005";
	}else{
		email_an.style.borderColor="#928F7C";
	}
	

	if(fehler==0){
		if(document.getElementById("fehler"))document.getElementById("fehler").innerHTML = '';
		document.forms['ecard'].elements['motiv'].value = eval("motivid_"+cur_motiv);
		return true;
	}	else{
		document.getElementById("fehler").innerHTML = 'Bitte alle Felder ausfüllen!';
		return false;
	}
}
var iv;
function initShow(){
	var mt = (document.getElementById("overlay").offsetHeight - 500)/2;
	mt=50;
	
	h = (document.body.offsetHeight+100)*2;
	document.getElementById("overlay").style.height=h+'px';

	var div_ecard = '<div class="ecard" style="margin-top:'+mt+'px">';
	var div_motiv = '<div id="motiv"><img src="'+show_motiv+'" width="630" height="435" onclick="javascript:showText();" alt="Karte drehen" title="Karte drehen" /></div>';
	document.getElementById("ecard").innerHTML=div_ecard+div_motiv+'</div>';
	iv = window.setInterval("showText()", 5000);
}

function showText(){
	window.clearInterval(iv);
	var logo = '<img src="fileadmin/images/logo184.gif" class="logo" />';
	var schliessen = '<a href="?action=0" class="schliessen" alt="Schließen" title="Schließen"></a>';
	var marke = '<div class="marke"><img src="'+show_motiv+'" /></div>';
	var stempel = '<a href ="spenden.html" target="_blank" class="stempel" alt="Spenden" title="Spenden" ></a>';
	var show_nachricht = '<div class="nachricht">'+nachricht+'</div>';
	var absender = '<div class="absender"><p>Diese Malteser E-Card ist von:</p><p><span>'+name_von+'</span> </br > '+email_von+'</p></div>';
	var buttonC = '<a href="?action=create" class="weiter create">Eigene E-Card erstellen und versenden!</a>';
	document.getElementById("motiv").innerHTML = '<div class="ecard_links area" onclick="javascript:initShow();">'+logo+show_nachricht+'</div><div class="ecard_rechts area" onclick="javascript:initShow();">'+schliessen+marke+stempel+absender+buttonC+'</div>';
}

function initFeedback(){
	var mt = (document.getElementById("overlay").offsetHeight - 500)/2;
	var mt=50;
	h = (document.body.offsetHeight+100)*2;
	var div_ecard = '<div class="ecard" style="margin-top:'+mt+'px">';
	var div_motiv = '<div id="motiv"><img src="'+show_motiv+'" width="630" height="435" onclick="javascript:showText();" alt="Karte drehen" title="Karte drehen" /></div>';
	document.getElementById("ecard").innerHTML=div_ecard+div_motiv+'<div id="toolbar"></div></div>';
	document.getElementById("overlay").style.height=h+'px';
	
	var titel = '<h2 class="step2">'+txt+'</h2>';
	var schliessen = '<a href="?action=" class="weiter schliessenB">Schließen</a>';
	document.getElementById("toolbar").innerHTML = titel+schliessen;
}