/*******************************************************************************
* Javascript für twGmap07Infofenster - version01
******************************************************************************/

var gmapId = "twGmap";  // id des GoogleMap-div's im html-code
var lat    = 52.518926353457225;  // Breitengrad (Latitude) z.B: 51.041
var lon    = 13.41503620147705;  // Längengrad (Longitude) z.B: 13.748
var zoom   = 13;        // Zoom-Wert von 1 bis ca 17 (nicht in "")(1=ganzeWelt)
var gdir;
var geocoder = null;
var addressMarker;
var map;
var start = "Großbeerenstrasse 58,10965,Berlin";
var target = "Cuvrystrasse 1, 10997, Berlin";
var showRoute = false;
var twGmapInfofenster01;
var baseIcon = new GIcon(G_DEFAULT_ICON);
var from = "from: ";
var lang = 1;
var langCode = "de_DE";
var pin = false;
//baseIcon.shadow = "";
baseIcon.iconSize = new GSize(34, 49);
//baseIcon.shadowSize = new GSize(28, 37);
baseIcon.iconAnchor = new GPoint(9, 49);
baseIcon.infoWindowAnchor = new GPoint(9, 1);
//baseIcon.imageMap=[13,29,6,17,10,8,18,7,24,9,29,14,28,23,24,29];
var cityID = 1;

function setCityID(id) {
	cityID = 1;
	if (id > 0) {
		cityID = id;
	}
}

function setOwnPin(p){
	pin = p;
}

function setLanLot(paramLat,paramLon){
	lat = paramLat;
	lon = paramLon
}

function setLang(la){ 
	lang = la;
	if (lang == 1){
		langCode = "de_DE";
	}
	else{
		langCode = "en_EN";
	}
}

function setRouteStart(inputLocate){
	from +=inputLocate;
	showRoute = true;
}

function setRouteTarget(routeTarget,to){
	from += " to: "+routeTarget;
	if(to){
		from += " to: "
	}
}

function setRoute(status){
	showRoute = status;
}

function setDir(dirX,last){
	showRoute = true;
	from += " "+dirX+" ";
	if (last){
		from += " to:";
	}
}

function setMapCenter(x,y){
	lat = x;
	lon = y;
}

function setZoom(z){
	zoom = z;
}

/**
* Prüft auf kompatiblen Browser und vorhandene Variablen und ruft die
* Funktion auf, die die GoogleMap erstellt.
*/
function twGmapLoad() {
	if (GBrowserIsCompatible()) {
		// die Google Map (twGmap)
		if (!document.getElementById(gmapId)) {
			alert("Fehler: die Google Map mit der id "+ gmapId+ " konnte nicht auf dieser Webseite gefunden werden!");
			return false;
		} else {
			if (lat=="" || isNaN(lat)) {
				lat = 52.300071;
				alert("Fehler: Der Breitengrad(lat) wurde im Skript nicht korrekt eingetragen!\nEin Defaultwert wird deshalb benutzt!");
			}
			if (lon=="" || isNaN(lon)) {
				lon = 13.262733
				alert("Fehler: Der Längengrad(lon) wurde im Skript nicht korrekt eingetragen!\nEin Defaultwert wird deshalb benutzt!");
			}
			if (typeof zoom == "undefined") {
				zoom = 13;
				alert("Fehler: Die Zoomstufe wurde im Skript nicht korrekt eingetragen!\nEin Defaultwert wird deshalb benutzt!");
			}
			if(document.cookie){
				a = document.cookie;
				var arrayCookie = a.split(";");
				for(i=0;i<arrayCookie.length;i++){
					tmp = arrayCookie[i];
					cookieZoomName = tmp.substr(0,tmp.search('='));
					cookieZoomWert = tmp.substr(tmp.search('=')+1);
					
					cookieZoomName = cookieZoomName.basicTrim();
					cookieZoomWert = cookieZoomWert.basicTrim();
					
					if (cookieZoomName == 'cookieZoom'+cityID){
						cookieZoomWert = parseInt(cookieZoomWert);
						zoom = cookieZoomWert;
					}
					if (cookieZoomName == 'cookieLat'+cityID){
						//cookieZoomWert = parseInt(cookieZoomWert);
						lat = cookieZoomWert;
					}
					if (cookieZoomName == 'cookieLon'+cityID){
						//cookieZoomWert = parseInt(cookieZoomWert);
						lon = cookieZoomWert;
					}										
				}
			}
			machTwGmap(gmapId, lat, lon, zoom);
		}
	}
}

