
<? 
$tnode = $_REQUEST['tnode'];
$fnode = $_REQUEST['fnode'];
$index = $_REQUEST['index'];
if($tnode && $fnode) {
  $urlRoute = 'http://org.map.tourismthailand.org/mmroute/GetRoute?fnode='.$tnode.'&tnode='.$fnode.'&mode=t&type=17&locale=th';
  $result = file_get_contents($urlRoute);
  list($fdistance, $tdistance, $id, $time) = explode(",", $result);
  $geom = setGeom($id, $result);
  echo $result = 'allGeom='.$geom.';result='.$result.';indexroute='.$index.';';
  exit();
}
function setGeom($id, $result) {
  //global $key;
  $level = 2;
  /**
   * paramiter to call
   * - id of route
   * - level of zoom is fix to 3
   * - var is result valiable
   * - callback is to function to call 
   * Exp : http://mmmap15.longdo.com/mmroute/GetGeom?id=16&level=3&var=result&callback=test(result)               
   **/
   
  $urlGetGeom = 'http://org.map.tourismthailand.org/mmroute/GetGeom?level='.$level.'&id='.$id; 
  
  //echo $urlGetGeom;  
  $allGeom = file_get_contents($urlGetGeom); 
  //echo $allGeom;
  $resultList = json_decode($result);
  $allList = json_decode($allGeom);
  
  if($resultList[0][0] != "" || $resultList[0][0] != null) $resultList = $resultList[0];
  
    $road;
    $turn;
    $count = 0;
    $tempRoute = array('road'=> array(), 'type'=>0);
    $allGeom = array();
    foreach($allList as $key =>$value) {
    $road = $value;
    foreach($road as $val) {
      $allGeom[0][] = $val;  
    }
     $resultList_ = (object)$resultList[$key+4]; 
     $turn = $resultList_->t; 
     if ($turn < 6) continue;
     
     if ($turn == 9) {
        $allGeom[++$count] = $tempRoute;
        $tempRoute = array('road'=> array(), 'type'=>0);
        continue;
      }
      $tempRoute['type'] = $turn;
            foreach($road as $val) {
       // $allGeom[0][] = $val;
        $tempRoute['road'][] = $val;   
      }
  }
  return json_encode($allGeom);
}
include("config.php"); 
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="th" xml:lang="th">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Route Suggestion Query String version</title>
  <style type="text/css">
    #mmmapDiv { position:absolute; left: 0px; top: 0px; margin: 5px }
    #routeInstruction, #routeInstructionDetail {width: 290px; overflow:auto; margin-top: 10px;}
    #routeInstructionDetail{font: 10pt tahoma,loma;}
    .rightContent {position:absolute; right: 0px; top: 0px; }
    .odd {background-color: #CCFFCC; padding:3px;}
    .even {background-color: ##EEFFEE; padding:3px;}
    table td{ padding: 1px; color: #000088;}
    
    .routeTime {cursor: pointer;text-decoration: underline;font-size: 14px;}
  </style>
  <script type="text/javascript" src="http://<?=$mmmap_server?>"></script>
  <script type="text/javascript" src="http://<?=$mmroute_server?>"></script>
  <script type="text/javascript"><!--
    var mmmap;
    var routeInstruction = new Array();
    var colorRoute = ['#EFB20E', '#0CCF14', '#0081AF', '#FF00CA', '#000000'];
    var dir = ['เลี้ยวซ้ายสู่', 'เลี้ยวขวาสู่', 'เบี่ยงซ้ายสู่', 'เบี่ยงขวาสู่', 'ไปตาม', 'ตรงไปตาม', 'เดินทางด้วยเครื่องบิน', 'เดินทางด้วย', 'เดินทางด้วยเรือ', 'ถึง', 'เข้าสู่'];
    var iconImg=['http://mmmap15.longdo.com/mmroute/image/icon_turnleft.png', 'http://mmmap15.longdo.com/mmroute/image/icon_turnright.png',
                    'http://mmmap15.longdo.com/mmroute/image/icon_slightleft.png', 'http://mmmap15.longdo.com/mmroute/image/icon_slightright.png',
                    'http://mmmap15.longdo.com/mmroute/image/icon_goto.png', 'http://mmmap15.longdo.com/mmroute/image/icon_goto.png',
                    'http://mmmap15.longdo.com/mmroute/image/icon_plane.png', 'http://mmmap15.longdo.com/mmroute/image/icon_train.png',
                    'http://mmmap15.longdo.com/mmroute/image/icon_ferry.png', 'http://mmmap15.longdo.com/mmroute/image/icon_arrive.png',
                    'http://mmmap15.longdo.com/mmroute/image/icon_toll.png'];
    function init()
    {
      window.onresize = resize;
    
      mmmap = new MMMap(document.getElementById('mmmapDiv'), 13.767734, 100.5351375, 12, 'gray');
      resize();
      document.getElementById('routeInstruction').innerHTML += '<label style="color: #FF0000; font-size: 8pt;">*บริการแนะนำเส้นทางนี้ยังอยู่ในขั้นทดลอง ผลลัพธ์ต่างๆ อาจไม่ถูกต้อง</label><br /><b>เวลาในการเดินทาง</b><br />';
      var factory = document.createElement('div');
      factory.innerHTML = '<img src="http://mmmap15.longdo.com/mmroute/image/dest0.png"/>';
      var attributes = {
        "centerOffsetX" : "2px",
        "centerOffsetY" : "30px"
      };

      mmmap.drawCustomDiv(factory, 13.72947, 100.53587, 'HEY', attributes);
      doRouting();
    }

    function resize(){
        chkWinSize();
        var newwidth = parseInt(ww) - 330;
        var newheight = parseInt(wh);
        mmmap.setSize(newwidth, newheight);
        mmmap.rePaint();
    }
    function doRouting(index) {
      if(!index) index = 0;
      var pointStart = [13.72947,100.53587];
      var pointFactory = [[15.16289,99.14604], [18.0168,99.80464], [15.2507,103.77815], [12.30898,99.71683]];
      //var pointFactory = [[15.16289,99.14604]];
      getDistance = function (distance) {
        var output, meter = false;
        distance = distance/1000; 
          var unit_ = ' กม.';
          if(distance < 1) {
          distance = Math.round(distance*100);
          unit_ = ' ม.';  
          meter = true;
          }
        return  distance.toFixed(2)+' '+unit_;  
      }
      convertTime = function (TotalMinutes) {
        if(TotalMinutes == 0) return false;
        var t = parseInt(TotalMinutes);
        var days = parseInt(t/86400);
        t = t-(days*86400);
        var hours = parseInt(t/3600);
        t = t-(hours*3600);
        var minutes = parseInt(t/60);
        t = t-(minutes*60);
        var content = "";
        if(days)content+=days+' วัน';
        if(hours||days){ if(content)content+=", "; content+=hours+' ชม.'; }
        if(minutes > 0){content+=" "; content+=minutes+' นาที';}
        return content; 
      }
      if(pointFactory[index]) { 
        doRouting(index+1);
        var factory = document.createElement('div');
        factory.innerHTML = '<img src="images/factory.png" />';
        factory.latitude = pointFactory[index][0];
        factory.longitude = pointFactory[index][1];
        var attributes = {
          "centerOffsetX" : "10px",
          "centerOffsetY" : "20px"
        };
        var customdiv_id = mmmap.drawCustomDiv(factory, pointFactory[index][0],pointFactory[index][1], 'HEY', attributes);
        var req = Inint_AJAX();
        req.onreadystatechange = function () { 
          if (req.readyState == 4) {
            if (req.status == 200) {
              eval(req.responseText);
              routeTime = 0;
              routeDistance = result[0]+result[1];
              Instruction = '<table cellpadding="0" cellspacing="0">';
              for(var i=4; i<result.length; i++) {
                routeTime += result[i].i;
                routeDistance += result[i].d; 
                classOdd = i%2 == 0 ? ' odd' : ' even'; 
                Instruction += '<tr class="'+classOdd+'"><td>'+(i-3)+'.</td><td><img src="'+iconImg[result[i].t]+'">&nbsp;'+dir[result[i].t]+'&nbsp;<b>'+result[i].n+'</b> ('+getDistance(result[i].d)+')</td></tr>';
                  
              }
              Instruction += '</table>';
              routeInstruction[indexroute] = '<u><b>ระยะทางทั้งหมด&nbsp;</b>'+convertTime(routeTime)+'</u><br/>'+Instruction; 
              document.getElementById('routeInstruction').innerHTML += '<span onclick="setContentInnerDiv('+indexroute+')" class="routeTime" style="color:'+colorRoute[indexroute]+'" id="route_'+indexroute+'">ระยะทางรวม: '+ getDistance(routeDistance)+' ('+convertTime(routeTime)+')</span><br />';
              
              allGeom[0].unshift([pointStart[1], pointStart[0]]);
              allGeom[0].push([pointFactory[index][1], pointFactory[index][0]]);
              exportRouteLine(allGeom,colorRoute[indexroute]);

            } 
          }
        };
        req.open("GET", 'index-route-php-with-route-details.php?tnode='+pointStart[0]+'%2B'+pointStart[1]+'&fnode='+pointFactory[index][0]+'%2B'+pointFactory[index][1]+'&index='+index);
        req.send(null);
        }
     // }
    }
    function Inint_AJAX() {
      try { return new ActiveXObject("Msxml2.XMLHTTP");  } catch(e) {} 
      try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {}
      try { return new XMLHttpRequest();          } catch(e) {}
      alert("XMLHttpRequest not supported");
      return null;
    }
    function setContentInnerDiv(index) {
      document.getElementById('routeInstructionDetail').innerHTML = routeInstruction[index];
    }
    function exportRouteLine(allGeom, color) {   
        try {
          if (typeof allGeom === 'undefined' || !allGeom[0]) return;
              var polygon = new MMLine(mmmap);
                polygon.setMode('line');
              polygon.setLineOpacity(0.8);
              polygon.setLineWidth(4);
                polygon.setLineColor(color); 
              polygon.setSwapShapeOnMouseover(false);
                polygon.setHandler({ 'onmouseover' : function() {this.lineobject.setLineWidth(7); this.lineobject.rePaint();}, 'onmouseout' : function() {this.lineobject.setLineWidth(4); this.lineobject.rePaint();}});
                polygon.setPointsLongLat(allGeom[0]);
              
                for (var i = 1; i < allGeom.length; i++) {
                    polygon = new MMLine(mmmap);
                    polygon.setMode('line');
                polygon.setLineOpacity(0.8);
                polygon.setLineWidth(4);
                polygon.setSwapShapeOnMouseover(false);
                    polygon.setLineColor(color);
                polygon.setHandler({ 'onmouseover' : function() {this.lineobject.setLineWidth(7); this.lineobject.rePaint();}, 'onmouseout' : function() {this.lineobject.setLineWidth(4); this.lineobject.rePaint();}});
            polygon.setPointsLongLat(allGeom[i].road);
                }
        //console.log(JSON.stringify(routeInstruction));
       // if(index == routeLength)
        } catch (err) {
          console.log(err);
      }    
    }
--></script>
</head>
<body onload="init();"> 
<div id="mmmapDiv"></div>
<div class="rightContent">
  <div id="routeInstruction"></div>
  <div id="routeInstructionDetail"></div>
</div>
</body>
</html>