
<?php
  $q = empty($_REQUEST['q']) ? "San Francisco" : $_REQUEST['q'];
  $z = empty($_REQUEST['z']) ? 8 : (int)($_REQUEST['z']);
  $t = empty($_REQUEST['t']) ? 'MAP' : htmlspecialchars($_REQUEST['t']);
  $c = empty($_REQUEST['c']) ? 'yellow' : htmlspecialchars($_REQUEST['c']);
  $cols = array('blue','red','orange','black','yellow','grey','green','ltblue','purple');
  $t = str_replace('YAHOO_','',$t);
  $map_o = array('MAP','SAT','HYB');
  if(!in_array($c,$cols)) $c='yellow';
  if(!is_array($q)) $q = array($q);
  if(!in_array($t,$map_o)) $t = 'MAP';
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=3.8&appid=rlerdorf"></script>
<script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/yahoo_2.0.0-b4.js"></script>
<script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/connection_2.0.1-b4.js"></script>
<script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/event_2.0.0-b4.js"></script>
<script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/dom_2.0.0-b4.js"></script>
<script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/dragdrop_2.0.0-b4.js"></script>
<link type="text/css" rel="stylesheet" href="ymap.css" />
<script type="text/javascript">
var q = <?php echo json_encode($q)?>;
var jsmap = false; var link = false;
var menu = false; var field = false;
var sets = false; var set_pins = false;
var buttons = false;
var pin_colour = -1;
var zoom=-1;
var last_q = false;
var last_zoom = false;
var pin = new Array();
var sizes = [null,new YSize(75, 64),new YSize(65, 56),new YSize(56, 48), new YSize(52,45), new YSize(50,43), new YSize(49,42), new YSize(47, 40), new YSize(44,37), new YSize(39, 33), new YSize(36,31), new YSize(32, 27),new YSize(27, 23),new YSize(23, 19),new YSize(19, 16),new YSize(16, 13),new YSize(13, 11),new YSize(11, 9),new YSize(9, 7),new YSize(8, 6),new YSize(6, 5)]
var initial_z = <?php echo empty($_REQUEST['z']) ? -1 : (int)$_REQUEST['z']; ?>;
var marks=new Array();
var pcols=new Array();
var isSafari = (/Safari|Konqueror|KHTML/gi).test(navigator.userAgent);

var fN = function callBack(o) {
  var resp = eval('(' + o.responseText + ')');
  if(resp['pinlist']) {
    for(var i in resp['pinlist']) {
      locations[resp['pinlist'][i]['Address']] = new geoPoint(resp['pinlist'][i]['lat'],resp['pinlist'][i]['lon']);
      createPin(resp['pinlist'][i]['Address']);
    }
  }
}
var callback = { success:fN }
function postData(target,postData) {
   YAHOO.util.Connect.asyncRequest('POST',target,callback,postData);
}

function saveSet() {
  var data = "cmd=save";
  for(i in marks) {
    data += "&p[]="+escape(marks[i])+"&c[]="+escape(pcols[i]);
  }
}

function init() {
  YAHOO.util.Event.addListener(document.getElementById('iq'),'keypress',eKeyPress);
  if(!isSafari) YAHOO.util.Event.addListener(document.getElementById('iq'),'keydown',eKeyStop);
  jsmap = new YMap(document.getElementById('jsmapContainer'));
  YEvent.Capture(jsmap, EventsList.endPan, updateLink);  
  YEvent.Capture(jsmap, EventsList.changeZoom, updateZoom);  
  YEvent.Capture(jsmap, EventsList.onEndGeoRSS, geoRSS);
  YEvent.Capture(jsmap, EventsList.onEndGeoCode, geoDone);
  YLog.initPos(new YCoordPoint(300,10));
  <?php if($t!='MAP') { echo "  jsmap.setMapType('YAHOO_{$t}');\n"; } ?>
  link = document.getElementById('link');
  menu = document.getElementById('menu');
  sets = document.getElementById('sets');
  document.getElementById('iq').focus();
  if(navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer") {
    YAHOO.util.Dom.batch(YAHOO.util.Dom.getElementsByClassName('map'),fixPNG);
  } else if(isSafari) {
    document.getElementById('iq').style.background = '#666';
    document.getElementById('menu').style.top = 61;
  }
  choosePin('<?php echo $c?>',0);
  for(var i in q) {
    marks[q[i]] = 1;
  }
  updateMap(q[i]);
  jsmap.addZoomLong();
/*  jsmap.addNavigatorControl(); */
  for(var i in marks) {
    if(marks[i]==1) createPin(i);
  }
}

