var map = null;

var gLatLngBounds = null;

var markers = new Array();
var currentMarker = null;
var currentPositionData = null;
var markerIndexSequence = 0;
var panoMarkerIcon = null;

var mapTitleText = "Map";
var listTitleText = "Panoramas";

var mainMapMenu = "<a href='javascript: resetMap();' style='font-size: 14px;'><b>Zoom to Fit</b></a>";
var oneUnderMainMapMenu = "<a href='/index.shtml' class='mainMapLink'><b>main map</b></a> | <a href='javascript: resetMap();' style='font-size: 12px;'><b>reset map</b></a>";

var listMainMapMenu = "";

function TrackData(lat, lng, distance, dateTimeStamp) {
    this.lat = lat;
    this.lng = lng;
    this.distance = distance;
    this.dateTimeStamp = dateTimeStamp;
}

function PositionData(esn, lat, lng, distance, caption, dateTimeStamp, entryImage, trackDataArray) {
    this.esn = esn;
    this.lat = lat;
    this.lng = lng;
    this.distance = distance;
    this.caption = caption;
    this.dateTimeStamp = dateTimeStamp;
    this.entryImage = entryImage;
    this.trackDataArray = trackDataArray;

    this.number = markerIndexSequence + 1;
    this.index = markerIndexSequence++;
}

var defaultMapCenter = new GLatLng(30.266944, -97.742778);
var defaultMapZoom = 10;

var zoomedIn = false;

var PositionDataArray = new Array();

function handleResize()
{
	if(!zoomedIn)
	{
		setMapSize();
	}
}

function setMapSize()
{	
	var width;
	var height;

	// Get browser window inner dimensions

	width = parseInt(document.documentElement.clientWidth);
	height = parseInt(document.documentElement.clientHeight);
	
	if (width < 600)
	{
		width = 600;
	}

	if (height < 200)
	{
		height = 200;
	}

	document.getElementById("map").style.height = String(height - 140) + "px";
	document.getElementById("list").style.height = String(height - 130) + "px";
	document.getElementById("mapTitleBar").style.width = String(width - 375) + "px";
	document.getElementById("map").style.width = String(width - 375) + "px";
	
	map.checkResize();
	bestFitCenterAndZoom();

}

function zoomInToPoint(lat, lng)
{
    map.setCenter(new GLatLng(lat, lng), 17);

    handleZoomAndPan();
}

/**
* Utility function to calculate the appropriate zoom level for a
* given bounding box and map image size. Uses the formula described
* in the Google Mapki (http://mapki.com/).
*
* @return         zoom level.
*/
function bestFitCenterAndZoom() {

	// map.setCenter(defaultMapCenter, defaultMapZoom);

	var maxLat = -100000.0;
	var minLat = 100000.0;
	var maxLng = -100000.0;
	var minLng = 100000.0;

	for (var i = 0; i < PositionDataArray.length; i++) {

	    var PositionData = PositionDataArray[i];

	    if (PositionData.lat > maxLat) {
	        maxLat = PositionData.lat;
	    }

	    if (PositionData.lat < minLat) {
	        minLat = PositionData.lat;
	    }

	    if (PositionData.lng > maxLng) {
	        maxLng = PositionData.lng;
	    }

	    if (PositionData.lng < minLng) {
	        minLng = PositionData.lng;
	    }

	    for (var j = 0; j < PositionData.trackDataArray.length; j++) {

	        if (eval('document.form1.showTrack_' + PositionData.index + '.checked')) {
	            var TrackData = PositionData.trackDataArray[j];

	            if (TrackData.lat > maxLat) {
	                maxLat = TrackData.lat;
	            }

	            if (TrackData.lat < minLat) {
	                minLat = TrackData.lat;
	            }

	            if (TrackData.lng > maxLng) {
	                maxLng = TrackData.lng;
	            }

	            if (TrackData.lng < minLng) {
	                minLng = TrackData.lng;
	            }
	        }
	    }
	}
	
	maxLat = maxLat + ((maxLat - minLat) * 0.02);
	minLat = minLat - ((maxLat - minLat) * 0.02);
	maxLng = maxLng + ((maxLng - minLng) * 0.02);
	minLng = minLng - ((maxLng - minLng) * 0.02);
	
	var gbounds = new GLatLngBounds(new GLatLng(minLat,minLng),new GLatLng(maxLat, maxLng));
	map.setCenter(gbounds.getCenter(), this.map.getBoundsZoomLevel(gbounds));	
}


