var m3 = { Debug: false };

m3.Load = function()
{
	var w = document.getElementById('drive');
	w.onclick = w.ondblclick = function()
	{
		if ( this.className == 'auto' )
		{
			if ( mok3_pauseExperience())
				this.className = 'you';
		}
		else
		{
			if ( mok3_playExperience(data.defaultPath,data.defaultExperience))
				this.className = 'auto';
		}
		return false;
	};

	m3.Map = new m3.MapApp();
	m3.eventPan = function( phi ) { m3.Map.radar.setDirection(phi) };
	m3.eventPanolink = function( id, phi, theta ) {
		var r = m3.Map.radar;
		if ( r.isHidden())
			r.show();
		r.setPoint( data.markers[ id ] );
		r.setDirection( phi );
		m3.Map.map.panTo( data.markers[ id ] );
	};
};
m3.Unload = function() { if ( m3.Map != null ) GUnload(); }
m3.Resize = function() { if ( m3.Map != null ) m3.Map.map.checkResize(); }
m3.LoadPanorama = function( name, lat, lng )
{
    // assumes that the name is the id of the pano and it exists in the already loaded tour and experience which is either paused or playing
   	var w = document.getElementById('drive');
   	if (w == undefined) return;
    // if automode do not pause when switching panos
    if (w.className == 'auto')
	    mok3_panolink(name, false);
	// if manual mode, pause before switching panos
	else 	    
	    mok3_panolink(name, true); 
};

//var SiteType = { NIGHTLIFE: 1, DINING: 2, HOTEL: 3 };
m3.PI = new GIcon();
m3.PI.image = "images/pano.png";
m3.PI.iconSize = new GSize( 7,7 );
m3.PI.iconAnchor = new GPoint( 3,3 );
m3.PI.infoWindowAnchor = new GPoint( 7,0 );

if ( m3.Debug )
	(function()
	{
		m3.GMarker = function( id, point, opts )
		{ GMarker.call( this, point, opts ); this.id = id; };
		var proto = new GMarker( new GLatLng(0,0) );
		m3.GMarker.prototype = proto;
		for ( var p in proto )
			if ( proto.hasOwnProperty( p )) delete proto[p];
		proto.constructor = m3.GMarker;

		proto.getInfoWindowHtml = function()
		{ return '<a href="javascript:m3.Map.loadPanorama( \'' + this.id + '\')"><h1>' + this.id + '</h1></a>'; };
		proto.showPanoInfo = function() { this.openInfoWindowHtml( this.getInfoWindowHtml() ); };
		proto.loadPano = function() { m3.Map.radar.setPoint( this.getPoint() ); m3.LoadPanorama( this.id ); }
	})();

m3.MapApp = function()
{
	if (!GBrowserIsCompatible())
	{
		alert( "You are using a browser that does not support Google Maps" );
		return;
	}

  this.map = new GMap2( document.getElementById( 'map' ));
	this.map.enableContinuousZoom();
	this.map.addControl( new GSmallMapControl());
	this.map.setCenter( data.defaultLookAt, data.defaultZoom );
	GEvent.bind( this.map, "click", this, this.findClosest );
	
	if ( m3.Debug )
	{
		markerArray = new Array();
		this.markers = {};
		var count = 0;
		for ( var panoName in data.markers )
		{
			var marker = new m3.GMarker( panoName, data.markers[panoName], { icon: m3.PI, title: panoName } );
			markerArray.push( marker );
			this.markers[ panoName ] = marker;
			GEvent.bind( marker, 'click', marker, marker.loadPano );
		}
		
		var mm = new GMarkerManager( this.map );
		mm.addMarkers( markerArray, 12 );
		
		mm.refresh();
	}
	
	var ad = data.areaCoveredOptions;
	var area = new GPolygon( ad.points, "#ff0000", 3, 1, ad.color, ad.opacity );
	this.map.addOverlay( area );

	this.radar = new m3.RadarOverlay( data.defaultLookAt );
	//this.radar = new GMarker( data.defaultLookAt, { title: 'You are here', clickable: false } );
	this.map.addOverlay( this.radar );
	this.radar.hide();
};

