/**
 * Header: tgEagleView API Documentation
 * 
 * Author: Thomas Fruetel
 */

var EAGLEVIEW_TILESIZE = 512;

/**
 * Class: tgEagleView
 * deprecated! The map type 'Eagle view' is not longer available since Dez.2011. 
 * 
 * This (modified) class still exists in version 1.0 to avoid problems if 'eagleview' is requested by external pages, 
 * but it actually returns the standard map. 
 * 
 * Used to be the central class for creating EagleView perspectives
 * 
 * Parameters:
 * 	map - <tgMap> An initialised tgMap instance
 */
var tgEagleView = Class.create ({
	ajaxPath: "/ajax/maps/",
	
	_container: null,
	_map: null,
	_longitude: 0,
	_latitude: 0,
		
	_working: false,
	_directions: [-1, -1, -1, -1],
	_direction: 2,
	_neighbours: [],
	_tileOverlap: 10,	
	
	_observers: [],
	
	_eventObserver: null,
	
	_dragging: false,
	
	_x: 0,
	_y: 0,
	
	zoom: 1,
	panel: null,
	controls: [],
	active: false,
	
	_availability: {
		longitude: 0,
		latitude: 0,
		available: false,
		directions: [false,false,false,false]		
	},
	
	initialize: function (map) {
		if (map.eagleView != null) {
			return map.eagleView;
		}
		map.eagleView = this;
		
		
		this._map = map;
		
	},
	
	enter: function () {
		var center = this._map.getCenter().getTg();
		
		
		
		if (this._availability.longitude == center.longitude 
			&& this._availability.latitude == center.latitude
		) {
			//Availability info is current and eagleview is available
			if (this._availability.available == true) {
				this._activate();
				
				if(typeof this._savedLatitude == "undefined"  ){
					this._savedLatitude  = center.latitude;
					this._savedLongitude = center.longitude;
				
				}
		
			} else {
				return false;
			}
		} else {
			//Availability needs to be checked for current center first
			var callback = function () {this._activate()}.bind(this);
			this.check(this._map.getCenter(), callback);
		}
		this.center();
		this.active = true;
	},
	
	center: function () {
		var dims = Element.getDimensions(this._container);
		var x    = Math.floor((dims.width-this.width)/2);
		var y    = Math.floor((dims.height-this.height)/2);
		
		this.panel.style.left = x+"px";
		this.panel.style.top  = y+"px";
	},
	
	leave: function () {
		//Remove event observers
		if (this.panel != null) {
			Event.stopObserving (this.panel, "mousedown", this._eventObserver);
			Event.stopObserving (this.panel, "mouseup", this._eventObserver);
			Event.stopObserving (this.panel, "mousemove", this._eventObserver);
		}
		this._eventObserver = null;
		this._map.setCenter(new tgLngLat(this._longitude, this._latitude));
		
				
		//Switch back to map view
		this._container.setStyle (
			{
				display: "none"
			}
		);
		
		this._map.getContainer().style.display = "block";
		this._map.checkResize();
		this.active = false;
	},
	
	setZoomLevel: function (zoomLevel) {
		
		var dims    = Element.getDimensions(this._container);
		var centerX = Math.floor((dims.width-this.width)/2);
		var centerY = Math.floor((dims.height-this.height)/2);
		
		var offsetX = parseInt (this.panel.style.left)-centerX;
		var offsetY = parseInt (this.panel.style.top)-centerY;
				
		var widthOld  = this.width;
		var heightOld = this.height;
		
		this.zoom = zoomLevel;
		this._draw();
		
		var factorX = (this.width/widthOld);
		var factorY = (this.height/heightOld);
		
		offsetX = Math.floor(factorX*offsetX);
		offsetY = Math.floor(factorY*offsetY);
				
		centerX = Math.floor((dims.width-this.width)/2);
		centerY = Math.floor((dims.height-this.height)/2);
		
		this.panel.style.left = centerX+offsetX+"px";
		this.panel.style.top  = centerY + offsetY+"px";
	},
	
	zoomIn: function () {
						
		if (this.zoom > 0) {
			this.setZoomLevel(0);
			this._map._fireEvent("EagleZoomIn");
		}
	},
	
	zoomOut: function () {
		this._x = Math.floor (this._x/4);
		this._y = Math.floor (this._y/4);
		if (this.zoom < 1) {
			this.setZoomLevel(1);
			this._map._fireEvent("EagleZoomOut");
		}
	},
	/**
	 * ..Function: returnToSavedPosition
	 * Returns the map to the position
	 * saved earlyer by <savePosition>
	 * 
	 * ..Events:
	 * draw
	 */
	returnToSavedPosition: function () {
		this._latitude  = this._savedLatitude;
		this._longitude = this._savedLongitude;
		
		this.check();
		this.center();
		this.active = true;
		
	},
	pan: function (direction) {
		
	},
	
	turnCounterClockwise: function () {
		
		var d = this._direction-1;
		if (d<0) {
			d = 3;
		}
		while (this._directions [d] == -1) {
			d--;
			if (d<0) {
				d = 3;
			}
		}
		this._direction = d % 4;
		this._draw();
	},
	
	turnClockwise: function () {
		var d = this._direction+1;
		while (this._directions [d] == -1) {
			d++;
		}
		this._direction = d % 4;
		this._draw();
	},
	
	
	addControl: function (control, position) {
		// (2011-Dez-22): don't display controls, but the function remains to avoid errormessages if external calls...	
		return;
	},
	
	
	
	observe: function (event, callback) {
		Event.observe(this._container, "tgEagleView::"+event, callback);
		var obs = {
			_event: event,
			_callback: callback
		};
		this._observers.push (obs);
	},
		
	stopObserving: function (event, callback) {
		if (callback != null) { //Remove one specific observer
			Event.stopObserving(this._container, "tgEagleView::" + event, callback);
		} else if (event != null) { //Remove all observers for given event
			this._observers.each (function (obs) {
				if (obs._event == event) {
					Event.stopObserving(this._container, "tgEagleView::" + obs._event, obs._callback);
				}
			}.bind(this));
		} else { //Remove every observer
			this._observers.each (function (obs) {
				Event.stopObserving(this._container, "tgEagleView::" + obs._event, obs._callback);
			}.bind(this));
			this._observers = [];
		}
	},
	
	
	check: function (lnglat, callback) {
		if (lnglat == null) {
			lnglat = new tgLngLat(this._longitude, this._latitude);
		}
		if (this._working == true) {
			return;
		}
		this._working = true;
		var longitude = lnglat.getTg().longitude;
		var latitude  = lnglat.getTg().latitude;
		
		/*
		if (longitude == this._availability.longitude && latitude == this._availability.latitude) {
			//Availability data is current, no need to check again
			this._working = false;
			return;
		}
		*/
				
		var url    = this.ajaxPath+"evGetPoint";
		var params = {
			longitude: longitude,
			latitude: latitude
		};
		var aj = new Ajax.Request (url, {
			parameters: params,
			method: 'get',
			onSuccess: function (originalRequest) {
				this._availability.longitude = longitude;
				this._availability.latitude  = latitude;
								
				var json = eval("(" + originalRequest.responseText + ")");
				if (json.success) {
					this._availability.available = true;
					
					this._longitude = json.longitude;
					this._latitude  = json.latitude;
					
					this._directions = json.directions;
					if ($$("div.eagleViewButton").length > 0) {
						if ($('telegate')) {
							$$("div.eagleViewButton")[0].style.color = "#2B70BF";
						} else {
							$$("div.eagleViewButton")[0].style.color = "#19457B";
						}
					}
					
					if (callback != null) {
						callback();
					}
					
				} else {
					this._availability.available = false;
					this._directions             = [-1, -1, -1, -1];
					if ($$("div.eagleViewButton").length > 0) {
						$$("div.eagleViewButton")[0].style.color = "#cccccc";
						
						var buttons = $$(".mapTypeButton");
						buttons.each (function(button) {
							//console.log(button);
							if (button.innerHTML == "Karte") {
								button.style.fontWeight = "bold";
							} else {
								button.style.fontWeight = "normal";
							}
						});
					}
				}
				this._working = false;
			}.bind(this)
			
		})
		
	},
	
	_findBestDirection: function () {
		var count = 0;
		while (count < 4 && this._directions[(this._direction+2)%4] != 1) {
			count++;
			this._direction++;
		}
		
		if (count < 4) {
			return ((this._direction) % 4);
		} else {
			return this._direction;
		}
	},
	
	_activate: function () {
		if (this._availability.available == false) {
			return;
		}
		var dims = Element.getDimensions (this._map.getContainer());
		this._container.setStyle (
			{
				width: dims.width+"px",
				height: dims.height+"px",
				backgroundImage: "url(http://"+getApiDomain()+"/Atlas/gateway/1.0/images/bg_eagleview.png)"
			}
		)
		
		//Might be beautified with a scriptaculous effect later
		this._container.style.display          = "block";
		this._map.getContainer().style.display = "none";
		this._draw();
	},
	
	_handleEvent: function (e) {
		switch (e.type) {
			case "mousedown":
				this._x = Event.pointerX(e);
				this._y = Event.pointerY(e);
				
				this._dragging = true;
			break;
			case "mouseup":
				this._dragging = false;
			break;
			case "mousemove":
				if (this._dragging == false) {
					return;
				}
				var x = Event.pointerX(e);
				var y = Event.pointerY(e);
				
				var diffX = x-this._x;
				var diffY = y-this._y;
				
				this._x = x;
				this._y = y;
				
				var edges = this._getEdges();
				
				var dims = Element.getDimensions(this._container);
								
				if (diffY > 0 && edges.top+diffY > (dims.height/2 + this._tileOverlap)) {
					if ((this._neighbours[4].longitude == 0 && this._neighbours[4].latitude == 0)) {	
						diffY = 0;					
					} else {
						//Show Top Neighbour
						diffY -= this.height;
						this._switchNeighbour (4);
					}
				}
				
				if (diffY < 0 && edges.bottom+diffY < (dims.height/2 - this._tileOverlap)) {
					if ((this._neighbours[0].longitude == 0 && this._neighbours[0].latitude == 0)) {	
						diffY = 0;					
					} else {
						//Show Bottom Neighbour
						diffY += this.height;
						this._switchNeighbour (0);
					}
				}
				
				if (diffX < 0 && edges.right+diffY < (dims.width/2 - this._tileOverlap)) {
					if ((this._neighbours[2].longitude == 0 && this._neighbours[2].latitude == 0)){
						diffX = 0;					
					} else {
						//Show Right Neighbour
						diffX += this.width;
						this._switchNeighbour (2);
					}
				}
				
				if (diffX > 0 && edges.left+diffY > (dims.width/2 + this._tileOverlap)) {
					if ((this._neighbours[6].longitude == 0 && this._neighbours[6].latitude == 0)){
						diffX = 0;					
					} else {
						//Show Left Neighbour
						diffX -= this.width;
						this._switchNeighbour (6);
					}
				}
				
				this.panel.style.left = (edges.left+diffX)+"px";
				this.panel.style.top  = (edges.top+diffY)+"px";
				
				
			break;
		}
	},
	
	_switchNeighbour: function (n) {
				
		this._longitude = this._neighbours[n].longitude;
		this._latitude  = this._neighbours[n].latitude;
		this._draw();
	},
	
	_draw: function () {
		this._direction = this._findBestDirection();
						
		switch (this.zoom) {
			case 0:
				var tilesX   = 9;
				var tilesY   = 6;
				this.width   = 4368;
				this.height  = 2912;
				this.divisor = 1;
			break;
			case 1:
				var tilesX   = 3;
				var tilesY   = 2;
				this.width   = 1441;
				this.height  = 961;
				this.divisor = 3;
			break;
		}
		
		if (this.panel == null) {
			var panel  = new Element("div");
			this.panel = panel;
	
			var dims         = Element.getDimensions (this._map._container);
			var documentDims = Element.getDimensions (document.body);

			//this.positionPanel ();
			this.panel.ondrag = function () {
				window.event.returnValue = false;
			}
			this.panel.id = "evPanel";
			this._container.appendChild (this.panel);
			this.panel.setStyle({
				position: "absolute",
				top: "0px",
				left: "0px"
			})
		}
		
		this._eventObserver = this._handleEvent.bindAsEventListener(this);
		Event.observe (this.panel, "mousedown", this._eventObserver);
		Event.observe (this.panel, "mouseup", this._eventObserver);
		Event.observe (this.panel, "mousemove", this._eventObserver);
		
		//Element.update (this.panel, "");
		if (this.panel.childNodes.length > 0) {
			$A(this.panel.childNodes).each (function (cn) {
				Element.remove(cn);
				cn = null;
			});
		}
				
		var evTileWidth  = EAGLEVIEW_TILESIZE;
		var evTileHeight = EAGLEVIEW_TILESIZE;
		var apiTemp      = "";
		for (var y = 0; y<tilesY; y++) {
			if ((y + 1)*EAGLEVIEW_TILESIZE > this.height) {
				evTileHeight = this.height-y*EAGLEVIEW_TILESIZE;
			}
			var offsetY = y*EAGLEVIEW_TILESIZE;
			for (var x = 0; x<tilesX; x++) {
				if ((x + 1)*EAGLEVIEW_TILESIZE > this.width) {
					evTileWidth = this.width-x*EAGLEVIEW_TILESIZE;
				} else {
					evTileWidth = EAGLEVIEW_TILESIZE;
				}
				var offsetX = x*EAGLEVIEW_TILESIZE;

				var img                   = document.createElement ("img");
				img.style.backgroundColor = "#cccccc";
				img.style.width           = evTileWidth+"px";
				img.style.height          = evTileHeight+"px";
				img.setAttribute("galleryimg", "no");
				img.id = this._map._parent.id+"_evtile_"+x+"_"+y;
				Element.addClassName (img,"evTile");
				
				apiTemp = "api"+((((y*tilesX)+x)%6) + 1)+".klicktel.de";
				offsetX = x*EAGLEVIEW_TILESIZE;
				offsetY = y*EAGLEVIEW_TILESIZE;
				
				img.style.position = "absolute";
				img.style.left     = offsetX+"px";
				img.style.top      = offsetY+"px";
				img.onmousedown    = function () {return false};
				
				var src = "http://"+getApiDomain()+"/KROUTE/gateway/1.0/evGetImage.php?longitude="+this._longitude+"&latitude="+this._latitude+"&offsetx="+offsetX+"&offsety="+offsetY+"&dir="+this._direction+"&mip="+this.zoom;
				img.src = src;
				this.panel.appendChild(img);
			}
			
		}
				
		//Now the neighbours
				
		var t = new Element("div");
		t.setStyle({
			position:"absolute",
			width: this.width+"px",
			height: this.height+"px",
			bottom: 0,
			left: 0
		});
		this.panel.appendChild(t);
		this._neighbours[4].div = t;
		
		var tr = new Element("div");
		tr.setStyle({
			position:"absolute",
			width: this.width+"px",
			height: this.height+"px",
			bottom: 0,
			left: this.width+"px"
		});
		this.panel.appendChild(tr);
		this._neighbours[3].div = tr;
		
		var r = new Element("div");
		r.setStyle({
			position:"absolute",
			width: this.width+"px",
			height: this.height+"px",
			top: 0,
			left: this.width+"px"
		});
		this.panel.appendChild(r);
		this._neighbours[2].div = r;
		
		var br = new Element("div");
		br.setStyle({
			position:"absolute",
			width: this.width+"px",
			height: this.height+"px",
			top: this.height+"px",
			left: this.width+"px"
		});
		this.panel.appendChild(br);
		this._neighbours[1].div = br;
		
		var b = new Element("div");
		b.setStyle({
			position:"absolute",
			width: this.width+"px",
			height: this.height+"px",
			top: this.height+"px",
			left: 0
		});
		this.panel.appendChild(b);
		this._neighbours[0].div = b;
		
		var bl = new Element("div");
		bl.setStyle({
			position:"absolute",
			width: this.width+"px",
			height: this.height+"px",
			top: this.height+"px",
			right: 0
		});
		this.panel.appendChild(bl);
		this._neighbours[7].div = bl;
		
		var l = new Element("div");
		l.setStyle({
			position:"absolute",
			width: this.width+"px",
			height: this.height+"px",
			top: 0,
			right: 0
		});
		this.panel.appendChild(l);
		this._neighbours[6].div = l;
		this._updateNeighbours();
		this.check();
		
		var tl = new Element("div");
		tl.setStyle({
			position:"absolute",
			width: this.width+"px",
			height: this.height+"px",
			bottom: 0,
			right: 0
		});
		this.panel.appendChild(tl);
		this._neighbours[5].div = tl;
		this._fireEvent("draw");
		
		//this.minimap.style.backgroundImage = "url(http://nmap01.ppm-ng.de/scripts/image.dll?getxmapdirect&left="+l+"&top="+t+"&w="+dims.width+"&h="+dims.height+"&zoom="+zoom+"&routeid=-1&trafficjam=0&layer=16)";
		
	},
	
	_fireEvent: function (e, memo) {
		this._container.fire ("tgEagleView::"+e, memo);
	},
	
	_getEdges: function () {
		var containerPos = Element.cumulativeOffset(this._container);
		
		var pos = Element.cumulativeOffset(this.panel);
		return ({
			left: pos[0]-containerPos[0],
			right: pos[0]+this.width-containerPos[0],
			top: pos[1]-containerPos[1],
			bottom: pos[1]+this.height-containerPos[1]
		});
	},
	
	_updateNeighbours: function () {
		this._neighbours.each (function (neighbour) {
			neighbour.longitude = 0;
			neighbour.latitude  = 0;
		});
		
		var directions = ["s", "w", "n", "e"];
		var url        = this.ajaxPath+"evGetNeighbours";
		var parameters =  {
			longitude: this._longitude,
			latitude: this._latitude,
			direction: directions[this._direction]
		};
		
		var aj = new Ajax.Request (url, {
			method: 'get',
			parameters: parameters,
			
			onSuccess: function (originalRequest) {
				var json = eval("(" + originalRequest.responseText + ")");
				for (var i=0; i<=7; i++) {
					var j = (4+i+2*((4-this._direction)%4))%8;
					
					var lnglat = json.ev[j].split(":");
										
					this._neighbours[i].longitude = lnglat[0];
					this._neighbours[i].latitude  = lnglat[1];
					
					if (lnglat[0] != 0 && lnglat [1] != 0) {
						this._neighbours[i].div.style.backgroundColor = null;
					} else {
						this._neighbours[i].div.style.backgroundColor = "#ff0000";
						if (this._neighbours[i].div.style.MozOpacity != null) {
							this._neighbours[i].div.style.MozOpacity = "0.5";
						} else if (this._neighbours[i].div.style.opacity != null) {
							this._neighbours[i].div.style.opacity = 0.5;
						}
						if (this._neighbours[i].div.style.filter != null) {
							this._neighbours[i].div.style.filter = ("alpha(opacity=50)");
						}
					}
				}
			}.bind(this)
		});		
	}
});

