function getButton(id,current_template,button,lang) {
	str = "<img border=0 src='templates/"+current_template+"/img/layout/prdct_btn_bg_le.gif'>";
	str += "<img height=32px width=260px border=0 src='templates/"+current_template+"/img/layout/prdct_btn_bg_rpt.gif'>";
	str += "<img border=0 src='templates/"+current_template+"/img/layout/prdct_btn_bg_ri.gif'>";
	str += "<img border=0 src='templates/"+current_template+"/img/layout/prdct_leinwand.gif' style='position:absolute; left:10px; bottom:0px;'>";
	str += "<font style='position:absolute; left:50px; bottom:8px; font-size:14px; font-weight:bold; color:#666;'>"+button+"</font>";
	str += "<script src='includes/jQuery/projectionscreen.js' type='text/javascript'></script>";
	//str += "</a>";
	$.getJSON("./ajax.projectioncalc.php","id="+id, function(json){
		if (json.ok == 0) {
			$("#proCalcButton").html(str);
			$("#proCalcButton").css("cursor","pointer");
			
			$("#proCalcButton").click(function() {
				projectionScreenCalculator(id,lang)
			});
		}
	});

		
}
 
function projectionScreenCalculator(id,lang) {
	$("#proCalcButton").unbind('click');
	$("#proCalcButton").click(function() {
		$("#projectioncalc").slideUp();
		$("#proCalcButton").click(function() {
			projectionScreenCalculator(id,lang)
		});
	});
	var minScreenWidth = 0;
	var maxScreenWidth = 0;
	var minScreenWidthFoc = 0;
	var maxScreenWidthFoc = 0;
	var screenWidth = 0;
	var detailsWidth = 0;
	var normalMinScreenWidth = 0;
	var normalMaxScreenWidth = 0;
	var normalScreenWidth = 0;

	var minScreenHeigth = 0;
	var maxScreenHeight = 0;
	var minScreenHeigthFoc = 0;
	var maxScreenHeightFoc = 0;
	var screenHeight = 0;
	var detailsHeight = 0;
	var normalMinScreenHeight = 0;
	var normalMaxScreenHeight = 0;
	var normalScreenHeight = 0;

	var minDistance = 0;
	var maxDistance = 0;
	var minDistanceFoc = 0;
	var maxDistanceFoc = 0;
	var distance = 0;
	var detailsDistance = 0;

	var minFocus = 0;
	var maxFocus = 0;
	var focus = 0;

	var formats = new Array("4 : 3", "16 : 9");
	var format = 0;
	var fomatFactor = 0;
	var defaultFormat = 0;
	var lastFormatFactor = 0;
	var defaultFormatFactor = 0;

	var actual;
	// get format, resolution, focus
	$.getJSON("./ajax.projectioncalc.php","id="+id, function(json){
	//$.getJSON("data.php","id=" + id,function(json) {
		if (json.ok == "0") {
			format = json.format;
			format = format.replace(" : ", ":");
			//alert(format);
			tmp = (format.split(":")[0]) / (format.split(":")[1]);
			//alert(tmp);
			defaultFormat = (format.split(":")[0])+" : "+(format.split(":")[1]);
			format = defaultFormat;
			formatFactor = tmp;
			defaultFormatFactor = tmp;
			lastFormatFactor = tmp;
			tmp = parseInt(tmp * 10);
			switch (tmp) {
				case 16:
					formats.push("16 : 10");
					break;
			}
			minFocus = parseFloat(json.minFocus);
			maxFocus = parseFloat(json.maxFocus);
			focus = (minFocus + maxFocus) / 2;
			minDistance = json.minDist;
			maxDistance = json.maxDist;
			calcMinMax();
			buildViewer();
			$("#fadeDist").slideUp();
			// build sliders and eventhandler
			$(".slider").slider( {
				slide : function(event, ui) {
					//alert(this.id);
					slideSlider(this.id);
				}
			});
	
			// event handler to radio checkformat
			$('input[name=checkFormat]:radio').click(function() {
				format = $("input[name=checkFormat]:checked")[0].value;
				formatFactor = (format.split(":")[0]) / (format.split(":")[1]);
				calcMinMax();
				refresh();
				if ($("input[name=insertSelect]:checked")[0].value == "Distance"){
					calcWithDist();
				} else {
					//wideScreen
					if (defaultFormat.split(":")[0] == 16){
						//alert("here");
						if (defaultFormatFactor > formatFactor){
							calcWithHeight();
						} else if (defaultFormatFactor == formatFactor){
							calcWithHeight();
						} else {
							calcWithWidth();
						}
					//normal
					} else {
						//alert("normal");
						if (defaultFormatFactor > formatFactor){
							//alert(">");
							calcWithHeight();
						} else if (defaultFormatFactor == formatFactor){
							//alert("==");
							calcWithWidth();
						} else {
							//alert("");
							calcWithWidth();
						}
					}
				}
				
				
				//calcWithWidth();
			});
			//eventhandler to radio InsertSelect
			$('input[name=insertSelect]:radio').click(function() {
				if ($("input[name=insertSelect]:checked")[0].value == "Size") {
					$("#sliderSize").slideDown();
					$("#sliderDistance").slideUp();
					$("#screenSizeInfo").slideUp();
					$("#screenDistanceInfo").slideDown();
					$("#fadeDist").slideUp();
					$("#fadeSize").slideDown();
//					$("#screenmin").hide();
//					$("#screenmax").hide();
//					$("#screen").show();
					inputBox("screenWidth");
				} else {
//					$("#screenmin").show();
//					$("#screenmax").show();
//					$("#screen").hide();
					$("#sliderDistance").slideDown();
					$("#sliderSize").slideUp();
					$("#screenSizeInfo").slideDown();
					$("#screenDistanceInfo").slideUp();
					$("#fadeSize").slideUp();
					$("#fadeDist").slideDown();
					inputBox("dist");
				}

			});
	
			// eventhandler for input text $(':text')
			$('#projectioncalc input:text').change(function() {
				inputBox(this.id);
				refresh();
			});
			//TODO automatic refresh after 3 digits to inputbox
			
	
			refresh();
		} else if (json.ok == "1") {
			$("#projectioncalc").append("kein Zoom");
		} else {
			$("#projectioncalc").append(
					"kann nicht angezeigt werden");
		}

		$("#fadeDist").hide(); //slider_screenHeight
		
		//set first value
		
		if (maxScreenWidth >= 200) {
			$("#screenWidth").val("200");
		} else {
			$("#screenWidth").val("100");
		}
		$("#fadeDist").show();
		$("#sliderSize").slideDown();
		$("#sliderDistance").slideUp();
		$("#screenSizeInfo").slideUp();
		$("#screenDistanceInfo").slideDown();
		$("#fadeDist").hide();
		$("#fadeSize").slideDown();
		inputBox("screenWidth");
		
		
	});

	/**
	 * 
	 * Builds the HTML Elements
	 */
	var buildViewer = function() {
		$("#projectioncalc").slideDown();
		$("#fadeDist").slideUp();
		$("#projectioncalc #checkFormat").html(showFormatSelect());
	}
	
	/**
	 * set the values to sliders
	 * @param entity
	 * @param min
	 * @param max
	 * @return
	 */
	var setMinMax = function(entity, min, max) {
		$("#min_" + entity).html(Math.round(min)+"cm");
		$("#max_" + entity).html(Math.round(max)+"cm");
		$("#slider_" + entity).slider("option", "min", Math.round(min));
		$("#slider_" + entity).slider("option", "max", Math.round(max));
		value = $("#" + entity).slider("option", "value");
	}

	var refresh = function() {
		setMinMax("dist", minDistance, maxDistance);
		setMinMax("screenWidth", minScreenWidth, maxScreenWidth);
		setMinMax("screenHeight", minScreenHeight, maxScreenHeight);
//		$("#screenWidthMin").html(parseInt(minScreenWidth)+"cm");	
//		$("#screenWidthMax").html(parseInt(maxScreenWidth)+"cm");
//		$("#screenHeigthMin").html(parseInt(minScreenHeight)+"cm");	
//		$("#screenHeigthMax").html(parseInt(maxScreenHeigth)+"cm");
		
		
		$("#detailsWidth").html(
				parseInt(minScreenWidth) + "cm - "
						+ parseInt(minScreenWidthFoc) + "cm to "
						+ parseInt(maxScreenWidthFoc) + "cm - "
						+ parseInt(maxScreenWidth) + "cm");
		$("#detailsHeight").html(
				parseInt(minScreenHeight) + "cm - "
						+ parseInt(minScreenHeightFoc) + "cm to "
						+ parseInt(maxScreenHeightFoc) + "cm  - "
						+ parseInt(maxScreenHeight) + "cm");
	}
	
	/**
	 * Screen max values
	 * 
	 */
	var calcMinMax = function() {
		//WideScreen to normalScreen
		if (defaultFormatFactor > formatFactor){
			maxScreenWidth = maxScreenHeight * formatFactor;
			minScreenWidth = minScreenHeight * formatFactor;
			normalMaxScreenWidth = maxScreenHeight * defaultFormatFactor;
			normalMinScreenWidth = minScreenHeight * defaultFormatFactor;
			//calcWithHeight();
		//back
		} else if (defaultFormatFactor == formatFactor){
			maxScreenWidth = maxDistance / minFocus;
			minScreenWidth = minDistance / maxFocus;
			maxScreenHeight = maxScreenWidth / formatFactor;
			minScreenHeight = minScreenWidth / formatFactor;
			maxScreenWidthFoc = maxDistance / maxFocus;
			minScreenWidthFoc = minDistance / minFocus;
			maxScreenHeightFoc = maxScreenWidthFoc / formatFactor;
			minScreenHeightFoc = minScreenWidthFoc / formatFactor;
			normalMaxScreenWidth = maxScreenWidth;
			normalMinScreenWidth = minScreenWidth;
			//calcWithWidth();
		} else {
			maxScreenWidth = maxDistance / minFocus;
			minScreenWidth = minDistance / maxFocus;
			maxScreenHeight = maxScreenWidth / formatFactor;
			minScreenHeight = minScreenWidth / formatFactor;
			maxScreenWidthFoc = maxDistance / maxFocus;
			minScreenWidthFoc = minDistance / minFocus;
			maxScreenHeightFoc = maxScreenWidthFoc / formatFactor;
			minScreenHeightFoc = minScreenWidthFoc / formatFactor;
			//calcWithWidth();
		}
		lastFormatFactor = formatFactor;
	}

	/**
	 * build the HTML input fields
	 * 
	 * @param name
	 * @param label
	 * @param value
	 * @returns
	 */
	var showInputField = function(name, label, value) {
		str = "<label for='" + name + "'>" + label
				+ "</label><input type='text' class='text' id='" + name
				+ "' name='" + name + "' value='" + value + "' /><br />";
		return str;

	}
	/**
	 * builds the HTML technical details table
	 * 
	 * @returns
	 */

	var showTechnicalDetails = function() {
		str = "<table>";
		str = "<table id='details'>";
		str += "<caption>Technical Details</caption>";
		str += "<tr><td>Default Format:</td><td id='detailsDefaultFormat'>"
				+ format + "</td></tr>";
		str += "<tr><td>Distance:</td><td id='detailsDistance'>" + minDistance
				+ " to " + maxDistance + "</td></tr>";
		str += "<tr><td>Width:</td><td id='detailsWidth'>" + minScreenWidth
				+ " to " + maxScreenWidth + "</td></tr>";
		str += "<tr><td>Height:</td><td id='detailsHeight'>" + minScreenHeight
				+ " to " + maxScreenHeight + "</td></tr>";
		if (minFocus == maxFocus) {
			str += "<tr><td>Focus:</td><td id='detailsFocus'>" + focus
					+ "</td></tr>";
		} else {
			str += "<tr><td>Focus:</td><td id='detailsFocus'>" + minFocus
					+ " to " + maxFocus + "</td></tr>";
		}
		str += "</table>";

		return str;
	}

	/**
	 * build the HTML radio buttons of formats
	 * 
	 * @returns
	 */
	var showFormatSelect = function() {
		ret ="";
		$.each(	formats, function(index, value) {
			checked = "";
//			alert(value);
//			alert(defaultFormat);
			if (value == defaultFormat) {
				//alert("ok");
				checked = "checked='checked'";
			} else {
				checked = "";
			}
			ret += "<input type='radio' name='checkFormat' value='"
					+ value + "'"+checked+" />" + value;

		});

		return ret;
	}

	/**
	 * handler for sliders
	 */
	var slideSlider = function(id) {
		//alert(id);
		var value = $("#" + id).slider("option", "value")
		$("#" + (id.split("_")[1])).val(value);
		switch (id) {
		case "slider_dist":
			distance = value;
			calcWithDist();
			break;
		case "slider_screenWidth":
			screenWidth = value;
			calcWithWidth();
			break;
		case "slider_screenHeight":
			screenHeight = value;
			calcWithHeight()
			break;
		}
	}
	/**
	 * handler for inputboxes
	 */
	var inputBox = function(id) {
		var value = Math.round($("#" + id).val());
		switch (id) {
		case "dist":
			if (value >= maxDistance) {
				value = Math.round(maxDistance);
				$("#" + id).val(value);
			} else if (value < minDistance) {
				value = Math.round(minDistance);
				$("#" + id).val(value);
			}
			distance = value;
			calcWithDist();
			break;
		case "screenWidth":
			if (value >= maxScreenWidth) {
				value = Math.round(maxScreenWidth);
				$("#" + id).val(value);
			} else if (value < minScreenWidth) {
				value = Math.round(minScreenWidth);
				$("#" + id).val(value);
			}
			screenWidth = value;
			calcWithWidth();
			break;
		case "screenHeight":
			if (value >= maxScreenHeight) {
				value = Math.round(maxScreenHeight);
				$("#" + id).val(value);
			} else if (value < minScreenHeight) {
				value = Math.round(minScreenHeight);
				$("#" + id).val(value);
			}
			screenHeight = value;
			calcWithHeight();
			break;
		}
		setSlider(id, value);

	}

	/**
	 * if format or zomm is changing
	 */
	var recalcMaxDimensions = function() {
		maxScreenWidth = maxDist / minFactor;
		minScreenWidth = minDist / maxFactor;
		setMinMax("screenWidth", minScreenWidth, maxScreenWidth);
		maxScreenHeight = maxScreenWidth / format[0] * format[1];
		minScreenHeight = minScreenWidth / format[0] * format[1];
		setMinMax("screenHeight", minScreenHeight, maxScreenHeight);
		setMinMax("dist", minDist, maxDist);
		refresh("screenWidth");
		refresh("screenHeight");
	}
	
	var pytagoras = function (a,b) {
		var tmp = (a * a) + (b * b);	
		return Math.sqrt(tmp);;
	}

	var calcDiag = function() {
		var tmp = (screenWidth * screenWidth) + (screenHeight * screenHeight);
		screenDiag = Math.sqrt(tmp);
		setSlider("screenDiag", Math.round(screenDiag));
	}

	var setSlider = function(id, value) {
		$("#slider_" + id).slider("option", "value", value);
		$("#" + id).val(value);
	}

	var calcWithWidth = function() {
		if (defaultFormatFactor < formatFactor){
			//4:3 to wide
			screenHeight = screenWidth / formatFactor;
			normalScreenWidth = screenWidth;
		} else {
			screenHeight = screenWidth / formatFactor;
			normalScreenWidth = screenHeight*defaultFormatFactor;
		}

		//alert(normalScreenWidth);
		setSlider("screenHeight", Math.round(screenHeight));
		distance = normalScreenWidth * focus;
		if (distance >= maxDistance){
			distance = maxDistance;
		}
		setSlider("dist", Math.round(distance));
		var tmpMinDist = normalScreenWidth * minFocus;
		var tmpMaxDist = normalScreenWidth * maxFocus;
		if (tmpMaxDist >= maxDistance){
			tmpMaxDist = maxDistance;
		}
		if (tmpMinDist <= minDistance){
			tmpMinDist = minDistance;
		}
		$("#screenDiag").html(Math.round(pytagoras(screenWidth,screenHeight)/2.54)+"\"");
		$("#screenDistMin").html(Math.round(tmpMinDist) + "cm");
		$("#screenDistMax").html(Math.round(tmpMaxDist) + "cm");
		resizeScreen();
	}
	var calcWithDist = function() {
		screenWidth = distance / focus;
		setSlider("screenWidth", Math.round(screenWidth));
		screenHeight = screenWidth / formatFactor;
		//normalScreenHeight = screenWidth / defaultFormatFactor;
		setSlider("screenHeight", Math.round(screenHeight));
		
		if (defaultFormatFactor > formatFactor){
			//wide to 4:3
			normalMinScreenWidth = distance / maxFocus;
			normalMaxScreenWidth = distance / minFocus;
			normalMinScreenHeight = normalMinScreenWidth / defaultFormatFactor;
			normalMaxScreenHeight = normalMaxScreenWidth / defaultFormatFactor;
//			alert(normalMinScreenWidth);
//			alert(normalMaxScreenWidth);
			$("#screenHeigthMin").html(Math.round(normalMinScreenHeight) + "cm ");
			$("#screenHeightMax").html(Math.round(normalMaxScreenHeight) + "cm ");
			$("#screenWidthMin").html(Math.round(normalMinScreenHeight*formatFactor) + "cm ");
			$("#screenWidthMax").html(Math.round(normalMaxScreenHeight*formatFactor) + "cm ");
			$("#screenDiagMin").html(Math.round(pytagoras(normalMinScreenHeight,normalMinScreenHeight*formatFactor)/2.54)+"\"");
			$("#screenDiagMax").html(Math.round(pytagoras(normalMaxScreenHeight,normalMaxScreenHeight*formatFactor)/2.54)+"\"");
			
		} else if (defaultFormatFactor == formatFactor) {
			//back
			$("#screenWidthMin").html(Math.round(distance / maxFocus) + "cm ");
			$("#screenWidthMax").html(Math.round(distance / minFocus) + "cm ");
			$("#screenHeigthMin").html(Math.round((distance / maxFocus) / formatFactor) + "cm ");
			$("#screenHeightMax").html(Math.round((distance / minFocus) / formatFactor) + "cm ");
			$("#screenDiagMin").html(Math.round(pytagoras(distance / maxFocus,distance / maxFocus / formatFactor)/2.54)+"\"");
			$("#screenDiagMax").html(Math.round(pytagoras(distance / minFocus,distance / minFocus / formatFactor)/2.54)+"\"");
		} else {
			//4:3 to wide
			normalMinScreenWidth = distance / maxFocus;
			normalMaxScreenWidth = distance / minFocus;
			normalMinScreenHeight = normalMinScreenWidth / formatFactor;
			normalMaxScreenHeight = normalMaxScreenWidth / formatFactor;
//			alert(normalMinScreenWidth);
//			alert(normalMaxScreenWidth);
			$("#screenHeigthMin").html(Math.round(normalMinScreenHeight) + "cm ");
			$("#screenHeightMax").html(Math.round(normalMaxScreenHeight) + "cm ");
			$("#screenWidthMin").html(Math.round(normalMinScreenHeight*formatFactor) + "cm ");
			$("#screenWidthMax").html(Math.round(normalMaxScreenHeight*formatFactor) + "cm ");
			$("#screenDiagMin").html(Math.round(pytagoras(normalMinScreenHeight,normalMinScreenHeight*formatFactor)/2.54)+"\"");
			$("#screenDiagMax").html(Math.round(pytagoras(normalMaxScreenHeight,normalMaxScreenHeight*formatFactor)/2.54)+"\"");			
		}
		
		
		
		
		resizeScreen();
		//		$("#info").html(
//				"Width: " + Math.round(distance / maxFocus) + "cm - "
//						+ Math.round(distance / minFocus) + "cm Height: "
//						+ Math.round((distance / maxFocus) / formatFactor)
//						+ "cm - "
//						+ Math.round((distance / minFocus) / formatFactor)
//						+ " cm Diagonale: "++"cm ("+Math.round(pytagoras(distance / maxFocus,distance / maxFocus / formatFactor)/2.54)+"\") - "++"cm ("+Math.round(pytagoras(distance / minFocus,distance / minFocus / formatFactor)/2.54)+"\")");

	}
	var calcWithHeight = function() {
		if (defaultFormatFactor < formatFactor) {
			screenWidth = screenHeight * formatFactor;
			normalScreenWidth = screenHeight * formatFactor;
		} else {
			screenWidth = screenHeight * formatFactor;
			normalScreenWidth = screenHeight * defaultFormatFactor;
		}
		distance = screenWidth * focus;
		if (distance >= maxDistance){
			distance = maxDistance;
		}
		var tmpMinDist = normalScreenWidth * minFocus;
		var tmpMaxDist = normalScreenWidth * maxFocus;
		if (tmpMaxDist >= maxDistance){
			tmpMaxDist = maxDistance;
		}
		if (tmpMinDist <= minDistance){
			tmpMinDist = minDistance;
		}
		var tmpDist = Math.round(tmpMinDist) + "cm - "	+ Math.round(tmpMaxDist) + "cm ";
		if (Math.round(tmpMinDist) == Math.round(tmpMaxDist)){
			tmpDist = Math.round(tmpMaxDist) + "cm ";
		}
		$("#screenDiag").html(Math.round(pytagoras(screenWidth,screenHeight)/2.54)+"\"");
		$("#screenDistMin").html(Math.round(tmpMinDist) + "cm");
		$("#screenDistMax").html(Math.round(tmpMaxDist) + "cm");
//		$("#info").html(
//				"Dist: "+ tmpDist+"Diagonale: " + Math.round(pytagoras(screenWidth,screenHeight))+"cm ("+Math.round(pytagoras(screenWidth,screenHeight)/2.54)+"\")");
		setSlider("screenWidth", Math.round(screenWidth));
		setSlider("dist", Math.round(distance));
		resizeScreen();
	}

	// TODO calculate maximum dimensions and use this
	var resizeScreen = function() {
		screenMaxWidth = 260;
		beamerdifference = 45;
		beamerFactor = maxDistance / 45;
		screenFactor = maxScreenWidth / screenMaxWidth;
		$("#screen").css("width", screenWidth / screenFactor + "px");
		$("#screen").css("height", screenHeight / screenFactor + "px");
		$("#screen").css("left", (72+150)-((screenWidth / screenFactor)/2)+"px");
		$("#screen").css("top", (97+78)-((screenHeight / screenFactor)/2)+"px");
		
		$("#screenmin").css("width", (distance / maxFocus / screenFactor) + "px");
		$("#screenmin").css("height", ((distance / maxFocus) / formatFactor)/ screenFactor + "px");
		$("#screenmin").css("left", (72+150)-(((distance / maxFocus / screenFactor))/2)+"px");
		$("#screenmin").css("top", (97+78)-(((distance / maxFocus) / formatFactor)/ screenFactor/2)+"px");
		
		$("#screenmax").css("width", (distance / minFocus / screenFactor) + "px");
		$("#screenmax").css("height", ((distance / minFocus) / formatFactor)/ screenFactor + "px");
		//$("#screenmax").css("height", "600px");
		$("#screenmax").css("left", (72+150)-(((distance / minFocus / screenFactor))/2)+"px");
		$("#screenmax").css("top", (97+78)-(((distance / minFocus) / formatFactor)/ screenFactor/2)+"px");
		
		$("#beamer").css("left", 200+"px");
		$("#beamer").css("top", distance/beamerFactor+(250)+"px");
		
	}

}