<?require ("global.php");?>
<?

$userID = 0;
if (isset($_COOKIE['userID'])) { $userID = $_COOKIE['userID']; }
else { header("Location: /tick/login.html"); }

$ID = 0;
$zoom = "4";
$map_type = "G_NORMAL_MAP";
$center_lat = "39.2";
$center_lon = "-96.1419";
$current_lat = "";
$current_lon = "";
$route = "";

$stageID = 0;
if (isset($_COOKIE['stageID'])) { $stageID = $_COOKIE['stageID']; }
else { header("Location: /tick/stages.php"); }

$query = "SELECT events.name as event_name, stages.* FROM events, stages WHERE events.ID = stages.eventID AND stages.ID = $stageID AND events.userID = $userID";
$result = mysql_query($query, $db);

if ($result)
{
    while ($r = mysql_fetch_array($result))
    {
	$event_name = $r['event_name'];
	$name = $r['name'];
    }
}
mysql_free_result($result);

$query = "SELECT * FROM maps WHERE stageID = $stageID";
$result = mysql_query($query, $db);
if ($result)
{
    while ($r = mysql_fetch_array($result))
    {
        $ID = $r['ID'];
        $zoom = $r['zoom'];
        $center_lat = $r['center_lat'];
        $center_lon = $r['center_lon'];
        $current_lat = $r['current_lat'];
        $current_lon = $r['current_lon'];
        $map_type = $r['map_type'];
    }
}
mysql_free_result($result);

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>OneTicker :: Maps</title>
<link rel=stylesheet type="text/css" href="tick.css">
<style type="text/css">
    v\:* {
      behavior:url(#default#VML);
    }
</style>
<script src="banner.js" type="text/javascript"></script>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAeMrkW1kxL_t7AGsTQzv_9xRenuji4aHjAULXgP93zutp7Hv6ShRbebgpZJZpLLF2bt806Iyi896c8g" type="text/javascript"></script>
<script type="text/javascript">
    //<![CDATA[

  var map;
  var zoom = <? echo "$zoom"; ?>;
  var center_lat = "<? echo "$center_lat"; ?>";
  var center_lon = "<? echo "$center_lon"; ?>";
var base = new GIcon();
base.image = "/maps/images/pin_red.png";
base.shadow = "/images/balloons/shadow.png";
base.iconSize = new GSize(12, 20);
base.shadowSize = new GSize(22, 20);
base.iconAnchor = new GPoint(6, 20);
base.infoWindowAnchor = new GPoint(5, 1);

function onLoad()
{
    var routes, marker;
    map = new GMap2(document.getElementById("map"));
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
    map.setCenter(new GLatLng(<? echo "$center_lat"; ?>, <? echo "$center_lon"; ?>), <? echo "$zoom"; ?>, <? echo "$map_type"; ?>);
    
   GEvent.addListener(map, 'maptypechanged', function()
   {
       var name = map.getCurrentMapType().getName();
       if (name == "Map") { document.appearance.map_type.value = "G_NORMAL_MAP"; }
       if (name == "Satellite") { document.appearance.map_type.value = "G_SATELLITE_MAP"; }
       if (name == "Hybrid") { document.appearance.map_type.value = "G_HYBRID_MAP"; }
   });

   GEvent.addListener(map, 'moveend', function()
   {
       var center = map.getCenter();
       document.appearance.center_lat.value = center.lat();
       document.appearance.center_lon.value = center.lng();
   });

   GEvent.addListener(map, 'zoomend', function(oldLevel, newLevel)
   {
       document.appearance.zoom.value = newLevel;
   });

<?

$query = "SELECT * FROM segments WHERE stageID = $stageID";
$result = mysql_query($query, $db);
if ($result)
{
    while ($r = mysql_fetch_array($result))
    {
      echo "routes = new Array();";
      $query2 = "SELECT * FROM maps_coords WHERE segmentID = " . $r['ID'] . " ORDER BY sequence";
      $result2 = mysql_query($query2, $db);
      if ($result2)
      {
          while ($r2 = mysql_fetch_array($result2))
          {
              $lat = $r2['latitude'];
              $lon = $r2['longitude'];
              echo "point = new GLatLng(" . $lat . ", " . $lon . ");";
              echo "routes.push(point);";
          }
          mysql_free_result($result2);
      }
      echo "if (routes.length > 0) { map.addOverlay(new GPolyline(routes, '" . $r['color'] . "', 5)); }";
    }
    mysql_free_result($result);
}

?>

<?

$query = "SELECT * FROM markers WHERE stageID = $stageID";
$result = mysql_query($query, $db);
if ($result)
{
    while ($r = mysql_fetch_array($result))
    {
      echo "base.image = \"/maps/images/" . $r['icon'] . "\";";
      echo "marker = createMarker(base, new GLatLng(" . $r['latitude'] . ", " . $r['longitude'] . "), '" . $r['ID'] . "', '" . addslashes($r['title']) . "', '" . addslashes($r['text']) . "', '" . $r['image'] . "');";
      echo "map.addOverlay(marker);";
    }
    mysql_free_result($result);
}

?>

}

function createMarker(icon, point, markerID, title, text, image)
{
  var marker = new GMarker(point, {icon: icon});
  var html = '<table cellpadding=1 cellspacing=1 border=0 width=200>';
  if (image != "")
  {
    html = html + '<tr><td align=center><a target=_blank href="/tick/html/black.php?img=/tick/images/gallery/' + image + '"><img height="130" src="/tick/images/gallery/t_' + image + '" border=0></a><br></td></tr>';
  }
  html = html  + '<tr><td><div class=blacktext><b>' + title + '</b></td></tr>';
  html = html + '<tr><td><div class=blacktext>' + text + '</div></td></tr>';
  html = html + '</table>';
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(html);
  });
  return marker;
}

   //]]>