var tgEagleViewControl = Class.create(tgMapControl, {
	_eagleView: null,
	
	initialize: function ($super) {
		$super();
	},
	
	destroy: function () {
		if (this.outerdiv != null) {
			Element.remove(this.outerdiv);
		}
	}
});

var tgEagleViewMiniMap = Class.create(tgEagleViewControl,{
	defaultPosition: TG_ANCHOR_BOTTOM_RIGHT,
	position: null,
	_arrow: null,
	_updater: null,
	
	initialize: function ($super, position) {
		$super();		
	
		if (position == null) {
			this.position = this.defaultPosition;
		} else {
			this.position = position;
		}
	},
	
	addToMap: function (map) {
		this._map       = map;
		this._eagleView = map.eagleView;
		
	},
		
	draw: function() {
		var cssClass = '';
		if ( this.position == TG_ANCHOR_TOP_RIGHT ) {
			cssClass = 'miniMapTopRight';
		} else if ( this.position == TG_ANCHOR_TOP_LEFT ) {
			cssClass = 'miniMapTopLeft';
		} else if ( this.position == TG_ANCHOR_BOTTOM_RIGHT ) {
			cssClass = 'miniMapBottomRight';
		} else if ( this.position == TG_ANCHOR_BOTTOM_LEFT ) {
			cssClass = 'miniMapBottomLeft';
		}
		
		this.outerdiv = new Element( 'div' );
		this.outerdiv.addClassName(cssClass);
		var view = document.createElement("img");
		
		/*
		var dir = document.createElement("img");
		dir.src = "http://"+getApiDomain()+"/Atlas/gateway/1.0/images/eagleview_dir_0.png";
		dir.setStyle ({
			margin:"auto"
		})
		this.outerdiv.appendChild(dir);
		this._arrow = dir;
		*/
		
		this._map.eagleView._container.appendChild( this.outerdiv );
		
		this._updater = function(e) {this.update()}.bindAsEventListener(this);
		
		this._eagleView.observe("draw", this._updater);
		
	},
	
	update: function () {
		//this._arrow.src = "http://"+getApiDomain()+"/Atlas/gateway/1.0/images/eagleview_dir_"+this._eagleView._direction+".png";
		var dims = Element.getDimensions(this.outerdiv);
		var zoom = 8000;
		var l    = this._eagleView._longitude*1-(dims.width/2)*(zoom/100);
		var t    = this._eagleView._latitude*1+(dims.height/2)*(zoom/100);
		
		this.outerdiv.style.backgroundImage = "url(http://nmap01.ppm-ng.de/scripts/image.dll?getxmapdirect&left="+l+"&top="+t+"&w="+dims.width+"&h="+dims.height+"&zoom="+zoom+"&routeid=-1&trafficjam=0&layer=16)";
	}
	
});

