{combine_script id="jquery.ui" path="themes/default/js/ui/minified/jquery.ui.core.min.js" require='jquery'}
{combine_script id="jquery.ui.dialog" path="themes/default/js/ui/minified/jquery.ui.dialog.min.js" require='jquery'}
{combine_script id="gpc.categorySelector" path="plugins/GrumPluginClasses/js/ui.categorySelector.min.js" require='jquery'}


{literal}
<style type='text/css'>
#iASECategoryCategory {
  width:500px;
}
</style>

<script type="text/javascript">
/**
 * include this template in a page and use dialogChooseASECategoryBox.show({options}) to display
 * the dialog box
 *
 */
dialogChooseASECategoryBox = function()
{
  var dialogOptions = {
      id:'',
      eventOk:null,
      cBuilder:null,

      values: {
        subCat:'=',
        catIdList:new Array()
      },
    };

  /**
   * initialize the dialog box
   */
  var initDialogBox = function()
  {
    $("#iDialogASECategoryChoose")
    .dialog(
      {
        autoOpen: false,
        resizable: false,
        width:765,
        height:200,
        modal: true,
        draggable:true,
        dialogClass: 'gcBgTabSheet gcBorder',
        title: '{/literal}{"ase_choose_categories"|@translate}{literal}',
        open: function(event, ui)
        {
        },
        buttons:
        {
          '{/literal}{"ase_ok"|@translate}{literal}':
            function()
            {
              if(checkValidity())
              {
                dialogOptions.values.catIdList=$('#iASECategoryCategory').categorySelector('value');
                dialogOptions.values.subCat=$('#iASECategorySubCat').val();


                if(dialogOptions.cBuilder!=null)
                {
                  setCBuilderItem(dialogOptions.id, dialogOptions.values);
                }

                if(dialogOptions.eventOk!=null)
                {
                  dialogOptions.eventOk(dialogOptions.id, dialogOptions.values);
                }
                $(this).dialog('close');
              }
            },
          '{/literal}{"ase_cancel"|@translate}{literal}':
            function()
            {
              $(this).dialog('close');
            }
        }
      }
    )
    .parent().css('overflow', 'visible');




    $('#iASECategoryCategory').categorySelector(
      {
        multiple:true,
        listMaxWidth:1,
        listMaxHeight:350,
        displayStatus:{/literal}{if is_admin()}true{else}false{/if}{literal},
        levelIndent:20,
        userMode:{/literal}{if is_admin()}'admin'{else}'public'{/if}{literal},
        galleryRoot:false,
        load: function (event) { $(this).categorySelector('collapse', ':all'); }
      }
    );

  }


  /**
   * check the validity of the condition
   * return Boolean : true if OK, otherwise false
   */
  var checkValidity = function ()
  {

    if($('#iASECategoryCategory').categorySelector('value') .length==0)
    {
      alert('ase_one_category_must_be_selected');
      return(false);
    }
    return(true);
  }


  /**
   * the show() function display and manage a dialog box to choose categories
   * and the kind of test to apply
   *
   * @param options : properties to manage the dialog box
   *                  - id : a string to identify a DOM object ; this parameter
   *                         is given to the callback when the OK button is pushed
   *                  - values : an object with 2 properties
   *                               - subCat : true or false, search in subcategories
   *                               - catIdList : an array of categories Id
   *                  - eventOK : a callback function, with 2 parameters : id of
   *                              the given DOM object and values parameted
   *                  - cBuilder : a criteriaBuilder object
   *                               if set, the dialog box manage automaticaly
   *                               the criteria builder interface
   */
  this.show = function (options)
  {
    showDialog(options);
  }

  /**
   * private function used to show the dialog box
   */
  var showDialog = function(options)
  {
    if(options.id!=null)
    {
      dialogOptions.id=options.id;
    }
    else
    {
      dialogOptions.id='';
    }

    if(options.eventOk!=null)
    {
      dialogOptions.eventOk=options.eventOk;
    }

    if(options.cBuilder!=null)
    {
      dialogOptions.cBuilder=options.cBuilder;
      dialogOptions.cBuilder.doAction('setOptions',
        {
          onEdit:function (e) { editCB(e.data); },
          onDelete:function (e) { deleteCB(e.data); },
        }
      );
    }

    if(options.values!=null)
    {
      dialogOptions.values=jQuery.extend(dialogOptions.values, options.values);
    }
    else
    {
      dialogOptions.values.subCat='y';
      dialogOptions.values.catIdList=0;
    }
    $('#iASECategorySubCat').val(dialogOptions.values.subCat);
    $('#iASECategoryCategory').categorySelector('value', ':none');
    $('#iASECategoryCategory').categorySelector('value', dialogOptions.values.catIdList);
    $('#iASECategoryCategory').categorySelector('collapse', ':all');
    for(var i=0;i<dialogOptions.values.catIdList.length;i++)
    {
      $('#iASECategoryCategory').categorySelector('expand', dialogOptions.values.catIdList[i]+'<');
    }


    $("#iDialogASECategoryChoose").dialog('open');
  }



  /**
   * manage the 'edit' button from criteria builder interface
   * @param String itemId : the itemId
   */
  var editCB = function (itemId)
  {
    extraData=dialogOptions.cBuilder.doAction('getExtraData', itemId);
    showDialog(
      {
        id:itemId,
        values:
          {
            subCat:extraData.param.subCat,
            catIdList:extraData.param.catIdList,
          },
      }
    );
  }

  /**
   * manage the 'delete' button from criteria builder interface
   * @param String itemId : the itemId
   */
  var deleteCB = function (itemId)
  {
    dialogOptions.cBuilder.doAction('delete', itemId);
  }

  /**
   * set the content for the cBuilder item
   */
  var setCBuilderItem = function(id)
  {
    var content="<div>",
        list=$('#iASECategoryCategory').categorySelector('name');

    if(dialogOptions.values.catIdList.length==1)
    {
      content+="{/literal}{'ase_category'|@translate}{literal}";
    }
    else
    {
      content+="{/literal}{'ase_categories'|@translate}{literal}";
    }

    if(dialogOptions.values.subCat=='y')
    {
      content+="&nbsp;({/literal}{'ase_with_search_in_subcat'|@translate}{literal})";
    }
    content+="&nbsp:";


    content+="<div style='font-style:italic;padding-left:15px;'>"
    for(i=0;i<list.length;i++)
    {
      content+=list[i]+"<br>";
    }

    content+="</div></div>";


    if(id=='')
    {
      //no id:add a new item in the list
      dialogOptions.cBuilder.doAction(
        'add',
        content,
        criteriaBuilder.makeExtendedData(
          'ASECategory',
          {
            subCat:dialogOptions.values.subCat,
            catIdList:dialogOptions.values.catIdList
          }
        )
      );
    }
    else
    {
      // update item
      dialogOptions.cBuilder.doAction(
        'edit',
        id,
        content,
        criteriaBuilder.makeExtendedData(
          'ASECategory',
          {
            subCat:dialogOptions.values.subCat,
            catIdList:dialogOptions.values.catIdList
          }
        )
      );
    }
  }

  initDialogBox();
}


</script>
{/literal}

<div id="iDialogASECategoryChoose" style='display:none;'>

  <table class="formtable">
    <tr>
      <td>{'ase_categories'|@translate}</td>
      <td>
        <div id='iASECategoryCategory'></div>
      </td>
    </tr>

    <tr>
      <td>{'ase_searching_in_subcat'|@translate}</td>
      <td>
        <select id='iASECategorySubCat'>
          <option value='y'>{'ase_y'|@translate}</option>
          <option value='n'>{'ase_n'|@translate}</option>
        </select>
      </td>
    </tr>
  </table>

</div>