document.write("<style type=\"text/css\">.VE_Pushpin_Image{width:25px;height:25px;font-family:Arial,sans-serif;font-weight:bold;font-size:8pt;color:White;overflow:hidden;cursor:pointer;text-decoration:none;text-align:center;padding-top:1px;z-index:19}</style>");
//IOSec = new OutputEncoder();

var gMap = null;
var map = null;
var gViewPanel = null;
var gPanel = null;
var gSuperbowl = null;

function ResizeRightPanels() {}

function Superbowl(mapDiv) 
{	
	/* Main */
	//var DETROIT_LAT = 42.339787;
	//var DETROIT_LNG = -83.047016
	
	var DETROIT_LAT = 42.339787;
	var DETROIT_LNG = -83.047016;
	var sxViews = new Array();	
	var cxDetroit = null;
	var cxNational = null;
	var activeView = null;
		//registerView('National', 'data/national.csv', 0, 0);
		
	/* Implementation */
	function init(lat, lng, zoomLevel)
	{		
		var params = new Object();
		params.latitude = lat;
		params.longitude = lng;
		params.zoomlevel = zoomLevel ? zoomLevel : 15;
		params.mapstyle = Msn.VE.MapStyle.Hybrid;
		params.showScaleBar = true;
		params.showDashboard = true;
		params.dashboardSize = Msn.VE.DashboardSize.Normal;
		params.dashboardX = Utils.GetWindowWidthHeight().width - 192;
		params.dashboardY = 5;
		params.obliqueEnabled = true;
		params.obliqueUrl="bev_proxy.ashx";
		gMap = new Msn.VE.MapControl(mapDiv, params);
		map = gMap;
		gMap.Init();
		gMap.AttachEvent('onendzoom', onEndZoom);
		gMap.AttachEvent('onstartzoom', onStartZoom);
		gMap.AttachEvent('onendcontinuouspan', onEndContinuousPan);
		gPanel = new VE_Panel("",5,205,
		  235,32,
		  "blue",
		  31,
		  "",
		  "",
		  "",
		  "",false);
		gViewPanel = new VE_Panel("", 5, 120,
		  235, 75,
		  "blue",
		  31,
		  "Views",
		  "",
		  "",
		  "", false);
		//gPanel.onCloseClick = function(e) { gPanel.Hide(); };		
		gPanel.DisableClosebox();
		gViewPanel.DisableClosebox();
		gPanel.SetFooterSize(0);
		gViewPanel.SetFooterSize(0);
		gViewPanel.SetToolbarSize(0);
		gPanel.SetToolbarSize(0);
	}
	
	function showActiveView()
	{
		var html = '';
		var activeView = getActiveView();
		if (!activeView) return;
		if (activeView.name != 'Detroit')
		{
			html += '<a href="javascript:;" onclick="Superbowl.setActiveView(\'Detroit\');"><img style="border:0px;"src="images/find.gif"/>Detroit Local View</a><br/>';
			html += '<b><img src="images/find.gif"/>Previous Superbowls</b><br/>';
		}
		else
		{
			html += '<b><img src="images/find.gif"/>Detroit Local View</b><br/>';
			html += '<a href="javascript:;" onclick="Superbowl.setActiveView(\'National\');"><img src="images/find.gif" style="border:0px;"/>Previous Superbowls</a>';
		}
		
		gViewPanel.SetBody(html);
	}
	var setActiveView;
	this.setActiveView = setActiveView = function(view)
	{
		var cxView = view == 'Detroit' ? cxDetroit : cxNational;
		activeView = cxView;
		cxView.showMarkers();
		showActiveView();		
		View.closePopup();
		if (view == 'Detroit')
			gMap.SetCenterAndZoom(DETROIT_LAT,DETROIT_LNG,15);
		else
			gMap.SetCenterAndZoom(43.75,-99.094766,4);
		cxView.onEndContinuousPan();
	}
	
	function onEndZoom()
	{
/*		var activeView = getActiveView();
		if (View.lastShowMarker == activeView) 
			return;
		if (!activeView) return;
		activeView.showMarkers();
		activeView.onEndContinuousPan();
		showActiveView();
		View.closePopup()*/
		var view = getActiveView();
		if (view == cxNational) return;
		if (view) view.onEndContinuousPan();

	}
	
	function onStartZoom()
	{
		View.closePopup();
	}
	

	function onEndContinuousPan()
	{
		var view = getActiveView();
		if (view == cxNational) return;
		if (view) view.onEndContinuousPan();
	}
		
	this.registerView = function (cxView)
	{		
		Utils.Debug('View ' + cxView.name + ' registered.');		
		sxViews.push(cxView);
		if (cxView.name == 'Detroit') {
			setTimeout("Superbowl.setActiveView('Detroit');", 500);
		}
		/*if (gMap.GetZoomLevel() >= cxView.minZoom && gMap.GetZoomLevel() <= cxView.maxZoom) {
			cxView.showMarkers();
			showActiveView();
		}*/
		return this;
	}
	var getActiveView;
	this.getActiveView = getActiveView = function()
	{
		return activeView?activeView:cxDetroit;
		/*for(var i=0; i<sxViews.length; i++) if (gMap.GetZoomLevel() >= sxViews[i].minZoom && gMap.GetZoomLevel() <= sxViews[i].maxZoom)
		{
			Utils.Debug('Active view is ' + sxViews[i].name);
			return sxViews[i];
		}*/
			
	//	alert("There is no active view");
	}
		
	this.setFullScreen = function()
	{
		var dim = Utils.GetWindowWidthHeight();
		dim.height -= 115;
		this.resize(dim.width, dim.height);
		return this;
	}
	
	this.resize = function(width, height)
	{
		mapDiv.style.width = width + 'px';
		mapDiv.style.height = height + 'px';
		var lat = gMap.GetCenterLatitude();
		var lng = gMap.GetCenterLongitude();
		gMap.Resize(width, height);
		gPanel.height = height + 150 - gPanel.y - 80;
		gPanel.Resize();
		return this;
	}	
	init(DETROIT_LAT, DETROIT_LNG);	
	gSuperbowl = this;	
	cxDetroit = new View('Detroit', 'data/Detroit_out.csv', 13, 20);
	cxNational = new View('National', 'data/National_out.csv', 0, 4);	
	//gMap.PanToLatLong(DETROIT_LAT,DETROIT_LNG);
	setTimeout('gMap.PanToLatLong('+DETROIT_LAT+','+DETROIT_LNG+')', 50);
	return this;
}

