//<![CDATA[
var map;
var geocoder;
var maxRecord = 20;
//var msStoreLocatorWSPath= "http://localhost:1937/StoreLocator.asmx"
var msSPListName = "UnifiedFacilities"
//var msStoreLocatorWSPath= "http://www.unifiedgrocers.dev/WebServices/UnifiedFacilities.asmx"
//var msStoreLocatorWSPath= "http://webdevspt03.uwgweb.dev/WebServices/UnifiedFacilities.asmx"
var msStoreLocatorWSPath= "http://www.unifiedgrocers.com/WebServices/UnifiedFacilities.asmx"
var baseIcon;
var displayedRecord;
//var infoWin;
var client;
var panorama;
var gShowStreetView = true; 
var gDir = null; //GDirections - use for direction from point A to point B
var msaddr = ""

//traffic
var trafficInfo;
var toggleState = 0;

function load() {        
  if (GBrowserIsCompatible()) {
    client = new GStreetviewClient();
    geocoder = new GClientGeocoder();
    map = new GMap2(document.getElementById('map'));
    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());
    map.setCenter(new GLatLng(40.5, -118), 5);
    map.enableScrollWheelZoom();
    
    //traffic
    var trafficOptions = {incidents:true};
    trafficInfo = new GTrafficOverlay(trafficOptions);
    //map.addOverlay(trafficInfo);
    
        // Create a base icon for all of our markers that specifies the
        // shadow, icon dimensions, etc.
        baseIcon = new GIcon()
        baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
        baseIcon.iconSize = new GSize(20, 34);
        baseIcon.shadowSize = new GSize(37, 34);
        baseIcon.iconAnchor = new GPoint(9, 34);
        baseIcon.infoWindowAnchor = new GPoint(9, 2);
        baseIcon.infoShadowAnchor = new GPoint(18, 25);
    // === create a GDirections Object ===
    gDir=new GDirections(map, document.getElementById("directions"));
    //GetStreetView()
	//infoWin = map.getInfoWindow();
  }
}

function searchLocations(psRegion) {
 //var address = document.getElementById('addressInput').value;    
 var radius = "1000"

 //geocoder.getLatLng(address, function(latlng) {
 //  if (!latlng) {
 //    alert(address + ' not found');
 //  } else {
    //latlng = (55.967625, -3754488)
     searchLocationsNear(psRegion);
     //map.addOverlay(createOriginMarker(new GLatLng(latlng.lat(), latlng.lng()), address))
 //  }
 //});
}

function searchLocationsNear(psRegion) {
 //var searchUrl = 'phpsqlsearch_genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
 var data = GetFacilitiesByRegion(psRegion);

 var xml = GXml.parse(data);
 var markers = xml.documentElement.getElementsByTagName('marker');
   map.clearOverlays();

   var sidebar = document.getElementById('sidebar');
   sidebar.innerHTML = '';
   if (markers.length == 0) {
     sidebar.innerHTML = 'No results found.';
     map.setCenter(new GLatLng(40, -100), 4);     
     return;
   }
   displayedRecord = maxRecord;
   if (markers.length < displayedRecord)
        displayedRecord = markers.length
   var divSideSummary = document.createElement('div');
   divSideSummary.style.marginBottom = '7px'
   divSideSummary.innerHTML = "Results <b>1 - " + displayedRecord + "</b> of <b>" + 
        markers.length;
   sidebar.appendChild(divSideSummary)
   var bounds = new GLatLngBounds();
   for (var i = 0; i < displayedRecord; i++) {
     var name = markers[i].getAttribute('name');
     var address = markers[i].getAttribute('address') + '<br/>' +
     	markers[i].getAttribute('city') + ', ' + markers[i].getAttribute('state') + ' ' +
     	markers[i].getAttribute('zip');
     var phone = ""; //markers[i].getAttribute('phone');
     //var distance = parseFloat(markers[i].getAttribute('distance'));
     var point = new GLatLng(parseFloat(markers[i].getAttribute('lat')),
                             parseFloat(markers[i].getAttribute('lng')));
                             
    // Create a lettered icon for this point using our icon class
     var letter = String.fromCharCode("A".charCodeAt(0) + i);
  
     var marker = createMarker(point, letter, name, address, phone);
     map.addOverlay(marker);
     var sidebarEntry = createSidebarEntry(marker, letter, name, address, phone);     
     sidebar.appendChild(sidebarEntry);
     bounds.extend(point);
   }
   map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
}

