{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"}
{known_script id="gpc.ui.iconSelector" src=$ROOT_URL|@cat:"plugins/GrumPluginClasses/js/ui.iconSelector.packed.js"}
{known_script id="gpc.ui.categorySelector" src=$ROOT_URL|@cat:"plugins/GrumPluginClasses/js/ui.categorySelector.packed.js"}
{known_script id="maps.google.com/api" src="http://maps.google.com/maps/api/js?sensor=false"}

{literal}

<script type="text/javascript">


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


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

      $('#iDialogEdit')
        .dialog(
          {
            autoOpen:false,
            width:800,
            height:480,
            modal: true,
            dialogClass: 'gcBgTabSheet gcBorder',
            title: '{/literal}{"gmaps_manage_assoc"|@translate}{literal}',
            open: function () {
                $('#iBDAssocCatId').categorySelector('listMaxHeight', $('#iDialogEdit').height()-$('#iBDAssocCatId').position().top-$('#iBDAssocCatId').height());
              },

            buttons:
              {
                '{/literal}{"gmaps_ok"|@translate}{literal}':
                  function()
                  {
                    if(checkValidity()) doUpdate();
                  },
                '{/literal}{"gmaps_cancel"|@translate}{literal}':
                  function()
                  {
                    $('#iDialogEdit').dialog("close");
                  }
              }
          }
        );

      $('#iBDAssocCatId').categorySelector(
        {
          listMaxWidth:600,
          listMaxHeight:500,
          displayStatus:true,
          levelIndent:20,
          userMode:'admin',
          load: function (event) { $(this).categorySelector('expand', ':all+0'); }
        }
      );

      $('#iBDAssocIcon').iconSelector(
        {
          images:[
          {/literal}
            {foreach from=$datas.icons item=icon name=list}
              "plugins/GMaps/img/{$icon.file}"
              {if !$smarty.foreach.list.last},{/if}
            {/foreach}
          {literal}
          ],
          cellWidth:42,
          cellHeight:28
        }
      );

      $('#iBDAssocMarker').iconSelector(
        {
          images:[
          {/literal}
            {foreach from=$datas.markers item=marker name=list}
              "plugins/GMaps/img/{$marker.file}"
              {if !$smarty.foreach.list.last},{/if}
            {/foreach}
          {literal}
          ],
          cellWidth:32,
          cellHeight:40,
          numCols:13,
          numRows:4
        }
      );

      $('#iBDAssocMapId').bind('change', changeMapDisplayType);
      $('[name=fBDAssocKmlFile]').bind('change', changeKmlFileSource);

      loadList();
    }


    /**
     * called when the source of kml file changed
     */
    var changeKmlFileSource = function ()
    {
      switch($('[name=fBDAssocKmlFile]:checked').val())
      {
        case 'N':
          $('#iBDAssocKmlFileId').css('display', 'none');
          $('#iBDAssocKmlFileUrl').css('display', 'none');
          $('#iBDKmlWarning').css('display', 'none');
          break;
        case 'S':
          $('#iBDAssocKmlFileId').css('display', 'block');
          $('#iBDAssocKmlFileUrl').css('display', 'none');
          $('#iBDKmlWarning').css('display', 'block');
          break;
        case 'U':
          $('#iBDAssocKmlFileId').css('display', 'none');
          $('#iBDAssocKmlFileUrl').css('display', 'block');
          $('#iBDKmlWarning').css('display', 'block');
          break;
      }
    }

    /**
     * called when the map is changed
     * refresh the icon list
     */
    var changeMapDisplayType = function ()
    {
      switch($('#iBDAssocMapId option:selected').attr('dtype'))
      {
        case 'IC':
        case 'IP':
          $('#iBDAssocIconRow').show();
          break;
        case 'MP':
          $('#iBDAssocIconRow').hide();
          break;
      }
    }


    /**
     * manage the tabsheet
     *
     * @param String tabsheet : id of the tabsheet to display
     */
    this.displayTab = function (tabsheet)
    {
      switch(tabsheet)
      {
        case 'integration':
          $('#iTabIntegration').css('display', 'block');
          $('#iTabAssoc').css('display', 'none');
          break;
        case 'assoc':
          $('#iTabIntegration').css('display', 'none');
          $('#iTabAssoc').css('display', 'block');
          break;
      }
    }


    /**
     * open the dialog box to edit the association properties
     *
     * @param String id : if set to '' => open dialogbox in 'add' mode
     *                    otherwise edit the given association
     */
    this.editAssoc = function (id)
    {
      properties.id=id;
      updateDialog('');
      this.displayTab('assoc');
      // >> 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.assoc.getAssoc", id:properties.id },
                  success:
                    function(msg)
                    {
                      updateDialog(msg);
                      displayProcessing(false);
                    }
                }
              );
            }
          }
        )
        .dialog("open");
    }

    /**
     * delete an association
     *
     * @param String id : id of the association to delete
     */
    this.deleteAssoc = function (id)
    {
      $('#iDialogDelete')
        .html('<br>{/literal}{"gmaps_pleaseConfirmAssoc"|@translate}{literal}')
        .dialog(
          {
            autoOpen:true,
            modal: true,
            dialogClass: 'gcBgTabSheet gcBorder',
            title: '{/literal}{"gmaps_deleteAssoc"|@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.assoc.deleteAssoc", 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=='')
      {
        $('#iBDAssocCatId').categorySelector('value', ':first');
        $('#iBDAssocMapId').val($('#iBDAssocMapId option:first').val());
        $('#iBDAssocApplySubCat').val('y');
        $('#iBDAssocKmlNone').attr('checked', true);
        $('#iBDAssocKmlFileId').val($('#iBDAssocKmlFileId option:first').val());
        $('#iBDAssocKmlFileUrl').val('');
        $('#iBDAssocIcon, #iBDAssocMarker').iconSelector('value', ':first');
        $('#iBDAssocTitle').val('');
      }
      else
      {
        tmp=$.parseJSON(items);

        $('#iBDAssocCatId').categorySelector('value', tmp.categoryId).categorySelector('expand', tmp.categoryId+'+');
        $('#iBDAssocMapId').val(tmp.mapId);
        $('#iBDAssocApplySubCat').val(tmp.applySubCat);
        if(tmp.kmlFileId>0)
        {
          $('#iBDAssocKmlSelect').attr('checked', true);
        }
        else if(tmp.kmlFileUrl!='')
        {
          $('#iBDAssocKmlUrl').attr('checked', true);
        }
        else
        {
          $('#iBDAssocKmlNone').attr('checked', true);
        }
        $('#iBDAssocKmlFileId').val(tmp.kmlFileId);
        $('#iBDAssocKmlFileUrl').val(tmp.kmlFileUrl);
        $('#iBDAssocIcon').iconSelector('value', 'plugins/GMaps/img/'+tmp.icon);
        $('#iBDAssocMarker').iconSelector('value', 'plugins/GMaps/img/'+tmp.marker);
        $('#iBDAssocTitle').val(tmp.title);
      }

      changeMapDisplayType();
      changeKmlFileSource();
    }

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


    /**
     * check for the validity of the map settings
     */
    var checkValidity = function ()
    {
      $('.error').removeClass('error');
      ok=true;
/*
      if(checkIdValidity($('#iBDMapId').val())==false)
      {
        $('#iBDMapId').addClass('error');
        alert('{/literal}{"gmaps_invalidId"|@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);

      // build datas
      datas = {
        categoryId:$('#iBDAssocCatId').categorySelector('value'),
        mapId:$('#iBDAssocMapId').val(),
        applySubCat:$('#iBDAssocApplySubCat').val(),
        kmlFileId:($('#iBDAssocKmlSelect').attr('checked'))?$('#iBDAssocKmlFileId').val():0,
        kmlFileUrl:($('#iBDAssocKmlSelect').attr('checked'))?'':$('#iBDAssocKmlFileUrl').val(),
        icon:$('#iBDAssocIcon').iconSelector('value'),
        marker:$('#iBDAssocMarker').iconSelector('value'),
        title:$('#iBDAssocTitle').val(),
      }

      $.ajax(
        {
          type: "POST",
          url: "{/literal}{$datas.urlRequest}{literal}",
          async: true,
          data: { ajaxfct:"admin.assoc.setAssoc", 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('!');
                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_associate_category_maps'|@translate}</h2>


<div class='addMap'>
  <a onclick="am.editAssoc('');">{'gmaps_add_a_new_association'|@translate}</a>
</div>


<table id='iHeaderListMaps' class="littlefont">
  <tr>
    <th>{'gmaps_category'|@translate}</th>
    <th style="width:90px;">{'gmaps_apply_subcat'|@translate}</th>
    <th style="width:150px;">{'gmaps_mapType'|@translate}</th>
    <th style="width:350px;">{'gmaps_map'|@translate}</th>
    <th style="width:220px;">{'gmaps_map_associate_kmlfile'|@translate}</th>
    <th width="40px">&nbsp;</th>
  </tr>
</table>



<div id='iListAssoc' class="{$themeconf.name}">
</div>
<div id="iListAssocNb"></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='iTabAssoc' style='display:none;'>
        <table class="formtable">
          <tr>
            <td>{'gmaps_map'|@translate}</td>
            <td>
              <select id='iBDAssocMapId'>
                  {foreach from=$datas.maps key=group item=mapGroup}
                    <optgroup label="{'gmaps_displayTypeShort'|cat:$group|@translate}">
                    {foreach from=$mapGroup item=map}
                      <option value='{$map.id}' dtype='{$group}'>{$map.name}</option>
                    {/foreach}
                    </optgroup>
                  {/foreach}
              </select>
            </td>
          </tr>

          <tr>
            <td>{'gmaps_category'|@translate}</td>
            <td>
              <div id='iBDAssocCatId'></div>
            </td>
          </tr>

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

        </table>
      </div>


      <div id='iTabIntegration' style='display:none;'>
        <table class='formtable'>

          <tr id='iBDAssocTitleRow'>
            <td>{'gmaps_map_title'|@translate}</td>
            <td>
              <input type="text" id='iBDAssocTitle' value='{$datas.title}' maxlength='200' size='55'>
            </td>
          </tr>

          <tr id='iBDAssocIconRow'>
            <td>{'gmaps_map_icon'|@translate}</td>
            <td>
              <div id='iBDAssocIcon'></div>
              <p id='iBDKmlIconWarning' class='helps' style="width:520px;padding-right:20px;">{'gmaps_icon_info'|@translate}</p>
            </td>
          </tr>


          <tr>
            <td>{'gmaps_map_marker'|@translate}</td>
            <td>
              <div id='iBDAssocMarker'></div>
            </td>
          </tr>


          <tr>
            <td>{'gmaps_map_associate_kmlfile'|@translate}</td>
            <td>
              <label><input type="radio" id='iBDAssocKmlNone' name="fBDAssocKmlFile" value="N">&nbsp;{'gmaps_kml_file_none'|@translate}</label><br>
              <label><input type="radio" id='iBDAssocKmlSelect' name="fBDAssocKmlFile" value="S">&nbsp;{'gmaps_kml_file_selected'|@translate}</label><br>
              <select style="margin-left:20px;margin-bottom:10px;"  id="iBDAssocKmlFileId">
                {foreach from=$datas.kmlFiles item=file}
                  <option value='{$file.id}'>{$file.name}</option>
                {/foreach}
              </select>

              <label><input type="radio" id='iBDAssocKmlUrl' name="fBDAssocKmlFile" value="U">&nbsp;{'gmaps_kml_file_url'|@translate}</label><br>
              <input style="margin-left:20px;" type="text" id="iBDAssocKmlFileUrl" maxlength='255' size='55' value=""><br>
              <p id='iBDKmlWarning' class='helps' style="width:520px;padding-right:20px;">{'gmaps_kml_file_access'|@translate}</p>

            </td>
          </tr>


        </table>
      </div>

    </div>

  </form>
</div>





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