/* javascript-ajax-shop-formular: oh tannenbaum */
window.dhtmlHistory.create();

window.onload = function()
{
	dhtmlHistory.initialize();
	dhtmlHistory.addListener(write_to_container);
	show_shop();
	drag_an();
	preload_pics();
}

var shop_items = [
	/* 0. nr, 1. titel, 2. bildname, 3. preis, 4. beschreibung, 5. anzahl (warenkorb) */
	[0,'Steckdran','steckdrauf.jpg','1800','Auspacken, LEGO-Kiste aus dem Keller holen und mit der ganzen Familie drauf los stecken.<br><br><b>Inhalt</b><br>- 3 Halter<br>- ein paar Lego-Steine<br><br><b>Design</b><br><a href="http://www.eigenwert.ch">eigenwert</a> und <a href="http://www.stockwerk3.ch">stockwerk3</a><br><br><b>Hinweis</b><br>Genügend Abstand zu Kerzen halten und nie unbeaufsichtigt lassen. Einige Materalien sind nicht schwerentflammbar. Für verursachte Schäden übernehmen wir keine Haftung. (siehe <a href="javascript:drag_show(\'agb.html\',450,300,\'fade\');">AGB</a>)',0],
	[1,'Grüne Zone','gruene_zohne.jpg','900','Autöli suchen, parkieren und schöne Erinnerungen wecken.<br><br><b>Inhalt</b><br>- 1 Auto-Halter<br><br><b>Design</b><br><a href="http://www.eigenwert.ch">eigenwert</a> und <a href="http://www.stockwerk3.ch">stockwerk3</a><br><br><b>Hinweis</b><br>Genügend Abstand zu Kerzen halten und nie unbeaufsichtigt lassen. Einige Materalien sind nicht schwerentflammbar. Für verursachte Schäden übernehmen wir keine Haftung. (siehe <a href="javascript:drag_show(\'agb.html\',450,300,\'fade\');">AGB</a>)',0],
	[2,'Berner-Zapfen','berner_zapfen.jpg','1700','Papierrondellen mit den Magneten zusammenfügen und formen.<br><br><b>Inhalt</b><br>- 19 Papierrondellen (41 mm)<br>- 20 Magnete<br>- 1 Halter<br><br><b>Design</b><br><a href="http://www.eigenwert.ch">eigenwert</a> und <a href="http://www.stockwerk3.ch">stockwerk3</a><br><br><b>Hinweis</b><br>Genügend Abstand zu Kerzen halten und nie unbeaufsichtigt lassen. Einige Materalien sind nicht schwerentflammbar. Für verursachte Schäden übernehmen wir keine Haftung. (siehe <a href="javascript:drag_show(\'agb.html\',450,300,\'fade\');">AGB</a>)',0],
	[3,'Thurgauer-Zapfen','thurgauer_zapfen.jpg','1400','Formen ausschneiden, mit den Magneten zusammenfügen und wirken lassen.<br><br><b>Inhalt</b><br>- Bastelbogen (3 Seiten A4)<br>- Anleitung<br>- 45 Magnete<br>- Halter<br><br><b>Design</b><br><a href="http://www.eigenwert.ch">eigenwert</a> und <a href="http://www.stockwerk3.ch">stockwerk3</a><br><br><b>Hinweis</b><br>Genügend Abstand zu Kerzen halten und nie unbeaufsichtigt lassen. Einige Materalien sind nicht schwerentflammbar. Für verursachte Schäden übernehmen wir keine Haftung. (siehe <a href="javascript:drag_show(\'agb.html\',450,300,\'fade\');">AGB</a>)',0],
	[4,'Kugelpulli','kugelpulli.jpg','2400','drüberstülpen.<br><br><b>Inhalt</b><br>1 gestrickter «Pulli» <br>für Kugelgrösse 80 mm<br><br><b>Design</b><br><a href="http://www.eigenwert.ch">eigenwert</a> und <a href="http://www.stockwerk3.ch">stockwerk3</a><br><br><b>Hinweis</b><br>Genügend Abstand zu Kerzen halten und nie unbeaufsichtigt lassen. Einige Materalien sind nicht schwerentflammbar. Für verursachte Schäden übernehmen wir keine Haftung. (siehe <a href="javascript:drag_show(\'agb.html\',450,300,\'fade\');">AGB</a>)',0],
	[5,'Süsser Tau','suesser_tau.jpg','1600','Sorgfälltig über die Äste legen und im neuen Jahr kompostieren.<br><br><b>Inhalt</b><br>200 cm Jute-Schnur mit gegossenen Zucker-Tropfen<br><br><b>Design</b><br><a href="http://www.eigenwert.ch">eigenwert</a> und <a href="http://www.stockwerk3.ch">stockwerk3</a><br><br><b>Hinweis</b><br>Genügend Abstand zu Kerzen halten und nie unbeaufsichtigt lassen. Einige Materalien sind nicht schwerentflammbar. Für verursachte Schäden übernehmen wir keine Haftung. (siehe <a href="javascript:drag_show(\'agb.html\',450,300,\'fade\');">AGB</a>)',0],
	[6,'Die Vögel','die_voegel.jpg','1600','Auf den Ästen befestigen und mitsingen lassen.<br><br><b>Inhalt</b><br>- 3 verschiedene Vogel-Silhouetten<br>- Draht zum befestigen<br><br><b>Design</b><br><a href="http://www.eigenwert.ch">eigenwert</a> und <a href="http://www.stockwerk3.ch">stockwerk3</a><br><br><b>Hinweis</b><br>Genügend Abstand zu Kerzen halten und nie unbeaufsichtigt lassen. Einige Materalien sind nicht schwerentflammbar. Für verursachte Schäden übernehmen wir keine Haftung. (siehe <a href="javascript:drag_show(\'agb.html\',450,300,\'fade\');">AGB</a>)',0],
	[7,'Dinozoo','dinozoo.jpg','1600','Auf den Ästen befestigen und mitfressen lassen.<br><br><b>Inhalt</b><br>- 3 verschiedene Dinosaurier-Silhouetten<br>- Draht zum befestigen<br><br><b>Design</b><br><a href="http://www.eigenwert.ch">eigenwert</a> und <a href="http://www.stockwerk3.ch">stockwerk3</a><br><br><b>Hinweis</b><br>Genügend Abstand zu Kerzen halten und nie unbeaufsichtigt lassen. Einige Materalien sind nicht schwerentflammbar. Für verursachte Schäden übernehmen wir keine Haftung. (siehe <a href="javascript:drag_show(\'agb.html\',450,300,\'fade\');">AGB</a>)',0],
	[8,'Besuch von oben','besuch_von_oben.jpg','2300','UFO zusammen stecken und schweben lassen.<br><br><b>Inhalt</b><br>1 UFO aus 3 verschiedenen Plexi-Teilen<br><br><b>Design</b><br><a href="http://www.eigenwert.ch">eigenwert</a> und <a href="http://www.stockwerk3.ch">stockwerk3</a><br><br><b>Inhalt</b><br>Genügend Abstand zu Kerzen halten und nie unbeaufsichtigt lassen. Einige Materalien sind nicht schwerentflammbar. Für verursachte Schäden übernehmen wir keine Haftung. (siehe <a href="javascript:drag_show(\'agb.html\',450,300,\'fade\');">AGB</a>)',0],
	[9,'Zündkugel','zuendkugel.jpg','900','Aufhängen und nie mehr danach suchen.<br><br><b>Inhalt</b><br>1 Zündholz-Briefchen<br>1 Aufhängedraht<br><br><b>Design</b><br><a href="http://www.eigenwert.ch">eigenwert</a> und <a href="http://www.stockwerk3.ch">stockwerk3</a><br><br><b>Hinweis</b><br>Genügend Abstand zu Kerzen halten und nie unbeaufsichtigt lassen. Einige Materalien sind nicht schwerentflammbar. Für verursachte Schäden übernehmen wir keine Haftung. (siehe <a href="javascript:drag_show(\'agb.html\',450,300,\'fade\');">AGB</a>)',0],
	[10,'Baumtapete','baumtapete.jpg','1800','Herausbrechen und über die Äste legen.<br><br><b>Inhalt</b><br>2 Bogen mit je einem Stück à 150 cm<br><br><b>Design</b><br><a href="http://www.eigenwert.ch">eigenwert</a> und <a href="http://www.stockwerk3.ch">stockwerk3</a><br><br><b>Hinweis</b><br>Genügend Abstand zu Kerzen halten und nie unbeaufsichtigt lassen. Einige Materalien sind nicht schwerentflammbar. Für verursachte Schäden übernehmen wir keine Haftung. (siehe <a href="javascript:drag_show(\'agb.html\',450,300,\'fade\');">AGB</a>)',0]
];

