{known_script id="jquery.ui" src=$ROOT_URL|@cat:"themes/default/js/ui/packed/ui.core.packed.js"}
{known_script id="jquery.ui.dialog" src=$ROOT_URL|@cat:"themes/default/js/ui/packed/ui.dialog.packed.js"}
{known_script id="jquery.ui.slider" src=$ROOT_URL|@cat:"themes/default/js/ui/packed/ui.slider.packed.js"}
{known_script id="maps.google.com/api" src="http://maps.google.com/maps/api/js?sensor=false"}

<!--
 Note : the position of control (navigation, mapType) were implemented, but the
 result after trying positionning is strange...
 so, these functionnalities are deactivated
-->


{literal}
<script type="text/javascript">




  function userDefManage ()
  {
    var properties = {
      id:'',
      gMap:null,
    }

    /**
     * initialize the page
     */
    this.init = function ()
    {
      computedHeight=$(window).height()-100;
      computedWidth=$(window).width()-100;
      $('#iDialogEdit')
        .dialog(
          {
            autoOpen:false,
            width:computedWidth,
            height:computedHeight,
            modal: true,
            dialogClass: 'gcBgTabSheet gcBorder',
            title: '{/literal}{"gmaps_config_map"|@translate}{literal}',
            buttons:
              {
                '{/literal}{"gmaps_ok"|@translate}{literal}':
                  function()
                  {
                    if(checkValidity()) doUpdate();
                  },
                '{/literal}{"gmaps_cancel"|@translate}{literal}':
                  function()
                  {
                    $('#iDialogEdit').dialog("close");
                  }
              }
          }
        );

      $('#iBDDisplayTypeIC, #iBDDisplayTypeIP, #iBDDisplayTypeMP').bind('change',
        function ()
        {
          switch($(this).val())
          {
            case 'IC':
              $('#iBDZoomLevelRow').hide();
              $('[name=fBDSizeMode]').attr('disabled', false);
              break;
            case 'IP':
              $('#iBDZoomLevelRow').show();
              $('[name=fBDSizeMode]').attr('disabled', false);
              break;
            case 'MP':
              $('#iBDZoomLevelRow').show();
              $('#iBDSizeModeF').attr('checked', true).change();
              $('[name=fBDSizeMode]').attr('disabled', true);
              break;
          }
        }
      );

      $('#iBDSizeModeA, #iBDSizeModeF').bind('change',
        function ()
        {
          switch($(this).val())
          {
            case 'A':
              $('#iBDMapWidthSliderRow, #iBDMapHeightSliderRow').hide();
              break;
            case 'F':
              $('#iBDMapWidthSliderRow, #iBDMapHeightSliderRow').show();
              break;
          }
        }
      );

      $("#iBDMapWidthSlider").slider(
        {
          min:100,
          max:1280,
          step:5,
          value:100,
          slide: function(event, ui) { changeSize(ui.value, 'iBDMapWidthSlider'); }
        });
      $("#iBDMapHeightSlider").slider(
        {
          min:100,
          max:1280,
          step:5,
          value:100,
          slide: function(event, ui) { changeSize(ui.value, 'iBDMapHeightSlider'); }
        });
      $("#iBDMapZoomLevelSlider").slider(
        {
          min:1,
          max:20,
          step:1,
          value:8,
          slide: function(event, ui) { changeZoom(ui.value, 'plugin'); }
        });
      $("#iBDMapWidthSlider a, #iBDMapHeightSlider a, #iBDMapZoomLevelSlider").addClass('gcBgInput');

      $('#iBDMapMapType').bind('change', function () { changeMapType('plugin'); } );
      $('#iBDMapMapTypeControlType').bind('change', changeTypeControlType);
      //$('#iBDMapTypeControlPos').bind('change', changeTypeControlPosition);
      $('#iBDMapNavigationControlType').bind('change', changeNavigationControlType);
      //$('#iBDMapNavigationControlPos').bind('change', changeNavigationControlPosition);
      $('#iBDMapScaleControl').bind('change', changeScaleControl);
      $('#iBDMapStreetViewControl').bind('change', changeStreetViewControl);


      loadList();
    }


    /**
     *
     */
    var changeStreetViewControl = function ()
    {
      if(properties.gMap!=null)
      {
        properties.gMap.setOptions(
          {
            streetViewControl: ($('#iBDMapStreetViewControl').val()=='n')?false:true,
          }
        );
      }
    }

    /**
     * change the display control display mode
     */
    var changeScaleControl = function ()
    {
      if(properties.gMap!=null)
      {
        properties.gMap.setOptions(
          {
            scaleControl: ($('#iBDMapScaleControl').val()=='n')?false:true,
          }
        );
      }
    }

    /**
     * change the display control type
     */
    var changeTypeControlType = function ()
    {
      if(properties.gMap!=null)
      {
        cType=parseInt($('#iBDMapMapTypeControlType').val());

        properties.gMap.setOptions(
          {
            mapTypeControl: (cType==-1)?false:true,
            mapTypeControlOptions:
              {
                style:cType
              }
          }
        );
      }
    }

    /**
     * change the display control position
     */
    /*
    var changeTypeControlPosition = function ()
    {
      if(properties.gMap!=null)
      {
        properties.gMap.setOptions(
          {
            mapTypeControlOptions:
              {
                position:parseInt($('#iBDMapTypeControlPos').val())
              }
          }
        );
      }
    }
    */


    /**
     * change the zoom control type
     */
    var changeNavigationControlType = function ()
    {
      if(properties.gMap!=null)
      {
        cType=parseInt($('#iBDMapNavigationControlType').val());

        properties.gMap.setOptions(
          {
            navigationControl: (cType==-1)?false:true,
            navigationControlOptions:
              {
                style:cType
              }
          }
        );
      }
    }

    /**
     * change the zoom control position
     */
    /*
    var changeNavigationControlPosition = function ()
    {
      if(properties.gMap!=null)
      {
        properties.gMap.setOptions(
          {
            navigationControlOptions:
              {
                position:parseInt($('#iBDMapTypeControlPos').val())
              }
          }
        );
      }
    }
    */

    /**
     * change the width/height
     * @param value : the width or height
     * @param id : define if the width is changed or the height
     */
    var changeSize = function (value, id)
    {
      $('#'+id+'Display').html(value+'px');
      $('#'+id+'Value').val(value);

      $('#iBDExampleMap').css(
        {
          width:$('#iBDMapWidthSliderValue').val()+'px',
          height:$('#iBDMapHeightSliderValue').val()+'px'
        }
      );

      if(properties.gMap!=null) google.maps.event.trigger(properties.gMap, 'resize');
    }

    /**
     * change the zoom value
     * @param value : the zoom value (1 - 20)
     * @param caller : designed to determine who's calling the function and avoid
     *                 recursivity in events call ; values = 'plugin' or 'map'
     */
    var changeZoom = function (value, caller)
    {
      $('#iBDMapZoomLevelSliderDisplay').html(value);
      $('#iBDMapZoomLevelSliderValue').val(value);

      if(properties.gMap!=null && caller=='plugin')
      {
        properties.gMap.setZoom(parseInt(value));
      }
      else if(caller=='map')
      {
        $('#iBDMapZoomLevelSlider').slider('option', 'value', value);
      }
    }

    /**
     * change the display mode (map type)
     * @param caller : designed to determine who's calling the function and avoid
     *                 recursivity in events call ; values = 'plugin' or 'map'
     */
    var changeMapType = function (caller)
    {
      if(properties.gMap!=null && caller=='plugin')
      {
        properties.gMap.setOptions(
          {
            mapTypeId: $('#iBDMapMapType').val()
          }
        );
      }
      else if(caller=='map')
      {
        $('#iBDMapMapType').val(properties.gMap.getMapTypeId());
      }
    }


    /**
     * initialize the map
     */
    var initializeMap = function ()
    {
      var latlng=new google.maps.LatLng(0, 0);

      mapTypeControlOptions={ };

      var map = new google.maps.Map($("#iBDExampleMap").get(0),
        {
          mapTypeId: $('#iBDMapMapType').val(),
          zoom: parseInt($('#iBDMapZoomLevelSliderValue').val()),
          center:latlng,
          navigationControl: ($('#iBDMapNavigationControlType').val()!='-1')?true:false,
          navigationControlOptions:
            {
              style:($('#iBDMapNavigationControlType').val()!='-1')?parseInt($('#iBDMapNavigationControlType').val()):0,
            },
          scaleControl: ($('#iBDMapScaleControl').val()=='n')?false:true,
          mapTypeControl:($('#iBDMapMapTypeControlType').val()!='-1')?true:false,
          mapTypeControlOptions:
            {
              style:($('#iBDMapMapTypeControlType').val()!='-1')?parseInt($('#iBDMapMapTypeControlType').val()):0,
            },
          markerTitle:'',
          streetViewControl:($('#iBDMapStreetViewControl').val()=='n')?false:true,
        }
      );

      properties.gMap=map;

      google.maps.event.addListener(
        properties.gMap,
        'zoom_changed',
        function()
        {
          changeZoom(properties.gMap.getZoom(), 'map');
        }
      );

      google.maps.event.addListener(
        properties.gMap,
        'maptypeid_changed',
        function()
        {
          changeMapType('map');
        }
      );
    }

    /**
     * manage the tabsheet
     *
     * @param String tabsheet : id of the tabsheet to display
     */
    this.displayTab = function (tabsheet)
    {
      switch(tabsheet)
      {
        case 'general':
          $('#iTabGeneral').css('display', 'block');
          $('#iTabDimensions').css('display', 'none');
          $('#iTabMapType').css('display', 'none');
          $('#iTabZoomLevel').css('display', 'none');
          break;
        case 'dimensions':
          $('#iTabGeneral').css('display', 'none');
          $('#iTabDimensions').css('display', 'block');
          $('#iTabMapType').css('display', 'none');
          $('#iTabZoomLevel').css('display', 'none');
          break;
        case 'mapType':
          $('#iTabGeneral').css('display', 'none');
          $('#iTabDimensions').css('display', 'none');
          $('#iTabMapType').css('display', 'block');
          $('#iTabZoomLevel').css('display', 'none');
          break;
        case 'zoomLevel':
          $('#iTabGeneral').css('display', 'none');
          $('#iTabDimensions').css('display', 'none');
          $('#iTabMapType').css('display', 'none');
          $('#iTabZoomLevel').css('display', 'block');
          break;
      }
    }


    /**
     * open the dialog box to edit the map properties
     *
     * @param String id : if set to '' => open dialogbox in 'add' mode
     *                    otherwise edit the given map
     */
    this.editMap = function (id)
    {
      properties.id=id;
      updateDialog('');
      this.displayTab('general');
      // >> because li items don't have id... :-(
      $('#itab2 li').removeClass('selected_tab').addClass('normal_tab');
      $('#itab2 li:first').addClass('selected_tab');
      // <<

      $('#iDialogEdit')
        .bind('dialogopen', function ()
          {
            if(properties.id!='')
            {
              displayProcessing(true);

              $.ajax(
                {
                  type: "POST",
                  url: "{/literal}{$datas.urlRequest}{literal}",
                  async: true,
                  data: { ajaxfct:"admin.maps.getMap", id:properties.id },
                  success:
                    function(msg)
                    {
                      updateDialog(msg);
                      initializeMap();
                      displayProcessing(false);
                    }
                }
              );
            }
            else
            {
              initializeMap();
            }
          }
        )
        .dialog("open");
    }

    /**
     * delete a map
     *
     * @param String id : id of the map to delete
     */
    this.deleteMap = function (id)
    {
      $('#iDialogDelete')
        .html('<br>{/literal}{"gmaps_pleaseConfirmMetadataDelete_1"|@translate}<br><br>{"gmaps_pleaseConfirmMetadataDelete_2"|@translate}{literal}')
        .dialog(
          {
            autoOpen:true,
            modal: true,
            dialogClass: 'gcBgTabSheet gcBorder',
            title: '{/literal}{"gmaps_deleteMap"|@translate}{literal}',
            buttons:
              {
                '{/literal}{"gmaps_delete"|@translate}{literal}':
                  function()
                  {
                    $(this).html("<br><img src='./plugins/GrumPluginClasses/icons/processing.gif'>");
                    $.ajax(
                      {
                        type: "POST",
                        url: "{/literal}{$datas.urlRequest}{literal}",
                        async: true,
                        data: { ajaxfct:"admin.maps.deleteMap", id:id },
                        success:
                          function(msg)
                          {
                            $('#iDialogDelete').dialog("destroy");
                            loadList();
                          }
                      }
                    );
                  },
                '{/literal}{"gmaps_cancel"|@translate}{literal}':
                  function()
                  {
                    $('#iDialogDelete').dialog("destroy");
                  }
              }
          }
        );
    }

    /**
     * update values of the dialog box
     *
     * @param String items : json string ; if empty assume to reset all fields
     *                       with blank
     */
    var updateDialog = function (items)
    {
      if(items=='')
      {
        tmp={
          sizeMode:'A',
          displayTYpe:'IC'
        }
        $('#iBDName').val('');
        $('#iBDDisplayTypeIC').attr('checked', true);
        $('#iBDSizeModeA').attr('checked', true);
        $('#iBDMapWidthSliderValue').val('470');
        $('#iBDMapHeightSliderValue').val('210');
        $('#iBDMapWidthSlider').slider('option', 'value', 470);
        $('#iBDMapHeightSlider').slider('option', 'value', 210);
        $('#iBDMapZoomLevelSliderValue').val(4);
        $('#iBDMapZoomLevelSlider').slider('option', 'value', 4);
        $('#iBDMapMapType').val('hybrid');
        $('#iBDMapMapTypeControlType').val('0'); // default - auto
        //$('#iBDMapTypeControlPos').val('3'); // top right
        $('#iBDMapNavigationControlType').val('0'); // default - auto
        //$('#iBDMapNavigationControlPos').val('1'); // top left
        $('#iBDMapScaleControl').val('y'); // default - visible
        $('#iBDExampleMap').html('').css(
          {
            width:$('#iBDMapWidthSliderValue').val()+'px',
            height:$('#iBDMapHeightSliderValue').val()+'px'
          }
        );
        $('#iBDMapStreetViewControl').val('n');

        properties.gMap=null;
      }
      else
      {
        tmp=$.parseJSON(items);

        $('#iBDNumId').val(tmp.id);
        $('#iBDName').val(tmp.name);
        $('#iBDDisplayType'+tmp.displayType).attr('checked', true);
        $('#iBDSizeMode'+tmp.sizeMode).attr('checked', true);
        $('#iBDMapWidthSliderValue').val(tmp.width);
        $('#iBDMapHeightSliderValue').val(tmp.height);
        $('#iBDMapWidthSlider').slider('option', 'value', tmp.width);
        $('#iBDMapHeightSlider').slider('option', 'value', tmp.height);
        $('#iBDMapZoomLevelSliderValue').val(tmp.zoomLevel);
        $('#iBDMapZoomLevelSlider').slider('option', 'value', tmp.zoomLevel);
        $('#iBDMapMapType').val(tmp.mapType);
        $('#iBDMapMapTypeControlType').val(tmp.mapTypeControl);
        $('#iBDMapNavigationControlType').val(tmp.navigationControl);
        $('#iBDMapScaleControl').val(tmp.scaleControl);
        $('#iBDMapStreetViewControl').val(tmp.streetViewControl);

        $('#iBDExampleMap').html('').css(
          {
            width:tmp.width+'px',
            height:tmp.height+'px'
          }
        );
      }

      $('#iBDDisplayType'+tmp.displayType+', #iBDSizeMode'+tmp.sizeMode).change();
      changeSize($('#iBDMapWidthSliderValue').val(), 'iBDMapWidthSlider');
      changeSize($('#iBDMapHeightSliderValue').val(), 'iBDMapHeightSlider');
      changeZoom($('#iBDMapZoomLevelSliderValue').val(), '');
      changeStreetViewControl($('#iBDMapStreetViewControl').val());
    }

    /**
     * reload the user defined map list
     */
    var loadList = function ()
    {
      $('#iListMaps').html("<br>{/literal}{'gmaps_loading'|@translate}{literal}<br><img src='./plugins/GrumPluginClasses/icons/processing.gif'>");

      $.ajax(
        {
          type: "POST",
          url: "{/literal}{$datas.urlRequest}{literal}",
          async: true,
          data: { ajaxfct:"admin.maps.getList" },
          success:
            function(msg)
            {
              $("#iListMaps").html(msg);
            }
        }
      );
    }

    /**
     * check the validity of a given map id
     *  a valid id only contains chars : A-Z0-9_
     *
     * @param String tagId : the tagId
     * @return Boolean : true if ok, otherwise false
     */
    var checkIdValidity = function (tagId)
    {
      re=/^[a-z0-9_]+$/i;
      if(re.exec(tagId)==null) return(false);
      return(true);
    }


    /**
     * check for the validity of the map settings
     */
    var checkValidity = function ()
    {
      $('.error').removeClass('error');

      ok=true;

      return(ok);
    }

    /**
     * send map update to the server, and close the dialog box if everything
     * is ok
     */
    var doUpdate = function ()
    {
      displayProcessing(true);

      // build datas
      datas = {
        name:$('#iBDName').val(),
        displayType:$('[name=fBDDisplayType]:checked').val(),
        sizeMode:$('[name=fBDSizeMode]:checked').val(),
        width:$('#iBDMapWidthSliderValue').val(),
        height:$('#iBDMapHeightSliderValue').val(),
        zoomLevel:$('#iBDMapZoomLevelSliderValue').val(),
        mapType:$('#iBDMapMapType').val(),
        mapTypeControl:$('#iBDMapMapTypeControlType').val(),
        navigationControl:$('#iBDMapNavigationControlType').val(),
        scaleControl:$('#iBDMapScaleControl').val(),
        streetViewControl:$('#iBDMapStreetViewControl').val(),
        style:'',
      }

      $.ajax(
        {
          type: "POST",
          url: "{/literal}{$datas.urlRequest}{literal}",
          async: true,
          data: { ajaxfct:"admin.maps.setMap", id:properties.id, datas:datas },
          success:
            function(msg)
            {
              displayProcessing(false);

              if(msg.match(/^[0-9]+$/i)!=null)
              {
                // result Ok ! => close the dialog box and reload the list
                $('#iDialogEdit').dialog("close");
                loadList();
              }
              else
              {
                returned=msg.split('!');
                $('#'+returned[0]).addClass('error');
                alert(returned[1]);
              }
            }
        }
      );
    }

    /**
     * display or hide the processing flower
     */
    var displayProcessing = function (visible)
    {
      if(visible)
      {
        $('#iBDProcessing').css("display", "block");
      }
      else
      {
        $('#iBDProcessing').css("display", "none");
      }
    }

    this.init();
  }