function clearSidebar(){
  for (var i = 0; i < displayedRecord; i++) {
   document.getElementById("sideBarItem_" +  String.fromCharCode("A".charCodeAt(0) + i)).style.backgroundColor = '#fff';
  }
}
// clear Directions from map and sidebar
function clearDirections(bHideTraffic){
	document.getElementById("sidebar").style.visibility = "visible";
    document.getElementById("directions").style.visibility = "hidden";	
    gDir.clear();	//clear directions
    map.returnToSavedPosition();	//restore to position on last location search
    if (bHideTraffic){
        toggleTraffic('hide');
        }
}

function openPanoramaBubble(marker, oLatLng, psHtml) {
  var contentNode = document.createElement('div');
  try{
	//contentNode.style.textAlign = 'center';
	//contentNode.style.width = '500px';
	//contentNode.style.height = '300px';
	//contentNode.innerHTML =  'Loading panorama';

	//var smallNode = document.createElement('div');
	//smallNode.style.width = '200px';
	//smallNode.style.height = '200px';
	//smallNode.innerHTML = psHtml;
	//smallNode.id = 'pano';
	//marker.openInfoWindow(smallNode, {maxContent: contentNode, maxTitle: "Full screen"});
	//marker.openInfoWindow(smallNode);
	//marker.openInfoWindowHtml(psHtml);
	
	client.getNearestPanorama(oLatLng, function(response){
		if (response.code == 200){
		  marker.openInfoWindowTabsHtml([new GInfoWindowTab('Info',
			psHtml), new GInfoWindowTab('Street View','<div name="pano" id="pano" style="width: 275px; height: 200px;"></div>')]);
		  var getStreet = function(){getStreetView(oLatLng)};	//workaround to pass parameters in setTimeout
  	      setTimeout(getStreet, 3000)
		}
		else{
		  marker.openInfoWindowHtml(psHtml)
		}
		
	});
	
	
  }
  catch(err){}
}

function getStreetView(poPoint) {
  try{
	panorama = new GStreetviewPanorama(document.getElementById("pano"));
	if (!poPoint)
	    poPoint = new GLatLng(42.345573,-71.098326);
	myPOV = {yaw:370.64659986187695,pitch:0, zoom:1};
	panorama.setLocationAndPOV(poPoint, myPOV);
	GEvent.addListener(panorama, "error", handleNoFlash);
  }
  catch(err){}
}

