<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}
{if $ajax ne 2}
<div id="tab_lists" class="{if $tab eq 'lists'}user_status_elem_active{else}user_status_elem{/if}" onclick="location.href='admin_settings.php?section=21&tab=lists'">
    {if $tab ne "lists"}<a>{$lang.settings.lists}</a>{else}{$lang.settings.lists}{/if}
</div>
{if $demo_module ne 1}
<div id="tab_add" class="{if $tab eq 'add'}user_status_elem_active{else}user_status_elem{/if}" onclick="location.href='admin_settings.php?section=21&tab=add'">
    {if $tab ne 'add'}<a>{$lang.button.add}</a>{else}{$lang.button.add}{/if}
</div>
{/if}
{if $tab eq "lists"}
    <div style="padding-top: 0px;" align="right">
         <select name="theme" onchange="ChangeTheme(); return false;">                        
            {foreach item=item from=$themes}
                <option value="{$item.name}" {if $item.sel eq 1}selected{/if}>{$item.title}</option>
            {/foreach}        
         </select>
    </div>
{/if}	  
<div class="cr"></div>
{/if}
{if $err}
    <div>{$err}</div>
{else}
    <div id="sliders" >
    {if $tab eq "lists"}
    <div id="images" class="panel_subtabs">
    {foreach item=item from=$picture}
    <div style="float: left; margin: 10px;">
    	   <img style="width: 160px;" src="{$site_root}{$index_theme_path}/images/slider/{$item.path}" alt="" />
       <div style="margin-top: 10px;">
            {if $item.status == 1}
                <!--<img id="slider_image"  alt="" />&nbsp;&nbsp;-->
                <div class="slider_image" id="of" onclick="ChangeStatus(0, {$item.id})" onmouseout="javascript:hideToolTip();" onmouseover="javascript: showToolTip(event,'{$lang.button.make_inactive}');return false"></div>
            {else}
                <!--<img id="slider_image" alt="" />&nbsp;&nbsp;-->
                <div class="slider_image" onclick="ChangeStatus(1, {$item.id})" id="on" onmouseout="javascript:hideToolTip();" onmouseover="javascript: showToolTip(event,'{$lang.button.make_active}');return false"></div>
            {/if}
            <div class="delete-images" onclick="DeleteImage({$item.id})" onmouseout="javascript:hideToolTip();" onmouseover="javascript: showToolTip(event,'{$lang.button.delete}');return false"></div>
       </div>
	</div>
    {/foreach}
</div>
    {elseif $tab eq "add"}
        <div id="add_picture" class="panel_subtabs">
            <form name="images_form" action="{$form.action}" method="post" enctype="multipart/form-data">
            <input type="hidden" name="par" value="slide_image"/>
        	<input type="hidden" name="sel" value="change"/>
        	<input type="hidden" name="section" value="21"/>
            <input type="hidden" name="tab" value="add"/>
                <dl style="width: 100%; display: table; padding-left: 10px;">
                    <dd style="float: left; width: 120px; margin-left: 0px;">{$lang.settings.choose_template}:&nbsp;&nbsp;</dd>
                    <dd style="float: left; margin-left: 0px;">
                             <select name="theme" 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 style="width: 100%; display: table; padding-left: 10px;">
                    <dd style="float: left; width: 120px; margin-left: 0px;">{$lang.settings.add_picture}:&nbsp;&nbsp;</dd> 
                    <dd style="float: left; margin-left: 0px;"><input type="file" name="slide_picture"/></dd>                    
                </dl>
            </form>
        </div>
        <div style="float: left; margin-top: 10px;">
            <a class="admin_button_major" onclick="document.images_form.submit();">{$lang.button.upload}<span>&nbsp;</span></a>
        </div>
    {/if}
    </div>
{/if}
<script type="text/javascript">
{literal}
    function ChangeStatus(status, id){
        var new_theme = $("select[name=theme]").val();
        $.post("admin_settings.php", {sel:'change_status', ajax: '2', status: status, id: id, theme: new_theme}, function(data){
            $("#sliders").html(data);
        })
    }
    function DeleteImage(id){
        var new_theme = $("select[name=theme]").val();
        $.post("admin_settings.php", {sel:'delete_image', ajax: '2', theme: new_theme, id: id}, function(data){
            $("#sliders").html(data);
        })
    }
    function ChangeTheme(){
        var new_theme = $("select[name=theme]").val();
        $.post("admin_settings.php", {section:'21', theme: new_theme, ajax: '2'}, function(data){
            $("#sliders").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>