m3.MapApp.prototype = {
	findClosest: function( overlay, point )
	{
		/// what is overlay if not clicking on marker itself?  should return if so
		if ( overlay != null )
			return;
		
		/// point is expected to not be null
		var ms = data.markers;
		var minD = Number.POSITIVE_INFINITY, minM = null, minN = "";
		for ( var panoName in ms )
		{
			var d = ms[panoName].distanceFrom( point );
			if ( d < minD )
			{
				minD = d;
				minM = ms[panoName];
				minN = panoName;
			}
		}
	
		if ( this.radar.isHidden())
			this.radar.show();
		this.radar.setPoint( minM );
		m3.LoadPanorama( minN );
		
//		if ( m3.Debug )
//		{
//			this.radar.openInfoWindowHtml( this.markers[ minN ].getInfoWindowHtml() );
//		}
	}
};


// point is GLatLng
m3.RadarOverlay = function( point ) { this.point_ = point; this.isVisible_ = true; }
m3.RadarOverlay.prototype = new GOverlay();

m3.RadarOverlay.prototype.initialize = function( map )
{
	this.iconDimPx_ = 25;
	this.iconHalfDimPx_ = Math.floor( this.iconDimPx_ / 2 );
	
	var d = document.createElement( 'div' );
	d.id = 'radar';
	this.widget_ = d;
	var st = d.style;
	st.width = this.iconDimPx_ + 'px';
	st.height = this.iconDimPx_ + 'px';
	if ( css_browser_selector.indexOf( 'ie6' ) > -1 )
		st.backgroundImage = 'url(images/radar.gif)';
	else
		st.backgroundImage = 'url(images/radar.png)';
	st.position = 'absolute';
	
	map.getPane( G_MAP_MARKER_PANE ).appendChild( d );

	this.map_ = map;
}

m3.RadarOverlay.prototype.remove = function() { this.widget_.parentNode.removeChild( this.widget_ ); map.getPane( G_MAP_MARKER_PANE ).removeChild( div ); }
m3.RadarOverlay.prototype.copy = function() {	return new RadarOverlay(); }

m3.RadarOverlay.prototype.redraw = function( force )
{
	if ( !force )
		return;
		
	// Calculate the DIV coordinates of two opposite corners of our bounds to
	// get the size and position of our rectangle
	var c = this.map_.fromLatLngToDivPixel(this.point_);

	// Now position our DIV based on the DIV coordinates of our bounds
	this.widget_.style.left = ( c.x - this.iconHalfDimPx_ ) + 'px';
	this.widget_.style.top = ( c.y - this.iconHalfDimPx_ ) + 'px';
}
	
m3.RadarOverlay.prototype.getPoint = function() { return this.point_; },
m3.RadarOverlay.prototype.setPoint = function( newPoint ) { this.point_ = newPoint; this.redraw( true ); }
m3.RadarOverlay.prototype.isHidden = function() { return !this.isVisible_; }
m3.RadarOverlay.prototype.hide = function()
{
	if ( this.isVisible_ )
	{
		this.isVisible_ = false;
		this.widget_.style.visibility = 'hidden';
	}
};
m3.RadarOverlay.prototype.show = function()
{
	if( !this.isVisible_ )
	{
		this.isVisible_ = true;
		this.widget_.style.visibility = 'visible';
	}
};

m3.RadarOverlay.prototype.setDirection = function( angleDeg )
{
	angleDeg = parseFloat( angleDeg ) + data.arrowBias; // bias specifically for tour
	if ( angleDeg<0 ) angleDeg += 360;
	if ( angleDeg>360 ) angleDeg -= 360;
	var i = Math.floor( (angleDeg%60) / 10 );
	var j = Math.floor( angleDeg / 60 );
	this.widget_.style.backgroundPosition = (-i*this.iconDimPx_)+'px ' + (-j*this.iconDimPx_)+'px';
	/// this little piece of nonsense is for safari
	this.widget_.innerHTML = '&nbsp;';
}