String.prototype.basicTrim = function () {
return (this.replace(/\s+$/,"").replace(/^\s+/,""));
};

/**
* Erstellt die GoogleMap in dem <div>-Bereich mit der übergebenen id
* @param {Object} id   -im div-Bereich mit dieser id wird die Map dargestellt
* @param {Object} lat  -Breitengrad
* @param {Object} lon  -Längengrad
* @param {Object} zoom -Zoomstufe 1 bis 17 (ganze Welt bis kleiner Ausschnitt)
*/
function machTwGmap(id, lat, lon, zoom) {
	map = new GMap2(document.getElementById(id));
	map.setCenter(new GLatLng(lat, lon), zoom, G_NORMAL_MAP);
	var extLargeMapControl = new ExtLargeMapControl();
	map.addControl(extLargeMapControl);

	if (showRoute){
		gdir = new GDirections(map, document.getElementById("directions"),{getPolyline:true});
		GEvent.addListener(gdir, "load", onGDirectionsLoad);
		GEvent.addListener(gdir, "error", handleErrors);
		setDirections(start, target, langCode);
	}

	// die Map (für das div mit der id="...")
	//var map = new GMap2(document.getElementById(id));
	// mit Zoom (auch noch: GSmallMapControl, GLargeMapControl, GSmallZoomControl, GScaleControl)
	//map.addControl(new GLargeMapControl());
	// mit Typ-Auswahl (auch noch: GMapTypeControl, GHierarchicalMapTypeControl, GOverviewMapControl)
	//map.addControl(new GMapTypeControl());
	// ((Breitengrad, Längengrad), Zoomstufe, G_NORMAL_MAP/G_SATELLITE_MAP/G_HYBRID_MAP)

	// Marker setzen mit eigener Marker-Funktion
	//map = setTwMarkers(map);
}

function setDirections(fromAddress, toAddress, locale) {
	//if (showRoute){
	//alert(from);
	//from = "from: " + fromAddress + " to: " + toAddress;
	//alert(from);
	//from = "from: 52.526698,13.398331 to: 52.526749,13.40946";
	gdir.load(from,{"locale": locale});
	//}
}

function replacePolyline() {

	// Original Polyline verstecken
	gdir.getPolyline().hide();
	km = Math.round(gdir.getDistance().meters/1000);
	document.getElementById('mapDistance').innerHTML = km;

	var points = [];
	var poly = gdir.getPolyline();
	for (var i = 0; i < poly.getVertexCount(); i++) {
		points[i] = poly.getVertex(i);
		if (gdir.getMarker(i)){
			window.setTimeout("gdir.getMarker("+i+").hide();", 200);
		}
	}
	var p = new GPolyline(points, gdir.color, 5, 0.5);
	if (pin){
		machTwMarker(points[0].lng(),points[0].lat(),'','',99);
	}
	zoomAndMove(p.getBounds());
	map.addOverlay(p);
}

function zoomAndMove(b){

	var clat = (b.getNorthEast().lat() + b.getSouthWest().lat()) /2;
	var clng = (b.getNorthEast().lng() + b.getSouthWest().lng()) /2;
	map.setCenter(new GLatLng(clat,clng),map.getBoundsZoomLevel(b));

}

function onGDirectionsLoad(){
	//if (showRoute){
	replacePolyline();
	setTimeout('customPanel("twGmap",gdir,document.getElementById("path"))', 1);
	//}
}


/**
* Erstellt alle Marker für die übergebene Google Map.
* (Ruft intern für jeden Marker eine eigene Funktion auf)
* @param {Object} map

function setTwMarkers(map) {
var marker01 = machTwMarker01();
var marker02 = machTwMarker01();
map.addOverlay(marker01);
//map.addOverlay(marker02);
// (map, bild, bildgröße, Größe innere Area im Bild, links-oben innere Area, ankerpunkt-marker, [true-nicht wegklickbar])
//twGmapInfofenster01 = new EBubble(map, "images/mapBackground.png", new GSize(443,273), new GSize(418,187), new GPoint(5,5), new GPoint(220,280),true);
twGmapInfofenster02 = new EBubble(map, "images/mapBackground.png", new GSize(443,273), new GSize(418,187), new GPoint(5,5), new GPoint(220,280));

return map;
}
*/

