function html_entity_decode(str) {
  var ta=document.createElement("textarea");
  ta.innerHTML=str.replace(/</g,"&lt;").replace(/>/g,"&gt;");
  return ta.value;
}
// Wir merken uns die geladenen Text, 
// damit der Server nicht mehr als nötig beansprucht wird.
var column    = new Array(7);

// Außerdem merken wir uns die Auswahl für jede Spalte
// Das Array reicht bis 7 weil ich gern die 1ste Spalte mit 1
// bezeichnen wollte und nicht mit selection[0]
var selection = new Array(7);
var activeselection = '';

function initiate()
{
	// Hier holen wir die Daten für die erste Spalte
	// wenn der Browser getestet und kompatibel ist.	
	// Funktionieren tut das ganze ja sowieso nur wenn JavaScript aktiv ist.
	// Ansonsten gibt es ein Fall-Back-System welches nur auf PHP/HTML basiert
	var agent = navigator.userAgent
	if (agent.indexOf('Opera')     != -1 ||
		agent.indexOf('Firefox')   != -1 ||
		agent.indexOf('MSIE 6.0')  != -1 ||
		agent.indexOf('MSIE 7.0')  != -1 ||
		agent.indexOf('MSIE 8.0')  != -1 ||
		agent.indexOf('Chrome')    != -1 ||
		agent.indexOf('Safari')    != -1 ) 
	{getData('api.php?col=1', formattext1st, '1');}
	//document.getElementById('tinypreis').innerHTML = agent;
}

function activate(col, s)
{
	// Mit 'activate' aktivieren wir einen selektierten Eintrag 's' einer Spalte 'col'
	// Zuerst merken wir uns die Auswahl
	selection[col] = s;
	
	// 'col' ist ein String, darum wandeln wir 'col' in Integer
	var nextcol = parseInt(col) + 1;
	var i = nextcol;
	
	// Jetzt löschen wir alle Auswahlen und Spalten für die Spalten recht
	// von der Auswahl
	for(i; i <= 7; i++) 
	{
		document.getElementById('ID'+i).innerHTML = '';
		selection[i] = '';
	}
	
	// Hier wird die Spalte neu gezeichnet, damit der selektierte Eintrag den Stil *selected bekommt
	// In der ersten Spalte gibt es verschiedene Farben, darum eine Unterscheidung
	if (col == 1) formattext1st(column[col], col);
		else formattext(column[col], col);
		
	// Jetzt bauen wir die URL zusammen. Leere 'selection' werden als 'undefined' weitergegeben
	// Das macht aber nichts, weil api.php Daten für die entspechende Spalte 'nextcol' liefert
	// und die anderen Argumente quasi ignoriert.
	var url = 'api.php?col=' + nextcol;
	url += '&p='+ selection[1];
	url += '&f='+ selection[2];
	url += '&c='+ selection[3];
	url += '&s='+ selection[4];
	url += '&g='+ selection[5];
	url += '&t='+ selection[6];
	url += '&a='+ activeselection;
	
	// Hier geht es tatsächlich um Ajax!
	getData(url, formattext, nextcol);
	
}

