﻿var xmldoc;
var baseIcon = new GIcon();
var focusPOI = {};

  baseIcon.shadow = "/images/shadowB.png";
  baseIcon.iconSize = new GSize(21, 31);
  baseIcon.shadowSize = new GSize(52, 29);
  baseIcon.iconAnchor = new GPoint(7, 31);
  baseIcon.infoWindowAnchor = new GPoint(9, 2);
  baseIcon.infoShadowAnchor = new GPoint(18, 25);
  
function mapAnchor(){
  var clickZone = document.getElementById("mapWindow");
  clickZone.addEventListener("click", openMap, false);
  var clickZone = document.getElementById("pClose");
  clickZone.addEventListener("click", closeMap, false);
}

function swapMe(pid){
 var orig = document.getElementById("mainPic");
 var newPic = document.getElementById(pid);
 var newPicSrc = newPic.getAttribute("src");
 var origSrc = orig.getAttribute("src");
 orig.setAttribute("src", newPicSrc);
 newPic.setAttribute("src", origSrc);
  
}

function aMapLoad(latitude, longitude, zoom) {
  //drawWindow();
  if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("mapThb"));
    map.enableDoubleClickZoom();
    var point = new GLatLng(latitude, longitude);
 	map.setCenter(point, zoom);
  }
 //var clickZone = document.getElementById("mapWindow");
 //clickZone.setAttribute("onclick", "openMap();", false);
 //var clickZone = document.getElementById("pClose");
 //clickZone.setAttribute("onclick", "closeMap();", false);
 

}


function openMap(){
//window.alert('hi');
  var clickZone = document.getElementById("popup");
  var map = document.getElementById("mainWin");
//  var cClose = document.getElementById("cClose");
  clickZone.style.visibility = "visible";
  map.className = "transOn";
  //map.style.filter = "alpha(opacity=22)";
  //window.alert(map.className);
  
  dataAcquire();
//  openBox("controlBox");
//  hideOpenLink();
//  cClose.addEventListener("click", closeBox, false);
}

function closeMap(){
  //window.alert('bye');
  var clickZone = document.getElementById("popup");
  var map = document.getElementById("mainWin");
  clickZone.style.visibility = "hidden";
//  closeBox();
//  hideOpenLink();
  map.className = "transOff";
  //window.alert(map.className);
}

function dataAcquire(){
  var bMap = new GMap2(document.getElementById("pFrame"));
  if (window.XMLHttpRequest) { // Mozilla, Safari, ...
	http_request = new XMLHttpRequest();
	if (http_request.overrideMimeType) {
	  http_request.overrideMimeType('text/xml');
	                // See note below about this line
	}
  } 
  else if (window.ActiveXObject) { // IE
	try {
	  http_request = new ActiveXObject("Msxml2.XMLHTTP");
	} 
	catch (e) {
	  try {
	    http_request = new ActiveXObject("Microsoft.XMLHTTP");
	  }
	  catch (e) {}
	}
  }
  if (!http_request) {
	return false;
  }
  http_request.onreadystatechange = function() { setSelect(bMap, http_request); };
  
  http_request.open('GET', 'getDataPoints.php?tid=' + focusPOI.id, true);
  http_request.send(null);

}

function setSelect(bMap, http_request) {
  if (http_request.readyState == 4) {
    if (http_request.status == 200) {
      xmldoc = http_request.responseXML;
      drawMap(bMap);
	}
    else {
      alert('There was a problem with the request.');
    }
  }
}

function openBox(eid){
  var elem = document.getElementById(eid);
  elem.style.visibility = "visible";
}

function closeBox(){
  var eid = "controlBox";
  var elem = document.getElementById(eid);
  elem.style.visibility = "hidden";
  showOpenLink();

}
function hideOpenLink(){
  var elem = document.getElementById("contBoxOpen");
  elem.style.visibility = "hidden";

}

function showOpenLink(){
  var elem = document.getElementById("contBoxOpen");
  elem.style.visibility = "visible";
  elem.addEventListener("click", openHide, false);

}
function openHide(){
  openBox("controlBox");
  hideOpenLink();
}

