var map = null;
var polys;
var poly;
var opa;
var player = null;
var status = null;
var id;
var middleofthestreet;
var mouseposition;
var options = {active:{opacity:0.9,color:'#0000dd'},passive:{opacity:0.25,color:'#0000dd'}};
/*{n:'Grotjahngasse',t:'"Von der platzartigen Erweiterung des Zinnowplatzes nach Nordwesten abzweigend, mit Wendeplatz und Fußgängerdurchgang zum Wiesendamm" (HAB 1930, IV, S. 344) (Grotjahngasse u. Zinnowplatz existieren heute nicht mehr; sie lagen zwischen Meerweinschule u. Jarrestr.)  Gutstv Zinnow u. Johannes Grotjan waren Rathausbaumeister.'}, 	
*/
var rules = {
	'#legende' : function() {
		$('legende').innerHTML ='';
		for(var i =0;i<streets.length;i++) {
			$('legende').innerHTML += '<p id="p_'+ i +'" class="entry">'+streets[i].n+'</p>';
		}
	},
	'entry' : function(e) {
		e.style.cursor='pointer';
	},
	'#map' : function(el) {
		baseIcon = new GIcon();
		baseIcon.iconSize=new GSize(2,2);
		baseIcon.shadowSize=new GSize(2,2);
		baseIcon.iconAnchor=new GPoint(1,3);
		baseIcon.infoWindowAnchor=new GPoint(0,0);
		map = new GMap2($("map"),{draggableCursor:"crosshair"});
  	
  		map.setCenter(new GLatLng( 53.586790, 10.021972), 16);
  		map.setMapType(G_HYBRID_MAP);
		if (panos) for (id in panos) {
			var pano = panos[id];
			if (!pano.gps) continue;
			var gps = pano.gps.split(',');
			var point = new GLatLng(gps[0], gps[1]);
			
		 	var marker = createMarker(point,pano.name+'  ('+')' ,id,pano.image);
            map.addOverlay(marker);
        }
        
        
       GEvent.addListener(map, "mousemove", function(o) {
       		mouseposition=o;
       		}
       
       );
	}
};

var polyrules = {
	'.entry' : function(e) {
		e.style.cursor='pointer';
		e.onmouseover = function() {
		
		    var ndx = this.id.split('_')[1];
	    	var p =  polys[ndx].gpoly;
	    	streets[ndx].t = 'Hier könnte ein Text stehen, der die Herkunft des Straßennamens beschreibt.';
	    	var html = '<div><b class="ras"><b class="ras1"><b></b></b><b class="ras2"><b></b></b><b class="ras3"></b><b class="ras4"></b><b class="ras5"></b></b><div class="rasfg">'
	    	+ '<h2>'+streets[ndx].n +'</h2></div><b class="ras"><b class="ras5"></b><b class="ras4"></b><b class="ras3"></b><b class="ras2"><b></b></b><b class="ras1"><b></b></b></b></div>'
	    	+ '<p style="margin-top:1em;width:270px">'+ streets[ndx].t + '</p>';
	    	html += '<p>Länge: ' + Math.round(p.getLength()) + ' mtr.</p>';
  			if (middleofthestreet) map.removeOverlay(middleofthestreet);
  			var start = p.GetPointAtDistance(0.5*p.Distance());
  			middleofthestreet = new GMarker(start,{icon:baseIcon});
  			map.addOverlay(middleofthestreet);
  			middleofthestreet.openInfoWindowHtml(html);
		
			this.className='a';
			var polyid = this.id.split('_')[1];
	    	polys[polyid].gpoly.setStrokeStyle(options.active);
		},
		e.onmouseout = function() {
			var polyid = this.id.split('_')[1];
	    	polys[polyid].gpoly.setStrokeStyle(options.passive);
			map.closeInfoWindow();
			this.className=null;
		},
		e.onclick = function() {
			var ndx = this.id.split('_')[1];
	    	var p =  polys[ndx].gpoly;
	    	var html = '<h2>'+streets[ndx].n +'</h2><p style="width:260px">'+ streets[ndx].t + '</p>';
	    	html += '<p>Länge: ' + Math.round(p.getLength()) + ' mtr.</p>';
  			if (middleofthestreet) map.removeOverlay(middleofthestreet);
  			var start = p.GetPointAtDistance(0.5*p.Distance());
  			middleofthestreet = new GMarker(start,{icon:baseIcon});
  			map.addOverlay(middleofthestreet);
  			middleofthestreet.openInfoWindowHtml(html);
		}
	}
	
	
};