</script>
{/literal}



<h2>{'gmaps_maps_management'|@translate}</h2>


<div class='addMap'>
  <a onclick="udm.editMap('');">{'gmaps_add_a_new_map'|@translate}</a>
</div>


<table id='iHeaderListMaps' class="littlefont">
  <tr>
    <th>{'gmaps_name'|@translate}</th>
    <th style="width:150px;">{'gmaps_displayType'|@translate}</th>
    <th style="width:90px;">{'gmaps_dimensions'|@translate}</th>
    <th style="width:90px;">{'gmaps_zoomLevel'|@translate}</th>
    <th style="width:90px;">{'gmaps_mapType'|@translate}</th>
    <th style="width:90px;">{'gmaps_googleMapTypeControl'|@translate}</th>
    <th style="width:90px;">{'gmaps_googleMapNavigationControl'|@translate}</th>
    <th style="width:90px;">{'gmaps_googleMapScaleControl'|@translate}</th>
    <th style="width:90px;">{'gmaps_googleMapStreetViewControl'|@translate}</th>
    <th width="40px">&nbsp;</th>
  </tr>
</table>

<div id='iListMaps' class="{$themeconf.name}">
</div>
<div id="iListMapsNb"></div>


<div id="iDialogDelete">
</div>


<div id="iDialogEdit">
  <div id='iBDProcessing' style="display:none;position:absolute;width:100%;height:100%;background:#000000;opacity:0.75">
      <img src="plugins/GrumPluginClasses/icons/processing.gif" style="margin-top:100px;">
  </div>

  {$mapTabsheet}

  <form>
    <div id='iTabsContainer' style='height:100px;'>
      <div id='iTabGeneral' style='display:none;'>
        <table class='formtable'>
          <tr>
            <td>{'gmaps_name'|@translate}</td>
            <td>
              <input type='text' id='iBDName' maxlength=80 size=60 value=''>
            </td>
          </tr>

          <tr>
            <td>{'gmaps_displayType'|@translate}</td>
            <td>
              <label><input type='radio' id='iBDDisplayTypeIC' name='fBDDisplayType' value='IC'>&nbsp;{'gmaps_displayTypeIC'|@translate}</label><br>
              <label><input type='radio' id='iBDDisplayTypeIP' name='fBDDisplayType' value='IP'>&nbsp;{'gmaps_displayTypeIP'|@translate}</label><br>
              <label><input type='radio' id='iBDDisplayTypeMP' name='fBDDisplayType' value='MP'>&nbsp;{'gmaps_displayTypeMP'|@translate}</label>
            </td>
          </tr>

        </table>
      </div>

      <div id='iTabDimensions' style='display:none;'>

        <table class="formtable">
          <tr>
            <td>{'gmaps_map_dimensions_are'|@translate}</td>
            <td colspan="3">
              <label><input type="radio" id="iBDSizeModeA" name="fBDSizeMode" value="A">&nbsp;{'gmaps_interface_dimensions_a'|@translate}</label><br>
              <label><input type="radio" id="iBDSizeModeF" name="fBDSizeMode" value="F">&nbsp;{'gmaps_interface_dimensions_f'|@translate}</label>
            </td>
          </tr>

          <tr id='iBDMapWidthSliderRow'>
            <td>&nbsp;</td>
            <td style='padding-left:30px;'>{'gmaps_width'|@translate}</td>
            <td>
              <input type="hidden" id="iBDMapWidthSliderValue" value="">
              <div id="iBDMapWidthSlider" class="gcBgInput gcBorderInput"></div>
            </td>
            <td width="70px">
              <div id="iBDMapWidthSliderDisplay"></div>
            </td>
          </tr>
          <tr id='iBDMapHeightSliderRow'>
            <td>&nbsp;</td>
            <td style='padding-left:30px;'>{'gmaps_height'|@translate}</td>
            <td>
              <input type="hidden" id="iBDMapHeightSliderValue" value="">
              <div id="iBDMapHeightSlider" class="gcBgInput gcBorderInput"></div>
            </td>
            <td width="70px">
              <div id="iBDMapHeightSliderDisplay"></div>
            </td>
          </tr>
        </table>
      </div>

      <div id='iTabMapType' style='display:none;'>
        <table class='formtable'>
          <tr>
            <td>{'gmaps_mapType'|@translate}</td>
            <td>
              <select id='iBDMapMapType'>
                <option value='hybrid'>{'gmaps_googleMapType_hybrid'|@translate}</option>
                <option value='satellite'>{'gmaps_googleMapType_satellite'|@translate}</option>
                <option value='roadmap'>{'gmaps_googleMapType_roadmap'|@translate}</option>
                <option value='terrain'>{'gmaps_googleMapType_terrain'|@translate}</option>
              </select>
            </td>
          </tr>

          <tr>
            <td>{'gmaps_googleMapControlType'|@translate}</td>
            <td>
              <select id='iBDMapMapTypeControlType'>
                <option value='-1'>{'gmaps_googleMapTypeControl_-1'|@translate}</option>
                <option value='0'>{'gmaps_googleMapTypeControl_0'|@translate}</option>
                <option value='1'>{'gmaps_googleMapTypeControl_1'|@translate}</option>
                <option value='2'>{'gmaps_googleMapTypeControl_2'|@translate}</option>
              </select>
            </td>
          </tr>

          <!--
          <tr>
            <td>{'gmaps_googleMapControlPos'|@translate}</td>
            <td>
              <select id='iBDMapTypeControlPos'>
                <option value='2'>{'gmaps_googleMapControlPos_T'|@translate}</option>
                <option value='7'>{'gmaps_googleMapControlPos_B'|@translate}</option>
                <option value='4'>{'gmaps_googleMapControlPos_L'|@translate}</option>
                <option value='5'>{'gmaps_googleMapControlPos_R'|@translate}</option>
                <option value='1'>{'gmaps_googleMapControlPos_TL'|@translate}</option>
                <option value='3'>{'gmaps_googleMapControlPos_TR'|@translate}</option>
                <option value='6'>{'gmaps_googleMapControlPos_BL'|@translate}</option>
                <option value='8'>{'gmaps_googleMapControlPos_BR'|@translate}</option>
              </select>
            </td>
          </tr>
          -->

          <tr>
            <td>{'gmaps_googleMapStreetViewControl'|@translate}</td>
            <td>
              <select id='iBDMapStreetViewControl'>
                <option value='y'>{'gmaps_y'|@translate}</option>
                <option value='n'>{'gmaps_n'|@translate}</option>
              </select>
            </td>
          </tr>

        </table>
      </div>


      <div id='iTabZoomLevel' style='display:none;'>
        <table class='formtable'>
          <tr id='iBDZoomLevelRow'>
            <td>{'gmaps_zoomLevel'|@translate}</td>
            <td>
              <table class="formclass">
                <tr>
                  <td>
                    <input type="hidden" id="iBDMapZoomLevelSliderValue" value="">
                    <div id="iBDMapZoomLevelSlider" class="gcBgInput gcBorderInput"></div>
                  </td>
                  <td width="70px">
                    <div id="iBDMapZoomLevelSliderDisplay"></div>
                  </td>
                </tr>
              </table>
            </td>
          </tr>

          <tr>
            <td>{'gmaps_googleMapControlType'|@translate}</td>
            <td>
              <select id='iBDMapNavigationControlType'>
                <option value='-1'>{'gmaps_googleMapNavigationControl_-1'|@translate}</option>
                <option value='0'>{'gmaps_googleMapNavigationControl_0'|@translate}</option>
                <option value='1'>{'gmaps_googleMapNavigationControl_1'|@translate}</option>
                <option value='2'>{'gmaps_googleMapNavigationControl_2'|@translate}</option>
                <option value='3'>{'gmaps_googleMapNavigationControl_3'|@translate}</option>
              </select>
            </td>
          </tr>

          <!--
          <tr>
            <td>{'gmaps_googleMapControlPos'|@translate}</td>
            <td>
              <select id='iBDMapNavigationControlPos'>
                <option value='2'>{'gmaps_googleMapControlPos_T'|@translate}</option>
                <option value='7'>{'gmaps_googleMapControlPos_B'|@translate}</option>
                <option value='4'>{'gmaps_googleMapControlPos_L'|@translate}</option>
                <option value='5'>{'gmaps_googleMapControlPos_R'|@translate}</option>
                <option value='1'>{'gmaps_googleMapControlPos_TL'|@translate}</option>
                <option value='3'>{'gmaps_googleMapControlPos_TR'|@translate}</option>
                <option value='6'>{'gmaps_googleMapControlPos_BL'|@translate}</option>
                <option value='8'>{'gmaps_googleMapControlPos_BR'|@translate}</option>
              </select>
            </td>
          </tr>
          -->

          <tr>
            <td>{'gmaps_googleMapScaleControl'|@translate}</td>
            <td>
              <select id='iBDMapScaleControl'>
                <option value='y'>{'gmaps_display_visible'|@translate}</option>
                <option value='n'>{'gmaps_display_hidden'|@translate}</option>
              </select>
            </td>
          </tr>

        </table>
      </div>
    </div>

    <div id='iBDExampleMap' style='margin-left:auto;margin-right:auto;margin-top:20px;border:1px solid;'></div>

  </form>
</div>


{literal}
<script type="text/javascript">
  var udm=new userDefManage();
</script>
{/literal}