{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:74px;
  }
 .ui-slider-handle {
    width:72px;
    height:12px;
    position:relative;
    top:-2px;
    border-width:1px;
    border-style:solid;
    display:block;
  }
</style>
<script type="text/javascript">

  function init()
  {
    formatNum({/literal}{$options.metaNumCols}{literal});
    $("#imnc_slider").slider(
      {
        min:1,
        max:5,
        step:1,
        value:{/literal}{$options.metaNumCols}{literal},
        slide: function(event, ui) { formatNum(ui.value); }
      }
    );
    $("#imnc_slider a").addClass('gcBgInput');
  }

  function formatNum(numCols)
  {
    $("#imetaNumCols").val(numCols);
    $("#imnc_display").html("{/literal}{'gally_columns'|@translate}{literal} : "+numCols);
  }

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

</script>
{/literal}


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

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

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

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

    <label><input onclick="switchVisibility('idisplayBannerAlternate', 'no');" type="radio" name="f_displayBanner" id="idisplayBanner" value="yes" {if $options.displayBanner=="yes"}checked{/if}>&nbsp;{'gally_display_banner_yes'|@translate}</label><br>
    <label><input onclick="switchVisibility('idisplayBannerAlternate', 'no');" type="radio" name="f_displayBanner" id="idisplayBanner" value="no" {if $options.displayBanner=="no"}checked{/if}>&nbsp;{'gally_display_banner_no'|@translate}</label><br>
    <label><input onclick="switchVisibility('idisplayBannerAlternate', 'yes');" type="radio" name="f_displayBanner" id="idisplayBanner" value="alternate" {if $options.displayBanner=="alternate"}checked{/if}>&nbsp;{'gally_display_banner_alternate'|@translate}</label><br>
    <div id="idisplayBannerAlternate" style="margin-left:30px;{if $options.displayBanner!="alternate"}display:none;{/if}">
      <label>{'gally_alternate_banner_content'|@translate}<br>
        <textarea id="ialternateBannerContent" name="f_alternateBannerContent" cols="80" rows="7">{$options.alternateBannerContent}</textarea>
      </label>
    </div>
  </fieldset>


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

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

    <input type="hidden" name="f_metaNumCols" id="imetaNumCols" value="{$options.metaNumCols}">
    <table style="margin-left:0px;">
      <tr>
        <td><div id="imnc_slider" class="gcBgInput gcBorderInput"></div></td>
        <td><div id="imnc_display"></div></td>
      </tr>
    </table>
  </fieldset>


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

    <p class="leftAlign">
      {'gally_image_auto_scroll_desc'|@translate}<br>
      <span style="font-style:italic;margin-left:20px;">!!!&nbsp;{'gally_image_auto_scroll_warning'|@translate}&nbsp;!!!</span>
    </p>


    <label><input type="radio" name="f_imageAutoScroll" id="iimageAutoScroll" value="yes" {if $options.imageAutoScroll=="yes"}checked{/if}>&nbsp;{'gally_image_auto_scroll_yes'|@translate}</label><br>
    <label><input type="radio" name="f_imageAutoScroll" id="iimageAutoScroll" value="no" {if $options.imageAutoScroll=="no"}checked{/if}>&nbsp;{'gally_image_auto_scroll_no'|@translate}</label><br>
  </fieldset>


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

</form>

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