function formattext(text, col)
{	
	var ApiReturn = text.split("~");
	var j = 0;
	
	while (j < ApiReturn.length)
	{
		// 'formattext' erzeugt aus den vom Server gelieferten Texten das HTML
		// Also, merken wir uns zuerst den 'text', den der Server leifert.
		column[col] = ApiReturn[j];	
		
		// api.php leifert die Daten einfach mit '#' getennt als fortlaufenden Text
		var Part = ApiReturn[j].split("#");
		var i = 0;
		var ntext = '';
		var myclass = '';
		var s = '';

		
		if (col != 7)   
		{
			if (col == 2) document.getElementById('formatname').innerHTML = (selection[1] == 'Folder') ? "Endformat" : "Format"   
			
			while (i < Part.length)
			{
				// Wenn dieses Feld ausgewählt ist, dann wird dem Stil selected angehängt.
				// selection[1] ist die Auswahl der ersten Spalte, damit wird die Farbe bestimmt.
				myclass = activeselection;
				if (Part[i] == selection[col]) myclass += 'selected';
							
				// Ausnahmen für die Grammatur und Falzarten
				s = Part[i];
				if (col == 2) s = FormatBeschreibung(s)
				if (col == 4) s = FalzBeschreibung(s);
				if (col == 5) s = GrammaturBeschreibung(s);
				if (col == 6) s = ProduktionBeschreibung(s);
				ntext += '<a href="# " class="navi '+myclass+'" onclick="activate('+col+',\''+Part[i]+'\')">'+s+"</a>\n";
				i++;
			}
			// Oh, DHTML, baby. Damit wird der Text in die richtige splate geschrieben
			document.getElementById('ID'+col).innerHTML = ntext;
			document.getElementById('tinypreis').innerHTML = '';
			
			var mytitle = NameProdukte(selection[1]);
			if (col > 2) mytitle += ' -  Format: ' + FormatBeschreibung(selection[2]);
			if (col > 3) mytitle += ' -  Farben: ' + selection[3];
			if (col > 4) mytitle += ' -  Seiten: ' + FalzBeschreibung(selection[4]);
			if (col > 5) mytitle += ' -  Papier: ' + GrammaturBeschreibung(selection[5]);
			if (col >= 6) mytitle += ' - ' + ProduktionBeschreibung(selection[6]);
			
			mytitle = mytitle.replace(/<([^>]*)>/g, '');
			document.title = 'xpose-print :: ' + html_entity_decode(mytitle);
			
			// Wenn es nur eine Auswahl gibt und die nicht schon selektiert ist dann kann man
			// die auch gleich aktivieren.
			if (Part.length == 1 && Part[i-1] != selection[col]) activate(col,Part[0]);
			
		}
		// Es gibt Ausnahmen für die Preise, die werden direkt vom Server geschickt - keine JScript-Formatierung
		if (col == 7)
		{
			document.getElementById('ID7').innerHTML = ApiReturn[j];
		/*	var url = '&nbsp;&nbsp;<a href="einzelpreisliste.php?produkt='+ selection[1];
			url += '&format='+ selection[2];
			url += '&farbigkeit='+ selection[3];
			url += '&seiten='+ selection[4];
			url += '&grammatur='+ selection[5] 
			url += '&produktion='+ selection[6] + '" style="font-size: 10px; text-decoration: none;">Diese Preisliste drucken</a>';
			document.getElementById('tinypreis').innerHTML = url;*/
		}
		j++;
		col++;
	}
}

function formattext1st(text)
{
	// 'formattext1st' ist die Sondervariante von 'formattext' für die erste Spalte,
	// deshalb muß die Spalte 'col' auch nicht übergeben werden -> die ist immer 1
	// Also los, merken (s. formattext)
	column[1] = text;
	
	// Aufteilen (s. formattext)
	var Part = text.split("#");
	var i = 0;
	var ntext = '';
	var myclass = '';
    	while (i < Part.length)
	{
		s = NameProdukte(Part[i]);
		
		// Wenn dieses Produkt ausgewählt (aktiviert) wurde, dann wird an den Stil 'selected' angehängt 
		myclass = 'produkt0';
		if (Part[i] == selection[1]) {
		  activeselection = myclass; myclass += 'selected';
        }
		ntext += '<a href="# " class="navi ' + myclass + '" onclick="activate(1,\''+ Part[i] +'\')">'+ s +'</a>';
		i++;
	}
	// DHTML (s. formattext)
	document.getElementById('ID1').innerHTML = ntext;
}

