var btyp = "gif";
	var active = "";
	
    var blkTargetName = new Array();
	var blkTargetLink = new Array();
	
	var redTargetName = new Array();
	var redTargetLink = new Array();
	
	/* 
	 * Prepares the navigation variables.
	 *
	 * @param lang				the language code (eg. "de", "en", ..)
	 * @param numNavItems	the number of main and footer navigation items
	 * @param blkArrows		the number of black arrows (Submenu-Items)
	 * @param redArrows		the number of red arrows (SubSubmenu-Items)
	 */
	function prepare(lang, imgPath, blkArrows, redArrows) {
		
		fEmpty = imgPath + "spacer.gif";
		fRedArrow = imgPath + "p_red.gif";
		fBlkArrow = imgPath + "p_black.gif";
		fBlkArrowDown = imgPath + "p_black_down.gif";
		
		var blkArrowName = "blkarrow";
		var redArrowName = "redarrow";
				
		for (i=1; i<=blkArrows; i++) {
			blkTargetName[i] = blkArrowName + i;
		}
				
		for (i=1; i<=blkArrows; i++) {
			blkTargetLink[i] = false;
		}
		
		for (i=1; i<=redArrows; i++) {
			redTargetName[i] = redArrowName + i;
		}
		
		for (i=1; i<=redArrows; i++) {
			redTargetLink[i] = false;
		}
	}
	
	/*
	 * showBlackArrow
	 *
	 * @param: int	the number of the arrow to show
	 */
	function showBlackArrow(nr) {
		if (checkBrowser()) {
			
			alert("showBlackArrow " + nr);
			
			for (i=1; i<=blkTargetName.length - 1; i++) {
				blkTargetLink[i] = false;
				ziel = blkTargetName[i];

				if (document.images[ziel].name != active) {
					document.images[ziel].src = fEmpty;
				}
			}
			
			ziel = blkTargetName[nr];
			document.images[ziel].src = fBlkArrow;
			alert(document.images[ziel].src);
		}
	}

	/*
	 * hideBlackArrow
	 *
	 * @param: int	the number of the arrow to hide
	 */	
	function hideBlackArrow(nr) {
		if (checkBrowser()) {	
			
			alert("hideBlackArrow " + nr);
					
			for (i=1; i<=blkTargetName.length - 1; i++) {
				blkTargetLink[i] = false;
				ziel = blkTargetName[i];
				
				if (document.images[ziel].name != active) {
					document.images[ziel].src = fEmpty;
				}
			}
		}
	}

	/*
	 * clickBlack
	 * 
	 * @param: String	black
	 * @param: boolean submenu
	 */
	function clickBlack(black, submenu) {
		if (checkBrowser()) {
			for (i=1; i<=blkTargetName.length - 1; i++) {
				blkTargetLink[i] = false;
				ziel = blkTargetName[i];
				document.images[ziel].src = fEmpty;
			}
			
			for (j=1; j<=redTargetName.length; j++) {
				redTargetLink[j] = false;
				ziel = redTargetName[j];
				document.images[ziel].src = fEmpty;
			}
			
			if (submenu) {
				document.images[black].src = fBlkArrowDown;
			} else { 
				document.images[black].src = fBlkArrow;
			}
			
			active = "";
		}
	}

	/*
	 * showRedArrow
	 *
	 * @param: int	the number of the arrow to show
	 */
	function showRedArrow(nr) {
		if (checkBrowser()) {
			for (i=1; i<=redTargetName.length - 1; i++) {
				redTargetLink[i] = false;
				ziel = redTargetName[i];
				
				if ((document.images[ziel].name != "pfeils") && (document.images[ziel].name != active)) {
					document.images[ziel].src = fEmpty;
				}
			}
			
			ziel = redTargetName[nr];
			document.images[ziel].src = fRedArrow;
			document.pfeils.src = fBlkArrowDown;
		}
	}

	/*
	 * hideRedArrow
	 *
	 * @param: int	the number of the arrow to hide
	 */	
	function hideRedArrow(nr) {
		if (checkBrowser()) {
			for (i=1; i<=redTargetName.length - 1; i++) {
				redTargetLink[i] = false;
				ziel = redTargetName[i];
				
				if (document.images[ziel].name != "pfeils" && document.images[ziel].name != active) {
					document.images[ziel].src = fEmpty;
				}
			}
		}
	}

	/*
	 * clickRed
	 *
	 * @param: int	the number of the arrow which has been activated
	 */
	function clickRed(nr) {
		if (checkBrowser()) {
			for (i=1; i<=redTargetName.length - 1; i++) {
				redTargetLink[i] = false;
				ziel = redTargetName[i];
	
				if (document.images[ziel].name != "pfeils") {
					document.images[ziel].src = fEmpty;
				}
			}
			
			ziel = redTargetName[nr];
			document.images[ziel].src = fRedArrow;
			
			active = ziel;
		}
	}
		
	/*
	 * Checks if browser is supported
	 * 
	 * @return true, if supported
	 */
	function checkBrowser() {
		if ( (navigator.appName == 'Microsoft Internet Explorer' && navigator.appVersion.substring(0,1) > '3')
      || (navigator.appName == 'Netscape' && navigator.appVersion.substring(0,1) >= '3')) {
			return true;
		} else {
			return false;
		}
	}
		
	/*
	 * Checks if a flash player is installed.
	 */
	function checkFlash() {
		var hasFlash = false;
		
		if (checkBrowser()) {
			if (navigator.mimeTypes && navigator.mimeTypes["application/x-shockwave-flash"]
				&& navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin
				&& navigator.plugins && navigator.plugins["Shockwave Flash"])
			{
				hasFlash = true;
			} else if (navigator.userAgent && navigator.userAgent.indexOf("MSIE") != -1 && (navigator.userAgent.indexOf('Win') != -1)) {
				try {
					// version will be set for 4.X or 5.X player
					var axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.3");
					var version = axo.GetVariable("$version");
					if (version != -1 ) {
						hasFlash = true;
					}
				} catch (e) {
				}
			}
		}
		
		return hasFlash;
	}
	
	/*
	 * Checks for flash plugin and depending on this returns the content.
	 *
	 * @param path		the relative path to the flash content
	 * @param alt			the relative path to the alternative content
	 * @param clip		the name of the clip
	 * @return the (animation or alternative) content.
	 */
	function getAnimation(clip, alt, height) {
		if (checkFlash()) {
			content  = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"';
			content += ' width="550" height="200" id="' + clip + '">';
			//content += ' width="550" id="' + clip + '">';
			content += '<param name="movie" value="' + clip + '">';
			content += '<param name="quality" value="high">';
			content += '<param name="bgcolor" value="#ffffff">';
			content += '<param name="wmode" value="transparent">';
			content += '<embed src="' + clip + '" quality="high" bgcolor="#ffffff" swLiveConnect="false"';
			content += ' width="550" height="' + height + '" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">';
			//content += ' width="550" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">';
			content += '</embed>';
			content += '</object>';
		} else {
			content  = '<img src="' + alt +  '" width="550" height="' + height + '" border="0" alt="">';
		}

		return content;
	}
	
	function getFlashAnimation(clip, alt, width, height) {
		
		if (checkFlash()) {
			content  = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"';
			content += ' width="'+width+'" height="'+height+'" id="' + clip + '">';
			//content += ' width="550" id="' + clip + '">';
			content += '<param name="movie" value="' + clip + '">';
			content += '<param name="quality" value="high">';
			content += '<param name="bgcolor" value="#ffffff">';
			content += '<param name="wmode" value="transparent">';
			content += '<embed wmode="transparent" src="' + clip + '" quality="high" bgcolor="#ffffff" swLiveConnect="false"';
			content += ' width="' + width + '" height="' + height + '" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">';
			//content += ' width="550" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">';
			content += '</embed>';
			content += '</object>';
		} else {
			content  = '<img src="' + alt +  '" width="' + width + '" height="' + height + '" border="0" alt="">';
		}

		return content;
	}
	
	