function machTwMarker(x,y,text,pin,type) {
	//var letter = String.fromCharCode("A".charCodeAt(0) + index);
	var letteredIcon = new GIcon(baseIcon);

	if (type == 8){
		letteredIcon.image = "http://62.27.60.71/images/pinStore.png";
		letteredIcon.iconSize = new GSize(60, 67);
		letteredIcon.imageMap=[8,41,7,6,44,5,45,43];
		letteredIcon.iconAnchor = new GPoint(9, 49);
	}
	else if (type == 99){
		letteredIcon.image = "http://62.27.60.71/images/pinMe.png";
		letteredIcon.iconSize = new GSize(26, 37);
		letteredIcon.imageMap=[13,29,6,17,10,8,18,7,24,9,29,14,28,23,24,29];
		letteredIcon.iconAnchor = new GPoint(15, 1);
		letteredIcon.infoWindowAnchor = new GPoint(0, 1);
	}
	else{
		if (pin > 9){
			pin = 9;
		}
		letteredIcon.image = "http://62.27.60.71/images/pin"+pin+".png";
		letteredIcon.iconSize = new GSize(34, 49);
		letteredIcon.imageMap=[13,29,6,17,10,8,18,7,24,9,29,14,28,23,24,29];
		letteredIcon.iconAnchor = new GPoint(15, 42);
	}
	letteredIcon.infoWindowAnchor = new GPoint(9, 1);

	markerOptions = {icon:letteredIcon};

	var point = new GPoint(x, y);
	var marker = new GMarker(point, markerOptions);
	var html = '';
	html += '<div id="Gmap">';
	//html += ' <p class="headline">Das ist das Info-Fenster von Marker 01</p><form action="http://lokal.uag.de/index.php"><input type="text" name="test"><input type=submit></form>';
	//html += ' <p class="text">Dieses Info-Fenster ist nicht das Standard-Info-Fenster von Google sondern wurde mit Javascript selbst erstellt.</p>';
	html += text;
	html += '</div>';

	map.addOverlay(marker);
	//alert(1);
	twGmapInfofenster01 = new EBubble(map, "images/mapBackground.png", new GSize(403,287), new GSize(393,200), new GPoint(5,5), new GPoint(193,285),true);
	if (pin) {
		GEvent.addListener(marker, "click", function() {twGmapInfofenster01.openOnMarker(marker, html,map,x,y);});
	}
	
	GEvent.addListener(map, "zoomend", function() {
		var a = new Date();
		a = new Date(a.getTime() +1000*60*60*24*365);
		document.cookie = 'cookieZoom'+cityID+'='+map.getZoom()+'; expires='+a.toGMTString()+';';
	}
	);
	
	GEvent.addListener(map, "dragend", function() {
		var b = map.getCenter();
		var a = new Date();
		a = new Date(a.getTime() +1000*60*60*24*365);
		document.cookie = 'cookieLat'+cityID+'='+b.lat()+'; expires='+a.toGMTString()+';';
		document.cookie = 'cookieLon'+cityID+'='+b.lng()+'; expires='+a.toGMTString()+';';
	}
	);	
	//return marker;
}

function hideMapOverlay(){
	twGmapInfofenster01.hide();
}


function machTwMarker02() {
	var point = new GPoint(13.738, 51.042);
	var marker = new GMarker(point);var html = '';
	html += '<div class="twGmapInfo02">';
	html += ' <p class="headline">Info-Fenster 02</p>';
	html += ' <p class="text">Dieses Info-Fenster ist nicht das Standard-Info-Fenster von Google sondern wurde mit Javascript selbst erstellt.</p>';
	html += '</div>';

	GEvent.addListener(marker, "click", function() {twGmapInfofenster02.openOnMarker(marker, html);});

	return marker;
}

function handleErrors(){
	if (lang == 1){
		alert ("Die Adresse konnte leider nicht gefunden werden. Check deine Angaben und versuch's noch einmal!");
	}
	else{
		alert("Unfortunately the address could not be found. Check your entries and try again!");
	}
	history.back();
}

