var kartenCheck = document.createElement('canvas');
var isIE = window.navigator.systemLanguage?1:0;
var isType1 = document.namespaces?1:0;
var isType2 = kartenCheck.getContext?1:0; 

var grafikMapLoad = window.onload;
window.onload = function () { 
	if(grafikMapLoad) 
		grafikMapLoad(); 

		addGrafikMap(); 
}


function setOut(el,id,myCoords,myColor) {
	if(isType2) {
		var canvas = document.getElementById(id);
		ctx = canvas.getContext("2d");
		// ctx.clearRect(0,0,canvas.width,canvas.height);
	
		ctx.beginPath();
		// ctx.fillStyle="rgb(0,"+myColor+",0)";
		// ctx.fillStyle="rgb(130,109,65)";
		ctx.fillStyle="rgb(74,58,16)";
		ctx.strokeStyle="rgb("+myColor+",0,0)";
		var myCoords=myCoords.split(",")
		ctx.moveTo(parseInt(myCoords[0]),parseInt(myCoords[1])); 
		for(k=2; k<myCoords.length; k+=2){
			ctx.lineTo(parseInt(myCoords[k]),parseInt(myCoords[k+1]));
		} 
		ctx.closePath();
		ctx.fill();
		// ctx.stroke();
	} else if(isType1) {
		var p='';
		var t='';
		var myCoords=myCoords.split(",")
		for(k=2;k<myCoords.length;k+=2) {
			p += parseInt(myCoords[k])+','+parseInt(myCoords[k+1])+',';
		}

		t += '<v:shape strokeweight="1" filled="t" stroked="f" strokecolor="#00cc00" coordorigin="0,0" coordsize="'+canvas.width+','+canvas.height+'" path="m '+parseInt(myCoords[0])+','+parseInt(myCoords[1])+' l '+p+' x e" style="zoom:1;margin:0;padding:0;display:block;position:absolute;top:0px;left:0px;width:'+canvas.width+'px;height:'+canvas.height+'px;"><v:fill color="#cc0000" opacity="0.5" /></v:shape>'; 


		canvas.innerHTML = t;
	}
}

function setOver(el,id,myCoords,myColor) {
	var canvas = document.getElementById(id);
	if(isType2) {
		ctx = canvas.getContext("2d");
	
		ctx.beginPath();
		// ctx.fillStyle="rgb(0,"+myColor+",0)";
		ctx.fillStyle="rgb(153,0,0)";
		ctx.strokeStyle="rgb("+myColor+",0,0)";
		var myCoords=myCoords.split(",")
		ctx.moveTo(parseInt(myCoords[0]),parseInt(myCoords[1])); 
		for(k=2; k<myCoords.length; k+=2){
			ctx.lineTo(parseInt(myCoords[k]),parseInt(myCoords[k+1]));
		} 
		ctx.closePath();
		ctx.fill();
		// ctx.stroke();
	} else if(isType1) {
		var p='';
		var t='';
		var myCoords=myCoords.split(",")
		for(k=2;k<myCoords.length;k+=2) {
			p += parseInt(myCoords[k])+','+parseInt(myCoords[k+1])+',';
		}
		t += '<v:shape strokeweight="1" filled="t" stroked="f" strokecolor="#00cc00" coordorigin="0,0" coordsize="'+canvas.width+','+canvas.height+'" path="m '+parseInt(myCoords[0])+','+parseInt(myCoords[1])+' l '+p+' x e" style="zoom:1;margin:0;padding:0;display:block;position:absolute;top:0px;left:0px;width:'+canvas.width+'px;height:'+canvas.height+'px;"><v:fill color="#cc0000" opacity="0.5" /></v:shape>'; 
// alert('t='+t);
		canvas.innerHTML = t;
	}
}

