
<?
include("config.php");
$zoom = $default_zoom_level;
$longitude = 100.5351375;
$latitude = 13.767734;

if ( $_REQUEST["lat"] != "" ) { $latitude = $_REQUEST["lat"]; }
if ( $_REQUEST["long"] != "" ) { $longitude = $_REQUEST["long"]; }
if ( $_REQUEST["res"] != "" ) { $res = $_REQUEST["res"]; $zoom = log($res)/log(2); }
if ( $_REQUEST["zoom"] != "" ) { $zoom = $_REQUEST["zoom"]; }

$map_topmargin = 98;
$map_leftmargin = 5;
$map_rightmargin = 250;
$map_bottommargin = 5;

$title = "Longdo Map Demo";
$theme_color = "#cce0fb";
$logo_file = "images/logo_map.png";

$mmmap_api_key = "7a19bf7e66f74a0b39843f76eaf11371";
$gmap_api_key = "AIzaSyCPKhBgHlSWpcuWO7JmHPkaD35f6kfe4BQ";

?>
<html>
<head>
<title><?=$title?></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="imagetoolbar" content="no">

<!-- send gmapkey for use your own api key when call google map api -->
<script type="text/javascript" src="http://<?=$mmmap_server?>"></script>
<script type="text/javascript" src="http://<?=$suggest_server?>"></script>
<script type="text/javascript" src="http://<?=$mmroute_server?>"></script>

<script type="text/javascript">
var gmapjsloaded = false;
</script>


<script>

var mmmap;
var mylang = "th";
var currentmode = "mmmap";
var gmap;

function mmmap_client_init() {
    var mmmap_div = document.getElementById("mmmap_div");
    window.onresize = myRepaint;

  var mapmode = mylang == "en" ? "icons-en" : "icons";
    mmmap = new MMMap(mmmap_div,<? print $latitude ?>,<? print $longitude ?>,<? print $zoom ?>, mapmode);
  if (window.mmroute) {
    mmroute.init(mmmap, document.getElementById('search_result_set'));
    mmroute.useDefaultRightClickMenu();
    mmroute.showAbout();
  }
  
    myRepaint();

  if(gmapjsloaded) {
    showHMap();
  }else {
    showMMMap();
  }

    var rightbar = document.getElementById("rightbar");
  rightbar.style.visibility = "visible";

    json_init(document.getElementById('scrdiv'));
}

var arraytestdiv;

function mapresize() {
    chkWinSize();

    var newwidth = parseInt(ww) - <? print $map_leftmargin; ?> - <? print $map_rightmargin; ?>;
    var newheight = parseInt(wh) - <? print $map_topmargin; ?> - <? print $map_bottommargin; ?>;

    mmmap.setSize(newwidth,newheight);
    mmmap.rePaint();
    
    document.getElementById("rightbar").style.left = newwidth + 10;
    document.getElementById("rightbar").style.height = newheight;
    
    if (gmap) gmap.setSize(newwidth,newheight);
    
}

function myRepaint() {
  mapresize();
}

function showMMMap() {
    if (! document.getElementById("mmmap_div") ) {
        window.location="/";
        return;
    }

  mmmap.showMMMap();

    myRepaint();

    document.getElementById('normmodespan').style.textDecoration = 'none';
    document.getElementById('normmodespan').style.fontWeight = 'Bold';
    document.getElementById('satmodespan').style.textDecoration = 'underline';
    document.getElementById('satmodespan').style.fontWeight = 'normal';
    document.getElementById('hybridmodespan').style.textDecoration = 'underline';
    document.getElementById('hybridmodespan').style.fontWeight = 'normal';
}

function showGMap() {
    if (! document.getElementById("mmmap_div") ) {
        window.location="/?gmap=1";
        return;
    }

  mmmap.showGMap();

    myRepaint();

    document.getElementById('normmodespan').style.textDecoration = 'underline';
    document.getElementById('normmodespan').style.fontWeight = 'normal';
    document.getElementById('satmodespan').style.textDecoration = 'none';
    document.getElementById('satmodespan').style.fontWeight = 'Bold';
    document.getElementById('hybridmodespan').style.textDecoration = 'underline';
    document.getElementById('hybridmodespan').style.fontWeight = 'normal';
}