Event.observe(window, 'load', init_app);
Event.observe(window, 'unload', GUnload);
window.onresize = calcWindow;

function init_app(event) {
	calcWindow();
	Behaviour.register(rules);
 	Behaviour.apply(rules);
	Behaviour.register(polyrules);
 	Behaviour.apply(polyrules);
    createPolys();
}

	
function createPolys() {
	polys = new Array();
	for (var i=0; i<streets.length; i++) {
    	var item = streets[i];
    	if (typeof(item.p)=='object') {
 			var points = [];
 			var bounds = null;
 			for(var j=0;j<item.p.length;j++) {
    	    	points.push(new GLatLng(item.p[j].la,item.p[j].ln));
    		}
    		var poly = new Object;
 		
    		poly.name = item.n;
			poly.gpoly = new GPolyline(points,'#ff3300',5,0,{name:i,id:i,clickable:true});
			poly.gpoly.setStrokeStyle(options.passive);
  			map.addOverlay(poly.gpoly);
		    polys.push(poly);
			GEvent.addListener(poly.gpoly, "mouseover", function() {
					for (var ndx=0; ndx<polys.length; ndx++) {
					 	if (polys[ndx].gpoly == this) {
								moveTo($('legende'),$('p_'+ndx));
								$('p_'+ndx).className='a';
						}
					}
			    	this.setStrokeStyle(options.active);
			
			});
			GEvent.addListener(poly.gpoly, "mouseout", function() {
			    	this.setStrokeStyle(options.passive);
					for (var ndx=0; ndx<polys.length; ndx++) {
					 	if (polys[ndx].gpoly == this) {
								$('p_'+ndx).className='';
						}
					}
	
	
			});
			GEvent.addListener(poly.gpoly, "click", function() {
				map.closeInfoWindow();
			 		for (var ndx=0; ndx<polys.length; ndx++) {
					 	if (polys[ndx].gpoly == this) {
					 		var p =  polys[ndx].gpoly;
	    				streets[ndx].t = 'Hier könnte ein Text stehen, der die Herkunft des Straßennamens beschreibt.';

	    					var html = '<div><b class="ras"><b class="ras1"><b></b></b><b class="ras2"><b></b></b><b class="ras3"></b><b class="ras4"></b><b class="ras5"></b></b><div class="rasfg">'
	    	+ '<h2>'+streets[ndx].n +'</h2></div><b class="ras"><b class="ras5"></b><b class="ras4"></b><b class="ras3"></b><b class="ras2"><b></b></b><b class="ras1"><b></b></b></b></div>'
	    	+ '<p style="margin-top:1em;width:270px">'+ streets[ndx].t + '</p>';
	    					html += '<p>Länge: ' + Math.round(p.getLength()) + ' mtr.</p>';
  				var start = p.GetPointAtDistance(0.5*p.Distance());
  			var marker = new GMarker(start,{icon:baseIcon});
  			map.addOverlay(marker);
  			marker.openInfoWindowHtml(html);
						 	}
					 }
			});
			

    	}
    }

}          

