{**
  * 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='Manage Slides' mod='advancedhotspotslider'}
	</legend>
	<p>&nbsp;</p>
	<strong>
		<a href="{$full_module_admin_url}&action=addSlide">
			<img src="{$base_url}img/admin/add.gif" alt=""/> {l s='Add New Slide' mod='advancedhotspotslider'}
		</a>
	</strong>
	<i> | {l s='Drag and drop slides to reorder them' mod='advancedhotspotslider'}</i>
	<p>&nbsp;</p>
	<ul id="slides" style="width: 500px;">
	{foreach from=$slides item=slide}
	   <li id="slides_{$slide.id_slide}">
		   <div style="float:left; width: 140px; height: 60px;">
			   <img src="{$base_slider_url}views/img/slides/{$slide.image}" height="100%"  />
		   </div>
		   <div style="float: left; margin-top: 10px;">
			   <strong>{$slide.title|strip_tags|truncate:30|htmlspecialchars}</strong><br />
			   {$slide.url|strip_tags|truncate:30|htmlspecialchars}
		   </div>
		   <div style="float:right; margin-top: 10px;">
			   <a href="#" onclick="return false;" title="{if $slide.active}Enabled{else}Disabled{/if}" class="availableLink" data-slide-id="{$slide.id_slide}" onclick="return false;"><img src="{$base_url}img/admin/{if $slide.active}enabled.gif{else}disabled.gif{/if}" /></a>
			   <a href="{$full_module_admin_url}&action=editSlide&id_slide={$slide.id_slide}" class="editLink"><img src="{$base_url}img/admin/edit.gif" title="{l s='Edit' mod='advancedhotspotslider'}"/></a>
			   <a href="{$full_module_admin_url}&action=manageHotSpots&id_slide={$slide.id_slide}" class="editLink"><img src="{$base_slider_url}views/img/admin/link-hs.png" title="{l s='Manage Hotspots' mod='advancedhotspotslider'}"/></a>
			   <a href="{$full_module_admin_url}&action=deleteSlide&id_slide={$slide.id_slide}" class="deleteLink"><img src="{$base_url}img/admin/delete.gif" title="{l s='Delete' mod='advancedhotspotslider'}"/></a>
		   </div>
		   <div style="clear: both;"></div>
	   </li>
	{foreachelse}
		<li>You haven't added any slide yet.</li>
	{/foreach}
	</ul>
</fieldset>

<script type="text/javascript">
	{literal}
	$(function () {
		var $mySlides = $("#slides");
		$mySlides.sortable({
			opacity: 0.6,
			cursor: "move",
			update: function () {
				var order = $(this).sortable("serialize") + "&action=updateSlidesPosition";
				$.post("{/literal}{$slides_ajax_processing_url}{literal}", order);
			}
		});

		$mySlides.hover(function () {
					$(this).css("cursor", "move");
				},
				function () {
					$(this).css("cursor", "auto");
				});

		$('.availableLink').click(function(){
			var jDiv = $(this);
			$.ajax({
				type: "POST",
				url: "{/literal}{$slides_ajax_processing_url}{literal}",
				data: {id: $(this).data('slide-id'), action: 'changeStatus'},
				dataType: 'json',
				success: function(data){
					if ('ok' == data.status) {
						if ('1' == data.active) {
							jDiv.find('img:first').attr('src', '{/literal}{$base_url}{literal}img/admin/enabled.gif');
							jDiv.find('img:first').attr('title', 'Enabled');
						} else {
							jDiv.find('img:first').attr('src', '{/literal}{$base_url}{literal}img/admin/disabled.gif');
							jDiv.find('img:first').attr('title', 'Disabled');
						}
					}
				}
			});
			return false;
		});
	});
	{/literal}
</script>