{**
  * TERM OF USE "Paginated Featured Products" is licensed under Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License
  *
  * @author    Orange35 <info@orange35.com>
  * @copyright 2007-2015 Orange35
  *  @license   http://creativecommons.org/licenses/by-nc-sa/3.0/
  *}

<fieldset>
	<legend>
		<img src="{$base_slider_url}logo.gif" />{l s='General Settings' mod='advancedhotspotslider'}
	</legend>
	<form action="{$action}" method="post">
		<input type="hidden" name="actionDone" value="saveConfiguration"/>
		<div class="left-configuration">
			<label for="width">{l s='Width' mod='advancedhotspotslider'}</label>

			<div class="margin-form">
				<input type="text" name="width" id="width" size="3" value="{$width}"/> px
				<p class="clear"><i>{l s='Default: 535 px' mod='advancedhotspotslider'}</i></p>
			</div>

			<label for="height">{l s='Height' mod='advancedhotspotslider'}</label>

			<div class="margin-form">
				<input type="text" name="height" id="height" size="3" value="{$height}"/> px
				<p class="clear"><i>{l s='Default: 300 px' mod='advancedhotspotslider'}</i></p>
			</div>


			<label>{l s='Transition Effect' mod='advancedhotspotslider'}</label>

			<div class="margin-form">
				<input type="radio" name="mode" value="fade" id="mode_fade"
					   {if 'fade' == $mode}checked="checked"{/if} />
				<label for="mode_fade" class="t">Fade</label>
				<input type="radio" name="mode" value="horizontal" id="mode_horizontal"
					   {if 'horizontal' == $mode}checked="checked"{/if} /> <label for="mode_horizontal"
																				  class="t">{l s='Horizontal Scroll' mod='advancedhotspotslider'}</label>
				<input type="radio" name="mode" value="vertical" id="mode_vertical"
					   {if 'vertical' == $mode}checked="checked"{/if} /> <label for="mode_vertical"
																				class="t">{l s='Vertical Scroll' mod='advancedhotspotslider'}</label>

				<p class="clear"></p>
			</div>


			<label for="speed">{l s='Transition Speed' mod='advancedhotspotslider'}</label>

			<div class="margin-form">
				<input type="text" name="speed" id="speed" size="3" value="{$speed}"/> ms
				<p class="clear"><i>{l s='Default: 500 ms' mod='advancedhotspotslider'}</i></p>
			</div>

			<label for="pause">{l s='Transition Pause' mod='advancedhotspotslider'}</label>

			<div class="margin-form">
				<input type="text" name="pause" id="pause" size="3" value="{$pause}"/> ms
				<p class="clear"><i>{l s='Default: 6000 ms' mod='advancedhotspotslider'}</i></p>
			</div>
		</div>
		<div class="right-configuration">

			<label for="auto_on">{l s='Automatic Transition' mod='advancedhotspotslider'} </label>

			<div class="margin-form">
				<img src="{$base_slider_url}views/img/admin/enabled.gif" alt="Enabled" title="Enabled"/>
				<input type="radio" name="auto" id="auto_on" {if 1 == $auto}checked="checked"{/if} value="1"/>
				<label class="t" for="auto_on">{l s='Enabled' mod='advancedhotspotslider'}</label>
				<img src="{$base_slider_url}views/img/admin/disabled.gif" alt="Disabled" title="Disabled"
					 style="margin-left: 10px;"/>
				<input type="radio" name="auto" id="auto_off" {if 0 == $auto}checked="checked"{/if} value="0"/>
				<label class="t" for="auto_off">{l s='Disabled' mod='advancedhotspotslider'}</label>

				<p class="clear"></p>
			</div>


			<label for="loop_on">{l s='Infinite Loop' mod='advancedhotspotslider'} </label>

			<div class="margin-form">
				<img src="{$base_slider_url}views/img/admin/enabled.gif" alt="Enabled" title="Enabled"/>
				<input type="radio" name="loop" id="loop_on" {if 1 == $loop}checked="checked"{/if} value="1"/>
				<label class="t" for="loop_on">{l s='Enabled' mod='advancedhotspotslider'}</label>
				<img src="{$base_slider_url}views/img/admin/disabled.gif" alt="Disabled" title="Disabled" style="margin-left: 10px;"/>
				<input type="radio" name="loop" id="loop_off" {if 0 == $loop}checked="checked"{/if} value="0"/>
				<label class="t" for="loop_off">{l s='Disabled' mod='advancedhotspotslider'}</label>

				<p class="clear"></p>
			</div>

			<label for="pager_on">{l s='Slider Pagination' mod='advancedhotspotslider'}</label>

			<div class="margin-form">
				<img src="{$base_slider_url}views/img/admin/enabled.gif" alt="Enabled" title="Enabled"/>
				<input type="radio" name="pager" id="pager_on" {if 1 == $pager}checked="checked"{/if} value="1"/>
				<label class="t" for="pager_on">{l s='Enabled' mod='advancedhotspotslider'}</label>
				<img src="{$base_slider_url}views/img/admin/disabled.gif" alt="Disabled" title="Disabled" style="margin-left: 10px;"/>
				<input type="radio" name="pager" id="pager_off" {if 0 == $pager}checked="checked"{/if} value="0"/>
				<label class="t" for="pager_off">{l s='Disabled' mod='advancedhotspotslider'}</label>

				<p class="clear" style="margin-top: 5px; position: absolute;"></p>
			</div>


			<label for="pager_on">{l s='Navigation Arrows' mod='advancedhotspotslider'}</label>

			<div class="margin-form">
				<img src="{$base_slider_url}views/img/admin/enabled.gif" alt="Enabled" title="Enabled"/>
				<input type="radio" name="navigation" id="navigation_on" {if 1 == $navigation}checked="checked"{/if} value="1"/>
				<label class="t" for="navigation_on">{l s='Enabled' mod='advancedhotspotslider'}</label>
				<img src="{$base_slider_url}views/img/admin/disabled.gif" alt="Disabled" title="Disabled"
					 style="margin-left: 10px;"/>
				<input type="radio" name="navigation" id="navigation_off" {if 0 == $navigation}checked="checked"{/if} value="0"/>
				<label class="t" for="navigation_off">{l s='Disabled' mod='advancedhotspotslider'}</label>

				<p class="clear" style="margin-top: 5px; position: absolute;"></p>
			</div>

		</div>
		<div style="clear: both">

		</div>





		<div class="margin-form">
			<input type="submit" class="button" name="submitSliderConfiguration" value="{l s='Save' mod='advancedhotspotslider'}"
					style="margin-top: 10px;"
					/>
		</div>
	</form>
</fieldset>