function openEngineWindow(lang) {
	var url = "/live_deutz_products/html/display:init?intro=1&all=1&dep=com&lang=" + lang;
	var width = 1000;
	var height = 620;
	var left = (screen.width - width) / 2;
	var top = (screen.height - height) / 2;

    var popUp = window.open(url, 'DEUTZ', 'width=' + width + ', height=' + height + ', left=' + left + ',top=' + top + ', '
																			+ 'resizable=no, scrollbars=no, toolbar=no, status=no, menubar=no, location=no');

    popUp.focus();
}

function openEngine(args) {
	var url = "/live_deutz_products/html/display:init?" + args;
	var width = 1000;
	var height = 620;
	var left = (screen.width - width) / 2;
	var top = (screen.height - height) / 2;

    var popUp = window.open(url, 'DEUTZ', 'width=' + width + ', height=' + height + ', left=' + left + ',top=' + top + ', '
																			+ 'resizable=no, scrollbars=no, toolbar=no, status=no, menubar=no, location=no');

    popUp.focus();
}

function openKonfiguratorWindow(lang) {
	
	var width = 1000;
	var height = 620;
	var left = (screen.width - width) / 2;
	var top = (screen.height - height) / 2;
	//var url = "/live_dcs_genset/html/layouts:konfigurator?intro=1&lang=" + lang
	// add changelang Attribute to change content to the right language //
	var url = "/live_dcs_genset/html/layouts:konfigurator/~changelanguage:"+lang+"?intro=1&lang=" + lang
  var konfigWin = window.open(url, 'DCS', 'width=' + width + ', height=' + height + ', left=' + left + ',top=' + top + ', ' + 'resizable=no, scrollbars=no, toolbar=no, status=no, menubar=no, location=no');

  konfigWin.focus();
}