function drawMap(bMap){
  var mapInfo = xmldoc.getElementsByTagName('map');
  var dataPoints = xmldoc.getElementsByTagName('datum');
  var markers = [];
  var iwHtml = [];
  var lName;
  var point = new GLatLng(mapInfo[0].getAttribute("latitude"), mapInfo[0].getAttribute("longitude")); //'39.274772', '-76.586877');
  var pageTitle = document.getElementById("pTitleHolder");
  pageTitle.innerHTML = mapInfo[0].getAttribute("title");
  
  bMap.addControl(new GSmallMapControl());
  bMap.addControl(new GMapTypeControl());
  bMap.addControl(new GScaleControl());
  bMap.enableContinuousZoom();
  bMap.enableDoubleClickZoom();
  bMap.setCenter(point, parseInt(mapInfo[0].getAttribute("zoom")));
  
  
  for(j = 0; j < dataPoints.length; j++){
    lName = dataPoints[j].getAttribute("name");
    baseIcon.image = "/images/" + dataPoints[j].getAttribute("icon") + ".png";
    markers[j] = createMarker(new GLatLng(dataPoints[j].getAttribute("latitude"), dataPoints[j].getAttribute("longitude")), lName); //new GMarker(new GLatLng(locations[i].getAttribute("la"),locations[i].getAttribute("lo")), icon, locations[i].getAttribute("na"));
    iwHtml[j] = lName;
	markers[j].infowindow = iwHtml[j];
	bMap.addOverlay(markers[j]);
  }
   
}
         

function createMarker(point, name){
  var marker = new GMarker(point, {icon:baseIcon, title:name} );
  
  GEvent.addListener(marker, 'click', function() {
	//var text = html;
	marker.openInfoWindowHtml(name);
	
  });

  return marker;
}

function drawCommuterRoute(){

}

function drawWindow(){
  var baseEle = document.getElementById('popup');
  var span1 = document.createElement("span"); var span2 = document.createElement("span"); var span3 = document.createElement("span"); var span4 = document.createElement("span"); var span5 = document.createElement("span"); var span6 = document.createElement("span");
  var img1 = document.createElement("img"); var img2 = document.createElement("img"); var img3 = document.createElement("img"); var img4 = document.createElement("img"); var img5 = document.createElement("img"); var img6 = document.createElement("img");
  var img7 = document.createElement("img"); var img8 = document.createElement("img"); var img9 = document.createElement("img"); var img10 = document.createElement("img"); var img11 = document.createElement("img");
  var div1 = document.createElement("div"); var div2 = document.createElement("div"); var div3 = document.createElement("div");
  var tab1 = document.createElement("table");
  var label1 = document.createElement("label");
  var form1 = document.createElement("form");
  var input1= document.createElement("input"); var input2= document.createElement("input"); var input3= document.createElement("input"); var input4= document.createElement("input");
  
  span1.setAttribute("id", "pClose");
  span1.setAttribute("onclick", "closeMap();");
  img1.setAttribute("src", "/images/close.gif");
  var text1 = document.createTextNode("close ");
  baseEle.appendChild(span1);
  span1.appendChild(text1);
  span1.appendChild(img1);
  
  span2.setAttribute("class", "pTitle");
  span2.setAttribute("id", "pTitleHolder");
  var text2 = document.createTextNode(""); //Water Taxi Landings");
  baseEle.appendChild(span2);
  span2.appendChild(text2);
  //div1.setAttribute("id", "contBoxOpen");
  //div1.setAttribute("class", "cpFlash");
  //var text3 = document.createTextNode("Open Control Panel");
  //baseEle.appendChild(div1);
  //div1.appendChild(text3);
  
  div2.setAttribute("id", "pFrame");
  baseEle.appendChild(div2);
  
} 
/*
<img id="mainPic" src="images/gallery/fellspoint8.jpg" width="312" style="margin-bottom: 5px;"/>
<img src="images/gallery/water-taxi-docking.jpg" width="102" id="p1" onclick="swapMe(this.id);" /> <img src="images/gallery/water-taxi-inner-harbor.jpg" width="102" id="p2" onclick="swapMe(this.id);" /> <img src="images/gallery/water-taxi-running.jpg" width="102" id="p3" onclick="swapMe(this.id);" />
<div id="mapWindow" style="text-align: right; margin-right: 10px;" onclick="openMap();">
<label style="font-weight: bold;">Landing Map</label>


  '<span id="pClose" onclick="closeMap();">close <img src="/images/close.gif" /></span>
    <span class="pTitle" id="pTitleHolder"></span>
    <div id="pFrame"></div>';
*/