function customPanel(mapname,gdir,div) {
	//var html = '<table cellpadding="0" cellspacing="0" width="100%"><tr><td width="493">';
	var html = '';

	// ===== local functions =====

	// === waypoint banner ===
	function waypoint2(point, type, address) {
		var target = '"' + mapname+".showMapBlowup(new GLatLng("+point.toUrlValue(6)+"))"  +'"';
		html += '<table style="border: 0px solid silver; margin: 10px 0px; background-color: rgb(248, 181, 181); border-collapse: collapse; color: rgb(0, 0, 0);">';
		html += '  <tr style="cursor: pointer;" onclick='+target+'>';
		html += '    <td style="padding: 4px 15px 0px 5px; vertical-align: middle; width: 20px;">';
		html += '      <img src="http://www.google.com/intl/en_ALL/mapfiles/icon-dd-' +type+ '-trans.png">'
		html += '    </td>';
		html += '    <td style="vertical-align: middle; width: 100%;">';
		html +=        address;
		html += '    </td>';
		html += '  </tr>';
		html += '</table>';
	}

	function waypoint(point, type, address,title) {
		var target = '"' + mapname+".showMapBlowup(new GLatLng("+point.toUrlValue(6)+"))"  +'"';

		html +='<table class="boxContent" cellpadding="0" cellspacing="0" width="100%">';
		html +='	<tr>';
		html +='		<td style="text-align:left;width:15px;padding:14px 6px 0 0;background-color:transparent;"><img src="images/arrow.jpg"></td>';
		html +='		<td style="padding:10px 0 0 0;"><span style="color:#36B6ED;" class="boxContentLabelCategory">'+title+'<span></td>';
		html +='	</tr>';
		html +='	<tr>';
		html +='		<td></td>';
		html +='		<td style="padding:0px 0 0 0;"><span class="boxContentName">'+address+'</span></td>';
		html +='	</tr>';
		html +='</table>';
	}

	// === route distance ===
	function routeDistance(dist) {
		//html += '<div style="text-align: right; padding-bottom: 0.3em;">' + dist + '</div>';
	}

	// === step detail ===
	function detail(point, num, description, dist) {
		var target = '"' + mapname+".showMapBlowup(new GLatLng("+point.toUrlValue(6)+"))"  +'"';
		html += '<tr style="">';
		html += '<td class="routePath" style="color:#36B6ED;padding-left:20px;">'+num+'.</td>';
		html += '<td class="routePath">'+description+'</td>';
		html += '<td class="routePath" style="font-weight:bold;text-align:right;padding-right:18px;">'+dist+'</td>';
		html += '</tr>';
	}

	function detail2(point, num, description, dist) {
		var target = '"' + mapname+".showMapBlowup(new GLatLng("+point.toUrlValue(6)+"))"  +'"';
		html += '<table style="margin: 0px; padding: 0px; border-collapse: collapse;">';
		html += '  <tr style="cursor: pointer;" onclick='+target+'>';
		html += '    <td style="border-top: 1px solid rgb(205, 205, 205); margin: 0px; padding: 0.3em 3px; vertical-align: top; text-align: right;">';
		html += '      <a href="javascript:void(0)"> '+num+'. </a>';
		html += '    </td>';
		html += '    <td style="border-top: 1px solid rgb(205, 205, 205); margin: 0px; padding: 0.3em 3px; vertical-align: top; width: 100%;">';
		html +=        description;
		html += '    </td>';
		html += '    <td style="border-top: 1px solid rgb(205, 205, 205); margin: 0px; padding: 0.3em 3px 0.3em 0.5em; vertical-align: top; text-align: right;">';
		html +=        dist;
		html += '    </td>';
		html += '  </tr>';
		html += '</table>';
	}

	// === Copyright tag ===
	function copyright(text) {
		html += '<div style="padding:0 0 0 28px;font-size:8pt;color:#6a6a6a">' + text + "</div>";
	}


	// === read through the GRoutes and GSteps ===

	for (var i=0; i<gdir.getNumRoutes(); i++) {
		if (i==0) {
			var type="play";
		} else {
			var type="pause";
		}
		var route = gdir.getRoute(i);
		var geocode = route.getStartGeocode();
		var point = route.getStep(0).getLatLng();
		// === Waypoint at the start of each GRoute
		waypoint(point, type, geocode.address,'Start');
		html +='<img src="images/dottetLine2.jpg" style="margin:8px 0 5px 8px;">';
		routeDistance(route.getDistance().html+" (about "+route.getDuration().html+")");

		html += '<table class="boxContent" cellpadding="0" cellspacing="0" width="100%">';

		for (var j=0; j<route.getNumSteps(); j++) {
			var step = route.getStep(j);
			// === detail lines for each step ===
			detail(step.getLatLng(), j+1, step.getDescriptionHtml(), step.getDistance().html);
		}
		html += '</table>';
		html +='<img src="images/dottetLine2.jpg" style="margin:8px 0 5px 8px;">';
	}

	// === the final destination waypoint ===
	var geocode = route.getEndGeocode();
	var point = route.getEndLatLng();
	waypoint(point, "stop", geocode.address,'Ziel');

	// === the copyright text ===
	copyright(gdir.getCopyrightsHtml());
	// === drop the whole thing into the target div

	//html += '</td><td><img src="images/pinStart.jpg"></td></tr></table>';

	div.innerHTML = html;

}