/*!
 * @author Eric 'Lontong' <http://www.LontongCorp.com>
 * @version 1.1
 * @copyright (c)2009
 * @licence Commercial and Restricted Use
 */

$_(function(){
 function set_widget(){  
  var html = '[';
  var _li = $_('#sb li').each(function(){
    var tmp = $_(this).attr('id').replace('widget-','');
    if (tmp) html += '"' + tmp + '",';
  });
  html = html.substr(0,html.length-1) + ']';
   $_.getJSON('./ajax', {get:'widget', data:escape(html), _rnd:Math.random()});
 }
 $_.ajaxSetup({
    timeout:10000,
    async: false,
    error: function(err){
      $_('.error').html('Error while contacting server! Please try again...');
    }
 });
 $_('.hidden').css('visibility','visible').hide();
 $_('#tabs').tabs({fx:{opacity:"toggle"}}).tabs("rotate",10000, true).css('visibility','visible');
 $_('table tbody tr:odd').css('background','#eee');
 $_('table.bordes tr').css('background','none').find('td').css('padding','1em').css('border','none');
 $_('.view-info-key').click(function(){
  var _tmp = $_(this).find('img');
  if ( _tmp.hasClass('ui-icon-triangle-1-e') ) {
    _tmp.removeClass('ui-icon-triangle-1-e').addClass('ui-icon-triangle-1-s');
  $_('.info-key').slideDown().fadeIn('slow');
  } else {
  $_('.info-key').slideUp().fadeOut('slow');
    _tmp.removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e');
  }
  return false;
 });
 $_('.tipbot').bt({
  showTip: function(box){
    $_(box).fadeIn(500);
  },
  hideTip: function(box, callback){
    $_(box).animate({opacity: 0}, 500, callback);
  },
  animate:true,
  positions:'bottom',
  fill:'transparent',
  spikeGirth:0,
  width:225,padding:'3em 1em 0 15px',
  cssClass:'tooltip',
  cssStyles:{'background-image':'url(/i/tipbot.png)','height':'125px'}
 });
 $_('.tiptop').bt({
  showTip: function(box){
    $_(box).fadeIn(500);
  },
  hideTip: function(box, callback){
    $_(box).animate({opacity: 0}, 500, callback);
  },
  animate:true,
  positions:'top',
  fill:'transparent',
  spikeGirth:0,
  width:220,padding:'15px 1.5em 25px 15px',
  cssClass:'tooltip',
  cssStyles:{'background-image':'url(/i/tiptop.png)','height':'85px'}
 });
 $_('.tipleft').bt({
  showTip: function(box){
    $_(box).fadeIn(500);
  },
  hideTip: function(box, callback){
    $_(box).animate({opacity: 0}, 500, callback);
  },
  animate:true,
  positions:'left',
  fill:'transparent',
  spikeGirth:0,
  width:210,padding:'1.5em',
  cssClass:'tooltip',
  cssStyles:{'background-image':'url(/i/tipleft.png)','height':'80px'}
 });
 $_('.tipright').bt({
  showTip: function(box){
    $_(box).fadeIn(500);
  },
  hideTip: function(box, callback){
    $_(box).animate({opacity: 0}, 500, callback);
  },
  animate:true,
  positions:'right',
  fill:'transparent',
  spikeGirth:0,
  width:210,padding:'1.5em',
  cssClass:'tooltip',
  cssStyles:{'background-image':'url(/i/tipright.png)','height':'80px'}
 });
 $_('.close').click(function(){
  $_(this).parent().parent().fadeOut('slow');
 });
 $_('.no-alert').click(function(){
   $_.getJSON('./ajax', {get:'alerts',data:0});
 });
 $_('#sb .close').click(function(){
  var tmp = $_(this).parent().parent().attr('id','');
  set_widget();
 });
 $_('#sb ul').sortable({
  handle:'h3',
  placeholder:'ui-state-highlight',
  opacity:0.5,
  revert:true,
  scroll:false,
  tolerance:'pointer',
  start:function(event,ui) {
    var _h = ui.helper.height();
    $_('.ui-state-highlight').css('height',(_h-6)+'px').css('width',($_('#sb').width()-24)+'px');
  },
  update:function(event,ui) {
    set_widget();
  }
 });
 $_("#sb").disableSelection();
 $_('.del-field').click(function(){
   $_(this).parent().fadeOut().find('input').val('');
 });
 $_('.add-field').click(function(){
  $_('.data').removeClass('bgm');
  var _fld = $_('.data:last');
  var _tmp = (parseInt(_fld.attr('name'))>0) ? parseInt(_fld.attr('name')) + 1 : 1;
  var _ttmp = 'Group'; 
  if ($_(this).hasClass('add-input')) _ttmp = 'Input ' + _tmp;
  else if ($_(this).hasClass('add-output')) _ttmp = 'Output ' + _tmp;
  else if ($_(this).hasClass('add-analog')) _ttmp = 'Analog ' + _tmp;
  var _newfield = $_('<label class="fitur besar br">'+_ttmp+' &nbsp; : &nbsp; <input type="text" name="'+_tmp+'" class="text2 data" value="" /> <img src="/i/del.png" class="href del-field" align="absmiddle" /></label>').fadeIn();
  _newfield.insertBefore($_(this));
  $_('.del-field').click(function(){
    $_(this).parent().fadeOut().find('input').val('');
  });
 });
 $_('.confirm').click(function(){
   var _confirm = confirm("Please note this action can't be undone.\nDo you really want to do this action?");
   if (_confirm) return true;
   else return false;
 });
 $_('#myVeh').val(gps).change(function(){
  p=0;
  gps = $_(this).val();
  $_.cookie('gps',gps);
 });
 $_('#myVehGroup').val(grp).change(function(){
  grp = $_(this).val();
  $_.cookie('group',grp);
  var html = '<option value="">None</option>';
  if (grp>0) {
   for (_i in gpsgrp[grp]){
   var _isi = gpsgrp[grp][_i].split('|')
     html += '<option value="'+_isi[0]+'">'+_isi[1]+'</option>';
   }
  } else if (grp==0) {
    for(_j in gpsgrp){
     var _arr = gpsgrp[_j];
     for (var _i=0;_i<_arr.length;_i++){
      var _isi = _arr[_i].split('|')
      html += '<option value="'+_isi[0]+'">'+_isi[1]+'</option>';
     }
    }
   }
  $_('#myVeh').html(html).val(gps);
 });
 $_('#myVehReports').change(function(){
  location.href = '?gps='+$_(this).val();
 });
 $_('#rows').val(r).change(function(){
  p=0;
  r = $_(this).val();
  $_.cookie('rows',r);
 });
 $_('#t').val((t/1000)).change(function(){
  t = parseInt($_(this).val()) * 1000;
  $_.cookie('timeout',t);
 });
 $_('.previous').click(function(){
   if (p>1) {
     p -= 1;
   }
 });
 $_('.next').click(function(){
   var maxPage = parseInt($_('#pageNum').html());
   if (p < maxPage) {
     p += 1;
   }
 });
 $_('#pageNo').change(function(){
  var _tmp1 = parseInt($_(this).val());
  var _tmp2 = parseInt($_('#pageNum').html());
  if (_tmp1 <= _tmp2) {
   p = _tmp1;
   looper();
  } else {
   $_(this).val(p);
  }
 });
 $_('.update').change(looper);
 $_('.update2').click(looper);
 $_('#viewKML').click(function(){
  var _wait = 'wait..';
  var _tmp = $_(this).val();
  var _gps = $_(this).parent().parent().find('.gps').val();
  if (_tmp != _wait) {
    $_(this).val(_wait).addClass('hitam').css('cursor','wait').attr("disabled", true);
  document.location.href = './ajax?get=kml&id='+_gps;
    $_(this).removeClass('hitam').css('cursor','pointer').val(_tmp).attr("disabled", false);
  }
 });
 $_(':reset').click(function(){
  $_(this).parent().parent().find('.error').html('');
 });
 $_('form').submit(function(){
  var $msg = $_(this).find('.error');
  var _ret = true;
  $_(this).find('.wajib').each(function(){
   $_(this).removeClass('bgm').addClass('bgp');
   if ( $_(this).val() == '' ) {
    $_(this).removeClass('bgp').addClass('bgm');
    $msg.html('Please fill required fields (*)');
    _ret = false;
   }
  });
  if ( $_(this).hasClass('ajax') && _ret ) {
   $msg.html('<img src="/i/loading.gif" align="absmiddle" /> Processing, please wait...');
   var _act  = $_(this).attr('id');
   var _data='{';
   $_(this).find('.data').each(function(){
    _data += '"' + $_(this).attr('name') + '":"' + $_(this).val() + '",';
   });
   _data = _data.substr(0, (_data.length-1)) + ' }';
   $_.getJSON('./ajax', {get:_act, data:escape(_data), _rnd:Math.random()}, function(response) {
     var statos = parseInt(response.status);
     $msg.html(response.message);
   });
   return false;
   } else if ( !$_(this).hasClass('ajax') && _ret ) {
  return true;
   } else return false;
 });
 $_('.select-all').click(function(){
  $_(this).parent().parent().find(':checkbox').attr('checked','checked');
  return false;
 });
 $_('.select-none').click(function(){
  $_(this).parent().parent().find(':checkbox').attr('checked','');
  return false;
 });
 $_('#date-range input').change(function(){
  var _tgl = $_('#tanggal').html().split(' ~ ');
  var html = ( $_(this).hasClass('start') ) ? $_(this).val() + ' ~ ' + _tgl[1] : _tgl[0] + ' ~ ' + $_(this).val();
  $_('#tanggal').html(html);
 });
 $_('#date-range div.date').datepicker({
   maxDate: '+1d',
   dateFormat:'dd-M-yy',
   onSelect: function(dateText, inst){
     var _cssClass = ( $_(this).hasClass('start') ) ? 'start' : 'end';
     $_('#date-range').find('input.'+_cssClass).val(dateText + ' 00:00').trigger('change');
   }
 }).parent().find('.start').datepicker('setDate','-1d');
 $_('#tanggal').click(function(){
   $_('#date-range').slideToggle(function(){
     var hidden = $_(this).is(":hidden");
     if (!hidden) {
      $_('#tanggal').css('background-position','right top');
     } else $_('#tanggal').css('background-position','right bottom');
   });
 });
 $_('.view-trackback').click(view_trackback);
 $_('.playback').click(function(){
   var _tmp = $_(this).attr('name');
   if (data.length > 0) playback(_tmp);
 });
});

