{**
  * 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/
  *}

<script type="text/javascript" xmlns="http://www.w3.org/1999/html">
	id_language = Number({$id_lang_default});
	var delete_message = "{l s='Do you really want to delete this hotspot?' mod='advancedhotspotslider'}";
	var delete_all_message = "{l s='Do you really want to delete all hotspots?' mod='advancedhotspotslider'}";
	var error_ajax_saving_message = "{l s='Error. Please  clear browser cash and refresh page.' mod='advancedhotspotslider'}";
	var error_url_message = "{l s='Please enter correct url' mod='advancedhotspotslider'}";
	var ajax_loading_message = "<img src='../img/admin/ajax-loader-yellow.gif' alt=''>&nbsp;&nbsp;" + "{l s='Please wait...' mod='advancedhotspotslider'}";
	var ajax_changes_ok_message = "<img src='../img/admin/ajax-loader-yellow.gif' alt=''>&nbsp;&nbsp;" + "{l s='Changes have been saved' mod='advancedhotspotslider'}";

	{literal}
	$(function () {
		admin_hot_spots.init({spots: {/literal}{$spots|json_encode}{literal}});
		$('#spot_border_radius_slider').slider({
			min: 0,
			max: 200,
			animate: "fast",

			slide: function (event, ui) {
				var jObj = $(this);
				var radius = jObj.slider('value');
				$('#spot_border_radius').val(radius);
				$('.spot_item_active').css('border-radius', radius);
			},

			stop: function (event, ui) {
				var jObj = $(this);
				var radius = jObj.slider('value');
				$('#spot_border_radius').val(radius);
				$('.spot_item_active').css('border-radius', radius);
				admin_hot_spots.setSpotUrl();
			},

			start: function (event, ui) {
				var jObj = $(this);
				$('#spot_border_radius').val(jObj.slider('value'));
			}
		});
	});

	{/literal}

</script>

<style type="text/css">
	{foreach from=$languages item=language}
	{literal}
	#spot_container_{/literal}{$language.id_lang}{literal} {
		position: relative;
		overflow: hidden;
		width: {/literal}{Configuration::get("O35AHS_WIDTH")}{literal}px;
		height: {/literal}{Configuration::get("O35AHS_HEIGHT")}{literal}px;
		background: url('{/literal}{$base_slider_url}views/img/slides/{$slide->image[$language.id_lang]}{literal}') no-repeat center;
		border: 1px solid silver;
		padding: 0;
		{/literal}
		{if $language.id_lang != $id_lang_default}
			display: none;
		{/if}
		{literal}
	}
	{/literal}
	{/foreach}

	{literal}

	.spot_item {
		background-position: top left;
		background: url('{/literal}{$base_slider_url}views/img/admin/spot_background.png{literal}') 0 0 !important;
		padding: 0;
	}

	{/literal}
</style>

<fieldset class="width-hot-spot-fieldset">
	<legend>
		<img src="{$base_slider_url}logo.gif"/>
		{l s='Manage Slide\'s Hotspots' mod='advancedhotspotslider'}
	</legend>
{*<div class="notes-container">*}
	{*<div class="module_confirmation conf confirm" id="message_saved">*}
		{*Changes have been saved*}
	{*</div>*}
{*</div>*}
	<div class="slide-hotspot-controls">
		<a href="#" onclick="return false;" id="spot_add_rectangle" class="button">
			{l s='Add New Hotspot' mod='advancedhotspotslider'} </a>
		&nbsp;
		<a href="#" onclick="return false;" class="button" id="spot_delete">
			{l s='Delete Active Hotspot' mod='advancedhotspotslider'}
		</a>
		&nbsp;
		<a href="#" onclick="return false;" class="button" id="spot_clear">
			{l s='Delete All Hotspots' mod='advancedhotspotslider'}
		</a>
	</div>
{foreach from=$languages item='language'}
<div id="spot_container_{$language.id_lang}">
</div>
{/foreach}
{$imageFlags}
<br />

