var qsParam = new Array();
	
	/* DHTML micro API */
	function getObj(name) {
		if (document.getElementById) {
			this.obj = document.getElementById(name);
			this.style = document.getElementById(name).style;
		} else if (document.all) {
			this.obj = document.all[name];
			this.style = document.all[name].style;
		} else if (document.layers) {
			this.obj = document.layers[name];
			this.style = document.layers[name];
		}
	}
		
	// --
	
	var selections = new Array(4);
	selections[1] = new Array();
	selections[2] = new Array();
	selections[3] = new Array();
	selections[1][0] = true;
		
	/* Sets the selection */
	function init() {
		getQueryString(); // substring the query

		if (qsParam['segments'] != null && qsParam['segments'].length > 0) {
			for (i=0; i<=qsParam['segments'].length; i++) {
				if (qsParam['segments'][i] != null && qsParam['segments'][i] != "") {
					setSelect(1, qsParam['segments'][i], false);
				}
			}
			
			if (qsParam['power'] != null) {
				for (j=0; j<=qsParam['power'].length; j++) {
					if (qsParam['power'][j] != null && qsParam['power'][j] != "") {
						setSelect(2, qsParam['power'][j], false);
					}
				}
			}
			
			if (qsParam['cooling'] != null) {
				for (k=0; k<=qsParam['cooling'].length; k++) {
					if (qsParam['cooling'][k] != null && qsParam['cooling'][k] != "") {
						setSelect(3, qsParam['cooling'][k], false);
					}
				}
			}
		} else {
			window.location.href = 'overview.html?segments=0';
		}
	}
		
	/* Saves all query params to an array */
	function getQueryString() {
		var query = window.location.search.substring(1);
		var params = query.split('&');
		
		for (var i=0; i<params.length; i++) {
			var pos = params[i].indexOf('=');
			if (pos > 0) {
				var key = params[i].substring(0, pos);
				var arg = params[i].substring(pos + 1);
				var val = arg.split(',');
				qsParam[key] = val;
			}
		}
	}
		
	
	/* Submits the selection */
	function show(url) {
		var referrer = window.location.href;
		var href = url;
		href += (href.indexOf('?') == -1) ? '?' : '&';

		var cnt=0;
		href += 'segments=';
		for (var i=0; i<=selections[1].length; i++) {
			if (selections[1][i]) {
				href += ((cnt > 0) ? "," + i : "" + i) ;
				cnt++;
			}
		}
		
		cnt=0;
		href += '&power=';
		for (var j=0; j<=selections[2].length; j++) {
			if (selections[2][j]) {
				href += ((cnt > 0) ? "," + j : "" + j) ;
				cnt++;
			}
		}
		
		cnt=0;
		href += '&cooling=';
		for (var k=0; k<=selections[3].length; k++) {
			if (selections[3][k]) {
				href += ((cnt > 0) ? "," + k : "" + k) ;
				cnt++;
			}
		}
		
		if (url.indexOf('detail.html') > -1 && referrer.indexOf('overview.html') > -1) {
			href += "&referrer=overview";
		}

		window.location.href = href;
		return;
	}
	
	// --
		
	var imgMarked = "images/selection/marked.gif";
	var imgUnmarked = "images/selection/unmarked.gif";
	
	/* Sets a specific selection */
	function setSelect(i, j, ff) {		
		if (i == 1 && j == 0) {
			// Reset all segment selections
			resetSelect();
			// Segment 'All' has to be marked
			selections[1][0] = true;
			document.images["option10"].src = imgMarked;
		} else {		
			if (!selections[i][j]) {
				// Select segment
				selections[i][j] = true;
				document.images["option" + i + j].src = imgMarked;
			} else {
				// Deselect segment
				selections[i][j] = false;
				document.images["option" + i + j].src = imgUnmarked;
			}
			
			if (i == 1) {
				// Segment 'All' has to be demarked
				selections[1][0] = false;
				document.images["option10"].src = imgUnmarked;
				
				// deactivate all overview images
				for (var p=1; p<=5; p++) {
					for (var q=1; q<=24; q++) {
						if (document.images["o" + p + q] != null) {
							document.images["o" + p + q].src = (document.images["o" + p + q].src).replace("_a.gif", "_b.gif");
						} else {
							break;
						}
					}
				}
				
				// activate all visible images
				for (var e in selections[1]) {
					for (var x=1; x<=24; x++) {
						if (e != 0 && document.images["o" + e + x] != null) {
							if (selections[1][e]) {
								document.images["o" + e + x].src = (document.images["o" + e + x].src).replace("_b.gif", "_a.gif");
							}
						} else {
							break;
						}
					}
				}
			
				var isSet = false;
				for (var d in selections[1]) {
					if (selections[1][d] == true) {
						isSet = true;
						break;
					}
				}
				
				if (!isSet) {
					setSelect(1, 0); // at least "all" has to be set
				}
			}
		}
		
		if (ff) {
			show('overview.html');
		}
	}
	
	/* Reset selection */
	function resetSelect() {
		for (var i in selections) {			
			for (var j in selections[i]) {
				selections[i][j] = false;
				document.images["option" + i + j].src = imgUnmarked;
			}
		}
		
		for (var k=1; k<=5; k++) {
			for (var x=1; x<=24; x++) {
				if (document.images["o" + k + x] != null) {
					document.images["o" + k + x].src = (document.images["o" + k + x].src).replace("_b.gif", "_a.gif");
				} else {
					break;
				}
			}
		}
	}

	/* 
	 * Sets the header image of the selection page.
	 * This method is only neccessary for the DEUTZ products prototype!
	 */
	function setHeader() {
		var divESHeadline = new getObj('divESHeadline');
		var pathToImg = "images/selection/header/";

		if (qsParam['segments'] == null) {
			return;
		}

		if (qsParam['segments'].length > 1) {
			// set the header image depending on the segment
			document.images["selectionHeader"].src =  pathToImg + "selectionHeader0.jpg"
		} else {
			// set the header image depending on the segment
			document.images["selectionHeader"].src =  pathToImg + "selectionHeader" + qsParam['segments'][0] + ".jpg"
		}

		if (qsParam['engine'] != null) {
			// Sets the headline text depending on the engine. 
			divESHeadline.obj.innerHTML = "<h2>D914</h2><h3>Der Baumaschinen-Motor</h3><h3>42,7-129,9 kW / 57.3 ? 174.2 hp</h3>";
			divESHeadline.style.textAlign = "right";
			divESHeadline.style.top = '90px';
			divESHeadline.style.left = '600px';
			divESHeadline.style.visibility = 'visible';
		} else {
			if (qsParam['segments'].length == 1) {
				// Sets the headline text depending on the segment. 
				switch (parseInt(qsParam['segments'][0])) {
					case 1: divESHeadline.obj.innerHTML = "<h2>Mobile Arbeitsmaschinen</h2>";	break;
					case 2: divESHeadline.obj.innerHTML = "<h2>Gen Sets</h2>"; break;
					case 3: divESHeadline.obj.innerHTML = "<h2>Landtechnik</h2>";	break;
					case 4: divESHeadline.obj.innerHTML = "<h2>Nutzfahrzeuge</h2>";	break;
					case 5: divESHeadline.obj.innerHTML = "<h2>Sonstige</h2>";	break;
					default: divESHeadline.obj.innerHTML = ""; break;
				}
				
				divESHeadline.style.visibility = 'visible';
			} else {
				divESHeadline.style.visibility = 'hidden';
			}
		}
		
		if (qsParam['referrer'] != null && qsParam['referrer'] == "overview") {
			document.images["btnBackToSelection"].src = "images/selection/backToSelectionDisabled.gif";
		}
	}
	
	// -- 
	
	var e, mouseX, mouseY;
	
	var pageWidth = 1000;
	var pageHeigth = 620;
	
	var ttWidth = 130;
	var ttHeigth = 80;
	
	// Activate mouse listener
	if (document.layers) { // < Netscape 6
		document.captureEvents(Event.MOUSEMOVE);
		document.onmousemove = getMouseXY;
	} else if (document.all || document.getElementById) { // Internet Explorer and Netscape 6
		document.onmousemove = getMouseXY;
	}
	
	/* Gets the current mouse X/Y position. */
	function getMouseXY(e) {
		var isIE = (document.all) ? true : false;
		var buffer = 20;
		
		if (!e) {
			e = window.event;
		}

		if (e.pageY && e.pageX) {   // Grab the x-y pos.s if browser is < Netscape 6
			mouseY = e.pageY - buffer;
			mouseX = e.pageX;
		} else {    // Opera, Firefox
			mouseY = e.clientY - buffer;
			mouseX = e.clientX;
		}

		// Catch possible negative values in NS4
		if (mouseX < 0) { mouseX = 0; }
		if (mouseY < 0) { mouseY = 0; }
		
		var maxX = pageWidth - ttWidth; 	// layer width  - tooltip width
		var maxY = pageHeigth - ttHeigth; // layer height - tooltip height
		
		if (mouseX > maxX) { // no overflow
			mouseX = maxX - buffer;
		}
		
		if (mouseY > maxY) { // no overflow
			mouseY = maxY - buffer;
		}
	}
	
	/* Shows the tooltip window. */
	function showTooltip(id) {      
		var tooltip = new getObj('tooltip');
		
		/*
		 * Get specification data about this engine via Ajax. This has to be done by content provider.
		 * Sample format:
		 * <h1>TCD 2014</h1>
		 * 4/6 Zylinder<br>
		 * 220-580 kW, 252-598 hp<br>
		 * wassergek&uuml;hlt 
		 */
		tooltip.obj.innerHTML = "Get specification data about this engine via Ajax. This has to be done by content provider.";
		
		// Set tooltip to mouseposition			
		tooltip.style.top = parseInt(mouseY) + "px";
		tooltip.style.left = parseInt(mouseX) + "px";
		tooltip.style.visibility = 'visible';
	}
	
	function hideTooltip() {
		mouseOutTimer = window.setTimeout(function() {
				var tooltip = new getObj("tooltip");
				tooltip.style.display = 'none';
			}, 500
		);
	}