{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"}

{literal}
<style>
 .ui-slider {
    width:360px;
    height:10px;
    border-width:1px;
    border-style:solid;
    margin-right:5px;
    padding-right:14px;
  }
 .ui-slider-handle {
    width:12px;
    height:12px;
    position:relative;
    top:-2px;
    border-width:1px;
    border-style:solid;
    display:block;
  }
</style>
<script type="text/javascript">

  function init()
  {
    formatDelay({/literal}{$options.interfaceTimerDelay}{literal});
    $("#iitd_slider").slider(
      {
        min:1000,
        max:10000,
        step:250,
        value:{/literal}{$options.interfaceTimerDelay}{literal},
        slide: function(event, ui) { formatDelay(ui.value); }
      });
    $("#iitd_slider a").addClass('gcBgInput');
  }

  function formatDelay(delay)
  {
    $("#iinterfaceTimerDelay").val(delay);
    $("#iitd_display").html((delay/1000).toFixed(2)+"s");
  }

  function switchVisibility(item, visible)
  {
    if(visible=="yes")
    {
      $('#'+item).css("display", "block");
    }
    else
    {
      $('#'+item).css("display", "none");
    }
  }
</script>
{/literal}


<p>{'gally_img_interface_desc'|@translate}</p>
<br>

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

  <fieldset>
    <legend>{'gally_image_interface_can_switch'|@translate}</legend>

    <p class="leftAlign">{'gally_image_interface_can_switch_desc'|@translate}</p>

    <label><input type="radio" name="f_interfaceCanSwitch" id="iinterfaceCanSwitch" value="yes" onclick="switchVisibility('interfaceCanSwitchOptions', 'yes');" {if $options.interfaceCanSwitch=="yes"}checked{/if}>&nbsp;{'gally_image_interface_can_switch_yes'|@translate}</label><br>
    <label><input type="radio" name="f_interfaceCanSwitch" id="iinterfaceCanSwitch" value="no" onclick="switchVisibility('interfaceCanSwitchOptions', 'no');" {if $options.interfaceCanSwitch=="no"}checked{/if}>&nbsp;{'gally_image_interface_can_switch_no'|@translate}</label><br>
  </fieldset>

  <div id="interfaceCanSwitchOptions"  {if $options.interfaceCanSwitch=="no"}style="display:none;"{/if}>
    <fieldset>
      <legend>{'gally_image_interface_hidden'|@translate}</legend>

      <p class="leftAlign">{'gally_image_interface_hidden_desc'|@translate}</p>

      <label><input type="radio" name="f_interfaceHidden" id="iinterfaceHidden" value="yes" {if $options.interfaceHidden=="yes"}checked{/if}>&nbsp;{'gally_image_interface_hidden_yes'|@translate}</label><br>
      <label><input type="radio" name="f_interfaceHidden" id="iinterfaceHidden" value="no" {if $options.interfaceHidden=="no"}checked{/if}>&nbsp;{'gally_image_interface_hidden_no'|@translate}</label><br>
    </fieldset>

    <fieldset>
      <legend>{'gally_interface_on_image'|@translate}</legend>

      <p class="leftAlign">{'gally_interface_on_image_desc'|@translate}</p>

      <label><input type="radio" name="f_interfaceOnImage" id="iinterfaceOnImage" value="always" {if $options.interfaceOnImage=="always"}checked{/if}>&nbsp;{'gally_interface_on_image_always'|@translate}</label><br>
      <label><input type="radio" name="f_interfaceOnImage" id="iinterfaceOnImage" value="noscroll" {if $options.interfaceOnImage=="noscroll"}checked{/if}>&nbsp;{'gally_interface_on_image_noscroll'|@translate}</label><br>
      <label><input type="radio" name="f_interfaceOnImage" id="iinterfaceOnImage" value="never" {if $options.interfaceOnImage=="never"}checked{/if}>&nbsp;{'gally_interface_on_image_never'|@translate}</label>
    </fieldset>

    <fieldset>
      <legend>{'gally_interface_timer_delay'|@translate}</legend>

      <p class="leftAlign">{'gally_interface_timer_delay_desc'|@translate}</p>

      <input type="hidden" name="f_interfaceTimerDelay" id="iinterfaceTimerDelay" value="{$options.interfaceTimerDelay}">
      <table style="margin-left:0px;">
        <tr>
          <td><div id="iitd_slider" class="gcBgInput gcBorderInput"></div></td>
          <td><div id="iitd_display"></div></td>
        </tr>
      </table>

    </fieldset>
  </div>

  <input type="submit" value="{'Submit'|@translate}" name="submit_gally">

</form>

<script type="text/javascript">
  init();
</script>