function NameProdukte(text)
{
	//In der Datenbank sind sicherheitshalber keine Umlaute gespeichert.
	// Die Übersetzungen werden jetzt nicht mehr hier eingetragen, sondern zentral
	// in der Datei z.B. html/demo/locale/db/ajax.de.php
text = text.replace("Flyer", "Flyer/Flugbl&auml;tter");
text = text.replace("Folder", "<span style='white-space:nowrap; vertical-align: text-bottom;'>Folder/Faltbl&auml;tter <img src='images/locale/de_help.png' onclick='window.open(\"faq.php?gruppe=Falzarten\")' border='0' onmouseover='document.getElementById(\"produktinfo\").style.display=\"block\"' onmouseout='document.getElementById(\"produktinfo\").style.display=\"none\"'></span>");
text = text.replace("Plakate", "Plakate");
text = text.replace("Poster/Kleinauflagen", "Plakate Kleinauflagen");
text = text.replace("Magazine", "<span style='white-space:nowrap; vertical-align: text-bottom;'>Magazine/Brosch&uuml;ren <img src='images/locale/de_help.png' onclick='window.open(\"faq.php?id=556\")' border='0' onmouseover='document.getElementById(\"produktinfo\").style.display=\"block\"' onmouseout='document.getElementById(\"produktinfo\").style.display=\"none\"'></span>");
text = text.replace("Kataloge", "<span style='white-space:nowrap; vertical-align: text-bottom;'>Kataloge Klebebindung <img src='images/locale/de_help.png' onclick='window.open(\"faq.php?id=557\")' border='0' onmouseover='document.getElementById(\"produktinfo\").style.display=\"block\"' onmouseout='document.getElementById(\"produktinfo\").style.display=\"none\"'></span>");
text = text.replace("Proofs", "Proofs");
text = text.replace("Briefpapier", "Briefpapier");
text = text.replace("Briefumschlag", "Briefumschl&auml;ge");
text = text.replace("Visitenkarten", "Visitenkarten");
text = text.replace("Postkarten", "Postkarten");
text = text.replace("Klappkarten", "<span style='white-space:nowrap; vertical-align: text-bottom;'>Klappkarten <img src='images/locale/de_help.png' onclick='window.open(\"faq.php?id=549\")' border='0' onmouseover='document.getElementById(\"produktinfo\").style.display=\"block\"' onmouseout='document.getElementById(\"produktinfo\").style.display=\"none\"'></span>");
text = text.replace("Bloecke", "<span style='white-space:nowrap; vertical-align: text-bottom;'>Blöcke Klebebindung <img src='images/locale/de_help.png' onclick='window.open(\"faq.php?id=550\")' border='0' onmouseover='document.getElementById(\"produktinfo\").style.display=\"block\"' onmouseout='document.getElementById(\"produktinfo\").style.display=\"none\"'></span>");
text = text.replace("Schreibtischunterlagen", "<span style='white-space:nowrap; vertical-align: text-bottom;'>Schreibtischunterlagen <img src='images/locale/de_help.png' onclick='window.open(\"faq.php?id=555\")' border='0' onmouseover='document.getElementById(\"produktinfo\").style.display=\"block\"' onmouseout='document.getElementById(\"produktinfo\").style.display=\"none\"'></span>");
text = text.replace("Praesentationsmappen", "<span style='white-space:nowrap; vertical-align: text-bottom;'>Pr&auml;sentationsmappen <img src='images/locale/de_help.png' onclick='window.open(\"faq.php?id=560\")' border='0' onmouseover='document.getElementById(\"produktinfo\").style.display=\"block\"' onmouseout='document.getElementById(\"produktinfo\").style.display=\"none\"'></span>");
text = text.replace("Endlosformulare", "<span style='white-space:nowrap; vertical-align: text-bottom;'>Endlosformulare <img src='images/locale/de_help.png' onclick='window.open(\"faq.php?id=558\")' border='0' onmouseover='document.getElementById(\"produktinfo\").style.display=\"block\"' onmouseout='document.getElementById(\"produktinfo\").style.display=\"none\"'></span>");
text = text.replace("Durchschreibesaetze", "<span style='white-space:nowrap; vertical-align: text-bottom;'>Durchschreibes&auml;tze <img src='images/locale/de_help.png' onclick='window.open(\"faq.php?id=559\")' border='0' onmouseover='document.getElementById(\"produktinfo\").style.display=\"block\"' onmouseout='document.getElementById(\"produktinfo\").style.display=\"none\"'></span>");
text = text.replace("Kalender 2009", "<span style='white-space:nowrap; vertical-align: text-bottom;'>Kalender 1-seitig <img src='images/locale/de_help.png' onclick='window.open(\"faq.php?id=519\")' border='0' onmouseover='document.getElementById(\"produktinfo\").style.display=\"block\"' onmouseout='document.getElementById(\"produktinfo\").style.display=\"none\"'></span>");
text = text.replace("Kalender Spiralbindung", "Kalender Spiralbindung");
text = text.replace("Aufkleber", "<span style='white-space:nowrap; vertical-align: text-bottom;'>Aufkleber <img src='images/locale/de_help.png' onclick='window.open(\"faq.php?id=551\")' border='0' onmouseover='document.getElementById(\"produktinfo\").style.display=\"block\"' onmouseout='document.getElementById(\"produktinfo\").style.display=\"none\"'></span>");
text = text.replace("Werbetechnik", "<span style='white-space:nowrap; vertical-align: text-bottom;'>Werbetechnik <img src='images/locale/de_help.png' onclick='window.open(\"faq.php?gruppe=Werbetechnik\")' border='0' onmouseover='document.getElementById(\"produktinfo\").style.display=\"block\"' onmouseout='document.getElementById(\"produktinfo\").style.display=\"none\"'></span>");
text = text.replace("Zoll (Schweiz)", "Zoll (Schweiz)");
	return text;
}

