{combine_script id='jquery.chosen' load='footer' path='themes/default/js/plugins/chosen.jquery.min.js'}
{combine_css path="themes/default/js/plugins/chosen.css"}

{footer_script}{literal}
jQuery(document).ready(function() {
  jQuery(".chzn-select").chosen();

  function checkStatusOptions() {
    if (jQuery("input[name=apply_to_albums]:checked").val() == "list") {
      jQuery("#albumList").show();
    }
    else {
      jQuery("#albumList").hide();
    }
  }

  checkStatusOptions();

  jQuery("input[name=apply_to_albums]").change(function() {
    checkStatusOptions();
  });
});
{/literal}{/footer_script}

<div class="titrePage">
<h2>Menu Random Photo</h2>
</div>

<form action="" method="post" class="properties">

<fieldset>
<legend>{'Menu integration'|translate}</legend>
<ul>
  <li>
    <label for="title">
      <b>{'Block title'|translate}</b> 
    </label>
    <input type="text" name="title" id="title" value="{$MRP.title}" size="50">
  </li>
  <li>
    <label for="height">
      <b>{'Height of menu block'|translate}</b> 
    </label>
    <input type="number" size="2" maxlength="3" name="height" id="height" value="{$MRP.height}" min="100" max="300" style="width: 50px;">&nbsp;px
  </li>
  <li>
    <input type="checkbox" id="square" name="square"{if $MRP.square} checked="checked"{/if}>
    <label for="square">
      <b>{'Use square'|translate}</b>
    </label>
  </li>
</ul>
</fieldset>

<fieldset>
<legend>{'Periodic change of the image'|translate}</legend>
<ul>
  <li>
    <label for="delay">
      <b>{'Delay'|translate}</b> 
    </label>
    <input type="number" size="2" maxlength="4" name="delay" id="delay" value="{$MRP.delay/1000}" min="1" style="width: 60px;">&nbsp;{'seconds'|translate}
  </li>
</ul>
</fieldset>

<fieldset>
  <legend>{'Which albums to use'|translate}</legend>
  <p>
    <label><input type="radio" name="apply_to_albums" value="all"{if $MRP.apply_to_albums eq 'all'} checked="checked"{/if}> <strong>{'all albums'|translate}</strong></label>
    <label><input type="radio" name="apply_to_albums" value="list"{if $MRP.apply_to_albums eq 'list'} checked="checked"{/if}> <strong>{'a list of albums'|translate}</strong></label>
  </p>
  <p id="albumList">
    <select data-placeholder="{'Select albums...'|translate}" class="chzn-select" multiple style="width:700px;" name="albums[]">
      {html_options options=$album_options selected=$album_options_selected}
    </select>
    <br>
    {'Note: Only the selected albums/categories will be shown. Sub-categories must be selected if they are to be used!'|translate}
  </p>
</fieldset>

<p class="formButtons">
  <input type="hidden" name="pwg_token" value="{$PWG_TOKEN}">
  <input type="submit" name="submit" value="{'Save Settings'|translate}">
</p>
</form>