Superbowl.registerView = function(cxView)
{
	return gSuperbowl.registerView(cxView);
}

Superbowl.getActiveView = function()
{
	return gSuperbowl.getActiveView();
}

Superbowl.setActiveView = function(viewName) {
	return gSuperbowl.setActiveView(viewName);
}

function View(szName, szCSVFile, iMinZoom, iMaxZoom)
{
	var sxPOIs = [];
	this.minZoom = iMinZoom;
	this.maxZoom = iMaxZoom;
	this.name = szName;
	
	function alphaSort(a,b) {
		if ( a.sort < b.sort) return -1;
		if ( a.sort > b.sort) return 1;
		return 0;
	}
	
	function loadCSVFile(cxView)
	{
		var cxRequest = Utils.GetXmlHttp();
		cxRequest.open("GET", szCSVFile);
		
		cxRequest.onreadystatechange = function() {
			if (cxRequest.readyState == 4) {				
				var result = cxRequest.responseText.replace(/"/g, '').split("\n");
				for(var i=0; i<result.length; i++)
				{
					var r = CreateResult(result[i].split(';'));
					if (r)
					sxPOIs.push(r);
				}
				if (cxView.name == "Detroit") {
					sxPOIs.sort(alphaSort);
				}
				Superbowl.registerView(cxView);
			}			
		};	
		cxRequest.send(null);		
	}
	
	this.showMarkers = function()
	{
		Utils.Debug('View refreshed.');
		gPanel.SetTitle(this.name);
		gMap.ClearPushpins();
		for(var i=0; i< sxPOIs.length; i++)
		{
			sxPOIs[i].show();
		}
		View.lastShowMarker = this;
		return this;
	}
	
	this.onEndZoom = function()
	{
		
	}
	
	this.onStartZoom = function()
	{
		
	}
	
	this.onEndContinuousPan = function()
	{
		var szText = "";
		var maxLat = gMap.GetLatitude(0);		
		var minLat = gMap.GetLatitude(document.getElementById('map').offsetHeight);
		var minLng = gMap.GetLongitude(0);
		var maxLng = gMap.GetLongitude(document.getElementById('map').offsetWidth);
		for(var i=0; i<sxPOIs.length; i++)
		{
			if (sxPOIs[i].Lat >= minLat && sxPOIs[i].Lat <= maxLat && sxPOIs[i].Lng >= minLng && sxPOIs[i].Lng <= maxLng)
				szText += sxPOIs[i].renderAbrv();
		}
		gPanel.SetBody(szText);
	}
	
	this.openPopup = function(id, container)
	{
		View.closePopup();
		var POI = getPOI(id);
		if (!View.currentPopup)
			initPopup();
		View.currentPopup.innerHTML = POI.render();		
		var y = parseInt(container.style.top) + 7;
		var x = parseInt(container.style.left) + 7;
		View.currentPopup.style.top = y + 'px';
		View.currentPopup.style.left = x + 'px';
		View.currentPopup.style.display = 'block';
	}
	
	function initPopup()
	{
		var p = document.createElement('div');
		p.style.background = 'white';
		p.style.position = 'absolute';
		p.style.border = '1px solid black';
		p.style.width = '360px'; 
		p.style.zIndex = 100000;
		p.style.padding = '4px';
		p.onmouseout = function() { closeTimer = setTimeout('View.closePopup();', 500); };
		p.onmousemove = function() { if (closeTimer) { clearTimeout(closeTimer); closeTimer = null; } };
		gMap.map.appendChild(p);
		View.currentPopup = p;
	}
		
	function getPOI(id)
	{
		for(var i=0; i<sxPOIs.length; i++)
			if (sxPOIs[i].ID == id)
				return sxPOIs[i];
		return null;
	}

	loadCSVFile(this);
	
}

var closeTimer = null;
View.closePopup = function()
{
	if (View.currentPopup != null)
	{
		View.currentPopup.style.display = 'none';
		View.currentPopup = null;
	}
}


View.currentPopup = null;

View.lastShowMarker = null;

function ZoomRange(iMin, iMax)
{
	this.min = iMin;
	this.max = iMax;
}

var currentIdx = 0;

function POI(fLat, fLng, szName, szAddress, szURL, szCategory)
{
	this.Lat = fLat;
	this.Lng = fLng;
	this.Name = szName;
	this.Address = szAddress;
	this.URL = szURL;
	this.Category = szCategory;
	this.ID = ++currentIdx;
	this.sort = this.ID;
	return this;
}

POI.prototype.show = function()
{
	if ('Ford Field (Detroit Lions)' != this.Name)
		gMap.AddPushpin(this.ID, this.Lat, this.Lng, 23, 17, 'VE_Pushpin_Image', '<div style="position:absolute; color: navy; margin-top:2px; margin-left: 2px">'+this.ID+'</div><img src="images/flag_yellow.gif" id="img_'+this.ID+'" onmouseover="Superbowl.getActiveView().openPopup('+this.ID+', this.parentNode)"/>', 1000);
	else
		gMap.AddPushpin(this.ID, this.Lat, this.Lng, 23, 17, 'VE_Pushpin_Image', '<img src="images/sport_football2.gif" id="img_'+this.ID+'" onmouseover="Superbowl.getActiveView().openPopup('+this.ID+',this.parentNode)"/>', 1001);	
}

POI.prototype.renderAbrv = function()
{
	var html = '';
	html += '<a class="Listing" href="javascript:;"  onmouseover="Superbowl.getActiveView().openPopup('+this.ID+',document.getElementById(\'img_'+this.ID+'\').parentNode)" onclick="gMap.PanToLatLong('+this.Lat+','+this.Lng+')"><span style="color: navy; margin-top:2px; margin-left: 2px">';
	if (this.ID < 10)
		html += '&nbsp;&nbsp;';
	html += this.ID+'.</span><img src="images/flag_yellow2.gif" style="border:0px"/>'+this.Name+'</a><br/>';
	return html;
}

POI.prototype.render = function()
{
	var html = '<div class="POI"><b>';
	
	if (this.URL)
		html += '<a href="'+this.URL+'" target="_blank">'
	html += this.Name;
	if (this.URL)
		html += '</a>';	
	html += '</b><br/>';
	html += this.Address + '<br/>';
	var encName = encodeURIComponent(this.Name);
	html += '<a href="http://local.live.com/?v=2&sp=aN.'+this.Lat+'_'+this.Lng+'_'+encName+'&style=h&lvl=7" target="_blank">View in Windows Live Local</a>';
	html += '</div>';
	return html;
}

function SbHistory(fLat, fLng, szNo, szDate, szStadium, szLocation, szScore, szMVP, szArtists)
{
	this.Lat = fLat;
	this.Lng = fLng;
	this.No = szNo;
	this.Date = szDate;
	this.Stadium = szStadium;
	this.Location = szLocation;
	this.Score = szScore.split(', ');
	this.MVP = szMVP;
	this.Artists = szArtists.split(',');
	this.ID = ++currentIdx;
	this.sort = 0;
}

SbHistory.prototype.show = function()
{
	gMap.AddPushpin(this.ID, this.Lat, this.Lng, 64, 64, 'VE_Pushpin_Image', '<img src="images/sport_football2.gif"  id="img_'+this.ID+'" onmouseover="Superbowl.getActiveView().openPopup('+this.ID+',this.parentNode)" />', 1000);
}

SbHistory.prototype.renderAbrv = function()
{
	var html = '';
	html += '<a class="Listing" href="javascript:;" onmouseover="Superbowl.getActiveView().openPopup('+this.ID+',document.getElementById(\'img_'+this.ID+'\').parentNode)" onclick="gMap.PanToLatLong('+this.Lat+','+this.Lng+')"><img src="images/sport_football.gif" style="border:0px;"/>'+this.No+' - ' + this.Date + '</a><br/>';
	return html;
}

SbHistory.prototype.render = function()
{
	var html = '<center><img src="logos/'+this.No+'.jpg"/></center>';
	html += '<div class="POI">';	
	html += '<b>'+this.No + '<sup>th</sup> Superbowl, ' + this.Date + '</b><br/>';
	html += '<b>Location:</b> '+ this.Stadium +' (' + this.Location + ')&nbsp;&nbsp;';
	
	html += '<a style="font-size:80%" href="http://local.live.com/default.aspx?v=2&cp='+this.Lat+'~'+this.Lng+'&style=h&lvl=7" target="_blank">View in Windows Live Local</a><br/>';
	
	html += '<b>Score:</b> ' + this.Score + '<br/>';
	html += '<b>MVP:</b> ' + this.MVP + '<br/>';
	html += '<b>Artists:</b><br/><ul>';
	for(var i=0; i<this.Artists.length; i++)
	{
		var encArtist = encodeURIComponent(this.Artists[i]);
		html += '<li>'+this.Artists[i]+'&nbsp;&nbsp;<a style="font-size: x-small; font-size:80%;" target="_blank" href="http://music.msn.com/search/all/?ss='+encArtist+'"	>Buy on music.msn.com</a></li>';
	}
	html += '</ul></div>';
	return html;
}


function CreateResult() {
	var data = arguments[0];
	for(var i=0; i<data.length; i++)
		data[i] = data[i].trim();
	
	if (data.length == 6)
		return new POI(data[0], data[1], data[2], data[3], data[4], data[5]);
	else if (data.length == 9)
		return new SbHistory(data[0], data[1], data[2], data[3], data[4], data[5],data[6], data[7], data[8]);	
	else
	{
		return null;
	}
};