<div id="tooltip" onclick="hideToolTip()" style="text-align:center; background-color: #FFFFFF; border: 1px dotted; text-align: {$default_left}; position:absolute; display:none; padding:5px;"></div>
{literal}
<script type="text/javascript">
$(function() {
$('#tool_tip_4 *').tooltip();
});
</script>
{/literal}

<table border="0" cellspacing="0" cellpadding="0" width="100%">
	<tr class="table_header">
		{*<td align="center" width="5%" >{$lang.success.number}</td>*}
		<td align="left" width="10%" >{$lang.success.image}</td>
		<td align="left" width="15%" >{$lang.success.story_title}</td>
		<td align="left" width="10%" >{$lang.success.couple_name}</td>
		<td align="left" width="40%" >{$lang.success.description}</td>
		<td align="left" width="10%" >{$lang.success.date}</td>
		<td align="right" width="10%" >{$lang.button.action}</td>
	</tr>
{if $story}
	{section name=s loop=$story}
	<tr {if $smarty.section.s.index mod 2 eq 1}class="table_row even"{else}class="table_row odd"{/if}>
		{*<td align="center">{$story[s].number}</td>*}
		<td align="left" style="padding:4px;">{$story[s].image_path}</td>
		<td align="left" valign="top" style="padding:4px;">{$story[s].story_title}</td>
		<td align="left" valign="top" style="padding:4px;">{$story[s].couple_name}</td>
		<td align="left" valign="top" style="padding:4px;">{$story[s].description}</td>
		<td align="left" valign="top" style="padding:4px;">{$story[s].story_date}</td>
		<td align="right" valign="top" style="padding:4px;">
			<div class="block_action fr" style="display: none;">
				<div class="action_del" style="display: block;">
					<img width="16" alt="" src="{$site_root}{$template_root}/images/photo_delete.png" onmouseout="javascript:hideToolTip();" onmouseover="javascript: showToolTip(event,'{$lang.button.delete}');return false" onclick="ShowBlock('show_block','{$story[s].delete_link}')">
				</div>
			</div>			
			<div style="width:10px;float:right;" class="fl">&nbsp;</div>
			<div class="block_action fr" style="display: none;">
				<div class="action_del" style="display: block;">
					<img width="16" alt="" src="{$site_root}{$template_root}/images/edit.png" onmouseout="javascript:hideToolTip();" onmouseover="javascript: showToolTip(event,'{$lang.button.edit}');return false" onclick="ShowBlock('show_block','{$story[s].edit_link}')">
				</div>
			</div>										
		</td>
	</tr>
	{/section}
{elseif $empty_row eq 1}
	<tr height="40">
		<td class="main_error_text" align="left" colspan="6">{$lang.success.empty}</td>
	</tr>
{/if}
	<tr class="table_header">
		<td colspan="6">
			&nbsp;&nbsp;
			{if $links}
			{foreach item=item from=$links.pages}
				&nbsp;<a onclick="ShowBlock('show_block', '{$item.link}');" class="page_link" {if $item.selected} style=" font-weight: bold; text-decoration: none;" {/if}>{$item.name}</a>&nbsp;
			{/foreach}
			{/if}
			<div class="page_navigation">
			{if $links.previous}
				<a onclick="ShowBlock('show_block', '{$links.previous}');">< {$lang.content.previous} {$per_page}</a>
			{/if}
			{if $links.next}
				<a onclick="ShowBlock('show_block', '{$links.next}');">{$lang.content.next} {$per_page} ></a>
			{/if}
			</div>
		</td>
	</tr>
</table>
<table style="margin-top:15px;">
	<tr height="40">
		<td>
			<a class="admin_button_major" onclick="ShowBlock('show_block','{$add_link}')">{$lang.success.add}<span>&nbsp;</span></a>
		</td>
	</tr>
</table>
<script type="text/javascript">
{literal}
		function showToolTip(e,text){
			if(document.all)e = event;
			var obj = document.getElementById('tooltip');
			obj.innerHTML = text;
			obj.style.display = 'block';
			var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
			if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0;
			var leftPos = e.clientX - $('#tooltip').width()-10;
			if(leftPos<0)leftPos = 0;
			obj.style.left = leftPos + 'px';
			obj.style.top = e.clientY - obj.offsetHeight -10 + st + 'px';
		}
		function hideToolTip(){
			document.getElementById('tooltip').style.display = 'none';
		}
{/literal}		
</script>