/* functions for the new homepage and the navigation by GB*/

function showMenuLevel1(e,id){	
	var el = Ext.get('sub_'+id); // the element (UL) to show	
	var parentEl = Ext.get('level1_'+id); // the parent LI	
	parentEl.addClass('active');
	var leftCornerParent = parentEl.getLeft(); // get the left position from the parent LI 
	var widthEl = el.getWidth(); // get the width of the UL
	var page = Ext.get('page'); 
	var pageRightCorner = page.getRight(); // the right corner of element with id 'page'
	var liRightCorner = parentEl.child('.l2').getRight(); // the right corner of the parent Element	
	
	var elFoo= Ext.query("ul.sub_"+id+" li"); // get an area with all child elements (LI)	
	for(var i=0; i< elFoo.length; i++){ // set the width for each LI Element because the IE need this
		var cLi = Ext.get(elFoo[i])
		cLi.setWidth(widthEl);
	}
	
	if((widthEl + leftCornerParent) > pageRightCorner){ // align to the left if there is not enough space
		el.alignTo(parentEl,'tr-tr', [0, 19]);
		el.alignTo(parentEl,'tr-tr', [0, 19]);
	}
	else {
		el.alignTo(parentEl, 'tl', [0, 19]); // align to the right
		el.alignTo(parentEl, 'tl', [0, 19]); // align to the right
	}		
	
	el.show();

}


function hideMenuLevel1(e,id){
	var el = Ext.get('sub_'+id);
	var parentEl = Ext.get('level1_'+id);
	
	if (!e) var e = window.event;
	var toElement = e.relatedTarget || e.toElement || false; // where the mouse go to
	if (parentEl.contains(toElement) || parentEl == toElement) { // if the mouse is inside the parent element do nothing (to avoid flickering)
		return;
	}
	parentEl.removeClass('active');
	el.hide();
}

function showMenuLevel2(e,id){;
	if (this.menu2Show) {	
		//return;
	}
	var parentEl = Ext.get('level2_'+id);
	var el = Ext.get('sub2_'+id); // the element to show
	var parentLI = el.parent().child('.level2');
	parentLI.addClass('selected');
	var page = Ext.get('page'); 
	var rightCornerParent = parentEl.getRight();
	if(el){
		var widthEl = el.getWidth();
		
		var elFoo= Ext.query("ul.sub2_"+id+" li"); // get an area with all child elements (LI)	
		//alert(elFoo.length);
		for(var i=0; i< elFoo.length; i++){ // set the width for each LI Element because the IE need this
			var cLi = Ext.get(elFoo[i]);
			cLi.setWidth(widthEl);
		}
		
		var pageRightCorner = page.getRight(); // the right corner of element with id 'page'
		
		if((widthEl + rightCornerParent) > pageRightCorner){			
			el.alignTo(parentEl,'tr-tl', [5, 0]);
			el.alignTo(parentEl,'tr-tl', [5, 0]);
		}
		else {
			el.alignTo(parentEl,'tl-tr',[-5,0]);
			el.alignTo(parentEl,'tl-tr',[-5,0]);
		}
		
		el.show();
		this.menu2Show = true;
	}
	
}