function mapInit(){
  var options = {
    maxScale: 2500,
    maxResolution: "auto",
    maxExtent: new OpenLayers.Bounds(-62.5, -92.5, 297.5, 87.5),  //94.78548, -10.72821, 141.72831, 6.00753
    minScale: 22500000,
    minResolution: "auto",
    minExtent: new OpenLayers.Bounds(107.582005, -6.912040, 107.584723, -6.910242),
    controls:[]
  };
  
  map = new OpenLayers.Map('map',options);
  
  // add basemap layer
  var basemap = new OpenLayers.Layer.WMS( "Basemap", WMS, {format: "image/png"},{gutter:4,isBaseLayer: true,transitionEffect: 'resize'});  
  map.addLayer(basemap);
  //add marker's layer
  vlayer = new OpenLayers.Layer.Markers("Vehicles");
  map.addLayer(vlayer);
  //add measurer layer
  mLayer  = new OpenLayers.Layer.Vector( "Tools Canvas" );
  mLayer.onFeatureInsert = jarak;
  map.addLayer(mLayer);
  
  var nav = new OpenLayers.Control.Navigation({title:"Panning Mode",'zoomWheelEnabled': false});
  var zb = new OpenLayers.Control.ZoomBox({title:"Zoombox Mode"});   
  var me = new OpenLayers.Control.ZoomToMaxExtent({title:"Maximum Extent"});
  var mj = new OpenLayers.Control.DrawFeature(mLayer, OpenLayers.Handler.Path, {'displayClass': 'olControlMeasurePath',title:'Measure Distance'})
  var panel = new OpenLayers.Control.Panel({defaultControl:nav, div:OpenLayers.Util.getElement('mapanel')});
  panel.addControls([nav,zb,me,mj]);
  map.addControl(panel);
  map.addControl(new OpenLayers.Control.PanZoomBar());
  //map.addControl(new OpenLayers.Control.LayerSwitcher());
  map.addControl(new OpenLayers.Control.MousePosition());
  map.addControl(new OpenLayers.Control.Permalink(null,COMPANY));
  map.addControl(new OpenLayers.Control.ScaleLine());
}
function jarak(feature) {
  var _dist = feature.geometry.getLength();
  _dist = Math.round(_dist*111111);
  var distance;
  if (parseInt(_dist) <= 10000) distance = parseInt(_dist) + ' metres';
  else distance = parseInt(_dist / 1000) + ' kilometres';
  alert("Distance measured (approx.) : " + distance);
  mLayer.removeFeatures(feature);
}
function viewDetails(id){;
  gps = markers[id].id_gps;
  $_('#myVeh').val(markers[id].id_gps);
  looper();
  
  return false;
}
function setUSR(_1) {
  $_('#usr tbody').fadeOut('slow');
  p += parseInt(_1);
  groups = $_('#myUserGroup').val();
  if (p < 1) p=1;
  else if (p > parseInt($_('#pageNum').html())) p=parseInt($_('#pageNum').html());
  else {
   $_.getJSON('./ajax', {get:'users',groups:groups,rows:$_('.rows').val(),page:p, _rnd:Math.random()}, function(respon) {
    if ((parseInt(respon.status) == 200) && (parseInt(respon.data.length) > 0)) {
      var html = '';
    var response = respon.data;
      for(var i=0;i<response.length;i++) {
    html += '<tr class="fitur imghide user-'+response[i].username+'"><td>'+response[i].realname+' &nbsp; ('+response[i].username+')</td><td colspan="8" style="border-left:0"><a href="?edit='+response[i].username+'" title="Edit User" class="fitur"><img src="/i/edit.png" alt="edit" /></a><a href="?del='+response[i].username+'" title="Remove User" class="fitur confirm-del"><img src="/i/del.png" alt="remove" /></a></td></tr>';
    html += '<tr class="user-'+response[i].username+'">';
    html += '<td>'+response[i].usermail+'</td>';
    html += '<td>'+response[i].apikey+'</td>';
    html += '<td>'+response[i].groups+'</td>';
    html += '<td>'+response[i].usergroup+'</td>';
    html += '<td>'+response[i].mobile+'</td>';
    html += '<td>'+response[i].province+'</td>';
    html += '<td>'+response[i].country+'</td>';
    html += '<td>'+response[i].userstatus+'</td>';
    html += '<td>'+response[i].registered+'</td>';
    html += '</tr>';
      }
    var _totPage = respon.total/$_('.rows').val();
    if (respon.total % $_('.rows').val() > 0) _totPage++;
    $_('#pageNum').html(parseInt(_totPage));
    $_('#usr tbody').html(html).fadeIn('slow');
    $_("tbody tr:even").css('background-color','#eee').find('td').css('height','3em').css('font','bold 1.2em Arial').find('img').hide();
    $_("tbody tr:even").mouseover(function(){
      $_(this).css('color','#333').css('background-color','#ffd').find('img').show();
    }).mouseout(function(){
      $_(this).css('color','#666').css('background-color','#eee').find('img').hide();
    });
    $_('.confirm-del').click(function(){
      var _confirm = confirm("Please note this action can't be undone.\nDo you really want to do this action?");
      if (_confirm) {
       var _tmp = $_(this).attr('href').split('=',2);
       $_.getJSON('./ajax', {get:'users',act:'del',username:_tmp[1]}, function(respon){
        if (parseInt(respon.status) == 200) {
        $_('tr.user-'+_tmp[1]).css('background-color','#ff7').fadeOut('slow');
      var _num = $_('.num').html();
      $_('.num').html(_num-1);
        } else alert(respon.message);
       });
      }
      return false;
    });
    } else {
    if (p > 1) {
      p--;
      setVSR(0);
    } else $_('#usr tbody').html('<tr><td colspan="7" align="left">No data!</td></tr>').fadeIn();
    }
   });
  }
  $_('#pageNo').html(p);
}
function setVSR(_1) {
  $_('#vsr tbody').fadeOut('slow');
  p += parseInt(_1);
  grp = $_('#myVehGroup').val();
  if (p < 1) p=1;
  else if (p > parseInt($_('#pageNum').html())) p=parseInt($_('#pageNum').html());
  else {
   $_.getJSON('/gps', {key:APIKEY,groups:grp,rows:$_('.rows').val(),page:p, _rnd:Math.random()}, function(respon) {
    if ((parseInt(respon.status) == 200) && (parseInt(respon.data.length) > 0)) {
      var html = '';
    var response = respon.data;
      for(var i=0;i<response.length;i++) {
    html += '<tr class="kiri fitur imghide gps-'+response[i].id+'"><td colspan="2">'+response[i].plate+' &nbsp; ('+response[i].id+')</td><td colspan="6" style="border-left:0"><a href="?edit='+response[i].id+'" title="Edit Vehicle" class="fitur"><img src="/i/edit.png" alt="edit" /></a><a href="?del='+response[i].id+'" title="Remove Vehicle" class="fitur confirm-del"><img src="/i/del.png" alt="remove" /></a><a href="?input='+response[i].id+'" title="Digital Inputs" class="fitur"><img src="/i/inputbw.png" alt="inputs" /></a><a href="?output='+response[i].id+'" title="Digital Output" class="fitur"><img src="/i/outputbw.png" alt="output" /></a><a href="?analog='+response[i].id+'" title="Analog" class="fitur"><img src="/i/analogbw.png" alt="analogs" /></a><a href="./reports?id='+response[i].id+'" title="Reports" class="fitur"><img src="/i/chartbw.png" alt="report" /></a><a href="./trackback?id='+response[i].id+'" title="Backtrack History" class="fitur"><img src="/i/trackbackbw.png" alt="trackback" /></a></td></tr>';
    html += '<tr class="gps-'+response[i].id+'">';
    html += '<td>'+response[i].model+'</td>';
    html += '<td>'+response[i].groups+'</td>';
    html += '<td>'+response[i].type+'</td>';
    html += '<td>'+response[i].gsm+'</td>';
    html += '<td>'+response[i].min_speed+' ~ '+response[i].max_speed+' km/h</td>';
    html += '<td>'+response[i].timezone+'</td>';
    html += '<td>'+response[i].registered+'</td>';
    html += '</tr>';
      }
    var _totPage = respon.total/$_('.rows').val();
    if (respon.total % $_('.rows').val() > 0) _totPage++;
    $_('#pageNum').html(parseInt(_totPage));
    $_('#vsr tbody').html(html).fadeIn('slow');
    $_("tbody tr:even").css('background-color','#eee').find('td').css('height','3em').css('font','bold 1.2em Arial').find('img').hide();
    $_("tbody tr:even").mouseover(function(){
      $_(this).css('color','#333').css('background-color','#ffd').find('img').show();
    }).mouseout(function(){
      $_(this).css('color','#666').css('background-color','#eee').find('img').hide();
    });
    $_('.confirm-del').click(function(){
      var _confirm = confirm("Please note this action can't be undone.\nDo you really want to do this action?");
      if (_confirm) {
      var _tmp = $_(this).attr('href').split('=',2);
      $_.getJSON('/gps', {key:APIKEY,act:'del',id:_tmp[1]}, function(respon){
        if (parseInt(respon.status) == 200) {
        $_('tr.gps-'+_tmp[1]).css('background-color','#ff7').fadeOut('slow');
      var _num = $_('.num').html();
      $_('.num').html(_num-1);
        } else alert(respon.message);
      });
      }
      return false;
    });
    } else {
    if (p > 1) {
      p--;
      setVSR(0);
    } else $_('#vsr tbody').html('<tr><td colspan="7" class="kiri merah">No data!</td></tr>').fadeIn();
    }
   });
  }
  $_('#pageNo').html(p);
}
function setGSR(start) {
  $_('#gsr tbody').html('');
  var html = '';
  if (data && (parseInt(data.length) > 0)) {
    for(var i=0;i<data.length;i++) {
    html += '<tr>';
    html += '<td>'+parseInt(start+i+1)+'</td>';
    html += '<td align="center">'+data[i].plate+'</td>';
    html += '<td align="center"><a href="/a/reports?id='+data[i].id_gps+'" class="bimud">View Reports</a></td>';
    html += '<td>'+data[i].time+'</td>';
    html += '<td align="left">'+stalert[data[i].alert]+'</td>';
    html += '<td>'+data[i].speed+' km/h</td>';
      var _h = 'N';
      if ( (data[i].heading>5) && (data[i].heading<=85) ) _h = 'NW';
      if ( (data[i].heading>85) && (data[i].heading<=95) ) _h = 'W';
      if ( (data[i].heading>95) && (data[i].heading<=175) ) _h = 'SW';
      if ( (data[i].heading>175) && (data[i].heading<=185) ) _h = 'S';
      if ( (data[i].heading>185) && (data[i].heading<=265) ) _h = 'SE';
      if ( (data[i].heading>265) && (data[i].heading<=285) ) _h = 'E';
      if ( (data[i].heading>285) && (data[i].heading<=355) ) _h = 'NE';
    html += '<td>'+parseInt(data[i].heading)+'&deg;&nbsp; '+_h+'</td>';
    html += '<td align="left">'+data[i].location+'<br />('+data[i].longitude+' &nbsp; '+data[i].latitude+') <img src="/i/link.gif" class="href" title="View on Map" onclick="map.panTo(new OpenLayers.LonLat('+data[i].longitude+','+data[i].latitude+'))" /></td>';
    html += '<td>'+data[i].mileage+' km</td>';
    html += '</tr>';
    }
  } else {
    html = '<tr><td colspan="10" class="kiri merah">No Vehicles!</td></tr>';
  }
  $_('#gsr tbody').html(html);
  $_("tbody tr:odd").css('background-color','#eee');
}
function bubble(id){
  var html = '<h4>'+markers[id].plate+'</h4>';
  html += 'Time&nbsp;&nbsp;&nbsp;&nbsp; : '+markers[id].time+'<br />';
  html += 'Speed&nbsp;&nbsp; : '+markers[id].speed+' km/h<br />';
  html += 'Status&nbsp;&nbsp; : '+stalert[markers[id].alert]+'<br />';
  html += 'Bearing&nbsp; : '+parseInt(markers[id].heading)+'&deg;<br />';
  html += 'Location : '+markers[id].location+' &nbsp;('+markers[id].longitude+' '+markers[id].latitude+')';
  return new OpenLayers.Popup('Informasi', new OpenLayers.LonLat(markers[id].longitude,markers[id].latitude), new OpenLayers.Size(180,100), html, true);
}
/**
 * Fix car icon based on alert
 * @params  $id (integer)  alert id
 * @return  (string)  icon name string
**/
function mkicon(_a,_i) {
  var i,r;
  var ret = [];
  
  if ( (_i>=0) && (_i<70) ) r = 'NW';
  else if ( (_i>=70) && (_i<110) ) r = 'W';
  else if ( (_i>90) && (_i<=180) ) r = 'SW';
  else if ( (_i>180) && (_i<=250)) r = 'SE';
  else if ( (_i>250) && (_i<=290)) r = 'E';
  else if ( (_i>290) && (_i<=360)) r = 'NE';
  ret.course = r;
  
  if (_a == 0) i = '0';
  else if (_a <= 2) i = '1';
  else if (_a == 3) i = '2';
  else if (_a == 4) i = '3';
  else i = '4';
  ret.icon = 'car'+i+''+r+'.gif';
  
  ret.angle = 0;
  
  return ret;
}
function drawMarkers(){
  var c = '';
  //create this marker's layers
  if (popup) map.removePopup(popup);
  if (vlayer) map.removeLayer(vlayer);
  vlayer = new OpenLayers.Layer.Vector("Vehicles",{
    styleMap: new OpenLayers.StyleMap({
      "default": {
        externalGraphic: "http://s.elyez.com/i/icon/"+"${icon}",
        graphicWidth: 32,
        graphicHeight: 32,
        rotation: "${angle}",
        fillOpacity: 0.8
      },
      "select": {
        cursor: "pointer",
        fillOpacity: 1
      }
    })
  });
  //add it to the map
  map.addLayer(vlayer);
  var features = [];
  
  if (data && (parseInt(data.length) > 0)) {
    marker  = new Array();
    markers = new Array();
    for(var i=0;i<data.length;i++) {
      var ikon = mkicon(data[i].alert, data[i].heading);
      features[i]=new OpenLayers.Feature.Vector(
          new OpenLayers.Geometry.Point(data[i].longitude,data[i].latitude), {angle:ikon.angle,icon:ikon.icon}
       );
      features[i].id = data[i].id_gps;
      markers[data[i].id_gps] = data[i];
      if ( (c=='') && (gps!='') && (data[i].id_gps == gps) ) {
        c = data[i];
        map.panTo(new OpenLayers.LonLat(c.longitude,c.latitude));
      }
    }
    vlayer.addFeatures(features);
  }
  var selectControl = new OpenLayers.Control.SelectFeature(vlayer,{
        hover: true,
        callbacks: {
          'over': function (feat){
             if (popup) map.removePopup(popup);
             popup=bubble(feat.id);
             map.addPopup(popup);
          },
          'out': function (feat){
             map.removePopup(popup);
          }
        }
  });
  map.addControl(selectControl);
  selectControl.activate();
}
function drawTracks(){
  if (tlayer) map.removeLayer(tlayer);
  tlayer = new OpenLayers.Layer.Markers("Trackpath");
  //add it to the map
  map.addLayer(tlayer);
  if (data && (parseInt(data.length) > 250)) var _conf = confirm("You ask large amount of data.\nPlease note that it will need some timesto load and \ncan make your browser running slowly and heavier.\nYou can reduce the date range.\n\nAre you sure to continue with these data?");
  if (_conf) {
    tracks  = new Array();
    for(var i=0;i<data.length;i++) {
      var size  = new OpenLayers.Size(20,20);
      var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
      var logo  = '/i/arrows/'+data[i].heading+'.gif';
      var icon  = new OpenLayers.Icon(logo, size, offset);
      var point = new OpenLayers.LonLat(data[i].longitude,data[i].latitude);
      tracks[i] = new OpenLayers.Marker(point,icon,'track'+i);
      tlayer.addMarker(tracks[i]);
    }
  }
}
function playTrackback() {
  if (posNum < 1) {
    posNum = 0;
    if (autoTrack) clearTimeout(autoTrack);
  }
  if (posNum >= data.length) {
    posNum = 0;
    clearTimeout(autoTrack);
  }
  //remove popup if exist
  if (popup) map.removePopup(popup);
  
    //create this markers layer
    if (vlayer) map.removeLayer(vlayer);
    vlayer = new OpenLayers.Layer.Markers("Current Position");        
    //add layer to the map
    map.addLayer(vlayer);
  
    var size = new OpenLayers.Size(32,32);
    var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
    var ikon = mkicon(data[posNum].alert, data[posNum].heading);
    var icon = new OpenLayers.Icon("http://s.elyez.com/i/icon/"+ikon.icon, size, offset);
    var mark = new OpenLayers.Marker(new OpenLayers.LonLat(data[posNum].longitude,data[posNum].latitude), icon);      
    //add marker to the map
    vlayer.addMarker(mark);
  
  //set center if requested
  if (document.getElementById('setCenter').checked) map.setCenter(new OpenLayers.LonLat(data[posNum].longitude,data[posNum].latitude));
  
  //add popup if requested
  if (document.getElementById('infoPopup').checked) {
    var html = '<h4>Vehicle Information</h4>';
    html += 'Time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; : '+data[posNum].waktu+'<br />';
    html += 'Speed&nbsp;&nbsp;&nbsp; : '+parseInt(data[posNum].speed)+' km/h<br />';
    html += 'Bearing&nbsp; : '+parseInt(data[posNum].heading)+'&deg;<br />';
    html += 'Status&nbsp;&nbsp;&nbsp; : '+stalert[data[posNum].alert]+'<br />';
    html += 'Location : '+data[posNum].lokasi+' &nbsp;('+data[posNum].longitude+' '+data[posNum].latitude+')';
    popup = new OpenLayers.Popup('Info', new OpenLayers.LonLat(data[posNum].longitude,data[posNum].latitude), new OpenLayers.Size(185,100), html, true);
    map.addPopup(popup);
  }
}
function playback(_1) {
  var tout = $_('#speedshow').val();
  if (tout<500) tout = 1000;
  if (autoTrack) clearTimeout(autoTrack);
  var _skip0 = document.getElementById('skipNull').checked;
  switch (_1) {
    case 'first' :   posNum = 0;
            break;
    case 'prev' :   posNum -= 1;
            break;
    case 'pause' :   break;
    case 'play' :   posNum += 1;
            if (!data[posNum]) playback('last');
            else if (_skip0 && (parseInt(data[posNum].speed)<=3)) playback('play');
            else autoTrack = setTimeout("playback('play')",tout);
            break;
    case 'next' :   posNum += 1;
            break;
    case 'last' :   posNum = data.length-1;
            break;
    default   :   posNum = 0;
            break;
  };
  playTrackback();
}
function view_trackback() {
    if ( !$_('#date-range').is(":hidden") ) {
      $_('#tanggal').css('background-position','right bottom');
      $_('#date-range').slideUp();
    }
  $_.cookie('tanggal',$_('#tanggal').html());
    $_('#trackback_info').html('<img src="/i/loading.gif" class="imgl" /> Loading. Please wait...');
    data = [];
    markers = [];
    $_.getJSON("./ajax", {get:'trackback',id:$_('#myVeh').val(),tanggal:$_('#tanggal').html()}, function(retval) {
      var html = '';
      if ((retval.status == 200) && (retval.data.length>0)){
        data = retval.data;
        map.setCenter(new OpenLayers.LonLat(data[0].longitude,data[0].latitude),13);
        //create this trackback layer
        drawTracks();
        //create the car icon layer
        posNum = 0;
        playback('first');
      } else html = retval.message;
      $_('#trackback_info').html(html);
    });
}