function FormatBeschreibung(input)
{
	var text = '';
	var input2 = input; 
	// Die Formatbezeichnung muss auch übersetzt werden
	input2 = input2.replace("23,5 x 12,5cm", "23,5 x 12,5cm Maxipostkarten");
	input2 = input2.replace("DINlang", "DINlang");
	input2 = input2.replace("DIN lang", "DIN lang");
	input2 = input2.replace("quer", "quer");
	input2 = input2.replace("Fuellhoehe", "F&uuml;llh&ouml;he");
	input2 = input2.replace("C4 mit Fenster selbstklebend", "C4 mit Fenster selbstklebend");
	input2 = input2.replace("C4 ohne Fenster selbstklebend", "C4 ohne Fenster selbstklebend");
	input2 = input2.replace("C5 mit Fenster selbstklebend", "C5 mit Fenster selbstklebend");
	input2 = input2.replace("C5 ohne Fenster selbstklebend", "C5 ohne Fenster selbstklebend");
	input2 = input2.replace("DL mit Fenster Haftklebestreifen", "DL mit Fenster Haftklebestreifen");
	input2 = input2.replace("DL mit Fenster nassklebend", "DL mit Fenster nassklebend");
	input2 = input2.replace("DL mit Fenster selbstklebend", "DL mit Fenster selbstklebend");
	input2 = input2.replace("DL ohne Fenster Haftklebestreifen", "DL ohne Fenster Haftklebestreifen");
	input2 = input2.replace("DL ohne Fenster nassklebend", "DL ohne Fenster nassklebend");
	input2 = input2.replace("DL ohne Fenster selbstklebend", "DL ohne Fenster selbstklebend");
	input2 = input2.replace("mit Laschen", "mit Laschen");
	input2 = input2.replace("ohne Laschen", "ohne Laschen");
	input2 = input2.replace("selbstklebend", "selbstklebend");
	input2 = input2.replace("Haftklebestreifen", "Haftklebestreifen");
	input2 = input2.replace("nassklebend", "nassklebend");
	
	text += input2;
	return text;
}

function FalzBeschreibung(input)
{
	// Die Falzbilder sollen angezeigt werden
	var text = '';
	var input2 = input; 
	input2 = input2.replace("Wickel", "Wickel");
	input2 = input2.replace("Zickzack", "Zickzack");
	input2 = input2.replace("2-bruch Fensterfalz", "2-bruch Fensterfalz");
	input2 = input2.replace("Fensterfalz", "Fensterfalz");
	input2 = input2.replace("quer", "quer");
	input2 = input2.replace("verkuerzte VS", "verk&uuml;rzte Vorderseite");
	input2 = input2.replace("mit Laschen", "mit Laschen");
	input2 = input2.replace("ohne Laschen", "ohne Laschen");
	input2 = input2.replace("mit Fenster", "mit Fenster");
	input2 = input2.replace("ohne Fenster", "ohne Fenster");
	

	if ((selection[1] == "Bloecke") || 
	    (selection[1] == "Folder") ||
	    (selection[1] == "Kalender Spiralbindung") ||
	    (selection[1] == "Klappkarten") ||
	    (selection[1] == "Praesentationsmappen") ||
	    (selection[1] == "Schreibtischunterlagen") ||
	    (selection[1] == "Visitenkarten") 
		) text += '<img src="images/falzneu/' + selection[1].replace(/ /g,'_') + '_' + selection[2].substr(0,1) + '_'  + input.replace(/ /g,'_') + '.png" border="0"/ onerror="this.style.display = \'none\'">&nbsp;'	

	if (
	    (selection[1] == "Briefumschlag")
		) text += '<img src="images/falzneu/' + selection[1] + '_' + selection[2].substr(0,2) + '_'  + input.replace(/ /g,'_') + '.png" border="0"/ onerror="this.style.display = \'none\'">&nbsp;'	
		
	text += input2;
	return text;
}