function hideMenuLevel2(e,id){
	var parentEl = Ext.get('level2_'+id);
	var el = Ext.get('sub2_'+id); // the element to show
	var parentLI = el.parent().child('.level2');
	parentLI.removeClass('selected');
	if (!e) var e = window.event;
	var toElement = e.relatedTarget || e.toElement || false; // where the mouse go to
	if (parentEl.contains(toElement) || parentEl == toElement) { // if the mouse is inside the parent element do nothing (to avoid flickering)
		//console.log("Level 2hide ignoriert");
		return;
	}
	if(el){
		//console.log("Level 2 hide gefeuert");
		el.hide();
		this.menu2Show = false;
	}
}

function showLangNav(e,id) {
	var el = Ext.get('langnav'); // the element to show
	var parentEl = Ext.get('langnavparent'); // the parent LI	
	el.alignTo(parentEl,'tl',[0, 17]); // align to the right
	el.alignTo(parentEl,'tl',[0, 17]); // align to the right	
	el.show();
}

function hideLangNav(e,id){
	var el = Ext.get('langnav'); // the element to show
	var parentEl = Ext.get('langnavparent'); // the parent LI
	if (!e) var e = window.event;
	var toElement = e.relatedTarget || e.toElement || false; // where the mouse go to
	if (parentEl.contains(toElement) || parentEl == toElement) { // if the mouse is inside the parent element do nothing (to avoid flickering)
		//console.log("Level 2hide ignoriert");
		return;
	}
	el.hide();	
}

function showNav(e,id,parent,pclass) {
	var el = Ext.get(id); // the element to show
	var parentEl = Ext.get(parent); // the parent Element	
	var widthEl = el.getWidth(); // get the width of the UL
	var elFoo= Ext.query("ul."+pclass+" li"); // get an area with all child elements (LI)	
	for(var i=0; i< elFoo.length; i++){ // set the width for each LI Element because the IE need this
		var cLi = Ext.get(elFoo[i])
		cLi.setWidth(widthEl);
	}
	el.alignTo(parentEl,'tl-tl', [-20, 15]);
	el.alignTo(parentEl,'tl-tl', [-20, 15]);
	//el.alignTo(parentEl); // align to the right
	//el.alignTo(parentEl); // align to the right		
	el.show();
}

function hideNav(e,id,parent){
	var el = Ext.get(id); // the element to show
	var parentEl = Ext.get(parent); // the parent Element	
	if (!e) var e = window.event;
	var toElement = e.relatedTarget || e.toElement || false; // where the mouse go to
	if (parentEl.contains(toElement) || parentEl == toElement) { // if the mouse is inside the parent element do nothing (to avoid flickering)
		//console.log("Level 2hide ignoriert");
		//alert("Level 2hide ignoriert");
		return;
	}
	el.hide();	
}

function swapWorldMap(id,imgurl) {
	document.getElementById(id).src=imgurl;
}

/**********************************************/
/*               page popup                   */
/**********************************************/