function resetMap()
{	
	zoomedIn = false;
	
	map.setMapType(G_NORMAL_MAP);
	
	bestFitCenterAndZoom();
	
	if (currentMarker != null)
	{
		openInfoWindow(currentMarker, currentPositionData);
	}
}

function handleZoomAction(lat, lng)
{	
	if (zoomedIn)
	{
		zoomOut();
	}
	else
	{
		zoomInAndCenter(lat, lng);
	}

}

function zoomOut()
{	
	zoomedIn = false;
	
	map.setMapType(G_NORMAL_MAP);
	
	bestFitCenterAndZoom();
	
	if (currentMarker != null)
	{
		openInfoWindow(currentMarker, currentPositionData);
	}
}

function zoomInAndCenter(lat, lng)
{	
	zoomedIn = true;
	zoomInToPoint(lat, lng);
	
	if (currentMarker != null)
	{
		openInfoWindow(currentMarker, currentPositionData);
	}
}

function getMarkerImageSrc(PositionData)
{
	var markerImageSrc;
		
	if (!PositionData.isRegion || (PositionData.isRegion && PositionData.panoCount == 1))
	{
		markerImageSrc = '/images/map/markers/marker' + String(PositionData.number) + '.png';
	}
	else
	{
		markerImageSrc = '/images/map/markers/green_marker' + String(PositionData.number) + '.png';
	}
	
	return markerImageSrc;
}

// Create a marker at the given point with the given pano data
function createMarker(point, markerNumber, PositionData) {

	var marker = null;
	var iconSrc;

	createTrack(PositionData);
	
	panoMarkerIcon.image = getMarkerImageSrc(PositionData);
		
	toolTipHtml = PositionData.caption;
	
	toolTipHtml = "<table cellpadding='0' cellspacing='0' border='0'><tr><td nowrap class='toolTipText'>" +
		toolTipHtml + "</td></tr></table>";
	
	marker = new BpMarker(point, {icon: panoMarkerIcon});
	marker.setTooltipHtml(toolTipHtml);
	
	marker.setUserData(PositionData);
	map.addOverlay(marker);

	markers.push(marker);

	GEvent.clearListeners(marker, "click");
	
	GEvent.addListener(marker, "click", onClick);
	GEvent.addListener(marker, "mouseover", onMarkerMouseOver);
	GEvent.addListener(marker, "mouseout", onMarkerMouseOut);

	return marker;

}

function createTrack(PositionData) {

    if (eval('document.form1.showTrack_' + PositionData.index + '.checked')) {

        var theGLatLngArray = new Array();

        for (var theIndex = 0; theIndex < PositionData.trackDataArray.length; theIndex++) {

            var theTrackData = PositionData.trackDataArray[theIndex];

            var theGLatLng = new GLatLng(theTrackData.lat, theTrackData.lng);

            theGLatLngArray[theIndex] = theGLatLng;

            if (eval('document.form1.showTrackLabels_' + PositionData.index + '.checked')) {

                var content924 = '<div style="padding: 0px 0px 8px 8px; background: url(images/point_bottom_left.png) ' +
                    'no-repeat bottom left; font-color: black;"><div style="background-color: black; padding: 2px; ' +
                    'font-size: 0.9em; font-color: black;"><nobr>' + theTrackData.dateTimeStamp +
                    ' - ' + theTrackData.distance + ' miles</nobr></div></div>';

                var label924 = new TLabel();
                label924.id = 'label_' + PositionData.esn + "_" + theIndex;
                label924.anchorLatLng = theGLatLng;
                label924.anchorPoint = 'bottomLeft';
                label924.content = content924;
                label924.percentOpacity = 70;

                map.addTLabel(label924);
            }
        }

        var polyline = new GPolyline(theGLatLngArray, "#ff0000", 5);

        map.addOverlay(polyline);
    }
}