/* max. 5 weitere bilder pro produkt */
var anzahl_weitere = 5;
var weitere_bilder = [
	['steckdrauf_1.jpg','','','',''], // steckdran
	['gruene_zone_1.jpg','gruene_zone_2.jpg','','',''], // grüne zone
	['berner_zapfen_1.jpg','','','',''], // berner zapfen
	['thurgauer_zapfen_1.jpg','','','',''], // thurgauer zapfen
	['','','','',''], // kugelpulli
	['suesser_tau_1.jpg','','','',''], // süsser tau
	['die_vogel_1.jpg','','','',''], // die vögel
	['dinozoo_1.jpg','','','',''], // dinozoo
	['besuch_von_oben_1.jpg','','','',''], // besuch von oben
	['zuendkugel_1.jpg','','','',''], // zündkugel
	['baumtapete_1.jpg','','','',''] // baumtapete
];
/*
****************************************************************************
thanks to webtoolkit.info */
drag_handler = {
	_oElem : null,
	attach : function(oElem) {
		oElem.onmousedown = drag_handler._dragBegin;
		oElem.dragBegin = new Function();
		oElem.drag = new Function();
		oElem.dragEnd = new Function();
		return oElem;
	},
	_dragBegin : function(e) {
		var oElem = drag_handler._oElem = this;
		if (isNaN(parseInt(oElem.style.left))) { oElem.style.left = '270px'; }
		if (isNaN(parseInt(oElem.style.top))) { oElem.style.top = '120px'; }
		var x = parseInt(oElem.style.left);
		var y = parseInt(oElem.style.top);
		e = e ? e : window.event;
		oElem.mouseX = e.clientX;
		oElem.mouseY = e.clientY;
		oElem.dragBegin(oElem, x, y);
		document.onmousemove = drag_handler._drag;
		document.onmouseup = drag_handler._dragEnd;
		return false;
	},
	_drag : function(e) {
		var oElem = drag_handler._oElem;
		var x = parseInt(oElem.style.left);
		var y = parseInt(oElem.style.top);
		e = e ? e : window.event;
		oElem.style.left = x + (e.clientX - oElem.mouseX) + 'px';
		oElem.style.top = y + (e.clientY - oElem.mouseY) + 'px';
		oElem.mouseX = e.clientX;
		oElem.mouseY = e.clientY;
		oElem.drag(oElem, x, y);
		return false;
	},
	_dragEnd : function() {
		var oElem = drag_handler._oElem;
		var x = parseInt(oElem.style.left);
		var y = parseInt(oElem.style.top);
		oElem.dragEnd(oElem, x, y);
		document.onmousemove = null;
		document.onmouseup = null;
		drag_handler._oElem = null;
	}
}
function drag_an()
{ var dragable1 = drag_handler.attach(id('drag_elem')); }
function drag_show(url)
{
	if (arguments.length>2)
	{ // breite und höhe des fensters
		id('drag_frame').style.width = arguments[1]+'px';
		id('drag_elem').style.width = arguments[1]+'px';
		id('drag_frame').style.height = arguments[2]+'px';
		id('drag_elem').style.height = arguments[2]+30+'px';
	}
	id('drag_frame').src = url;
	id('drag_elem').style.display = 'block';
	if ((arguments.length>3)&&(arguments[3]=='fade'))
	{
		document.getElementById('drag_bg').style.opacity = 0;
		document.getElementById('drag_bg').style.filter = 'alpha(opacity=0)';
		id('drag_bg').style.display = 'block';
		drag_bg_fade_in(0);
	}
}
function drag_hide()
{
	id('drag_elem').style.display = 'none';
	id('drag_bg').style.display = 'none';
	id('drag_frame').href = 'about:blank;';
}
function drag_bg_fade_in(count)
{
	fade_level = count;
	if (fade_level<7.5)
	{
		id('drag_bg').style.opacity = fade_level/10;
		id('drag_bg').style.filter = 'alpha(opacity='+(fade_level*10)+')';
		window.setTimeout('drag_bg_fade_in('+(fade_level+2.5)+')',75);
	}
}

