/*
 * @author Dipl.-Ing. (FH) André Fiedler
 * 
 * Copyright (c) 2009 ö_konzept <http://oe-konzept.de>
 * 
 * @version 1.0
 */

var CityMap = new Class({
	
	Implements: [Options],
	
	params: {
		center: null,
		zoom: 14,
		zoomTimer: null,
		actCenter: null,
		map: null,
		mgr: null,
		mapContainer: null,
		poiInfo: []
	},
	
	options: {
		center: '50.714742,12.496868',
		poiKmlFile: '../xml/stationen.php',
		icon_m: {url: '../grafiken/stadtrundgang/marker_m.png', x: 12, y: 16},
		icon_m_current: {url: '../grafiken/stadtrundgang/marker_m_current.png', x: 12, y: 16},
		icon_l: {url: '../grafiken/stadtrundgang/marker_l.png', x: 24, y: 32},
		icon_l_current: {url: '../grafiken/stadtrundgang/marker_l_current.png', x: 24, y: 32},
		requestParams: {
			lang: 'de',
			group: 1,
			view: 'detail',
			number: 0
		}
	},
	
	initialize: function(container, options)
	{
		this.setOptions(options);
		 
		this.params.mapContainer = $(container);
		this.params.center = GLatLng.fromUrlValue(this.options.center);
		
		this.createMap();
		this.loadPOIs();
	},
	
	createMap: function()
	{
		if(GBrowserIsCompatible())
		{
			//copyright
			var copyOSM = new GCopyrightCollection('Kartendaten &copy; 2009 <a href="http://www.openstreetmap.org/">OpenStreetMap</a> Contributors');
			copyOSM.addCopyright(new GCopyright(1, new GLatLngBounds(new GLatLng(-90, -180), new GLatLng(90, 180)), 0, '(<a rel="license" href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>)'));
			
			//tiles
			var tilesMapnik = new GTileLayer(copyOSM, 1, 17, {tileUrlTemplate: 'http://tile.openstreetmap.org/{Z}/{X}/{Y}.png'});
			var tilesOsmarender = new GTileLayer(copyOSM, 1, 17, {tileUrlTemplate: 'http://tah.openstreetmap.org/Tiles/tile.php/{Z}/{X}/{Y}.png'});
			
			//map
			var mapMapnik = new GMapType([tilesMapnik], G_NORMAL_MAP.getProjection(), 'Stadtplan');
			this.params.map = new GMap2(this.params.mapContainer, { mapTypes: [mapMapnik, G_SATELLITE_MAP ] });
			this.params.map.enableContinuousZoom();
			
			this.params.map.setCenter(this.params.center, this.params.zoom);
			
			var extMapControl = new ExtLargeMapControl();
			this.params.map.addControl(extMapControl);
			this.params.map.addControl(new GMenuMapTypeControl());
			
			this.params.mgr = new MarkerManager(this.params.map);
			
			window.addEvent('unload', function(){
				GUnload(); 
			});
		}
	},
	
	loadPOIs: function()
	{
		var req = new Request.XML({
			method: 'get',
			url: this.options.poiKmlFile,
			onComplete: function(kml)
			{
				this.icon_m = new GIcon();
				this.icon_m.image = this.options.icon_m.url;
				this.icon_m.iconAnchor = new GPoint(this.options.icon_m.x, this.options.icon_m.y);

				this.icon_l = new GIcon();
				this.icon_l.image = this.options.icon_l.url;
				this.icon_l.iconAnchor = new GPoint(this.options.icon_l.x, this.options.icon_l.y);

				this.markers_m = [];
				this.markers_l = [];
				
				kml.documentElement.getElements('Placemark').each(function(placemark, i)
				{
					var poi = GLatLng.fromUrlValue(placemark.getElement('Point').getElement('coordinates').get('text'));
					var id = placemark.get('id', '');
					var number = placemark.get('number', '');
					var title = placemark.getElement('name').get('text');
					var description = placemark.getElement('description').get('text');
					var icon = placemark.getElement('Icon');
					var thumbnail = '';
					if($chk(icon))
					{
						thumbnail = icon.getElement('href').get('text');
					}
					
					var marker_m = new LabeledMarker(poi, {
						icon: new GIcon(this.icon_m),
						clickable: true,
						title: title,
						labelText: number,
						labelClass: 'stadtrundgang-label-m',
						labelOffset: new GSize(-11, -18)
					});
					marker_m.index = i;

					var marker_l = new LabeledMarker(poi, {
						icon: new GIcon(this.icon_l),
						clickable: true,
						title: title,
						labelText: number,
						labelClass: 'stadtrundgang-label-l',
						labelOffset: new GSize(-24, -28)
					});
					marker_l.index = i;

					
					var cityMap = this;
					
					GEvent.addListener(marker_m, 'click', function()
					{
						cityMap.zoomIn.run([this.getLatLng(), this.index], cityMap);
					});
					GEvent.addListener(marker_l, 'click', function()
					{
						cityMap.zoomIn.run([this.getLatLng(), this.index], cityMap);
					});
					
					this.markers_m.push(marker_m);
					this.markers_l.push(marker_l);
					
					this.params.poiInfo[i] = {
						id: id,
						number: number,
						thumbnail: thumbnail,
						title: title,
						description: description,
						coordinates: poi.lat() + ',' + poi.lng()
					};
				}.bind(this));
				
				this.params.mgr.addMarkers(this.markers_m, 0, 15);
				this.params.mgr.addMarkers(this.markers_l, 16, 18);
				
				this.params.mgr.refresh();
			}.bind(this)
		}).send();
	},
	
	zoomIn: function(glatlng, poi_index)
	{		
		this.markers_l[poi_index].getIcon().image = this.options.icon_l_current.url;
		
		if($chk(this.params.zoomTimer))
			$clear(this.params.zoomTimer);
		this.params.map.savePosition();
		this.params.actCenter = glatlng;
		this.params.mgr.hide();
		this.params.zoomTimer = this.doZoomIn.periodical(50, this, [glatlng, poi_index]);
	},
	
	zoomOut: function()
	{
		if($chk(this.params.zoomTimer))
			$clear(this.params.zoomTimer);
		this.params.map.returnToSavedPosition();
		this.params.actCenter = this.params.map.getCenter();
	},
	
	doZoomIn: function(glatlng, poi_index)
	{
		if (this.params.map.getZoom() >= 17) {
			if($chk(this.params.zoomTimer))
				$clear(this.params.zoomTimer);
			this.params.mgr.show();
			this.showPoiInfo(poi_index);
		}
		else {
			this.params.map.zoomIn(this.params.map.getCenter(), true);
			this.params.map.checkResize();
			this.params.map.setCenter(glatlng);
		}
	},
	
	showPoiInfo: function(poi_index)
	{		
		var pio = this.params.poiInfo[poi_index];
		var cityMap = this;
		
		var uri = new URI(document.location.href);
		uri.setData(this.options.requestParams);
		uri.setData({
			'number': pio.number
		}, true);
		
		this.params.map.openInfoWindowHtml(
			this.markers_l[poi_index].getLatLng(), 
			'<div class="stadtrundgang-info-window">' +
				'<div class="img-wrapper">' + 
					'<div class="img" style="background-image:url(' + pio.thumbnail + ');"></div>' + 
					'<span class="number">' + pio.number + '</span>' +
				'</div>' +
				'<a href="' + uri.toString() + '" class="headline">' + pio.title + '</a>' +
				'<div class="closeup"><a href="#" onclick="Globals.bookmark(\'location\', \'' + pio.id + '\'); this.blur(); return false;" class="bookmark" title="Zur Merkliste hinzufügen"><span>Merken</span></a></div>' +
				'<div class="route"><span class="label">Route planen</span><a href="http://maps.google.com/maps?saddr=' + pio.coordinates + '" target="_blank" class="start">Als Startadresse</a><a href="http://maps.google.com/maps?daddr=' + pio.coordinates + '" target="_blank" class="ziel">Als Zieladresse</a></div>' +
			'</div>',
			{
				onCloseFn: function(){
					cityMap.hidePoiInfo(poi_index);
				}
			}
		);
	},
	
	hidePoiInfo: function(poi_index)
	{
		this.markers_l[poi_index].getIcon().image = this.options.icon_l.url;
		this.zoomOut();
	},
	
	showLocation: function(number){
		this.markers_l.each(function(marker, i){
			if(marker.getLabelText() == number){
				this.zoomIn(marker.getLatLng(), i);
			}
		}.bind(this));
	}
});