function setStart(id,myCoords,myColor) {
	var canvas = document.getElementById(id);
	if(isType2) {
		ctx = canvas.getContext("2d");
	
		ctx.beginPath();
		// ctx.fillStyle="rgb(0,"+myColor+",0)";
		// ctx.fillStyle="rgb(130,109,65)";
		ctx.fillStyle="rgb(74,58,16)";
		ctx.strokeStyle="rgb("+myColor+",0,0)";
		var myCoords=myCoords.split(",")
		ctx.moveTo(parseInt(myCoords[0]),parseInt(myCoords[1])); 
		for(k=2; k<myCoords.length; k+=2){
			ctx.lineTo(parseInt(myCoords[k]),parseInt(myCoords[k+1]));
		} 
		ctx.closePath();
		ctx.fill();
		// ctx.stroke();

	} else if(isType1) {
		var p='';
		var t='';
		var myCoords=myCoords.split(",")
		for(k=2;k<myCoords.length;k+=2) {
			p += parseInt(myCoords[k])+','+parseInt(myCoords[k+1])+',';
		}

		t += '<v:shape strokeweight="1" filled="t" stroked="f" strokecolor="#00cc00" coordorigin="0,0" coordsize="'+canvas.width+','+canvas.height+'" path="m '+parseInt(myCoords[0])+','+parseInt(myCoords[1])+' l '+p+' x e" style="zoom:1;margin:0;padding:0;display:block;position:absolute;top:0px;left:0px;width:'+canvas.width+'px;height:'+canvas.height+'px;"><v:fill color="#cc0000" opacity="0.5" /></v:shape>'; 


		canvas.innerHTML = t;

	} else {
	}
}


