<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}
<div style="display: table; width: 100%;" id="banner_content">
<div style="width: 48%; float: left;">
    <div style=" display: table; width: 100%;">
                        <form name="images_form" action="{$form.action}" method="post" enctype="multipart/form-data">
                        <input type="hidden" name="par" value="site_images">
						<input type="hidden" name="sel" value="change">
						<input type="hidden" name="section" value="13">
    	<div class="table_header" style="line-height: 2; padding-left: 10px; color: #fff;">{$lang.settings.add_new_banners}</div>
        <div>
            <dl class="image_add_odd">
                <dd class="image_add_str">{$lang.settings.choose_template}:&nbsp;&nbsp;</dd>
                <dd style="float: left; margin-left: 0px;">
                         <select name="theme" onchange="ChangeTheme(); return false;" style="width: 215px;">                        
                            {foreach item=item from=$themes}
                                <option value="{$item.name}" {if $item.sel eq 1}selected{/if}>{$item.title}</option>
                            {/foreach}        
                         </select>
                </dd>
            </dl>
            <dl class="image_add_even">
                <dd class="image_add_str">{$lang.settings.add_picture}:&nbsp;&nbsp;</dd> 
                <dd style="float: left; margin: 0;"><input type="file" name="site_banner"/></dd>                    
            </dl>
            <dl class="image_add_even">
                <dd class="image_add_str" style="width: 98%;">{$lang.settings.image_size}</dd>
            </dl>
        </div>
        </form>
    </div>
             
    <div style="margin-top: 20px;">
        <a href="#" class="admin_button_major" onclick="javascript:document.images_form.submit();">{$lang.button.save}<span>&nbsp;</span></a>
    </div>
</div>
<div style="width: 3%; float: left;">&nbsp;</div>

<div id="image_banners" style="float: right; width: 48%;">
    <div class="table_header" style="line-height: 2; padding-left: 10px; color: #fff;">{$lang.settings.current_banner}</div>
    <div class="image_content" style="text-align: center;">
											{if $logo_setup.site_banner_format=='image'}
            <img src="{$image_path}" border="0" alt="" width= 325px; height=225px;>
											{else}
                                            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
												width="506" height="233" type="application/x-shockwave-flash">
                                            <param name="movie" value="{$site_root}{$logo_setup.site_banner}">
                                            <param name="quality" value="high" >
                                            <param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer" >
            <embed src="{$image_path}" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="{$logo_setup.site_banner_width}" height="{$logo_setup.site_banner_height}"></embed>
                                            </object>
											{/if}
    </div>
</div>
         
</div>
<script type="text/javascript">
{literal}
function ChangeTheme(){
        var new_theme = $("select[name=theme]").val();
        $.post("admin_settings.php", {section:'13', theme: new_theme, ajax: '2'}, function(data){
            $("#banner_content").html(data);
        })
    }
		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>