var tgEagleViewNavigation = Class.create(tgEagleViewControl, {
	defaultPosition: TG_ANCHOR_TOP_LEFT,
	position: null,
	_buttonTurnClockwise: null,
	_buttonTurnCounterclockwise: null,
	_buttonZoomIn: null,
	_buttonZoomOut: null,
	_buttonHome: null,
	_handlePanMapHome: null,
	
	/*
	 * Event Handlers
	 */
	_turnClockwise: null,
	_turnCounterClockwise: null,
	_zoomIn: null,
	_zoomOut: null,
	
	initialize: function($super, position){
		$super();
		if (position == null) {
			this.position = this.defaultPosition;
		} else {
			this.position = position;
		}
	},
	
		
		
	addToMap: function (map) {
		this._map       = map;
		this._eagleView = map.eagleView;
		
	},
	
	draw: function() {
		var cssClass = '';
		if ( this.position == TG_ANCHOR_TOP_RIGHT ) {
			cssClass = 'evNavigationButtonsTopRight';
		} else if ( this.position == TG_ANCHOR_TOP_LEFT ) {
			cssClass = 'evNavigationButtonsTopLeft';
		} else if ( this.position == TG_ANCHOR_BOTTOM_RIGHT ) {
			cssClass = 'evNavigationButtonsBottomRight';
		} else if ( this.position == TG_ANCHOR_BOTTOM_LEFT ) {
			cssClass = 'evNavigationButtonsBottomLeft';
		}
		
		this.outerdiv = new Element( 'div' );
		this.outerdiv.addClassName(cssClass);		
		this._map.eagleView._container.appendChild( this.outerdiv );
		
		this._handlePanMapHome = function () {
			this._map.eagleView.returnToSavedPosition();return false;
		}.bindAsEventListener(this);
	
		var evRotate = new Element ('div');
		evRotate.addClassName('evRotate');
		this.outerdiv.appendChild( (evRotate));
		
		this._buttonHome              = new Element ('img', {'src': 'http://'+getApiDomain()+'/Atlas/gateway/1.0/images/homeLoc.png'});
		this._buttonHome.style.cursor = "pointer";
		this.outerdiv.appendChild (this._buttonHome);
		Event.observe (this._buttonHome, "click", this._handlePanMapHome);
		
		this._buttonTurnCounterClockwise = new Element( 'div');
		this._buttonTurnCounterClockwise.addClassName('buttonTurnCounterClockwise');
		this._buttonTurnCounterClockwise.style.cursor ="pointer";
		
		this._turnCounterClockwise = function () {
			this._eagleView.turnCounterClockwise();
		}.bindAsEventListener(this);
		
		Event.observe (this._buttonTurnCounterClockwise, "click", this._turnCounterClockwise);
		evRotate.appendChild( this._buttonTurnCounterClockwise);
		
		this._buttonTurnClockwise = new Element( 'div');
		this._buttonTurnClockwise.addClassName('buttonTurnClockwise');
		this._buttonTurnClockwise.style.cursor = "pointer";
		
		this._turnClockwise = function () {
			this._eagleView.turnClockwise();
		}.bindAsEventListener(this);
		
		Event.observe (this._buttonTurnClockwise, "click", this._turnClockwise);
		evRotate.appendChild( this._buttonTurnClockwise);
		
		var evZoom = new Element ('div');
		evZoom.addClassName('evZoom');
		this.outerdiv.appendChild (evZoom);
		
		this._buttonZoomIn = new Element( 'div' );
		this._buttonZoomIn.addClassName('buttonZoomIn');
		evZoom.appendChild( (this._buttonZoomIn));
		
		this._zoomIn = function () {
			this._eagleView.zoomIn();
		}.bindAsEventListener(this);
		
		Event.observe (this._buttonZoomIn, "click", this._zoomIn);
		
		this._buttonZoomOut = new Element( 'div');
		this._buttonZoomOut.addClassName('buttonZoomOut');
		evZoom.appendChild( (this._buttonZoomOut));
		
		this._zoomOut = function () {
			this._eagleView.zoomOut();
		}.bindAsEventListener(this);
		
		Event.observe (this._buttonZoomOut, "click", this._zoomOut);
	}, 
	
	destroy: function ($super) {
		//Remove event observers
		Event.stopObserving (this._buttonTurnClockwise, "click", this._turnClockwise);
		Event.stopObserving (this._buttonTurnCounterClockwise, "click", this._turnCounterClockwise);
		Event.stopObserving (this._buttonZoomIn, "click", this._zoomIn);
		Event.stopObserving (this._buttonZoomOut, "click", this._zoomOut);
		$super();
	}
});


// sprint 26, story#3: fake original constructor to avoid errormessages if the api is requested by external pages !
var tgEagleViewMapType = Class.create(tgMapControl,{

	addToMap: function (map) {
		this._map = map;
	},

	draw: function() { 
		this._map.setMapType("map");
	}
	
});
	

	
/**
 * .. Class: tgEagleViewNeighbour
 * Helper Class to hold information about a current
 * EagleViews neighbours
 */
tgEagleViewNeighbour = Class.create ({
	longitude: 0,
	latitude: 0,
	div: null
});