function fixPNG(elem) {
  var bg = elem.currentStyle.backgroundImage;
  var mypng = bg.substring(5,bg.length-2);
  elem.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+mypng+"', sizingMethod='scale')";
  elem.style.backgroundImage = "url('http://us.i1.yimg.com/us.yimg.com/i/us/map/gr/sp.gif')";
}

function updateMap(loc) {
  var res = null;
  var result = null;
  if(zoom==-1) {
     last_zoom=zoom;
     zoom=<?php echo $z?>;
  }
  if(loc.length) {
    if(loc.match(/(\.xml|\.rss)/)) {
      jsmap.addOverlay(new YGeoRSS(loc));
    } else if(loc.match(/\s+(near|in)\s+/)) {
      jsmap.addOverlay(new YGeoRSS('http://lerdorf.com/geo.php?q='+escape(loc)));
    } else {
      if(last_zoom==-1 && initial_z==-1) {
        if(loc.match(/^.*[0-9]+ .*/)) {
          zoom = 3;  // address
        } else if(loc.match(/^[0-9]+$/)) {
          zoom = 5;  // zip
        } else if(loc.match(/^[^0-9]+$/)) { 
          zoom = 9;  // city/country
        }
      }
      if(res = loc.match(/^\s*([0-9.-]+)\,\s*([0-9.-]+)$/)) {
        jsmap.drawZoomAndCenter(new YGeoPoint(res[1],res[2]), zoom);
      } else {
        if(marks[loc]==1) marks[loc] = 2;
        jsmap.drawZoomAndCenter(loc,zoom);
      }
      zoom = jsmap.getZoomLevel();
      if(last_zoom!=-1 && zoom!=last_zoom) updateZoom();
    }
  }
  link.href = 'ymap?q='+loc+'&z='+zoom;
  last_q = loc;
}

function updateZoom() {
  zoom = jsmap.getZoomLevel();
  if(zoom!=last_zoom) {
    for(var i in marks) {
      pin[pcols[i]].size = sizes[zoom];
      marks[i].changeImage(pin[pcols[i]]);
    }
    last_zoom = zoom;
  }
  updateLink();
}

function updateLink() {
  var loc = jsmap.getCenterLatLon();
  console.log(loc);
  var t = jsmap.getCurrentMapType();
  if(t == 'YAHOO_MAP') link.href = 'ymap?q='+loc['Lat']+','+loc['Lon']+'&z='+zoom;
  else link.href = 'ymap?q='+loc['Lat']+','+loc['Lon']+'&z='+zoom+'&t='+t;
}

var status_state = false;

function statusMsg(msg,col) {
  if(!status_state) {
    status_state=true;
    var iq = document.getElementById('iq'); 
    oldv = iq.value;
    oldc = iq.style.color;
    iq.value = msg;
    iq.style.color = col;
    setTimeout(function() { iq.value=oldv; iq.style.color=oldc; status_state=false; } ,400);
  }
}

var locations = new Array();

function geoDone(o) {
//  YLog.print('geolookup '+o.Address);
  if(o.GeoPoint.Lat == 0 && o.GeoPoint.Lon == 0) {
    var iq = document.getElementById('iq');
    statusMsg('Not Found!','#f88');
    if(marks[o.Address]) delete marks[o.Address];
    if(pcols[o.Address]) delete pcols[o.Address];
    if(pinsMenuON) { togglePinsMenu(); togglePinsMenu(); }
  } else {
    locations[o.Address] = o.GeoPoint;
    if(marks[o.Address]==1 || marks[o.Address]==2) {
      createPin(o.Address);
    }
  }
}

function geoRSS() {
  var q = document.myform.q.value;
  // Zoom the Earthquake maps in a bit and switch to hybrid mode
  if(q.match(/.*earthquake\.usgs\.gov/)) {
     jsmap.setZoomLevel(15);
     jsmap.setMapType('YAHOO_HYB');
     updateLink();
   }
}