function onClick()
{
	var PositionData = this.getUserData();
	
	if (!PositionData.isRegion || (PositionData.isRegion && PositionData.panoCount == 1))
	{		
		currentMarker = this;
		
		currentPositionData = PositionData;
		
		openInfoWindow(currentMarker, currentPositionData);
	}
	else
	{
		document.location = PositionData.panoLink;
	}
}

function onMarkerMouseOver()
{
	var PositionData = this.getUserData();
	
	onMarkerListRowMouseOver(PositionData.index);
	
	selectMarkerListRow(PositionData.index);
}

function onMarkerMouseOut()
{
	var PositionData = this.getUserData();
	
	onMarkerListRowMouseOut(PositionData.index);
	
	clearMarkerListSelection();
}

function openInfoWindow(marker, PositionData)
{

	if (zoomedIn)
	{
		allowableZoomAction = "reset map";	
	}
	else
	{
		allowableZoomAction = "zoom map";
	}

	if (!PositionData.isRegion || (PositionData.isRegion && PositionData.panoCount == 1)) {

	    var theHtml = "<table border='0'>";

	    if (PositionData.entryImage.length > 0) {
	        theHtml += "<tr><td colspan='2' align='center'>" +
				"<img src='" + PositionData.entryImage + "' style='border: 1px solid black;' height='100'/>" +
				"</td></tr>";
	    }

	    theHtml +=
	                "<tr>" +
	                    "<td align='left' class='panoMarkerCaption'>" + PositionData.caption + "</td>" +
				        "<td align='right' class='panoMarkerCaption'>" + PositionData.dateTimeStamp + "</td>" +
				    "</tr>" +
				    "<tr>" +
				        "<td align='left' class='panoMarkerCaption'><span style='color: black;'><b>Lat: </b></span>" + marker.getPoint().lat() + "</td>" +
				        "<td align='right' class='panoMarkerCaption'><span style='color: black;'><b>Lng: </b></span>" + marker.getPoint().lng() + "</td>" +
				    "</tr>" +
				    "<tr>" +
				        "<td align='left' class='panoMarkerCaption'><span style='color: black;'><b>Distance: </b></span>" + PositionData.distance + " miles</td>" +
				        "<td align='right' class='panoMarkerCaption'>" +
				            "<span id='resetZoom'><a href='javascript: handleZoomAction(" + marker.getPoint().lat() + ", " + marker.getPoint().lng() + ");' style='font-size: 10px; color: blue;'><b>" + allowableZoomAction + "</b></a></span>" +
				        "</td>" +
				    "</tr>" +
				"</table>";
				
				
	    marker.openInfoWindowHtml
			(
				theHtml
			);

	    // initLightbox();
	}
}