function GrammaturBeschreibung(text)
{
	// Die Oberflächenbeschaffenheit soll sichtbar sein
	// Die Übersetzungen werden jetzt nicht mehr hier eingetragen, sondern zentral
	// in der Datei html/demo/locale/db/grammatur.php
if (text == "Recycling 90") text = "90&nbsp;g/m&sup2;<br><small>Recycling matt</small>";
if (text == "Neon gelb 80") text = "80&nbsp;g/m&sup2;<br><small>Neongelb matt</small>";
if (text == "Neon gruen 80") text = "80&nbsp;g/m&sup2;<br><small>Neongr&uuml;n matt</small>";
if (text == "Neon magenta 80") text = "80&nbsp;g/m&sup2;<br><small>Neonpink matt</small>";
if (text == "60") text = "60&nbsp;g/m&sup2;<br><small>matt</small>";
if (text == "75") text = "75&nbsp;g/m&sup2;<br><small>matt</small>";
if (text == "75 Recycling") text = "75&nbsp;g/m&sup2;<br><small>Recycling</small>";
if (text == "80") text = "80&nbsp;g/m&sup2;<br><small>matt</small>";
if (text == "60/57") text = "60/57&nbsp;g/m&sup2;<br><small>matt</small>";
if (text == "80/57") text = "80/57&nbsp;g/m&sup2;<br><small>matt</small>";
if (text == "60/53/57") text = "60/53/57&nbsp;g/m&sup2;<br><small>matt</small>";
if (text == "80/53/57") text = "80/53/57&nbsp;g/m&sup2;<br><small>matt</small>";
if (text == "80/60") text = "80/60&nbsp;g/m&sup2;<br><small>matt</small>";
if (text == "80/60/57") text = "80/60/57&nbsp;g/m&sup2;<br><small>matt</small>";
if (text == "90") text = "90&nbsp;g/m&sup2;<br><small>matt</small>";
if (text == "90 matt") text = "90&nbsp;g/m&sup2;<br><small>Bilderdruck<br>seidenmatt</small>";
if (text == "90 Indoor") text = "90&nbsp;g/m&sup2;&nbsp;<br><small>Haftpapier Indoor</small>";
if (text == "100") text = "100&nbsp;g/m&sup2;<br><small>Bilderdruck<br>gl&auml;nzend</small>";
if (text == "100 matt") text = "100&nbsp;g/m&sup2;<br><small>Bilderdruck<br>matt</small>";
if (text == "100 Recycling") text = "100&nbsp;g/m&sup2;<br><small>Bilderdruck<br>Recycling</small>";
if (text == "115 Smatt") text = "115&nbsp;g/m&sup2;<br><small>Bilderdruck<br>seidenmatt</small>";
if (text == "115/170") text = "115/170&nbsp;g/m&sup2;<br><small>Bilderdruck<br>seidenmatt</small>";
if (text == "Affichen 115") text = "115&nbsp;g/m&sup2;<br><small>Affichen seidenmatt</small>";
if (text == "Affichen 120") text = "120&nbsp;g/m&sup2;<br><small>Affichen seidenmatt</small>";
if (text == "130 Recycling") text = "130&nbsp;g/m&sup2;<br><small>Recycling seidenmatt</small>";
if (text == "135") text = "135&nbsp;g/m&sup2;<br><small>Bilderdruck<br>gl&auml;nzend</small>";
if (text == "135 matt") text = "135&nbsp;g/m&sup2;<br><small>Bilderdruck<br>seidenmatt</small>";
if (text == "135 uv") text = "135&nbsp;g/m&sup2;<br><small>Bilderdruck<br>gl&auml;nzend<br>mit UV-Lack</small>";
if (text == "135/250") text = "135/250&nbsp;g/m&sup2;<br><small>Bilderdruck<br>gl&auml;nzend</small>";
if (text == "150") text = "150&nbsp;g/m&sup2;<br><small>Naturpapier<br>creme</small>";
if (text == "165") text = "165&nbsp;g/m&sup2;<br><small>seidenmatt</small>";
if (text == "165 Indoor") text = "165&nbsp;g/m&sup2;<br><small>Indoor seidenmatt</small>";
if (text == "170") text = "170&nbsp;g/m&sup2;<br><small>Bilderdruck<br>seidenmatt</small>";
if (text == "170/250") text = "170/250&nbsp;g/m&sup2;<br><small>Bilderdruck<br>seidenmatt/gl&auml;nzend</small>";
if (text == "180") text = "180&nbsp;g/m&sup2;<br><small>Fotopapier</small>";
if (text == "250") text = "250&nbsp;g/m&sup2;<br><small>Bilderdruck<br>gl&auml;nzend</small>";
if (text == "280") text = "280&nbsp;g/m&sup2;<br><small>Chromokarton gl&auml;nzend </small>";
if (text == "300") text = "300&nbsp;g/m&sup2;<br><small>Bilderdruck<br>gl&auml;nzend</small>";
if (text == "300 natur") text = "300&nbsp;g/m&sup2;<br><small>Naturpapier<br>creme</small>";
if (text == "300 recycling") text = "300&nbsp;g/m&sup2;<br><small>Recycling</small>";
if (text == "300 matt") text = "300&nbsp;g/m&sup2;<br><small>Bilderdruck<br>seidenmatt</small>";
if (text == "350") text = "350&nbsp;g/m&sup2;<br><small>matt gestrichen mit Drucklack</small>";
if (text == "PVC-Plane 450g") text = "450&nbsp;g/m&sup2;<br><small>PVC-Plane</small>";
if (text == "PVC-Plane 550g") text = "550&nbsp;g/m&sup2;<br><small>PVC-Plane</small>";
if (text == "Backlite-Folie") text = "<small>Backlite-Folie</small>";
if (text == "Mesh-Banner") text = "<small>Mesh-Banner</small>";
if (text == "Vinyl-Folie") text = "<small>Vinyl-Folie</small>";
	return text;
}

