{known_script id="jquery.ui" src=$ROOT_URL|@cat:"themes/default/js/ui/packed/ui.core.packed.js"}
{known_script id="jquery.ui.slider" src=$ROOT_URL|@cat:"themes/default/js/ui/packed/ui.slider.packed.js"}

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

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

  function configManager()
  {
    this.init = function ()
    {
      $("#iBDPopupAutomaticSizeSlider").slider(
        {
          min:50,
          max:95,
          step:1,
          value:{/literal}{$gmapsConfig.popupAutomaticSize*100}{literal},
          slide: function(event, ui) { changeSize(ui.value); }
        });
      changeSize($("#iBDPopupAutomaticSizeSlider").slider('value'));
    }

    /**
     * change the popup ratio
     * @param value : the ratio
     */
    var changeSize = function (value)
    {
      $('#iBDPopupAutomaticSizeDisplay').html(value+"% {/literal}{'gmaps_of_window_size'|@translate}{literal}");
      $('#iBDPopupAutomaticSizeValue').val(value/100);
    };

    this.submit = function ()
    {
      $('#iForm').get(0).submit();
    }

    this.init();
  }

</script>
{/literal}



<form method="POST" action="" id='iForm'>


  <table class="formtable">
    <tr>
      <td>{'gmaps_popup_automatic_size'|@translate}</td>
      <td>
        <input type="hidden" id="iBDPopupAutomaticSizeValue" name='fBDPopupAutomaticSize' value="">
        <div id="iBDPopupAutomaticSizeSlider" class="gcBgInput gcBorderInput"></div>
      </td>
      <td>
        <div id="iBDPopupAutomaticSizeDisplay"></div>
      </td>
    </tr>
  </table>


  <div class='cfgBloc'>
    <input type="button" onclick="cm.submit();" value="{'gmaps_apply'|@translate}">
  </div>

</form>


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