  
<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}
<link href="{/literal}{$server}{$template_root}{literal}/css/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
$(function() {
$('#tool_tip_4 *').tooltip();
});
</script>
{/literal}
<table width="100%" cellspacing="0" cellpadding="0" border="0">{* style="border:1px solid #29b43d;">*}
    <tr class="sg_subheader">
        <td style="padding-left:5px;" class="user_status_elem">
            {$reference_name}
        </td>
    </tr>
    <tr>
        <td align="center" style="padding:5px 0 5px 0;">
            <div id="add_opt_form">
                <!--form method="post" action="{$form.action}" enctype="multipart/form-data" name="add_form"-->
                {$form.hiddens}
                <div class="fl" style="text-align:left;padding-top:5px;">
                    {$lang.descr_spr.new_option}:&nbsp;
                </div>
                <div class="fl" style="width:auto;text-align:left;padding-top:5px;padding-right:5px;">
                    <input type="text" name="name_opt" id="name_opt" size="30">
                </div>
                <div class="fl" style="text-align:left;">
                    <a href="#" class="admin_button_major" style="margin:0px;" id="opt_add" onclick="add();">{$lang.button.add}<span>&nbsp;</span></a>
                </div>
                 <!--/form-->
            </div>
            <div class="cr">&nbsp;</div>
            <div align="left">
                <table cellSpacing="3" cellPadding="0" style="padding-bottom:10px;">
                    <tr align="left">
			<td><span>{$lang.settings.translate_into}:</span>
			<select onchange="javascript:window.open(this.value,'lang_edit', 'height=600, resizable=yes, scrollbars=yes,width=800, menubar=no,status=no'); return false;">
			{section name=s loop=$lang_link}
				<option value="{$lang_link[s].link}">{$lang_link[s].name}</option>
			{/section}
                        {section name=s loop=$lang_link}
{*                        <td align="left"><a href="#" onclick="javascript:window.open('{$lang_link[s].link}','lang_edit', 'height=600, resizable=yes, scrollbars=yes,width=800, menubar=no,status=no'); return false;" class=privacy_link>{$lang_link[s].name}</a></td>
                        {if !$smarty.section.s.last}
                        <td align="left" valign="middle" class="main_content_text">&nbsp;|&nbsp;</td>
                        {/if}*}
                        {/section}
			</select>
			</td>
                    </tr>
                </table>
                <table width="100%" cellspacing="0" cellpadding="0" border="0">
                    <tr class="table_header">                        
                        <td align="left">{$header.option}</td>
                        <td align="right" width="100">{$lang.button.action}</td>
                    </tr>
                    {if $references}
                    {section name=spr loop=$references}
                    <tr {if $smarty.section.spr.index mod 2 eq 1}class="table_row1 even"{else}class="table_row1 odd"{/if} style="height: 27px">
                        <td align="left">
                            <div>
                                <input type="hidden" name="id_opt" value="{$references[spr].id}">
                                <div id="opt_{$references[spr].number}">{$references[spr].name}</div>
                            </div>
                        </td>
                        <td align="right" width="100">
						<div class="block_action fr" style="display: none;">
{*							<div class="action_edit" style="display: block;float:left;cursor: pointer;"><img width="16" alt="" src="{$site_root}{$template_root}/images/edit.png" onmouseout="javascript:hideToolTip();" onmouseover="javascript: showToolTip(event,'{$lang.button.edit}');return false"></div>
                            <div class="action_save" style="float:left;"><img width="16" alt="" src="{$site_root}{$template_root}/images/success.png" onmouseout="javascript:hideToolTip();" onmouseover="javascript: showToolTip(event,'{$lang.button.save}');return false"></div>*}
                            <div style="width:10px;" class="fl">&nbsp;</div>
                            <div class="action_del" style="display: block;cursor: pointer;float:left;"><img height="16" alt="" src="{$site_root}{$template_root}/images/photo_delete.png" onmouseout="javascript:hideToolTip();" onmouseover="javascript: showToolTip(event,'{$lang.button.delete}');return false"></div>
                        </div>
						</td>
                    </tr>
                    {/section}
                    {else}
                    <tr class="table_row odd" style="height: 40px">
                        <td class="main_error_text" align="left" colspan="2" bgcolor="#FFFFFF">{$header.empty_option}</td>
                    </tr>
                    {/if}
		    <tr class="table_header"><td colspan="2">&nbsp;</td></tr>
                </table>
            </div>
            <div class="fl" style="padding-top:15px;">
                <a class="admin_button btn_upload" href="{$site_root}/admin/admin_reference.php?ref={$ref}" >{$lang.button.back}<span>&nbsp;</span></a></div>
            </div>
        </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>

<script type="text/javascript">
{literal}
function add(){
		var sel = $('#add_opt_form').find('input[name="sel"]').val();
		var page = $('#add_opt_form').find('input[name="page"]').val();
		var ref = $('#add_opt_form').find('input[name="ref"]').val();
		var id_spr = $('#add_opt_form').find('input[name="id_spr"]').val();
		var name_opt = $('#add_opt_form').find('input[name="name_opt"]').val();
		$.post("admin_reference.php", {sel:sel,page:page,ref:ref,id_spr:id_spr,name:name_opt},
			function(data){
				if (data == 'save') {
					ShowOption('admin_reference.php?sel=listopt&ref='+ref+'&page='+page+'&id_spr='+id_spr, id_spr);
				}
			}
		);
	}
//var OPT_OLD = "";
$(document).ready(function() {
    $("tr.table_row1").hover(
        function(){
		},
		function () {
		}
    );
    $("tr .table_row1 .action_del").click(
        function(){
            var id_opt = $("tr .select_tr").find('input[type="hidden"]').val();
            var page = $('#add_opt_form').find('input[name="page"]').val();
            var ref = $('#add_opt_form').find('input[name="ref"]').val();
            var id_spr = $('#add_opt_form').find('input[name="id_spr"]').val();
            $.post("admin_reference.php", {sel:'delopt',page:page,ref:ref,id_spr:id_spr,id:id_opt},
                function(data){
                    if (data == 'delete') {
                        ShowOption('admin_reference.php?sel=listopt&ref='+ref+'&page='+page+'&id_spr='+id_spr, id_spr);
                    }
                }
            );
        }
    )
});
{/literal}
</script>