// Creates a marker whose info window displays the letter corresponding
// to the given index.
function createMarker(point, letter, name, address, phone) {
  var letteredIcon = new GIcon(baseIcon);
  letteredIcon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";

  // Set up our GMarkerOptions object
  markerOptions = { icon:letteredIcon };
  var marker = new GMarker(point, markerOptions);
  var sHtml = '<div class="label"><b>' + name + '</b><br/>' + address + '<br/>' + phone + '</div>' +
	    '<br>Directions: <b>To here<\/b>' +
           '<br>Start address:<form action="javascript:getDirections()">' +
           '<input type="text" SIZE=30 MAXLENGTH=40 name="saddr" id="saddr" value="" /><br>' +
           '<img src="_layouts/1033/images/UnifiedInternet/Icon/btnGetDirections.gif" ' +
           ' onClick="javascript:getDirections()" ' +
           ' onMouseOver="mouseOverOut(this, \'_layouts/1033/images/UnifiedInternet/Icon/btnGetDirections_.gif\', \'hand\') "' +
           ' onMouseOut="mouseOverOut(this, \'_layouts/1033/images/UnifiedInternet/Icon/btnGetDirections.gif\', \'default\') "' +  
           ' /><br/>' +
           'Walk <input type="checkbox" name="walk" id="walk" /> &nbsp; Avoid Highways <input type="checkbox" name="highways" id="highways" />' +
           ' Show Traffic <input type="checkbox" name="traffic" id="traffic" />' +
           '<input type="hidden" id="daddr" value="'+name+"@"+ point.lat() + ',' + point.lng() + 
           '"/>';
  	
  	
  GEvent.addListener(marker, "click", function() {
    try{
      if (gShowStreetView){
    	openPanoramaBubble(marker, point, sHtml);}
     else{
    	marker.openInfoWindowHtml(sHtml);}
  	  //openPanoramaBubble(marker, point, sHtml);
  	  handleSidebar(letter)
  	  document.getElementById("saddr").value = msaddr	//populate address box
  	  clearDirections(true)
  	}
  	catch(err){}
  	});
	
//  var iw = map.getInfoWindow();
//  GEvent.addListener(iw, "maximizeend", function() {
//    panorama.setContainer(pano);  
//    window.setTimeout("panorama.checkResize()", 5);  
//  });

  return marker;
}

// ===== request the directions =====
function getDirections() {
  // ==== Set up the walk and avoid highways options ====
  var opts = {};
  if (document.getElementById("walk").checked) {
     opts.travelMode = G_TRAVEL_MODE_WALKING;
  }
  if (document.getElementById("highways").checked) {
     opts.avoidHighways = true;
  }
  // ==== set the start and end locations ====
  msaddr = document.getElementById("saddr").value
  var daddr = document.getElementById("daddr").value
  //document.getElementById("addressInput").value = gOriginMarkerPoint.toString().replace("(", "").replace(")", "")
  gDir.load("from: " + msaddr + " to: " + daddr, opts);
  
	if (document.getElementById("traffic").checked) {
      toggleTraffic('show');
      };  
  
  GEvent.addListener(gDir, "load", function(){
	document.getElementById("sidebar").style.visibility = "hidden";
	document.getElementById("directions").style.visibility = "visible";
	map.getInfoWindow().hide();

  });
  
}


function handleNoFlash(errorCode) {
  if (errorCode == 603) {
    //alert("Error: Flash doesn't appear to be supported by your browser");
    document.all("pano").innerHTML = "<a target='_blank' href='http://www.adobe.com/go/getflash' >" +
    	"Flash is required for Street View. Click here to install flash</a>"
    return;
  }
}  

function handleSidebar(letter){
  	clearSidebar();
  	document.getElementById("sideBarItem_" + letter).style.backgroundColor = '#b6d0e9';
  	//document.getElementById("sidebar").style.top  = -100
}

function createOriginMarker(point, address) {
    //originIcon is based on baseIcon, but with differences
  var originIcon = new GIcon(baseIcon);
  originIcon.iconSize=new GSize(32,32);
  originIcon.shadowSize=new GSize(59,32);
  originIcon.iconAnchor = new GPoint(9,34);
  originIcon.image = "blue-dot.png"
  originIcon.shadow = "msmarker_shadow.png";
  //originIcon.image = "_layouts/1033/images/UnifiedInternet/Icon/blue-dot.png"
  //originIcon.shadow = "_layouts/1033/images/UnifiedInternet/Icon/msmarker_shadow.png";
  
  //originIcon.image = "http://maps.google.com/mapfiles/kml/pal3/icon23.png" //"http://www.google.com/mapfiles/arrow-white.png";

  // Set up our GMarkerOptions object
  markerOptions = { icon:originIcon };
  var marker = new GMarker(point, markerOptions);
  var html = '<div class="label"><b>' + address + '<br/></div>';
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(html);    
  });
  return marker;
}