function eKeyPress(v) {
  if(!isSafari) YAHOO.util.Event.stopPropagation(v);
  if(v.keyCode==13) {
    YAHOO.util.Event.stopEvent(v);
    marks[document.myform.q.value] = 2;
    updateMap(document.myform.q.value);
  }
  return true;
}

function eKeyStop(v) {
  if(!isSafari) YAHOO.util.Event.stopPropagation(v);
  return true;
}

function panToMarker(m) {
  var pt = marks[m].YGeoPoint;
  jsmap.panToLatLon(new YGeoPoint(pt.Lat,pt.Lon));
  document.myform.q.value = m;
}

function disablePin() {
  set_pins = false;
  document.getElementById('current_pin').style.visibility = "hidden";
}

function choosePin(col,andset) {
  set_pins = true;
  document.getElementById('current_pin').style.visibility = "visible";
  if(col!=pin_colour) {
    document.getElementById('current_pin').src = col+'_pin.png';
    pin_colour = col;
    pin[pin_colour] = new YImage();
    pin[pin_colour].src = '/'+pin_colour+'_pin.png';
    pin[pin_colour].offsetSmartWindow = new YCoordPoint(0,0);
  }
  if(andset) createPin(false);
}

function createPin(loc) {
  if(!loc) loc = document.myform.q.value;
  pin[pin_colour].size = sizes[zoom];
  pcols[loc] = pin_colour;
  if(!marks[loc] || marks[loc]==1 || marks[loc]==2) {
//  YLog.print(locations[loc]);
    if(locations[loc]) marks[loc] = new YMarker(locations[loc],pin[pin_colour]);
    else marks[loc] = new YMarker(loc,pin[pin_colour]);
    YEvent.Capture(marks[loc],EventsList.MouseClick, function() { marks[loc].openSmartWindow(loc) });
    jsmap.addOverlay(marks[loc]);
  } else marks[loc].changeImage(pin[pcols[loc]]);
  // Flip the marker menu on and off to repopulate it
  if(pinsMenuON) { togglePinsMenu(); togglePinsMenu(); }
  marks[loc].setSmartWindowColor(pin_colour);
}

function removePin(loc) {
  jsmap.removeMarker(marks[loc].id); 
  delete marks[loc];
  if(pinsMenuON) { togglePinsMenu(); togglePinsMenu(); }
}