Page = function(){
	
	var maskel;
	var closeEl;
	
	function keyNavAction(ev) {
        var keyCode = ev.getKey();
        if(
            keyCode == 88 || // x
            keyCode == 67 || // c
            keyCode == 27
        ){
            closePage();
        }
	}
	
	function closePage(){
		closeEl.remove();
		var el=Ext.get("modal-page");	
		el.hide({
			callback: function(){
				el.removeAllListeners();
				Ext.fly(document).removeAllListeners();
				maskBody(false);
				el.remove();
			}
		})
	}
	
	function maskBody(mask){
		if(!maskel){
			// create one
			maskel = Ext.getBody().createChild({tag:"div"});
			maskel.setStyle({
				position: "absolute",
				zIndex: 100,
				opacity: .7,
				top: Ext.getBody().getScroll().top+"px",
				left: 0,
				width: Ext.lib.Dom.getViewportWidth()+"px",
				height: Ext.lib.Dom.getViewportHeight()+"px",
				backgroundColor: "black",
				overflow: "hidden"
			})
		}
		
		if(mask){
			Ext.getBody().setStyle("overflow", "hidden");
		}
		else {
			Ext.getBody().setStyle("overflow", "auto")
			maskel.remove();
			maskel=null;
		}
	}
	
	function showPage(url, config){
		
		var config = config||{};
		 
		maskBody(true);
		
		var el=Ext.get("modal-page");
		if(el==null){
			// create div to show page in:
			el = Ext.getBody().createChild({tag:"div", id:"modal-page"});
			el.setStyle({			
				position: "absolute",
				top: "-10000px",
				left: "-10000px",
				padding: "0px",
				backgroundColor: "white",
				color: "black",
				border: "none",
				overflow: "hidden"
			});
		}
		el.hide();
		el.setStyle("zIndex", 101);

		el.setHeight(200)
		el.setWidth(200);

		//allign element:		
		el.setLeft((maskel.getWidth()-200)/2);
		el.setTop(maskel.getTop() + ((maskel.getHeight()-200)/2));
		
		el.show();		
				
		var t = new Ext.Template(
				'<div class="loading">loading ...</div>',				
				'<div class="page-wrap" style="display:none;position:abslolute">',
					'<div id="page-content" style="overflow:none;background-color: white">content goes here ...</div>',
			    '</div>'
			);
		t.append(el.dom, {title: config.title||""});

		// load content:
		var contentEl = el.child("#page-content");
		WGA.ajax.request("GET", url, null, function(xmlHttpReq){
		
		    // IE does not recognize the first script tag by getElementsByTagName
		    // if there is no html:tag with content in front
		    // so add a none displayed span-tag in front of the pasted code
			var html = "<span id='ie-ajax-dummy' style='display:none'>ajax</span>" + xmlHttpReq.responseText 
			contentEl.update(html)
			
			var divTag = contentEl.dom;
			
		    // evaluate pasted javascript
		    var scripts = divTag.getElementsByTagName("script");
			if(WGA.isIE){
			    for (var i = 0; i < scripts.length; i++) {
			    	var script = scripts[i].text;
					WGA.ajax.executeScriptElement(script);
				}
			}
			else{
				var totalscripts="";
			    for (var i = 0; i < scripts.length; i++) {
					var script = scripts[i].innerHTML;
					totalscripts += "\n"+script;
				}
				window.setTimeout(totalscripts, 10);
			}
			Ext.fly("ie-ajax-dummy").remove();
	
			var padding = config.padding||[50,50];
			var w = Ext.lib.Dom.getViewportWidth() - padding[0]*2;
			var h = Ext.lib.Dom.getViewportHeight() - padding[1]-125;
			var x = padding[0];
			var y = 125;

			if(config.width && w>config.width){
				w = config.width;
				x = (Ext.lib.Dom.getViewportWidth()-w)/2
			}
			
			
			if(config.height){
				h = config.height;
				y = 100 // (Ext.lib.Dom.getViewportHeight()-h)/2;
			}
			

	
			el.shift({
				x: x,
				width: w
			}).shift({
				y: y,
				height: h,
				callback: function(){
					el.child(".loading").remove();
					var contentEl = el.child("#page-content");
					contentEl.setHeight(h-10); //hier war 30
					el.child(".page-wrap").show(true);
					
					closeEl = Ext.getBody().createChild({tag:"div", id:"close-page"});
					closeEl.position("absolute", 102, el.getX()+el.getWidth()-10, el.getY()-10);					
					closeEl.on("click", function(ev){
						closePage();
						ev.stopEvent();
					})
					
				}
			});
			
			
		})

		Ext.fly(document).on('keydown', keyNavAction);
		
	}
	

	return{
		show: showPage,
		close: closePage
	}
	
}()