<form action="{$full_module_admin_url}" id="spots_form" method="post">
	<input type="hidden" name="actionDone" value="hotSpotsSaved" />

	<div class="slide-hotspot-inputs">
		<p><strong>{l s='Active Hotspot Settings' mod='advancedhotspotslider'}</strong></p>

		<label for="spot_border_radius"
			   style="position: absolute; margin-left: 0; width: 100px;">{l s='Shape Radius' mod='advancedhotspotslider'}:</label>

		<div id="spot_border_radius_slider" style="margin-left: 113px; margin-top: 8px; "> &nbsp;
		</div>
		<div style="margin-left: 420px; margin-top: -15px;">
			<input type="text" disabled="disabled" name="spot_border_radius" id="spot_border_radius"
				   style="width: 20px;margin-top: -5px; margin-right: 2px;"/>px
		</div>

		<div style="margin-left: 470px; margin-top: -15px; "><i>{l s='Use the scroll bar to change the radius' mod='advancedhotspotslider'}</i></div>
		<p></p>

		<label for="spot_shade_on" style="width: 100px; position: absolute; ">{l s='Shading Effect' mod='advancedhotspotslider'}:</label>
		<img src="{$base_slider_url}views/img/admin/enabled.gif" alt="Enabled" title="Enabled" style="margin-left: 110px;"/>
		<input type="radio" name="spot_shade" id="spot_shade_on" value="1" />
		<label class="t" for="spot_shade_on">{l s='Enable' mod='advancedhotspotslider'}</label>
		<img src="{$base_slider_url}views/img/admin/disabled.gif" alt="Disabled" title="Disabled"/>
		<input type="radio" name="spot_shade" id="spot_shade_off"
			   value="0"/>
		<label class="t" for="spot_shade_off">{l s='Disable' mod='advancedhotspotslider'}</label>
		<p></p>

		<label for="spot_url" style="margin-left: 70px;">{l s='Link' mod='advancedhotspotslider'}:</label>&nbsp;<input type="text" name="spot_url" id="spot_url" value="" /> &nbsp;<i>{l s='Example' mod='advancedhotspotslider'}: http://orange35.com</i>
		<ul id="spot_url_errors"></ul>
		<p></p>

		<label for="spot_target_self" style="margin-left: 17px;">{l s='Open Link In' mod='advancedhotspotslider'}:</label>
		&nbsp;
		<input type="radio" name="spot_target" id="spot_target_self" value="_self" style="margin-left: -7px;"/>
		<label class="t" for="spot_target_self">{l s='Same Window' mod='advancedhotspotslider'}</label>
		<input type="radio" name="spot_target" id="spot_target_blank"
			   value="_blank"/>
		<label class="t" for="spot_target_blank">{l s='New Window' mod='advancedhotspotslider'}</label>

		<p></p>
		<label for="spot_description"
			   style="position: absolute; margin-left: 0; width: 100px;">{l s='Description' mod='advancedhotspotslider'}:</label>
		<textarea name="spot_description" id="spot_description" style="margin-left: 111px;"></textarea>
		<p style="position: absolute; margin-left: 470px; margin-top: -33px;"><i>HTML allowed</i></p>
		<p></p>

		<label for="spot_button_title" style="margin-left: 15px;">{l s='Button Name' mod='advancedhotspotslider'}:</label>&nbsp;
		<input type="text" name="spot_button_title" id="spot_button_title" style="margin-left: -3px;" value="" />

	</div>

	<div class="slide-hotspot-submits">
		<a href="#" onclick="return false;" class="button" id="btnSubmit">
			{l s='Save' mod='advancedhotspotslider'}
		</a>
		&nbsp;
		<a href="#" onclick="return false;" class="button" id="btnSubmitStay">
			{l s='Save and Stay Here' mod='advancedhotspotslider'}
		</a>
		&nbsp;
		<a href="#" onclick="window.location='{$full_module_admin_url}'" class="button" id="btnCancel">
			{l s='Cancel and Go Back' mod='advancedhotspotslider'}
		</a>
	</div>
</form>

</fieldset>