</script>

</head>

<body bgcolor=#000000 marginheight=4 marginwidth=15 leftmargin=15 topmargin=4 onload="onLoad()" onunload="GUnload()">

<script type="text/javascript">banner(6);</script>

<form name="appearance" action="appearance_update.php" method="post">
<input type="hidden" name="ID" value="<? echo "$ID"; ?>">
<input type="hidden" name="stageID" value="<? echo "$stageID"; ?>">
<input type="hidden" name="center_lat" value="<? echo "$center_lat"; ?>">
<input type="hidden" name="center_lon" value="<? echo "$center_lon"; ?>">
<input type="hidden" name="zoom" value="<? echo "$zoom"; ?>">
<input type="hidden" name="map_type" value="<? echo $map_type ?>">

<table border=1 cellspacing=1 cellpadding=1 width="600">
<tr valign=top>
<td>
<div id="map" style="width: 330px; height: 467px; border: 2px solid #aaaaaa"></div>
</td>
<td><table cellpadding=2 cellspacing=2 border=0 width=270>
<tr>
<td colspan=2><div class=text>
The map to the left is the same size as the map on the race viewer. It also shows the view that will appear when the viewer initially loads.

<p>To change what the viewer will initially show, adjust the map and zoom to the view you desire and click the button below.
</div></td>
</tr>

<tr>
<td align=center>
[<a onclick="document.appearance.zoom.value = <? echo "$zoom"; ?>; document.appearance.center_lat.value = <? echo "$center_lat"; ?>; document.appearance.center_lon.value = <? echo "$center_lon"; ?>; map.setCenter(new GLatLng(<? echo "$center_lat"; ?>, <? echo "$center_lon"; ?>), <? echo "$zoom"; ?>, <? echo "$map_type"; ?>);" href="javascript:void(0);">reset map</a>]
</div></td>
<td align=center>
<input class=boldtext type="submit" name="submit" value="save map">
</td>
</tr>

<tr>
<td colspan=2><div class=text>
<p>&nbsp;<p>
To create courses or add markers to the map, use these links:
<p><ul>
<li><a href="/tick/maps_courses.php">create/edit courses</a></li>
<li><a href="/tick/markers.php">create markers</a></li>
<li><a href="/tick/maps_copy.php">copy an existing course</a></li>
</ul></div></td>
</tr>

</table></td>
</tr>

</table>
</form>

</body>
</html>
