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

{literal}

<script type="text/javascript">


  function kmlFileManager ()
  {
    var properties = {
      id:'',
    }


    /**
     * initialize the page
     */
    this.init = function ()
    {

      $('#iDialogEdit')
        .dialog(
          {
            autoOpen:false,
            width:800,
            height:150,
            modal: true,
            dialogClass: 'gcBgTabSheet gcBorder',
            title: '{/literal}{"gmaps_kml_file_management"|@translate}{literal}',
            buttons:
              {
                '{/literal}{"gmaps_ok"|@translate}{literal}':
                  function()
                  {
                    if(checkValidity()) doUpdate();
                  },
                '{/literal}{"gmaps_cancel"|@translate}{literal}':
                  function()
                  {
                    $('#iDialogEdit').dialog("close");
                  }
              }
          }
        );

      loadList();
    }


    /**
     * open the dialog box to edit the kml file properties
     *
     * @param String id : if set to '' => open dialogbox in 'add' mode
     *                    otherwise edit the given kml file
     */
    this.editKmlFile = function (id)
    {
      properties.id=id;
      updateDialog('');

      $('#iErrorMsg').css('display', 'none');

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

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

    /**
     * delete a kml file
     *
     * @param String id : id of the kml file to delete
     */
    this.deleteKmlFile = function (id)
    {
      $('#iErrorMsg').css('display', 'none');

      $('#iDialogDelete')
        .html('<br>{/literal}{"gmaps_pleaseConfirmKml_1"|@translate}<br><br>{"gmaps_pleaseConfirmKml_2"|@translate}{literal}')
        .dialog(
          {
            autoOpen:true,
            modal: true,
            dialogClass: 'gcBgTabSheet gcBorder',
            title: '{/literal}{"gmaps_deleteKml"|@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.kmlFiles.deleteFile", 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=='')
      {
        $('#iBDKmlId').val('');
        $('#iBDKmlName').val('');
        $('#iBDKmlCurrentFile').html('').css('display', 'none');
      }
      else
      {
        tmp=$.parseJSON(items);

        $('#iBDKmlId').val(tmp.id);
        $('#iBDKmlName').val(tmp.name);
        $('#iBDKmlCurrentFile').html(tmp.file+' ('+tmp.fileSizeUnits+', '+tmp.fileDate+')').css('display', 'block');

        properties.id=tmp.id;
      }
      $('#iBDKmlFile').val('');
    }

    /**
     * reload the assocation list
     */
    var loadList = function ()
    {
      $('#iListKml').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.kmlFiles.getList" },
          success:
            function(msg)
            {
              $("#iListKml").html(msg);
            }
        }
      );
    }


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

      if($('#iBDKmlId').val()=='' && $('#iBDKmlFile').val()=='')
      {
        $('#iBDKmlFile').addClass('error');
        alert('{/literal}{"gmaps_file_required"|@translate}{literal}');
        ok=false;
      }

      re=/.*(\.kml|\.kmz)$/i;
      if($('#iBDKmlFile').val()!='' && re.exec($('#iBDKmlFile').val())==null)
      {
        $('#iBDKmlFile').addClass('error');
        alert('{/literal}{"gmaps_file_is_not_kml_kmz"|@translate}{literal}');
        ok=false;
      }

      return(ok);
    }

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

      if($('#iBDKmlFile').val()!='')
      {
        /*
         * because it's not possible to upload file through ajax, using the
         * standard FORM method
         */

        $('#iBDKmlForm').get(0).submit();
      }
      else
      {
        // there is only the name to change, use an ajax call
        $.ajax(
          {
            type: "POST",
            url: "{/literal}{$datas.urlRequest}{literal}",
            async: true,
            data: { ajaxfct:"admin.kmlFiles.setFile", id:properties.id, name:$('#iBDKmlName').val() },
            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('!');
                  if(returned[0]!='') $('#'+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_kml_files_management'|@translate}</h2>


<div class='addMap'>
  <a onclick="km.editKmlFile('');">{'gmaps_add_a_new_kmlFile'|@translate}</a>
</div>


<table id='iHeaderListMaps' class="littlefont">
  <tr>
    <th>{'gmaps_name'|@translate}</th>
    <th style="width:300px;">{'gmaps_file'|@translate}</th>
    <th style="width:180px;">{'gmaps_date'|@translate}</th>
    <th style="width:90px;">{'gmaps_file_size'|@translate}</th>
    <th style="width:90px;">{'gmaps_nb_assoc'|@translate}</th>
    <th width="40px">&nbsp;</th>

  </tr>
</table>



<div id='iListKml' class="{$themeconf.name}">
</div>
<div id="iListKmlNb"></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>

  <form id='iBDKmlForm' action="{$datas.urlRequest}" method="POST" enctype="multipart/form-data">

    <table class="formtable">
      <tr>
        <td>{'gmaps_name'|@translate}</td>
        <td>
          <input type='hidden' id='iBDKmlId' name ="id" value=''>
          <input type='hidden' id='iBDKmlAjaxFct' name="ajaxfct" value='admin.kmlFiles.setFile'>
          <input type='text' id='iBDKmlName' name='name' value='' maxlength=255 size=60>
        </td>
      </tr>

      <tr id='iBDKmlFileInputRow'>
        <td>{'gmaps_file'|@translate}</td>
        <td>
          <div id='iBDKmlCurrentFile' name='iBDKmlCurrentFile' class='gcBorderInput gcBgInput gcTextInput' style='display:block;margin-bottom:2px;padding:2px;'></div>
          <input type='file' size=60 id='iBDKmlFile' name="file" value='' accept='kml'>
        </td>
      </tr>

    </table>

  </form>
</div>





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