function createMarker(point,name,id,image) {
        var marker = new GMarker(point,{icon:getIcon(),draggableCursor:"crosshair"});
        GEvent.addListener(marker, "click", function() {
        	var html = '<div id="pano" style="width:380px;height:250px">'+image+'<\/div>';
          marker.openInfoWindowHtml(html);
        });
        
        GEvent.addListener(marker, "infowindowopen", function(m) {
        		insertFlash(image,name + ' ');
	 			setTimeout(function(){
	 				map.setZoom(map.getZoom()+2);
	 				map.setMapType(G_SATELLITE_MAP);
	
	 			},60);
	 	});
        GEvent.addListener(marker, "infowindowclose", function(m) {
        	setTimeout(function(){
        		map.setZoom(map.getZoom()-2);
        		map.setMapType(G_HYBRID_MAP);
	
        	},60);
		
	 	});

        return marker;
      }


function insertFlash(image,name) {
	var imgrot = $('pano');
	var url = '/panoramamap/getxml.php?i%3D'+ encodeURI(image);
	var so = new SWFObject('/panoramamap/panoStudioViewer.swf','mpl',imgrot.style.width,imgrot.style.height,'7');
 	so.addParam('allowfullscreen','false');
  	so.addVariable('autostart','true');
  	so.addVariable('pano',url);
    so.write('pano');

}
function getIcon(myicon) {
        var icon = new GIcon();
        icon.image ='/panoramamap/panorama-icon.png';
        icon.iconAnchor = new GPoint(14, 22);
        icon.infoWindowAnchor = new GPoint(0, 0);
        icon.iconSize = new GSize(24,26);
        icon.shadow = 'http://maps.google.com/mapfiles/kml/pal4/icon48s.png';
        icon.shadowSize = new GSize(52, 20);
        return icon;
   }

function showTooltip(marker) {
  var point  = map.getCurrentMapType().getProjection().fromLatLngToPixel(map.fromDivPixelToLatLng(new GPoint(0,0),true),map.getZoom());
	var offset = map.getCurrentMapType().getProjection().fromLatLngToPixel(marker.getPoint(),map.getZoom());
	var anchor = marker.getIcon().iconAnchor;
	var width  = marker.getIcon().iconSize.width;
	var height = tooltip.clientHeight;
	var pos    = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(offset.x - point.x - anchor.x + width, offset.y - point.y -anchor.y -height)); 
	pos.apply(tooltip);
	 tooltip.innerHTML = marker.tooltip;
	
	//tooltip.style.visibility="visible";
}


function moveTo(container, element){
  Position.prepare();
  container_y = Position.cumulativeOffset($(container))[1]
  element_y = Position.cumulativeOffset($(element))[1]
  new Effect.Scroll(container, {x:0, y:(element_y-container_y)});
  return false;
}


Effect.Scroll = Class.create();
Object.extend(Object.extend(Effect.Scroll.prototype, Effect.Base.prototype), {
  initialize: function(element) {
    this.element = $(element);   
    var options = Object.extend({
      x:    0,

      y:    0,
      mode: 'absolute'
    } , arguments[1] || {}  );
    this.start(options);
  },
  setup: function() {
    if (this.options.continuous && !this.element._ext ) {
      this.element.cleanWhitespace();
      this.element._ext=true;
      this.element.appendChild(this.element.firstChild);
    }
     
    this.originalLeft=this.element.scrollLeft;
    this.originalTop=this.element.scrollTop;  
   
    if(this.options.mode == 'absolute') {
      this.options.x -= this.originalLeft;
      this.options.y -= this.originalTop; 
    } else {
   
    }
  }, 
  update: function(position) {
    this.element.scrollLeft = this.options.x * position + this.originalLeft;
    this.element.scrollTop  = this.options.y * position + this.originalTop; 
  }
});

function calcWindow() {
	var objBody = document.getElementsByTagName("body").item(0);
  	var h= window.innerHeight || self.innerHeight || document.body.clientHeight;
    var w= window.innerWidth || self.innerWidth || document.body.clientWidth;
    var navi = Element.getDimensions('navi').width;
    w = w - navi;
	$('map').style.width = w + 'px';
 	$('map').style.height = h + 'px';
    $('navi').style.height = h + 'px';
   	
//#4229041 Viviayn	
    
}