function ProduktionBeschreibung(text)
{
	// Die Oberflächenbeschaffenheit soll sichtbar sein
if (text == "Standard") text = "Standard";
if (text == "Express") text = "Express";
if (text == "Overnight") text = "Overnight";
if (text == "Digital Standard") text = "Digital Standard";
if (text == "Digital Express") text = "Digital Express";
if (text == "") text = "";
	return text;
}

function getData(url, callback, col)
{ 
	// Ajax-Routine für IE, Mozilla
	var Request = false; 
	if (window.XMLHttpRequest) 
	{
		Request = new XMLHttpRequest();
	} 
	else if (window.ActiveXObject) 
	{
		Request = new ActiveXObject("Microsoft.XMLHTTP");
	} 

	if(Request) 
	{
		Request.open("GET", url); 
		Request.onreadystatechange = function() 
		{ 
			if (Request.readyState == 4) 
			{
			   if (Request.status == 200) 
			   { 
				  callback(Request.responseText, col); 
				  delete Request;
				  Request = null;
			   } 
			   else
			   {
				    // Diese Fehlermeldung sollte eigentlich nie auftreten, weil das Fall-Back-System
				    // in Kraft tritt, wenn die erste Spalte nicht geladen wird. Super.
                  error( "HTTP " + Request.status + ".  Es ist ein Fehler aufgetreten " + Request.statusText + ". Bitte schalten Sie JavaScript ab und versuchen Sie es erneut.");
			   }
			}
		} 
		Request.send(null); 
	}
}