function createMarkerList()
{
	// var listHtml = "<table cellpadidng='0' cellspacing='0' border='0'>";

	var table = Builder.node('table', {
	    cellpadding: '0',
	    cellspacing: '0',
	    border: '0'
	});
	tbody = Builder.node('tbody'),
    header = Builder.node('tr', { id: 'header' }, [Builder.node('td', { className: 'headerClass', width: '20px' }, ''), Builder.node('td', { align: 'center', className: 'headerClass' }, 'Name'), Builder.node('td', { className: 'headerClass' }, ''), Builder.node('td', { align: 'center', className: 'headerClass' }, 'Tracks'), Builder.node('td', { align: 'center', className: 'headerClass' }, 'Timestamps')]);

	tbody.appendChild(header);

    var caption;
	
	var rowClass;
	var iconSrc;

	for (var i = 0; i < PositionDataArray.length; i++) {

	    if (i % 2 == 0) {
	        rowClass = "lowlightEven";
	    }
	    else {
	        rowClass = "lowlightOdd";
	    }

	    var PositionData = PositionDataArray[i];

	    caption = PositionData.caption;

        var tr = Builder.node('tr', {
	        id: 'markerListRow' + PositionData.index,
	        className: 'rowClass',
            onmouseover: 'onMarkerListRowMouseOver(' + PositionData.index + ');',
	        onmouseout: 'onMarkerListRowMouseOut(' + PositionData.index + ');' 
	     }),
         td0 = Builder.node('td', {
             className: 'markerListCell',
             width: '20px'
             },
            [Builder.node('strong', PositionData.number )]),
	    td1 = Builder.node('td', {
            className: 'markerListCell',
            width: '100%'
            },
            [Builder.node('strong',
            [Builder.node('a', {
	        href: '#',
	        title: 'Click to view the participant info.',
	        onclick: 'handleMarkerListClick(' + PositionData.index + ');' 
	        }, caption)])]),
        td2 = Builder.node('td', {
            className: 'markerListCell',
            width: '100%'
        },
            [Builder.node('strong',
            [Builder.node('a', {
                href: '#',
                title: 'Click to zoom map to participant\'s latest position.',
                onclick: 'zoomInAndCenter(' + PositionData.lat + ', ' + PositionData.lng + ');'
            }, 'zoom')])]),
        td3 = Builder.node('td', {
            className: 'markerListCell',
            width: '100%',
            align: 'center'},
		[Builder.node('input', {
			type: 'checkbox',
			checked: 'checked',
			name: 'showTrack_' + PositionData.index,
			id: 'showTrack_' + PositionData.index,
			onClick: 'reload();'

        })]),
        td4 = Builder.node('td', {
            className: 'markerListCell',
            width: '100%',
            align: 'center'
        },
		[Builder.node('input', {
		    type: 'checkbox',
			checked: 'checked',
		    name: 'showTrackLabels_' + PositionData.index,
		    id: 'showTrackLabels_' + PositionData.index,
		    onClick: 'reload();'
		})]); ;
		
	tr.appendChild(td0);
	tr.appendChild(td1);
	tr.appendChild(td2);
	tr.appendChild(td3);
	tr.appendChild(td4);
	tbody.appendChild(tr);
	table.appendChild(tbody);

        /*
	    listHtml +=
			"<tr id='markerListRow" + PositionData.index + "' width='100%' class='" + rowClass + "' onmouseover='onMarkerListRowMouseOver(" + PositionData.index + ");' onmouseout='onMarkerListRowMouseOut(" + PositionData.index + ");' >" +
			"	<td class='markerListCell'>" + PositionData.number + ".&nbsp;</td>" +
			"	<td  class='markerListCell' width='100%'><b><a href='javascript:void'  title='Click to view the participant' onclick='handleMarkerListClick(" + PositionData.index + ");'>" + caption + "</a></b></td>" +
	        "	<td  class='markerListCell' width='100%'><a title='Click to view the participant' href='javascript: zoomInAndCenter(" + PositionData.lat + ", " + PositionData.lng + ");' style='font-size: 10px; color: blue;'><b>zoom</b></a></td>" +
	        "	<td  class='markerListCell' width='100%'><input type='checkbox' name='showTrack_" + PositionData.index + "' onchange='load();' /></td>" +
	        "	<td  class='markerListCell' width='100%'><input type='checkbox' name='showTrackLabels_" + PositionData.index + "' onchange='load();' /></td>";
        */
	}
	
	// listHtml += "</table>";

	// this.document.getElementById("list").innerHTML = listHtml;

	$("list").appendChild(table);
}

function onMarkerListRowMouseOver(index) {

	var marker = markers[index];
	
	selectMarkerListRow(index);	

	marker.setImage("/images/map/markers/yellow_blank.png");
	marker.setMaintainTooltip(true);
	marker.showTooltip();
}

function onMarkerListRowMouseOut(index)
{
	var marker = markers[index];
	
	clearMarkerListSelection();
	
	marker.setImage(getMarkerImageSrc(marker.getUserData()));
	marker.setMaintainTooltip(false);
	marker.hideTooltip();
}

function selectMarkerListRow(index)
{
	clearMarkerListSelection();
	
	markerListRow =  document.getElementById("markerListRow" + index);
	
	markerListRow.className = "highlight";
	
	var listDiv = document.getElementById("list");
	listDiv.scrollTop = document.getElementById("markerListRow" + index).scrollHeight;
	
	var theElement = markerListRow;
	var selectedPosY = 0;
		  
	while(theElement != null){
		selectedPosY += theElement.offsetTop;
		theElement = theElement.offsetParent;
	}
								  
	listDiv.scrollTop = selectedPosY;
}