function read_alert(){
  var html = '';
  for (i in data) {
    for (var j=0;j<a.length;j++) {
      if (parseInt(data[i].alert) == parseInt(a[j])) html += '<strong class="bimud">' + data[i].plate + '</strong> <span>(' + stalert[data[i].alert] + ')</span>; &nbsp; ';
    }
  }
  if (html) {
      $_('#alert .isi').html(html);
      $_('#alert').slideDown('slow');
   }
   
  return false;
}
function looper(z) {
  //$_('#alert').fadeOut('fast');
  if (l) clearInterval(l);
  if (!t || (t<5000)) t = 60000;
  if (!p || (p<1)) p = 1;
  if (!r || (r<5)) r = 5;
  $_.getJSON("/api", {key:APIKEY,groups:grp,format:'json',num:r,page:p, _rnd:Math.random()}, function(retval) {
    if (!retval.data) {var _lon=106.78062;var _lat=-6.16464;}
    else {data = retval.data;var _lon=data[0].longitude;var _lat=data[0].latitude;}
    if (z==true) map.setCenter(new OpenLayers.LonLat(_lon,_lat),14);
    setGSR((p-1)*r);
    //read alert's option
    read_alert();
    //draw markers on the map
    drawMarkers();
    //set pageNum
    $_('#pageNo').val(p);
    $_('#pageNum').html(retval.clusters);
  });
  l = setInterval("looper()",t);
}