var pinsMenuON = false;
function togglePinsMenu() {
  if(pinsMenuON) { menu.style.visibility = 'hidden'; pinsMenuON = false; }
  else { 
    if(setsMenuON) { toggleSetsMenu(); }
    var mstr = "";
    mstr  = "<a onClick='choosePin(\"blue\",1)'><img id=\"blue\" src=\"/blue_pin.png\" width=\"32\" height=\"27\"></a>";
    mstr += "<a onClick='choosePin(\"yellow\",1)'><img id=\"yellow\" src=\"/yellow_pin.png\" width=\"32\" height=\"27\" style=\"margin-left:-15px;\"></a>";
    mstr += "<a onClick='choosePin(\"green\",1)'><img id=\"green\" src=\"/green_pin.png\" width=\"32\" height=\"27\" style=\"margin-left:-15px;\"></a>";
    mstr += "<a onClick='choosePin(\"red\",1)'><img id=\"red\" src=\"/red_pin.png\" width=\"32\" height=\"27\" style=\"margin-left:-15px;\"></a>";
    mstr += "<a onClick='choosePin(\"purple\",1)'><img id=\"purple\" src=\"/purple_pin.png\" width=\"32\" height=\"27\" style=\"margin-left:-15px;\"></a>";
    mstr += "<a onClick='choosePin(\"ltblue\",1)'><img id=\"ltblue\" src=\"/ltblue_pin.png\" width=\"32\" height=\"27\" style=\"margin-left:-15px;\"></a>";
    mstr += "<a onClick='choosePin(\"grey\",1)'><img id=\"grey\" src=\"/grey_pin.png\" width=\"32\" height=\"27\" style=\"margin-left:-15px;\"></a>";
    mstr += "<a onClick='choosePin(\"orange\",1)'><img id=\"orange\" src=\"/orange_pin.png\" width=\"32\" height=\"27\" style=\"margin-left:-15px;\"></a>";
    mstr += "<a onClick='choosePin(\"black\",1)'><img id=\"black\" src=\"/black_pin.png\" width=\"32\" height=\"27\" style=\"margin-left:-15px;\"></a>";
    for(var i in marks) {
      mstr += "<br clear=\"left\"/><a style='cursor:pointer;' onClick='removePin(\""+i+"\");'><img src=\"/"+pcols[i]+"_pin.png\" style=\"float:left; margin-right:-7px;\" width=\"23\" height=\"19\"><a style='cursor:pointer;' onClick='panToMarker(\""+i+"\");'>" + i + "</a>";
    }
    mstr += "<br clear=\"left\"/><a style='cursor:pointer; margin-left:80px;' onClick='loadSet();'>load</a> | <a style='cursor:pointer;' onClick='saveSet();'>save</a>";
    menu.innerHTML = mstr;
    menu.style.visibility = 'visible';
    var dd_blue = new YAHOO.util.DDProxy("blue");
    dd_yellow = new YAHOO.util.DD("yellow");
    dd_green = new YAHOO.util.DD("green");
    dd_red = new YAHOO.util.DD("red");
    dd_purple = new YAHOO.util.DD("purple");
    dd_ltblue = new YAHOO.util.DD("ltblue");
    dd_grey = new YAHOO.util.DD("grey");
    dd_orange = new YAHOO.util.DD("orange");
    dd_yellow.endDrag = function(e) {
      var c = new YCoordPoint(e.pageX-10,e.pageY+19);
      var ll = jsmap.convertXYLatLon(c);
      createPin(ll);
    }
    dd_black = new YAHOO.util.DD("black");
    pinsMenuON = true;
  }
}

var setsMenuON = false;
function toggleSetsMenu() {
  if(setsMenuON) { sets.style.visibility = 'hidden'; setsMenuON = false; }
  else { 
    if(pinsMenuON) { togglePinsMenu(); }
    var mstr = "Sets<br><br>Coming Soon<br>";
     
    sets.innerHTML = mstr;
    sets.style.visibility = 'visible';
    setsMenuON = true;
  }
}

</script>
<title>DHTML Yahoo! Map Demo</title>
</head>
<body style="margin: 0;" onLoad="init();">
<div id="nav" style="position:absolute;top:0px;left:25px;width:250px;z-index:100;">
 <table cellspacing="2px" id="buttons">
  <tr>
   <form id="field" action="/ymap" method="GET" name="myform">
   <td colspan="6">
    <img id="current_pin" src="http://us.i1.yimg.com/us.yimg.com/i/us/map/gr/sp.gif" width="23" height="19" onClick="disablePin();" style="position: absolute; top:6px; left:2px;">
    <input class="map" type="text" id="iq" name="q" style="width:100%; padding-left:10px;" value="<?php echo end($q)?>" />
    </img>
   </td>
   </form>
  </tr>
  <tr id="buttons">
    <td class="map" onClick="jsmap.setMapType('YAHOO_MAP'); updateLink(); return false;">Map</td>
    <td class="map" onClick="jsmap.setMapType('YAHOO_SAT'); updateLink(); return false;">Sat</td>
    <td class="map" onClick="jsmap.setMapType('YAHOO_HYB'); updateLink(); return false;">Hybrid</td>
    <td class="map"><a id="link" href="/ymap">Link</a></td>
    <td class="map" onClick="toggleSetsMenu(); return false;">Sets</td>
    <td class="map" onClick="togglePinsMenu(); return false;">Pins</td>
  </tr>
 </table>
</div>
<div id="jsmapContainer" style="position:absolute; top:0px; left:0px; height:100%; width:100%;"></div>
<div id="menu" class="map" style="visibility:hidden;position:absolute;top:56px;left:7px;z-index:100;padding:5px;"> </div>
<div id="sets" class="map" style="visibility:hidden;position:absolute;top:56px;left:7px;z-index:100;padding:5px;"> </div>
</body></html>