function clearMarkerListSelection()
{
	for (var i = 0; i < PositionDataArray.length; i++) {
	
		if (i % 2 == 0)
		{
			rowClass = "lowlightEven";
		}
		else
		{
			rowClass = "lowlightOdd";	
		}

		document.getElementById("markerListRow" + i).className = rowClass;	
	}
}

function handleMarkerListClick(index) {

	var marker = markers[index];
	onClick.call(marker);
}

function reload() {

		GUnload();

		map = new GMap2(document.getElementById("map"));

		map.addControl(new GSmallMapControl(),
					   new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(5, 5)));
		
		map.addControl(new GMapTypeControl(),
					   new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(5, 5)));
		
		//map.setCenter(defaultMapCenter, defaultMapZoom);
		map.setCenter(gLatLngBounds.getCenter(), this.map.getBoundsZoomLevel(gLatLngBounds));

		GEvent.addListener(map, 'click', clearMarkerListSelection);
		
		//create the base icon info
		panoMarkerIcon = new GIcon(G_DEFAULT_ICON);			
	
		for (var i = 0; i < PositionDataArray.length; i++) {

			var PositionData = PositionDataArray[i];

			var point = new GLatLng(PositionData.lat,
								  PositionData.lng);

			createMarker(point, i+1, PositionData);
		}
		
		// setMapSize();

		GEvent.addListener(map, 'zoomend', handleZoomAndPan);
		GEvent.addListener(map, 'moveend', handleZoomAndPan);
}

function load() {

	if (GBrowserIsCompatible()) {

		if (map != 'undefined' || map != null)
		{
			GUnload();
		}

		map = new GMap2(document.getElementById("map"));

		map.addControl(new GSmallMapControl(),
					   new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(5, 5)));
		
		map.addControl(new GMapTypeControl(),
					   new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(5, 5)));
		
		map.setCenter(defaultMapCenter, defaultMapZoom);
		
		GEvent.addListener(map,'click', clearMarkerListSelection);

		createMarkerList();

		//create the base icon info
		panoMarkerIcon = new GIcon(G_DEFAULT_ICON);			
	
		for (var i = 0; i < PositionDataArray.length; i++) {

			var PositionData = PositionDataArray[i];

			var point = new GLatLng(PositionData.lat,
								  PositionData.lng);

			createMarker(point, i+1, PositionData);
		}

		setMapSize();

		GEvent.addListener(map, 'zoomend', handleZoomAndPan);
		GEvent.addListener(map, 'moveend', handleZoomAndPan);

		this.document.getElementById("mapTitleText").innerHTML = mapTitleText;
		this.document.getElementById("listMapLinks").innerHTML = listMapLinks;
		this.document.getElementById("listTitleText").innerHTML = listTitleText;
	}
}

function handleZoomAndPan() {
    gLatLngBounds = map.getBounds();   
}