/*
****************************************************************************
*/
function preview_pic(item_id)
{ id('form_pic_dynamic').src='_img/Produkte/_tn1/'+shop_items[item_id][2]; }
/*
****************************************************************************
*/
function preview_pic_detail(item_id,n)
{ id('form_pic_dynamic').src='_img/Produkte/_tn1/'+weitere_bilder[item_id][n]; }
/*
****************************************************************************
*/
function id(x)
{ return document.getElementById(x); }
/*
****************************************************************************
*/
function cont_resize(hoehe)
{ id('content_wrap').style.height = hoehe; }
/*
****************************************************************************
*/
function inner_html(element_id,html_code)
{ id(element_id).innerHTML = html_code; }
/*
****************************************************************************
*/
var write_to_container = function(history_name,html_code)
{
	inner_html('content_wrap',html_code);
	dhtmlHistory.add(history_name,html_code);
}
/*
****************************************************************************
*/
function scrollToTop()
{ window.scrollTo(0,0); }
/*
****************************************************************************
*/
function show_shop()
{
	var liste = '';
	scrollToTop();
	//cont_resize('1242px');
	for (i=0;i<shop_items.length;i++)
	{ liste += single_shop_item(i,shop_items[i][1],shop_items[i][2]); }
	write_to_container('shop',liste);
}
/*
****************************************************************************
*/
function update_priceform()
{
	total = 0;
	for (i=0;i<shop_items.length;i++)
	{
		anzahl = id('item_'+i).value;
		if (anzahl=='') anzahl=="0";
		anzahl = anzahl.replace(/[^0-9]/g, '');
		shop_items[i][5] = parseInt(anzahl);
		id('item_'+i).value = anzahl;
		total += (shop_items[i][3]*anzahl); 
	}
	total = (total/100).toFixed(2);
	inner_html('preis_gesamt','Fr. '+total);
}
/*
****************************************************************************
*/
function single_shop_item(nr,titel,bildname)
{
	code = '<div class="produkt_tn">'
    	+'<a href="javascript:show_detail(\''+nr+'\')" title="Details anzeigen"><img class="produkt_tn_img" src="_img/Produkte/_tn2/'+bildname+'"></a>'
        +'<div class="produkt_tn_txt">'
        	+'<a href="javascript:show_detail(\''+nr+'\')" title="Details anzeigen">'+titel+'</a>'
        +'</div>'
        +'<div class="produkt_tn_link">'
        	+'<a href="javascript:show_detail(\''+nr+'\')" title="Details anzeigen"><img src="_img/pfeil_go.jpg" class="pfeil_go"></a>'
        +'</div>'
	+'</div>';

	return code;

}
/*
****************************************************************************
*/
function preload_pics(item_id)
{
	for(i=0;i<shop_items.length;i++)
	{ 
		eval('pic'+i+' = new Image(1,1)'); 
		eval('pic'+i+'.src="_img/Produkte/_tn1/'+shop_items[i][2]+'"'); 
		for (j=0;j<anzahl_weitere;j++)
		{
			if (weitere_bilder[i][j]!='')
			{
				eval('pic'+i+' = new Image(1,1)'); 
				eval('pic'+i+'.src="_img/Produkte/_tn1/'+weitere_bilder[i][j]+'"'); 
			}
		}
	}
}
/*
****************************************************************************
*/
function contact()
{
	//cont_resize('400px');
	output = '<b>eigenwert</b><br>Industriestrasse 27<br>CH-3076 Worb<br><a href="http://www.eigenwert.ch">www.eigenwert.ch</a><br><a href="mailto:info@eigenwert.ch">info@eigenwert.ch</a><br>Tel. +41 (0)31 839 95 15<br><br>'
		+ '<b>stockwerk3</b><br>Bischoff | Sigerist<br>Balierestrasse 27<br>CH-8500 Frauenfeld<br><a href="http://www.stockwerk3.ch">www.stockwerk3.ch</a><br><a href="mailto:info@stockwerk3.ch">info@stockwerk3.ch</a><br>Tel. +41 (0)52 721 81 81<br>Fax +41 (0)52 721 81 83<br>'
		+ '<br><a href="javascript:show_shop()">zurück</a>';
	write_to_container('contact',output);
}
/*
****************************************************************************
*/
function show_detail(product_id)
{
	product_titel = shop_items[product_id][1];
	product_titelbild = shop_items[product_id][2];
	product_preis = ((shop_items[product_id][3]/100).toFixed(2));
	product_text = shop_items[product_id][4];
	//cont_resize('585px');
	output = '<div class="wrap_detail"><div class="wrap_detail_text"><div class="wrap_detail_titel">'+product_titel+'</div>'+product_text+'</div>'
			+'<img id="form_pic_dynamic" src="_img/Produkte/_tn1/'+product_titelbild+'" class="wrap_detail_bild">'
			+'<div class="wrap_detail_preis">'
			+'<div class="wrap_detail_betrag"><a href="javascript:show_cart('+product_id+')">Fr. '+product_preis+'</a></div>'
			+'<b><a href="javascript:show_cart('+product_id+')">bestellen</a></b>'
			+'<div class="wrap_detail_back" style="margin-top:43px;"><a href="javascript:show_shop()" class="grau">zurück zur Übersicht</a></div>'
			+'</div>'
			+'<div class="wrap_detail_pix">'+show_weitere_bilder(product_id)+'</div>'
			+'</div>';
	write_to_container('detail',output);
}
/*
****************************************************************************
*/
function show_weitere_bilder(product_id)
{
	output = '';
	for (i=0;i<anzahl_weitere;i++)
	{
		
		if (weitere_bilder[product_id][i]!='')
		{ output += '<div class="wrap_detail_img" onmouseover="preview_pic_detail('+product_id+','+i+')" onmouseout="preview_pic('+product_id+')"><img class="" src="_img/Produkte/_tn3/'+weitere_bilder[product_id][i]+'"></div>'; }
	}
	return output;
}
/*
****************************************************************************
*/
function agb_blaetter(show_id)
{
	for (i=1;i<9;i++)
	{
		if (i==show_id)
		{ id('agb_'+i).style.display = 'block'; }
		else
		{ id('agb_'+i).style.display = 'none'; }
	}
}
/*
****************************************************************************
*/
function show_cart(key)
{
	//cont_resize('580px');
	liste = '';

	if (key!='x')
	{ shop_items[key][5]+=1; }
	else
	{ key = 0; }

	/* liste, formular */
	for(i=0;i<shop_items.length;i++)
	{
		preis = ((shop_items[i][3]/100).toFixed(2));
		titel = shop_items[i][1];
		liste += '<div class="zeile_titel"><a href="javascript:show_detail('+i+')" onmouseover="preview_pic(\''+i+'\')">'+titel+'</a></div>'
			+ '<div class="zeile_preis">'+preis+'</div>'
			+ '<div class="zeile_anzahl"><input maxlength="3" id="item_'+i+'" onkeyup="update_priceform();" class="form_anzahl" type="text" name="'+titel+'" value="'+shop_items[i][5]+'"></div>';
	}
	liste = '<form method="get" action="bogus.php">'
		+'<div class="zeile_titel"><span class="form_titeli">Produkt</span></div>'
		+'<div class="zeile_preis"><span class="form_titeli">Preis (SFr.)</span></div>'
		+'<div class="zeile_anzahl"><span class="form_titeli">Anzahl</span></div>'
		+liste+'</form>';

	/* ausgabe */
	output = '<div class="wrap_detailform"><div class="wrap_detail_text" style="height:468px;">'
		+liste
		+'</div>'
		+'<img id="form_pic_dynamic" class="wrap_detail_bild" src="_img/Produkte/_tn1/'+shop_items[key][2]+'">'
		+'<div id="preis_gesamt">Fr. 0.00</div>'
		+'<div id="wrap_detail_back"><b><a href="javascript:show_sendform()">weiter</a></b><br></div>'
		+'<div class="wrap_detail_back" style="margin-top:46px;"><a href="javascript:show_shop()" class="grau">zurück zur Übersicht</a></div>'
		+'</div>';

	write_to_container('cart',output);
	update_priceform();

}
/*
****************************************************************************
*/
function check_sendform()
{
	if (id('i_read_disclaimer').checked==false)
	{ alert('Bitte lesen Sie die Geschäftsbedingungen, und kreuzen Sie das entsprechende Feld im Formular an.'); }
	else
	{
		fehler = '';
		if (id('a_name').value=='') { fehler += '\n- Name'; }
		if (id('b_vorname').value=='') { fehler += '\n- Vorname'; }
		if (id('c_strasse').value=='') { fehler += '\n- Strasse'; }
		if (id('d_plz').value=='') { fehler += '\n- PLZ'; }
		if (id('e_ort').value=='') { fehler += '\n- Ort'; }
		if (id('f_telefon').value=='') { fehler += '\n- Telefon'; }
		if (id('g_mail').value=='') { fehler += '\n- E-Mail'; }
		if (fehler!='') 
		{ 
			fehler = 'Folgende Angaben sind obligatorisch:'+fehler; 
			alert(fehler);
		}
		else
		{ id('sendform').submit(); }
	}
}
/*
****************************************************************************
*/
function show_sendform()
{
	//cont_resize('520px');
	preis_total = 0;
	input_hidden = '';
	for (i=0;i<shop_items.length;i++)
	{
		if (shop_items[i][5]>0)
		{
			preis_total += (parseInt(shop_items[i][5])*(shop_items[i][3]));
			input_hidden += shop_items[i][5]+'x '+shop_items[i][1]+'<br>';
		}
	}
	preis_total = (preis_total/100).toFixed(2);

// enthält eigentliche bestellung
	input_hidden = '<input type="hidden" name="bestellung" value="'+input_hidden+'<br>Total Fr. '+preis_total+'">';
	output = '<div id="sendform_form">'
		+'<form method="post" id="sendform" action="sendmail.php">'
		+'Name<br>'
		+'<input type="text" class="input_adr" name="a_name" id="a_name" value="">'
		+'Vorname<br>'
		+'<input type="text" class="input_adr" name="b_vorname" id="b_vorname" value="">'
		+'Strasse, Nr.<br>'
		+'<input type="text" class="input_adr" name="c_strasse" id="c_strasse" value="">'
		+'PLZ<br>'
		+'<input type="text" class="input_adr" name="d_plz" id="d_plz" value="">'
		+'Wohnort<br>'
		+'<input type="text" class="input_adr" name="e_ort" id="e_ort" value="">'
		+'Telefon<br>'
		+'<input type="text" class="input_adr" name="f_telefon" id="f_telefon" value="">'
		+'E-Mail<br>'
		+'<input type="text" class="input_adr" name="g_mail" id="g_mail" value="">'
		+'Bemerkungen<br>'
		+'<textarea class="input_txt" name="h_bemerkungen" id="h_bemerkungen"></textarea>'
		+'<input id="i_read_disclaimer" type="checkbox" name="disclaimer_read" value="1">&nbsp;Ich habe die <a href="javascript:drag_show(\'agb.html\',450,300,\'fade\');">Geschäftsbedingungen</a> gelesen.'
		+'<div style="margin-top:3px;"><b><a href="javascript:check_sendform()">absenden</a></b></div>'
		+input_hidden
		+'</form>'
		+'</div>'
		+'<div id="sendform_disclaimer">'
		+'<div class="wrap_detail_titel">Allgemeine Geschäftbedingungen (AGB) für Privatkunden</b></div>'
		+'<div class="agb_paragraph" style="display:block;">'
		+'<b>Versandkosten</b><br>Verpackung und Porto pro Stk. Fr. 3.00<br>Bei grösseren Bestellmengen max. Fr. 8.00<br><br>'
		+'<a href="javascript:drag_show(\'agb.html\',450,300,\'fade\');">Allgemeine Geschäftsbedingungen</a>'
		+'</div>'
		+'<div style="float:left;width:100%;margin-top:10px;">'
		+'<div class="wrap_detail_back"><a href="javascript:show_cart(\'x\')" class="grau">Warenkorb anzeigen</a></div>'
		+'<div class="wrap_detail_back"><a href="javascript:show_shop()" class="grau">zurück zur Übersicht</a></div>'
		+'</div>';

	write_to_container('send',output);
}


/* finito
****************************************************************************
*/