{combine_script id="jquery.ui" path="themes/default/js/ui/jquery.ui.core.js" require='jquery'}
{combine_script id="jquery.ui.widget" path="themes/default/js/ui/jquery.ui.widget.js" require='jquery.ui'}
{combine_script id="jquery.ui.slider" path="themes/default/js/ui/jquery.ui.slider.js" require='jquery.ui.widget'}

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

  function setOptionCB(id)
  {
    if($('#'+id+'_cb').get(0).checked)
    {
      $('#'+id).val('yes');
    }
    else
    {
      $('#'+id).val('no');
    }
  }

</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>

    <br>
    <label>
      <input type="checkbox" id="iimageSimulateHighRes_cb" {if $options.imageSimulateHighRes=="yes"}checked{/if} onclick="setOptionCB('iimageSimulateHighRes');">&nbsp;{'gally_image_simulate_high_res'|@translate}
      <input type="hidden" name="f_imageSimulateHighRes" id="iimageSimulateHighRes" value="{$options.imageSimulateHighRes}">
    </label><br>

  </fieldset>


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

</form>

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