function initLightbox() {

    if (!document.getElementsByTagName) { return; }
    var anchors = document.getElementsByTagName('a');

    // loop through all anchor tags
    for (var i = 0; i < anchors.length; i++) {
        var anchor = anchors[i];

        var relAttribute = String(anchor.getAttribute('rel'));

        // use the string.match() method to catch 'lightbox' references in the rel attribute
        if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))) {
            anchor.onclick = function() { myLightbox.start(this); return false; }
        }
    }

    // The rest of this code inserts html at the bottom of the page that looks similar to this:
    //
    //	<div id="overlay"></div>
    //	<div id="lightbox">
    //		<div id="outerImageContainer">
    //			<div id="imageContainer">
    //				<a href="#" id="panoLink"><img id="lightboxImage"></a>
    //				<div style="" id="hoverNav">
    //					<a href="#" id="prevLink"></a>
    //					<a href="#" id="nextLink"></a>
    //				</div>
    //				<div id="loading">
    //					<a href="#" id="loadingLink">
    //						<img src="images/loading.gif">
    //					</a>
    //				</div>
    //			</div>
    //		</div>
    //		<div id="imageDataContainer">
    //			<div id="imageData">
    //				<div id="imageDetails">
    //					<span id="caption"></span>
    //					<span id="numberDisplay"></span>
    //				</div>
    //				<div id="bottomNav">
    //					<a href="#" id="bottomNavClose">
    //						<img src="images/close.gif">
    //					</a>
    //				</div>
    //			</div>
    //		</div>
    //	</div>


    var objBody = document.getElementsByTagName("body").item(0);

    var objOverlay = document.createElement("div");
    objOverlay.setAttribute('id', 'overlay');
    objOverlay.style.display = 'none';
    objOverlay.onclick = function() { myLightbox.end(); return false; }
    objBody.appendChild(objOverlay);

    var objLightbox = document.createElement("div");
    objLightbox.setAttribute('id', 'lightbox');
    objLightbox.style.display = 'none';
    objBody.appendChild(objLightbox);

    var objOuterImageContainer = document.createElement("div");
    objOuterImageContainer.setAttribute('id', 'outerImageContainer');
    objLightbox.appendChild(objOuterImageContainer);

    var objPanoLink = document.createElement("a");
    objPanoLink.setAttribute('id', 'panoLink');
    objPanoLink.setAttribute('href', '#');
    objPanoLink.setAttribute('title', 'click for interactive view');
    objOuterImageContainer.appendChild(objPanoLink);

    var objImageContainer = document.createElement("div");
    objImageContainer.setAttribute('id', 'imageContainer');
    objPanoLink.appendChild(objImageContainer);

    var objLightboxImage = document.createElement("img");
    objLightboxImage.setAttribute('id', 'lightboxImage');
    objImageContainer.appendChild(objLightboxImage);

    var objHoverNav = document.createElement("div");
    objHoverNav.setAttribute('id', 'hoverNav');
    objImageContainer.appendChild(objHoverNav);

    //var objPrevLink = document.createElement("a");
    //objPrevLink.setAttribute('id','prevLink');
    //objPrevLink.setAttribute('href','#');
    //objHoverNav.appendChild(objPrevLink);

    //var objNextLink = document.createElement("a");
    //objNextLink.setAttribute('id','nextLink');
    //objNextLink.setAttribute('href','#');
    //objHoverNav.appendChild(objNextLink);

    var objLoading = document.createElement("div");
    objLoading.setAttribute('id', 'loading');
    objLightbox.appendChild(objLoading);

    var objLoadingImage = document.createElement("img");
    objLoadingImage.setAttribute('src', fileLoadingImage);
    objLoading.appendChild(objLoadingImage);

    var objImageDataContainer = document.createElement("div");
    objImageDataContainer.setAttribute('id', 'imageDataContainer');
    objImageDataContainer.className = 'clearfix';
    objLightbox.appendChild(objImageDataContainer);

    var objImageData = document.createElement("div");
    objImageData.setAttribute('id', 'imageData');
    objImageDataContainer.appendChild(objImageData);

    var objImageDetails = document.createElement("div");
    objImageDetails.setAttribute('id', 'imageDetails');
    objImageData.appendChild(objImageDetails);

    var objCaption = document.createElement("span");
    objCaption.setAttribute('id', 'caption');
    objImageDetails.appendChild(objCaption);

    var objInstructionsDetails = document.createElement("div");
    objInstructionsDetails.setAttribute('id', 'InstructionsDetails');
    objImageData.appendChild(objInstructionsDetails);

    var objInstructions = document.createElement("span");
    objInstructions.setAttribute('id', 'instructions');
    objInstructionsDetails.appendChild(objInstructions);

    var objNumberDisplay = document.createElement("span");
    objNumberDisplay.setAttribute('id', 'numberDisplay');
    objImageDetails.appendChild(objNumberDisplay);

    var objBottomNav = document.createElement("div");
    objBottomNav.setAttribute('id', 'bottomNav');
    objImageData.appendChild(objBottomNav);

    var objBottomNavCloseLink = document.createElement("a");
    objBottomNavCloseLink.setAttribute('id', 'bottomNavClose');
    objBottomNavCloseLink.setAttribute('href', '#');
    objBottomNavCloseLink.onclick = function() { myLightbox.end(); return false; }
    objBottomNav.appendChild(objBottomNavCloseLink);

    var objBottomNavCloseImage = document.createElement("img");
    objBottomNavCloseImage.setAttribute('src', fileBottomNavCloseImage);
    objBottomNavCloseLink.appendChild(objBottomNavCloseImage);
}