function createSidebarEntry(marker, letter, name, address, phone) {
  var div = document.createElement('div');
  div.setAttribute('id','SideBarItem_' + letter)
  var imgMarker = "http://www.google.com/mapfiles/marker" + letter + ".png";
  var html = 
        //'<img id="imgMarker_' + letter +  '" src="' + imgMarker + '" />' +
        //'<b>(' + letter +') ' + name + '</b><br/>' + address + '<br/>' + phone;
        '<td valign="top" width="10px"><b>(' + letter +')</b></td><td><b>' +
         name + '</b><br/>' + address + '<br/>' + phone + '</td>';
  div.innerHTML = '<table><tr>' + html + '</tr></table>';  
  div.style.cursor = 'pointer';
  div.style.marginBottom = '5px'; 
  GEvent.addDomListener(div, 'click', function() {
    GEvent.trigger(marker, 'click');
    div.style.backgroundColor = '#b6d0e9';
  });
  GEvent.addDomListener(div, 'mouseover', function() 
  {
    if (div.style.backgroundColor != '#b6d0e9')
    div.style.backgroundColor = '#d9e6f2';
  });
  GEvent.addDomListener(div, 'mouseout', function() {
    if (div.style.backgroundColor == '#d9e6f2')
    	div.style.backgroundColor = '#fff';
  });
  return div;
}

function mouseOverOut(poCntl, psImagePath, psCursor)
{
	if (psImagePath)
		poCntl.src= psImagePath
	if (psCursor)
		poCntl.style.cursor = psCursor
}

function toggleTraffic(pbShow) {
  if (pbShow){
    if (pbShow == 'show')
        toggleState = 0
    else
        toggleState = 1
  }
  if (toggleState == 1) {
    map.removeOverlay(trafficInfo);
    toggleState = 0;
  } else {
    map.addOverlay(trafficInfo);
    toggleState = 1;
  }
}


//Call webservice
function GetFacilitiesByRegion(psRegion)
{   
    var oXmlHttp; 
    try
    {
        oXmlHttp = new ActiveXObject("MSXML2.XMLHTTP");
    }
    catch (e)
         {
            try{oXmlHttp = new XMLHttpRequest();}
            catch (e){}
         }
    if (!oXmlHttp)
    {
        alert("Error creating the XMLHttpRequest object.");
        return false;
    }
    oXmlHttp.open("POST", msStoreLocatorWSPath, false);    
    oXmlHttp.setRequestHeader("Content-Type", "text/xml");    
    oXmlHttp.setRequestHeader("SOAPAction", "http://tempuri.org/GetFacilitiesMarkersbyRegion");    
    oXmlHttp.send("<soap:Envelope xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance' xmlns:xsd='http://www.w3.org/2001/XMLSchema' xmlns:soap='http://schemas.xmlsoap.org/soap/envelope/'> \
      <soap:Body>   \
        <GetFacilitiesMarkersbyRegion xmlns='http://tempuri.org/'>   \
          <psRegion>" + psRegion + "</psRegion> \
          <psList>" + msSPListName + "</psList> \
        </GetFacilitiesMarkersbyRegion>  \
      </soap:Body>  \
    </soap:Envelope>");   
    return getNodeText(oXmlHttp.responseXML.getElementsByTagName("GetFacilitiesMarkersbyRegionResult")[0]);
    //return oXmlHttp.responseXML.getElementsByTagName("GetFacilitiesMarkersbyRegionResult")[0].firstChild.nodeValue;
    //return oXmlHttp.responseXML.selectSingleNode("//GetFacilitiesMarkersbyRegionResult").text;
}

//firefox limits 4096 bytes if ".textContent" is not used
function getNodeText(xmlNode)
{
    if(!xmlNode) return '';
    if(typeof(xmlNode.textContent) != "undefined") return xmlNode.textContent;
    return xmlNode.firstChild.nodeValue;
}

    //]]>