function addGrafikMap() {

	// ---- Image mit Grafik Map ermitteln ----
	var myGrafikMapImages = getGrafikMapImages('mapper');

	// ---- Alle Image Maps bearbeiten  ---
	for(i=0; i<myGrafikMapImages.length; i++) {
		image = myGrafikMapImages[i]; 
		object = image.parentNode;
		if(image.id=='') {
			image.id = "grafikmap_"+i;
		}
		object.style.position = (object.style.position=='static' || object.style.position=='' ? 'relative': object.style.position);
		object.style.height = image.height+'px';
		object.style.width = image.width+'px';
		object.style.padding = 0+'px';
		object.style.MozUserSelect = "none";
		object.style.KhtmlUserSelect = "none"; 
		object.unselectable = "on";

		r = 0; n = 0; f = 0; b = '0000ff'; c = '000000'; o = 33;

		if(isType2) {
			canvas = document.createElement('canvas');
		}else if(isType1) {
			canvas = document.createElement(['<var style="zoom:1;overflow:hidden;display:block;width:'+image.width+'px;height:'+image.height+'px;padding:0;">'].join(''));
		}else {
			canvas = document.createElement('div');
		}

		canvas.id = image.id+'_canvas';
		classes = image.className.split(' '); 

		// newImageClasses = getGrafikImageClasses(classes,"mapper");

		// image.className = newImageClasses;

		mname = image.useMap.split("#"); mname = mname[1];

		mapid = document.getElementsByName(mname);


		// ----- canvas Attribute setzen -----
		canvas.style.height = image.height+'px';
		canvas.style.width = image.width+'px';
		canvas.height = image.height;
		canvas.width = image.width;
		canvas.left = 0; canvas.top = 0;
		canvas.style.position = 'absolute';
		canvas.style.left = 0+'px';
		canvas.style.top = 0+'px';
		canvas.fading = 0;

		// ctx = canvas.getContext("2d");


		// ----- Image Attribute setzen -----
		image.className = '';
		image.style.cssText = '';
		image.left = 0; image.top = 0;
		image.style.position = 'absolute';
		image.style.height = image.height+'px';
		image.style.width = image.width+'px';
		image.style.left = 0+'px';
		image.style.left = 0+'px';
		image.style.top = 0+'px';
		image.style.MozUserSelect = "none";
		image.style.KhtmlUserSelect = "none"; 
		image.unselectable = "on";

		// ---- Image Transparenz setzen -----
		if(isIE) {
			image.style.filter = "Alpha(opacity=70)";
		} else {
			image.style.opacity = 0.8;
  			image.style.MozOpacity = 0.8;
  			image.style.KhtmlOpacity = 0.8;
		}

		if(isType2 && r>0) {
			bgrnd = document.createElement('canvas');
		} else if(isType1 && r>0) {
			bgrnd = document.createElement(['<var style="zoom:1;overflow:hidden;display:block;width:'+image.width+'px;height:'+image.height+'px;padding:0;">'].join(''));
		} else {
			bgrnd = document.createElement('img'); bgrnd.src = image.src;
		}

		bgrnd.id = image.id+'_image';
		bgrnd.left = 0; bgrnd.top = 0;
		bgrnd.style.position = 'absolute';
		bgrnd.style.height = image.height+'px';
		bgrnd.style.width = image.width+'px';
		bgrnd.style.left = 0+'px';
		bgrnd.style.top = 0+'px';
		bgrnd.style.backgroundColor = '#00cc00';

		object.insertBefore(canvas,image);


		blind = document.createElement('div');
		blind.id = mname+'_blind';
		blind.className = "blind_area";
		blind.left = 0; blind.top = 0;
		blind.style.position = 'absolute';
		blind.style.height = image.height+'px';
		blind.style.width = image.width+'px';
		blind.style.left = 0+'px';
		blind.style.top = 0+'px';
		blind.innerHTML = " ";
		object.insertBefore(blind,image);

// alert('body.innerHTML='+document.getElementById('body').innerHTML);
		if(mapid.length>0) {

			// ----- Alle Areas einer Map auswerten ----
			for(j=0;j<mapid[0].areas.length;j++) {

				if(mapid[0].areas[j].shape.match(/(rect|poly|circle)/i)) {

					if(window.opera || mapid[0].areas[j].coords!='') {
						if(mapid[0].areas[j].id=='') {
							mapid[0].areas[j].id = mname+'_'+j;
						}

						// var myCoords=mapid[0].areas[j].coords.split(",")
						var myCoords=mapid[0].areas[j].coords;

						if(isType1 || isIE) {
							func = mapid[0].areas[j].onmouseover; 
							if(func!=null) {
								tmp=String(func); 
								func=tmp.substr(23,tmp.length-25);
							}
							mapid[0].areas[j].onmouseover = new Function('setOver(this,"'+canvas.id+'","'+myCoords+'","255");'+func); 

							func = mapid[0].areas[j].onmouseout; 
							if(func!=null) {
								tmp=String(func); 
								func=tmp.substr(23,tmp.length-25);
							}
							mapid[0].areas[j].onmouseout = new Function('setOut(this,"'+canvas.id+'","'+myCoords+'","120");'+func); 

						} else {
							func = mapid[0].areas[j].getAttribute("onmouseover");
							mapid[0].areas[j].setAttribute("onmouseover","setOver(this,'"+canvas.id+"','"+myCoords+"','255');"+func); 

							func = mapid[0].areas[j].getAttribute("onmouseout");
							mapid[0].areas[j].setAttribute("onmouseout","setOut(this,'"+canvas.id+"','"+myCoords+"','120');"+func); 
						}

						// if ((mapid[0].areas[j].id=='NW')||(mapid[0].areas[j].id=='BW'))
						setStart(canvas.id,myCoords,'120');

					}

				}
			}
		}


	}
}

function getGrafikMapImages(grafikMapClass) {

	var myGrafikMapImages=new Array(); 
	var myImages=document.getElementsByTagName('img'); 
	var myGrafikMapName='';
	var myGrafikMapId='';
	var myImage; 
	var myImageClassNames; 

	for(i=0; i<myImages.length; i++) {
		myImage = myImages[i]; 
		myImageClassNames = myImage.className.split(' ');

		for(k=0;k<myImageClassNames.length;k++) {
			if(myImageClassNames[k]==grafikMapClass) {
				myGrafikMapName = myImage.useMap.split("#");
				if((myGrafikMapName[1]!='') && (myGrafikMapName[1].length>=1)) {
					mapid=document.getElementsByName(myGrafikMapName[1]);
					if(mapid) {
						myGrafikMapImages.push(myImage); 
						break;
					}
				}
			}
		}
	}
	return myGrafikMapImages;
}

function getGrafikImageClasses(classes,string){
	var temp = '';
	for (var j=0;j<classes.length;j++) {
		if (classes[j] != string) {
			if (temp) {temp += ' '; }
			temp += classes[j];
		}
	}
	return temp;
}