function showHMap() {
  if (! document.getElementById("mmmap_div") ) {
    window.location="/hybrid";
    return;
  }

  mmmap.showHMap();

  myRepaint();

    document.getElementById('normmodespan').style.textDecoration = 'underline';
    document.getElementById('normmodespan').style.fontWeight = 'normal';
    document.getElementById('satmodespan').style.textDecoration = 'underline';
    document.getElementById('satmodespan').style.fontWeight = 'normal';
    document.getElementById('hybridmodespan').style.textDecoration = 'none';
    document.getElementById('hybridmodespan').style.fontWeight = 'Bold';

}

</script>

</head>

<body onLoad="mmmap_client_init()" scroll="no" style="overflow:hidden;margin: 0px 0px 0px 5px;" marginwidth=0 marginheight=0>

<table width=100% cellpadding=0 cellspacing=0><tr>
<td>
<a href='/'><IMG SRC=<?=$logo_file?> BORDER=0 ALT="Logo"></a>
</td>
</table>

<table border=0 cellspacing=0 cellpadding=0 width=100%><tr>
<td bgcolor="<?=$theme_color?>" style="padding:0px;" valign="bottom" align=left>
</td>
<td bgcolor="<?=$theme_color?>" style="padding:0px;font-family: tahoma, loma;font-size: 10pt;" valign="middle" align=right>Map mode: 
    <span onclick="showMMMap();" style="cursor: pointer;" id="normmodespan">normal</span> or
    <span onclick="showGMap();" style="cursor: pointer;" id="satmodespan">satellite</span> or
    <span onclick="showHMap();" style="cursor: pointer;" id="hybridmodespan">hybrid</span> |
    <a href="javascript:linkToPage()" title="Link to current location">Link to page</a>
    &nbsp; &nbsp;
</td>
</tr>
</table>

<div id="googlemap_div" style="position: absolute;visibility: visible;z-index:1;left: <? print $map_leftmargin;?>px; top: <? print $map_topmargin;?>px; width: 800px; height: 500px; border: 0px solid red"></div>
<div id="mmmap_div" style="position: absolute; z-index: 2; left: <? print $map_leftmargin;?>px; top: <? print $map_topmargin;?>px; width: 800px; height: 500px; border: 0px solid red"></div>

<div id="rightbar" style="visibility: hidden; overflow: hidden;position: absolute; top: <?=$map_topmargin?>;width: <?= $map_rightmargin - 10 ?>px;background-color: #FFFFFF; padding: 0px 5px 0px 5px;">
  <form id="searchform" onsubmit="mmmap.do_search(0,document.getElementById('searchtab_keywordform').value, 'search_result_set'); return false;" action="?">
      <div style="background-color: #FFEFCF;font-weight: Bold;margin-top:0px;font-family: tahoma, loma;font-size: 10pt;">Search</div>
   <input type="text" style="padding-left:3px;padding-right:3px;width:<?=$map_rightmargin - 70?>px;" autocomplete="off" id="searchtab_keywordform" onkeyup="_suggest_load()" onkeydown="suggest_navigation_keys_check(event)" onblur="setTimeout('clearSuggestDiv()',300)" />
   <input id="dosuggest" type="checkbox" style="display: none;" checked="checked" name="dosuggest"/>
   <input type="submit" value="ค้น">
   <div id="_suggest_disp" style="padding-left:3px;padding-right:3px; z-index:10; border:1px #7F9DB9 solid; background:#fff; width:231px; visibility:hidden;"></div>
   <div style="font-size: 8pt;" id="search_example">
  ตัวอย่าง: 
  <a href="#" onclick="document.getElementById('searchtab_keywordform').value='ธนาคาร';mmmap.do_search(0,document.getElementById('searchtab_keywordform').value, 'search_result_set'); return false;">ธนาคาร</a>,
  <a href="#" onclick="document.getElementById('searchtab_keywordform').value='โรงพยาบาล';mmmap.do_search(0,document.getElementById('searchtab_keywordform').value, 'search_result_set'); return false;">โรงพยาบาล</a>,
  <a href="#" onclick="document.getElementById('searchtab_keywordform').value='เพชรบุรี';mmmap.do_search(0,document.getElementById('searchtab_keywordform').value, 'search_result_set'); return false;">เพชรบุรี</a>
  </div>

  <div id="search_result_set" style="font: 10pt Tahoma;overflow: auto;margin-top: 0px;border: 0px solid red">&nbsp;</div>

  </form>

</div>

<div id="scrdiv"></div>

</body>
</html>