/** 
 * CONECTO Google Map
 */
function ConectoGoogleMap(mapOpts){

	this.mapOpts 	= mapOpts;

	//Hier werden die Daten temporär abgelegt
	this.gmarkers 	= [];
	this.htmls 		= [];
	this.iterator 	= 0;
	this.sidebar 	= null;
	
	//der Map Container
	this.canvas 	= null;
	
	//Das GMap2 Objekt
	this.mapObj 	= null;
	
	//Standardwerte falls es keine Marker gibt
	this.defaults = {
		zoomLvl: 15,
		lat: 47.2634,
		lng: 12.7459
	};
	
};

//Schnalzt ein UL Element in die Sidebar rein damit 
//die Liste mit <li>'s gefüttert werden kann
ConectoGoogleMap.prototype.createSidebar = function(container) {			
	
	this.sidebar = document.getElementById(container) || null; 
	
	if(this.sidebar) {
						
		var expandButtonContainer = document.createElement("div"); 
						
		var expandButtonA = document.createElement("a");
		expandButtonA.innerHTML = this.labels.showList;
		expandButtonA.className = "expand";	
		expandButtonA.href = 'javascript:void(0);';
		var thisInst = this;			
		expandButtonA.onclick = function() {
			thisInst.expandSidebar();	
		};
						
		expandButtonContainer.appendChild(expandButtonA);				
		this.sidebar.appendChild(expandButtonContainer); 
										
		var list = document.createElement("ul"); 
		list.style.display = "none";
		
		this.sidebar.appendChild(list);	
		this.sidebar.style.display = "none";				
	}
};

//Zeige Sidebar an
ConectoGoogleMap.prototype.expandSidebar = function() {	
	var sidebar = this.getSidebar();
	
	if(sidebar.style.display == "none") {
		sidebar.style.display = "";
		
		//Höhe der Sidebar fixieren damit der IE6 die Scrollbar anzeigt (overflow...)
		if(sidebar.childNodes.length > 24)
			sidebar.parentNode.style.height = (parseInt(document.getElementById(this.canvas).style.height) - 50) + "px";
	
	} else {
		sidebar.style.display = "none";
		sidebar.parentNode.style.height = "auto";
	}
};

//Macht die Sidebar sichtbar
ConectoGoogleMap.prototype.showSidebar = function(container) {	
	this.sidebar = document.getElementById(container) || null; 
	if(this.sidebar) {
		this.sidebar.style.display = "block";								
	}
};

//liefert die Sidebar Liste
ConectoGoogleMap.prototype.getSidebar = function() {
	return (this.sidebar).getElementsByTagName("ul")[0];
};
			
//Zeigt ein Infowindow an		
ConectoGoogleMap.prototype.showItem = function(i) {

	if(!this.htmls[i])
		return; 

	var marker = this.gmarkers[i];
			
//	marker.openInfoWindowHtml(this.htmls[i]);
	
	var map = this.mapObj;
	var container = document.getElementById(this.canvas);
	
	var point = marker.getLatLng();
	var markerPos = map.fromLatLngToContainerPixel(point);
			
	var containerWidth;

	if(container.innerWidth)
    	containerWidth = container.innerWidth;		
	else		
   		containerWidth = container.clientWidth;
	
	if(markerPos.x > (containerWidth / 2)) {							
		var panX = parseInt(((markerPos.x - (containerWidth / 2)) + 60)) *-1;
		map.panBy(new GSize(panX, 0));
		
		var tmp = this.htmls[i];
		setTimeout(function() {
			marker.openInfoWindowHtml(tmp);				
		}, 500);
		
	} else {
		marker.openInfoWindowHtml(this.htmls[i]);				
	}
	
	var links = this.getSidebar().getElementsByTagName("a"); 
	for(var j = 0; j < links.length; j++) {					
		links[j].className = links[j].className.replace(/active/gi, ""); 
	}
	//den aktuellen active setzen
	links[i].className += " active";

};
	
//ladet das google Script
ConectoGoogleMap.prototype.loadScript = function(url, callback) {
	if(typeof GMap2 == "undefined") {
		var script = document.createElement("script");
		script.type = "text/javascript";
		script.src = url;
		
		if(callback)
			script.src += "&callback="+ callback;
											
		document.body.appendChild(script);
	} else {
		this.createMap();			
	}
				
	return;
};

//Erstellt einen Marker
ConectoGoogleMap.prototype.createMarker = function(point, title, desc) {					

	var markerOptions = {};
						
	var marker = new GMarker(point, markerOptions);

	var thisInst = this;
	var i = this.iterator;
	GEvent.addListener(marker, "click", function(){
//		marker.openInfoWindowHtml(html);
		thisInst.showItem(i);
	});
	
	this.gmarkers[this.iterator] = marker;
	this.htmls[this.iterator] = desc;
	
	//Listenelemenete für die Listendatrstellung der Hotels erstellen
	var text = document.createTextNode(title);
	var a = document.createElement("a"); 
				
	a.appendChild(text); 
									
	a.onclick = function() {				
		thisInst.showItem(i);
	}
	a.href = 'javascript:void(0)'; //damit beim 6er ie der hover geht
				
	var li = document.createElement("li"); 
	li.appendChild(a);
	var sidebar = this.getSidebar();
	sidebar.appendChild(li);
			
	this.iterator++;
	
	return marker;
};

//Erstellt die Map
ConectoGoogleMap.prototype.createMap = function() {
	
	var opts = this.mapOpts;
	
	this.canvas = opts.canvas;
	this.labels = opts.labels; 
	
	var map;
	
	this.mapObj = map = new GMap2(document.getElementById(this.canvas), {size: new GSize(opts.size[0], opts.size[1])});
				
	map.addMapType(G_PHYSICAL_MAP);
	map.setMapType(G_PHYSICAL_MAP);
	map.addControl(new GLargeMapControl());
	map.addControl(new GMapTypeControl());			
	map.setCenter(new GLatLng(0, 0), 0);
			
	if(opts.markers.length > 0) {				
		
		this.createSidebar(opts.sidebar);				
		if(opts.markers.length > 1)				
			this.showSidebar(opts.sidebar);
		
		var bounds = new GLatLngBounds();
		
		for(var i = 0; i < opts.markers.length; i++) {
			var marker = opts.markers[i];
			var point = new GLatLng(marker.lat, marker.lng);
			var marker = this.createMarker(point, marker.title, marker.desc);
			
			map.addOverlay(marker);
			//clusterer.AddMarker(marker, marker.title);			
			
			bounds.extend(point);
		}
	
		//Wenns nur einer ist öffnen wir diesen gleich			
		if(opts.markers.length == 1) {
			this.showItem(0);			
			map.setZoom(this.defaults.zoomLvl);
		} else {
			map.setZoom(map.getBoundsZoomLevel(bounds));
		}			

		map.setCenter(bounds.getCenter());
					
	} else {
		//Keine Marker da
		map.setCenter(new GLatLng(this.defaults.lat, this.defaults.lng), this.defaults.zoomLvl);
	}

	return;
};