<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<meta http-equiv = "Content-Language" content = "{$smarty.const._HEADERLANGUAGETAG}" />
<meta http-equiv = "keywords"         content = "education" />
<meta http-equiv = "description"      content = "Collaborative Elearning Platform" />
<meta http-equiv = "Content-Type"     content = "text/html; charset = utf-8"/>
<link rel="shortcut icon" href="images/favicon.ico" >
<link rel="icon" href="images/favicon.gif" type="image/gif" >
 {if !isset($T_CUSTOM_CSS)}
    <link rel = "stylesheet" type = "text/css" href = "css/css_global.php" />
{else}
    <link rel = "stylesheet" type = "text/css" href = "css/custom_css/{$T_CUSTOM_CSS}" />
{/if}

            <script>{if $T_BROWSER == 'IE6'}{assign var='globalImageExtension' value='gif'}var globalImageExtension = 'gif';{else}{assign var='globalImageExtension' value='png'}var globalImageExtension = 'png';{/if}</script>

            <script>
            {literal}
            // The following functions are used to highlight the correct menu on page load or refresh
            var active_id = '{/literal}{$T_ACTIVE_ID}{literal}';

            function changeTDcolor(id) {
            //alert('ctdstart me active_id ' + active_id + ' kai id = ' + id);
                if (!id) {
             return false;
                }
                if(active_id != id)
                {

              if(document.getElementById(active_id))
                    {
                        $(active_id).className = "menuOption";
                    }

               if(document.getElementById(active_id+"_a"))
                    {
                           $(active_id+"_a").className = "menuOption"; //"menuLinkInactive";
                    }
                    active_id = id;

                if(document.getElementById(id)) {
                           $(id).className = "selectedTopTitle";// rightAlign";
                           if ( $(id).up() && $(id).up().up()) {
                               document.move($(id).up().up());
                           }
                    }
                 if(document.getElementById(id+"_a"))
                    {
                           $(active_id+"_a").className = "selectedTopTitle";
                           if ( $(active_id+"_a").up() && $(active_id+"_a").up().up()) {
                               document.move($(active_id+"_a").up().up());
                           }
                    }

                }



            }

            function gotoLessons() {
                top.mainframe.location="http://{/literal}{$smarty.session.s_type}{literal}.php?ctg=lessons";
            }

            function changeColorOnRefresh() {
                {/literal}
                {if $smarty.session.s_type == 'student'}
                      var temp_id = 'control_panel';
                {elseif $smarty.session.s_type == 'professor'}
                      var temp_id = 'control_panel';
                {elseif $smarty.session.s_type == 'administrator'}
                  var temp_id = 'control';
                {/if}
            //alert('mesa apo tin refresh');
                {if $T_CTG == 'lessons'}
                  changeTDcolor(temp_id);
                {else}
                   changeTDcolor("{$T_CTG}");
                {/if}
                {literal}
            }

            </script>


            <script language = "JavaScript" type = "text/javascript" src = "js/EfrontScripts.php"></script>
            <script language = "JavaScript" type = "text/javascript" src = "js/print-script.php"></script>
            <script language = "JavaScript" type = "text/javascript" src = "js/scriptaculous/prototype.php"></script>
            <script language = "JavaScript" type = "text/javascript" src = "js/scriptaculous/effects.php"></script>

            <script language = "JavaScript" type = "text/javascript">

                // Get unread messages
                var ie_str;
                var detect = navigator.userAgent.toLowerCase();
                detect.indexOf("msie") > 0 ? ie_str = "?ie=1" :ie_str = "";
                makeAjaxRequest('ask_unread_messages.php'+ie_str,'special_get_request','general');
                setInterval("makeAjaxRequest('ask_unread_messages.php' + ie_str, 'special_get_request', 'general')", 100000);

                // Initialize toggle arrows
                var arrow_status = "down";
                function initArrows() {
                     var windowSize = getWindowSize();
                     var windowHeight = parseInt(windowSize[1]);
                     scrollHeight = parseInt(document.documentElement.scrollHeight);
                     //alert("windowHeight = "+windowHeight+" scrollHeight = "+scrollHeight);
                }
                window.onresize = resizeFunction;

                function setArrowStatus(status) {
                      arrow_status = status;
                      initArrows();
                }

                // Utility function for debugging
                function myPrint(element) {
                    alert("Element: " + element.id + "\n\nposition.top:\t" + element.style.top + "\npositionedOffset().top:\t" + element.positionedOffset().top + "\nHeight:\t" + element.getHeight() + "\nmargin-top:\t" + element.style.marginTop);
                }


                // Function to fix the height of the curtains used to hide underlying menus - the menus must follow an order menu = <menu1,menu2...,menuN,logout>
                function fixCurtains() {
                       var windowSize = getWindowSize();
                       var windowHeight = parseInt(windowSize[1]);

                       var menus = $('menu').childElements().length - 1; // we do not take "logout" into account
                       var offset;

                       var i = menus;
                       for (i = menus; i > 0; i--) {

                       offset = windowHeight - $('tabmenu').getHeight() - $('logout').getHeight() -1;
                       for (k = 1; k <= i; k++) {
                           offset -= ($('tabmenu'+k).getHeight()+1);
                       }

                       j = i + 1;
                        // Check the next menus
                       while ( $('menu'+j) ) {
                            if ($('menu'+j).status =='down') {
                               offset = offset - $('tabmenu'+j).getHeight() - 1;
                           }
                           j = j + 1;
                       }

                       if (offset > 0) {
                           $('listmenu'+i).setStyle("height: " +(offset)+"px;");
                       }
                    }

                    // Hiding all menus above the selected one: chech menus 1...menus-1
                       for (i = 1; i < menus; i++) {
                           if ( (Object.isUndefined($('menu'+i).status) || $('menu'+i).status == "up") && (Object.isUndefined($('menu'+(i+1)).status) || $('menu'+(i+1)).status != "down")) {
                               if(i==1) {
                                   $('listmenu'+i).hide();
                               } else {
                                   $('menu'+i).down(1).hide();
                               }
                           } else {
                               break;
                           }
                        }
                }


                // Function called on resizing the window. Changes the position of the tabheaders and fixes the Curtains by calling fixCurtain
                function resizeFunction() {

                        var windowSize = getWindowSize();
                        var windowHeight = parseInt(windowSize[1]);

                        // Adjust the menu size
                        var menus = $('menu').childElements().length - 1; // we do not take "logout" into account
                        var wholeMenuSize = windowHeight - $('tabmenu').getHeight();
                        var i = 2;
                        for (i = 2; i <= menus; i++) {
                            if ($('menu'+i).status == "down") {
                                wholeMenuSize = wholeMenuSize - $('menu'+i).getHeight();
                            }
                        }

                        {/literal}
                        {if $T_BROWSER == 'IE6'}
                        {literal}
                            $('menu').setAttribute("height", (wholeMenuSize) + 'px');
                        {/literal}
                        {else}
                        {literal}
                            $('menu').setStyle({height: (wholeMenuSize) + 'px'});
                        {/literal}
                        {/if}
                        {literal}


                        // Adjust logout position
                        //$('logout').setStyle({marginTop: '0px'});
                        var newTop = (windowHeight-$('logout').getHeight());
                        $('logout').setStyle({top: (newTop)+'px'});

                        var logoutLogout = $('logout').style.top.split("px");
                        logoutLogout  = parseInt(logoutLogout[0]);

                        var temp;

                        // Adjust all other menus
                        var i = 2;
                        for (i = 2; i <= menus; i++) {
                            if(Object.isUndefined($('menu'+i).status) || $('menu'+i).status == 'up') {
                                newTop = $('tabmenu').getHeight();
                                temp =(i-2) * $('tabmenu2').getHeight();
                                temp += $('tabmenu'+i).getHeight();
                                newTop = newTop + temp;
                            } else {
                                temp = (menus - i + 2);
                                temp = temp * ($('tabmenu2').getHeight()+1);
                                newTop = windowHeight - temp;
                            }
                            $('menu'+i).setStyle({marginTop: (0)+'px'});
                            $('menu'+i).setStyle({top: (newTop)+'px'});
                        }

                        // Fix the curtains used to hide the menus
                        fixCurtains();
                }
            </script>
            {/literal}

            {literal}
            <style>
            html,body{
            height:100%;
            margin-top:0px;
            padding:0px
            }

            div.menu {
               width:175px;
               height:80%;
               background-color:#EEEEEE;
            }
            div.tabmenu {
               width:175px;
               background-color:#EEEEEE;
               text-align:center;
               vertical-align:middle;
               color:black;
               font-size:11px;
            }

            div.topPhoto {
               background-color:#EEEEEE;
               width:175px;
               text-align: center;
               vertical-align:middle;
               color:white;
            }

            div.verticalTab {
               width:175px;
               border-top:1px solid #EEEEEE;
               position: absolute;
               background-color:#EEEEEE;
            }
            div.tabHeader {
               background-image: url(images/others/blue.jpg);
               background-position: bottom;
               background-color:#97AFC9;
            /* background-color:rgb(184,201,219); */
               min-height:25px;
               cursor: pointer;
               padding-left:2px;
               font-weight:bold;
               vertical-align:middle;
               background-repeat:repeat-x;
            }
            div.menuOption a:hover {
               text-decoration:none;
               font-weight:bold;
            }
            div.menuList {
            /*  overflow-y:auto; */
            }
            div.selectedTopTitle {
                color:#222222;
                height:20px;
                font-weight:bold;/*border:1px double #5D91ED;*/
                background-image: url('images/others/blue2.jpg');
                border-bottom: 1px solid #CCCCCC;
            }

            div.selectedTopTitle a:hover {
                color:#FFFFFF;
                text-decoration:none
            }
            div.menuOption {
                background-color:#EEEEEE;
                height:20px;
                border:none;
                color:#222222;
                text-decoration:none;
            }
            </style>

            </head>

            <body class = "sidebar" onLoad = "initArrows();">

            <a id = "arrow_down" href="#bottom" onclick="new Effect.ScrollTo('bottom',{offset:-140}); setArrowStatus('up');   return false;" style="position:{/literal}{if $T_BROWSER == 'IE6'}absolute{else}fixed{/if}{literal}; z-index:50; bottom:5px; right:1px; display:none;">{/literal}<img src="images/16x16/navigate_down.{$globalImageExtension}" border = "0" alt="{$smarty.const._SCROLLTOBOTTOMOFPAGE}" title="{$smarty.const._SCROLLTOBOTTOMOFPAGE}"{literal}/></a>
            <a id = "arrow_up"   href="#top"    onclick="new Effect.ScrollTo('top',{offset:-140});setArrowStatus('down'); return false;" style="position:{/literal}{if $T_BROWSER == 'IE6'}absolute{else}fixed{/if}{literal}; z-index:50; bottom:5px; right:1px; display: none;">{/literal}<img src="images/16x16/navigate_up.{$globalImageExtension}" border = "0" alt="{$smarty.const._SCROLLTOTOPOFPAGE}" title="{$smarty.const._SCROLLTOTOPOFPAGE}"{literal}/></a>
            {/literal}
            <span id = "nobookmarks" style = "display:none">{$smarty.const._YOUHAVENOBOOKMARKS}</span>

            {literal}
                <script language = "JavaScript" type = "text/javascript">
                    var lock = 0;
                     // Function to move menus up and down
                    document.move = function(element) {
                        if (!lock) {
                            lock = 1;
                            if (Object.isUndefined(element.status) || element.status == 'up') {

                            //Ypologismos apo to last element (edw logout) mexri to yparxwn
                            var newPos = element.nextSiblings().last().positionedOffset().top - element.positionedOffset().top - (element.nextSiblings().last().getHeight() * (element.nextSiblings().length));

                            for (var i = 0; i < element.nextSiblings().length - 1; i++) {
                                if (Object.isUndefined(element.next(i).status) || element.next(i).status == 'up') {
                                    newPos = element.next(i).nextSiblings().last().positionedOffset().top - element.next(i).positionedOffset().top - (element.next(i).nextSiblings().last().getHeight() * element.next(i).nextSiblings().length);
                                    element.next(i).status = 'down';
                                    element.next(i).down(1).hide();
                                    effect = new Effect.MoveUpDown(element.next(i), newPos);
                                }
                            }

                                if (element.id == 'menu1') {
                                    setTimeout(function(){$('listmenu1').show();}, 200);
                                } else {
                                    setTimeout(function(){element.down(1).show();}, 200); //element.down(1).show();
                                }
                            } else {

                            for (var i = element.previousSiblings().length - 1; i>=0; i--) {
                //alert('to proigoumeno '+i+' einai to '+ element.previous(i).id + ' me katastasi '+ element.previous(i).status);
                                if (element.previous(i).status == 'down') {

                                    newPos = -(element.previous(i).positionedOffset().top - element.previous(i).previousSiblings().last().positionedOffset().top);
                                    size = element.previous(i).previousSiblings().length-1;
                                    for (var j = 1; j <= size; j++) {
                                        newPos += $('tabmenu'+j).getHeight();
                                    }


                                    newPos += $('tabmenu1').getHeight() - 1;
                                    element.previous(i).status = 'up';
                                    element.previous(i).down(1).hide();
                                    effect = new Effect.MoveUpDown(element.previous(i), newPos);
                                }
                            }
                            //alert(element.previousSiblings().last().id + ' edw ' + element.getDimensions().height + ' element ID ' + element.id);
                            //alert(element.positionedOffset().top + ' <= element.top , last.top => ' +  element.previousSiblings().last().positionedOffset().top);
                            var newPos = -(element.positionedOffset().top - element.previousSiblings().last().positionedOffset().top);

                            size = element.previousSiblings().length;
                            for (j = 1; j <= size; j++) {
                                newPos += $('tabmenu'+j).getHeight();
                            }
                            //newPos += $('tabmenu1').getHeight() - 1;

                            element.status = 'up';

                            effect = new Effect.MoveUpDown(element, newPos);

                            setTimeout(function(){$('listmenu1').hide();element.down(1).show();}, 250);

                            }
                            setTimeout(function(){fixCurtains();}, 250);
                            setTimeout(function(){lock = 0;}, 250);
                        }

                    }

                Effect.MoveUpDown = function(element, offset) {
                  element = $(element);
                  var oldStyle = {opacity: element.getInlineOpacity() };
                  return new Effect.Parallel(
                    [ new Effect.Move(element, {x: 0, y: offset, sync: true }),
                      new Effect.Opacity(element, { sync: true, to: 0.5 }) ],
                    Object.extend(
                      { duration: 0.25,
                        beforeSetup: function(effect) {
                          //effect.effects[0].element.makePositioned();
                        },
                        afterFinishInternal: function(effect) {
                          effect.effects[0].element.setStyle(oldStyle);
                        }
                      }, arguments[1] || { }));
                };

                var initUpperTabHeight;
                var photoHeight;


                document.fixUpperMenu = function() {


                            var windowSize = getWindowSize();
                            var windowHeight = parseInt(windowSize[1]);
                            if ($('tabmenu')) {
                                initUpperTabHeight = $('tabmenu').getHeight();
                            }
                            if ($('topPhoto')) {
                                photoHeight = $('topPhoto').getHeight();
                            }
                            {/literal}
                            {if $T_BROWSER == 'IE6'}
                            {literal}
                                var tempSize = windowHeight - $('tabmenu').getHeight();
                                if ($('menu')) {
                                    $('menu').setAttribute("height", (tempSize) + 'px');
                                }
                            {/literal}
                            {else}
                            {literal}
                                if ($('menu')) {
                                    $('menu').setStyle({height: (windowHeight - $('tabmenu').getHeight()) + 'px'});
                                }
                            {/literal}
                            {/if}
                            {literal}

                            if ($('logout')) {
                                $('logout').setStyle({top: (windowHeight-$('logout').getHeight())+'px'});
                                // The following code is used to move the logout button to the bottom of the page
                                $('logout').status = "down";


                                // The following code is used to set the active menu appearing and the rest to their correct positions
                                var i = 2;
                                var offset =$('logout').style.top.split("px");
                                offset = offset[0];
                            }

                            if ($('menu')) {
                                var menus = $('menu').childElements().length - 1; // we do not take "logout" into account

                                var active_menu = {/literal}{$T_ACTIVE_MENU}{literal};

                                if (active_menu == 1) {
                                    // All menu tabs go down, except the top (which is stable)
                                    for (i = menus; i >= 2; i--) {
                                        offset = offset - $('tabmenu' + i).getHeight() - 1;
                                        $('menu'+i).setStyle({top: (offset)+'px'});
                                        $('menu'+i).status = 'down';
                                        $('menu'+i).down(1).hide();
                            //            alert('menu'+i+' '+$('menu'+i).status );
                                    }
                                } else {

                                    // Only menu tabs after the active menu go down, the rest remain up
                                    for (i = menus; i > active_menu; i--) {
                                        offset = offset - $('tabmenu' + i).getHeight() - 1;
                                        $('menu'+i).setStyle({top: (offset)+'px'});
                                        $('menu'+i).status = 'down';
                                        $('menu'+i).down(1).hide();

                            //alert('menu'+i+' '+$('menu'+i).status );
                                    }

                                    offset =initUpperTabHeight;

                                    for (i = 2; i <= active_menu; i++) {
                                        offset = offset + $('tabmenu' + (i-1)).getHeight() + 1;
                                        $('menu'+i).setStyle({top: (offset)+'px'});
                                        $('menu'+i).status = 'up';
                            //alert('menu'+i+' '+$('menu'+i).status );
                                    }
                                }
                            }

                }

                // Function used to hide and show the upper part of the sidebar
                document.myhide = function() {
                                var element = $('tabmenu');
                                var tempHeight;
                                // Adjust the height of the top frame
                                if (element.status == 'hidden') {
                                    element.status = 'visible';
                                    $('topPhoto').show();
                                    element.setStyle("height: " + (initUpperTabHeight) + "px");
                                    tempHeight = $('menu').getHeight()-photoHeight;
                                    $('menu').setStyle("height: " + (tempHeight) + "px");
                                    $('toggleIconImageDown').style.visibility = "hidden";
                                } else {

                                    element.status = 'hidden';
                                    $('topPhoto').hide();
                                    tempHeight = initUpperTabHeight-photoHeight;
                                    element.setStyle("height: " + (tempHeight) + "px");
                                    tempHeight = $('menu').getHeight()+photoHeight;
                                    $('menu').setStyle("height: " + (tempHeight) + "px");
                                    $('toggleIconImageDown').style.visibility = "visible";
                                }

                                var menus = $('menu').childElements().length - 1; // we do not take "logout" into account
                                var offset, menuTopOffset;
                               // Adjust all other menus
                                var i =2;
                                for (i = 2; i <= menus; i++) {
                                    if (Object.isUndefined($('menu'+i).status) || $('menu'+i).status == 'up') {
                                        menuTopOffset = $('menu'+i).style.top.split("px");
                                        //eeeedw
                                        // SWSTI SOLUTION: offset = $('tabmenu').getHeight() + (i-1) * $('tabmenu1').getHeight();
                                        offset = $('tabmenu').getHeight() + (i-2) * $('tabmenu2').getHeight();
                                        offset += $('tabmenu1').getHeight();
                                        $('menu'+i).setStyle({top: (offset)+'px'});
                                    }
                                }

                                // Adjust logout menu
                                var windowSize = getWindowSize();
                                var windowHeight = parseInt(windowSize[1]);
                                $('logout').setStyle({top: (windowHeight-$('logout').getHeight())+'px'});

                                {/literal}
                                fixCurtains();

                };


            </script>

            {* Top menu with photo and name - Hiding on click *}
            <div class = "tabmenu" id = "tabmenu">
            <br />

                {* Photo *}
                <div class = "topPhoto" id = "topPhoto">
                    {if isset($T_AVATAR)}
                        <img src = "view_file.php?file={$T_AVATAR}" border = "0" title="{$smarty.const._CURRENTAVATAR}" alt="{$smarty.const._CURRENTAVATAR}" onLoad ="javascript:fixUpperMenu()" onclick = "javascript:myhide()"/>
                    {else}
                        <img src = "images/avatars/system_avatars/unknown_small.{$globalImageExtension}" border = "0" title="{$smarty.const._EFRONT}" alt="{$smarty.const._EFRONT}" onLoad ="javascript:fixUpperMenu()" onclick = "javascript:myhide()"/>
                    {/if}

                </div>
                <div style="font-size: 10px" id = "personIdentity">
                    <table width="100%" align="center">
                        <tr><td><a href="#" class = "info nonEmptyLesson" id="nameSurname" onmouseover="$('tooltipImg').style.visibility = 'visible';" onmouseout="$('tooltipImg').style.visibility = 'hidden';">{$T_RESULT.name}&nbsp;{$T_RESULT.surname}<img id="tooltipImg" class = "tooltip" border = '0' src='images/others/tooltip_arrow.gif'><span class = 'tooltipSpan' id='userInfo' style="font-size: 10px" >{$T_TYPE}</span></a></td></tr>
                        <tr><td align="center" vertical-align="middle">
                                <table>
                                    <tr><td id="unread_img">{if $T_UNREAD_MESSAGES != 0}<img src = "images/16x16/mail2.{$globalImageExtension}" style="border:0; float: left;" title="{$smarty.const._MESSAGES}" alt="{$smarty.const._MESSAGES}" />{/if}</td>
                                        <td id="recent_unread_left">{if $T_UNREAD_MESSAGES != 0}(<a href = "/forum/messages_index.php" target="mainframe">{$T_UNREAD_MESSAGES}</a>){/if}</td>
                                    </tr>
                                </table>

                             </td>
                         </tr>
                    </table>
                </div>

                {* Search div *}
                <div style="background:transparent url('images/others/search_bg.png') no-repeat scroll 0%; height:29px; width:175px;">
                    <form action = "{$smary.const.G_SERVERNAME}{$smarty.session.s_type}.php?ctg=control_panel&op=search" method = "post" target="mainframe">
                        <div id="search_suggest"></div>
                        <input type="text" name="search_text"
                            value = "{if isset($smarty.post.search_text)}{$smarty.post.search_text}{else}{$smarty.const._SEARCH}...{/if}"
                            onFocus = "this.value='';makeAjaxRequest('ask_suggestions.php','special_get_request','suggestions');"
                            style="background-image:url('images/16x16/search.png'); background-repeat:no-repeat; border:0pt none; float:center; margin:6px 0pt 0pt 6px; padding-left:18px; width:134px;" />
                        <input type = "hidden" name = "current_location" id = "current_location" value = ""/>
                    </form>
                </div>
            </div>


            {* Basic menu called "menu" includes all other menus in successive order: menu1 (always), menu2,..., menuN, logout (always) *}
            <div class = "menu" id = "menu">

                {*********}
                {* MENUS *}
                {*********}
                {foreach name = 'outer_menu' key = 'menu_key' item = 'menu' from = $T_MENU}
                <div class = "verticalTab" id = "menu{$menu_key}" style = "margin-top:0px" style="background-color:#EEEEEE;">
                    <div class = "tabHeader" onclick = "move($('menu{$menu_key}'));" id="tabmenu{$menu_key}">{$menu.title}</div>
                    <div class = "menuList" id="listmenu{$menu_key}">
                        {foreach name = 'options_list' key = 'option_id' item = 'option' from = $menu.options}
                            {if isset($option.html)}
                                <div class = "menuOption">{$option.html}</div>
                            {else}
                                <div class = "menuOption" id="{$option.id}" ><table><tr style="vertical-align:middle;">

                                <td><a  href = "{$option.link}"  target="{$option.target}">
                                    {if isset($option.moduleLink)}
                                        {if isset($option.eFrontExtensions)}
                                            <img src="images/{$option.image}.{$globalImageExtension}" border="0">
                                        {else}
                                            <img src="images/{$option.image}" border="0">
                                        {/if}
                                    {else}
                                    <img src="images/16x16/{$option.image}.{$globalImageExtension}" border="0">
                                    {/if}
                                    </a>
                                </td>
                                <td><a  href = "{$option.link}"  target="{$option.target}">{$option.title}</a></td></tr></table></div>
                            {/if}
                        {/foreach}
                    </div>
                </div>
                {/foreach}


                {*********************************}
                {* NEXT MENU : ONLINE USERS MENU *}
                {*********************************}
                {if isset($T_ONLINE_USERS_LIST)}

                <div class = "verticalTab" id = "menu{$T_MENUCOUNT}" >
                {** IE JS BUGBUGBUG 1923 **}
                    <div class = "tabHeader" onclick = "move($('menu{$T_MENUCOUNT}'));" id="tabmenu{$T_MENUCOUNT}">{$smarty.const._ONLINEUSERS}&nbsp;&nbsp;({$T_ONLINE_USERS_COUNT})</div>
                    <div class = "menuList" id="listmenu{$T_MENUCOUNT}">
                    <div id = "users-online"></div>
                        <table width = "100%">
                                {if $T_ONLINE_USERS_LIST|@count > 20}
                            <tr>
                               <td id = "users_online" style="display:none;">
                                       {*eF_template_printOnlineUsers data = $T_ONLINE_USERS_LIST*}
                                  </td></tr>
                                </tr>
                                {else}
                                   <td id = "users_online">
                                       {*eF_template_printOnlineUsers data = $T_ONLINE_USERS_LIST*}
                                   </td></tr>
                               {/if}
                        </table>

                    </div>
                </div>
                {math assign='menuCount' equation="x+1" x=$menuCount}
                {/if}

                {***********************}
                {* FINAL MENU : LOGOUT *}
                {***********************}
                <div class = "verticalTab" id = "logout">
                    <div class = "tabHeader">
                    	<table width=100% style="vertical-align:top">
                    		<tr style="vertical-align:top">
                    			<td style="vertical-align:top;align:right;">
                    				<a href = "{$smary.const.G_SERVERNAME}index.php?logout=true" style="text-decoration:none;vertical-align=top;" target = "_top">{$smarty.const._LOGOUT}</a>
                    			</td><td>
                    				<img src = "images/16x16/exit.{$globalImageExtension}" border = "0" onclick = "window.location='index.php?logout=true'" align="right" title = "{$smarty.const._LOGOUT}"/>
                    			</td><td width="1px"></td>
                    		</tr>
                    	</table>
                    </div>
                </div>

            </div>
            <input type ="hidden" id = "online_users_text" value="{$smarty.const._ONLINEUSERS}" class ="tabmenu{$T_MENUCOUNT}" />

            {literal}
            <script language = "JavaScript" type = "text/javascript">
                document.fixUpperMenu();
            /*
            // The following code is used to move the logout button to the bottom of the page
                $('logout').status = "down";

                var windowSize = getWindowSize();
                var windowHeight = parseInt(windowSize[1]);
                initUpperTabHeight = $('tabmenu').getHeight();
                photoHeight = $('topPhoto').getHeight();
                {/literal}
                {if $T_BROWSER == 'IE6'}
                {literal}
                    var tempSize = windowHeight - $('tabmenu').getHeight();
                    $('menu').setAttribute("height", (tempSize) + 'px');
                {/literal}
                {else}
                {literal}
                    $('menu').setStyle({height: (windowHeight - $('tabmenu').getHeight()) + 'px'});
                {/literal}
                {/if}
                {literal}

                $('logout').setStyle({top: (windowHeight-$('logout').getHeight())+'px'});

                // The following code is used to set the active menu appearing and the rest to their correct positions
                var i = 2;
                var offset =$('logout').style.top.split("px");
                offset = offset[0];

                var menus = $('menu').childElements().length - 1; // we do not take "logout" into account

                var active_menu = {/literal}{$T_ACTIVE_MENU}{literal};

                if (active_menu == 1) {
                    // All menu tabs go down, except the top (which is stable)
                    for (i = menus; i >= 2; i--) {
                        offset = offset - $('tabmenu' + i).getHeight() - 1;
                        $('menu'+i).setStyle({top: (offset)+'px'});
                        $('menu'+i).status = 'down';
                        $('menu'+i).down(1).hide();
            //            alert('menu'+i+' '+$('menu'+i).status );
                    }
                } else {

                    // Only menu tabs after the active menu go down, the rest remain up
                    for (i = menus; i > active_menu; i--) {
                        offset = offset - $('tabmenu' + i).getHeight() - 1;
                        $('menu'+i).setStyle({top: (offset)+'px'});
                        $('menu'+i).status = 'down';
                        $('menu'+i).down(1).hide();

            //alert('menu'+i+' '+$('menu'+i).status );
                    }

                    offset =initUpperTabHeight;

                    for (i = 2; i <= active_menu; i++) {
                        offset = offset + $('tabmenu' + (i-1)).getHeight() + 1;
                        $('menu'+i).setStyle({top: (offset)+'px'});
                        $('menu'+i).status = 'up';
            //alert('menu'+i+' '+$('menu'+i).status );
                    }
                }

                var heightVar = $('tabmenu').getHeight();
                $('tabmenu').setStyle({height: (heightVar) + 'px'});

                var i = 2;

                offset = heightVar;
                var menus = $('menu').childElements().length - 1; // we do not take "logout" into account
                for (i = 2; i <= menus ; i++) {
                    offset = offset + $('tabmenu' + (i-1)).getHeight() + 1;
                    $('menu'+i).setStyle({top: (offset)+'px'});
                }
            */


            </script>
            {/literal}

            <img id = "toggleIconImageDown" src = "images/16x16/navigate_down.{$globalImageExtension}" style = "position: fixed; top:4px; left: 1px; cursor: pointer;visibility:hidden;" onclick = "javascript:myhide()" align = "left" alt = "{$smarty.const._SHOWHIDE}" title = "{$smarty.const._SHOWHIDE}"/>
            <img id = "toggleSidebarImage" src = "images/others/blank.gif" onClick = "toggleSidebar('{$smarty.session.s_login}')" style = "position: absolute; top:4px; right: -1px; cursor: pointer; " align = "right" alt = "{$smarty.const._SHOWHIDE}" title = "{$smarty.const._SHOWHIDE}"/>
            {if ($smarty.session.s_type=='administrator')}
            <img id = "mainPageImage" src = "images/16x16/home.png" onClick = "top.mainframe.location='{$smarty.session.s_type}.php?ctg=control_panel'" style = "position: fixed; top:25px; left: 1000px; cursor: pointer; " align = "right" alt = "{$smarty.const._MAINPAGE}" title = "{$smarty.const._MAINPAGE}"/>
            {else}
            <img id = "mainPageImage" src = "images/16x16/home.png" {if ($smarty.session.s_lessons_ID!='')}onClick = "top.mainframe.location='{$smarty.session.s_type}.php?ctg=control_panel&lessons_ID={$smarty.session.s_lessons_ID}'"{/if} style = "{if ($smarty.session.s_lessons_ID=='')}filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;{/if}position: fixed; top:25px; left: 1000px; {if ($smarty.session.s_lessons_ID!='')}cursor: pointer; {/if}" align = "right" {if ($smarty.session.s_lessons_ID!='')}alt = "{$smarty.const._LESSONMAINPAGE}" title = "{$smarty.const._LESSONMAINPAGE}"{/if}/>
            {/if}
            <img id = "logoutImage" src = "images/16x16/exit.{$globalImageExtension}" onClick = "window.location='index.php?logout=true'" style = "position: fixed; top:45px; left: 1000px;cursor: pointer; " align = "right" {if ($smarty.session.s_lessons_ID!='')}alt = "{$smarty.const._LOGOUT}" title = "{$smarty.const._LOGOUT}"{/if}/>



            <script language = "JavaScript" type = "text/javascript">
                {literal}
            /*
                if (typeof(changeColorOnRefresh) != 'undefined') {
                    changeColorOnRefresh();
                }
            */
                initSidebar({/literal}'{$smarty.session.s_login}'{literal});          //initialization of sidebar according to cookie value

                $('userInfo').setStyle({left: -($('nameSurname').positionedOffset().left) + "px"});
                $('userInfo').setStyle({{/literal}{if $T_BROWSER == 'IE6'}width{else}minWidth{/if}{literal}: ($('tabmenu').getWidth()-30) + "px"});

                {/literal}
            {*
                {if isset($smarty.get.new_lesson_id)}
                    changeTDcolor('lesson_main');
                {else if $T_SB_CTG != ''}
                    changeTDcolor('{$T_SB_CTG}');
                {/if}
                *}

                {literal}
            fixCurtains();
                var menus = $('menu').childElements().length - 1; // we do not take "logout" into account

                for (i = 1 ; i <= menus; i++) {
                    $('listmenu'+i).setStyle({overflowY: 'auto'});
                }

                if(document.getElementById(active_id+"_a"))
                {
                       $(active_id+"_a").className = "selectedTopTitle";
                }

                {/literal}

            </script>


            <!--<script type = "text/javascript" src = "jsslashfiles/menu.js"></script> There is no that file any more....Why?-->
            <div id="dimmer" class = "dimmerDiv" style="display:none;"></div>
            <script>
            if (parent.frames[0].document.getElementById('dimmer')) parent.frames[0].document.getElementById('dimmer').style.display = 'none'


            </script>
            <input type="hidden" value="myhidden" id="hasLoaded" />
</body>
</html>