<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; min-width:100%;" id="banner_content">
	<div style="max-width: 45%; 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_video"/>
				<input type="hidden" name="sel" value="change"/>
				<input type="hidden" name="section" value="31"/>
				<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 style="margin-left: 10px;">
							<input type="radio" value="link" onchange="Change('video_link');" {if $use_video_link eq '1'}checked=""{/if} name="type_use" />{$lang.settings.add_video_link}&nbsp;&nbsp;
							<input type="radio" value="video" onchange="Change('add_video');" {if $use_video_link eq '0'}checked=""{/if} name="type_use" />{$lang.settings.add_video}&nbsp;&nbsp;
						</dd>                   
					</dl>
					<dl id="video_link" style="{if $use_video_link eq 0}display: none;{/if}" class="image_add_even">
						<dd style="margin-left: 10px;">{$lang.settings.add_video_link}:&nbsp;&nbsp;</dd>
						<dd style=" margin-left: 10px; margin-top: 10px;"><textarea name="site_video_link" cols="40" rows="5"></textarea></dd>
						<dd style="margin-left: 10px; margin-top: 10px;">{$lang.settings.video_link_help}</dd>
					</dl>
					<dl id="add_video" style="{if $use_video_link eq 1}display: none;{/if}" class="image_add_even">
						<dd class="image_add_str">{$lang.settings.add_video}:&nbsp;&nbsp;</dd>
						<dd style=" margin: 0;"><input type="file" name="site_video"/></dd>
						<dd style="margin-left: 10px; margin-top: 10px;">{$lang.settings.video_add_help}</dd>
					</dl>
					<!--dl id="play_video" class="image_add_odd" style="{if $use_video_link eq 1}display: none;{/if}">
						<dd style="margin-left: 10px;"><input style="margin: 0px;" type="checkbox" name="play_video" value="1" {if $play_video eq 1}checked=""{/if}/>&nbsp;&nbsp;{$lang.settings.play_video}</dd>
					</dl-->
				</div>
			</form>
		</div>
				 
		<div style="margin-top: 20px;">
			<a href="#" class="admin_button_major" onclick="javascript:document.images_form.submit();">{$button.save}<span>&nbsp;</span></a>
		</div>
	</div>

	<div id="image_banners" style="float: right; width: 50%; margin-left: 10px;">
		<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 $image}
				<img src="{$image}" border="0" alt="" width= 325px; height=225px; />
		   {else}
			   {if $use_video_link eq 1}
					{$link_video}
			   {else}
				<a href="{$link_video}"    class="player"
					style="display:block;width:100%;height:270px;"
					id="player">
				</a>
				<script type="text/javascript" src="{$server}/flowplayer/flowplayer-3.2.8.min.js"></script>
				<script type="text/javascript" src="{$server}/flowplayer/flowplayer.ipad-3.2.8.js"></script>
				<script type="text/javascript" src="http://flowplayer.org/media/js/site.js"></script>
				<script>
				$f("player", "{$server}/flowplayer/flowplayer-3.2.8.swf").ipad();
				</script>
				   {*if $is_flv eq 1}
					<script type="text/javascript" src="{$site_root}{$index_theme_path}/flash/flowplayer-3.2.4.min.js"></script>
					<a href="{$link_video}" style="display:block; width:520px;height:330px" id="player"></a>
					<script>
					flowplayer("player", "{$site_root}{$index_theme_path}/flash/flowplayer-3.2.4.swf");
					</script>
					{else}
						<object id="MediaPlayer1" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" standby="" type="application/x-mplayer2" height="270" width="99%">
							<param name="URL" value="{$link_video}"/>
							<param name="data" value="{$link_video}"/>
							<param name="movie" value="{$link_video}"/>
							<param name="AllowChangeDisplaySize" value="False"/>
							<param name="ShowControls" value="1"/>
							<param name="ShowDisplay" value="1"/>
							<param name="ShowStatusBar" value="1"/>
							<param name="AutoStart" value="{$play_video}"/>
							<param name="InvokeURLS" value="False"/>
							<param name="wmode" value="opaque"/>
							<embed wmode="opaque" name="MediaPlayer1" type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/" src="{$link_video}" autostart="{$play_video}" height="270" width="99%"/> </embed>
						</object>
					{/if*}
			   {/if}
			{/if}
		</div>
	</div>
</div>
<script type="text/javascript">
{literal}
function Change(div){
    if (div == "video_link"){
        $("#add_video").css("display", "none");
        $("#play_video").css("display", "none");
        $("#video_link").css("display", "block");
    }
    else{
        $("#video_link").css("display", "none");
        $("#add_video").css("display", "block");
        $("#play_video").css("display", "block");
        
    }
}

function ChangeTheme(){
        var new_theme = $("select[name=theme]").val();
        $.post("admin_settings.php", {section:'31', 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>