<table id="main">
  <tr>
    <td>
      <table>
        <tr>
          <td>
            <table>
              <tr>
                <td id="banner">
                  <div id="login_form">
                    <form method="post" action="<easy-cms:value type="page" />" onsubmit="javascript:this.password.value=hex_md5(document.getElementById('v_password').value);document.getElementById('v_password').value = '';return true;">
                    <table>
                      <tr>
                        <td class="form_field">username:</td>
                        <td><input class="edit" size="11" type="text" name="login" /></td>
                      </tr>
                      <tr>
                        <td class="form_field">password:</td>
                        <td><input class="edit" size="11" type="password" id="v_password" /></td>
                      </tr>
                      <tr>
                        <td class="form_field"></td>
                        <td><input class="button" type="submit" value="LOGIN" /></td>
                      </tr>
                    </table>
                    <input type="hidden" name="action" value="login" />
                    <input type="hidden" name="password" value="" />
                    </form>
									</div>
                  <div id="flags">
                    <a href="index.php?lid=1"><img border="0" src="Repositories/Images/flags/en.png" /></a>&nbsp;<a href="index.php?lid=2"><img border="0" src="Repositories/Images/flags/fr.png" /></a>
                  </div>
                </td>
              </tr>
              <tr>
                  <td>
                    <table id="top_menu_area">
                      <tr>
                        <td><easy-cms:container id="top_menu" type="simple_link" template="horiz_menu" sortfield="index" border="no" static="yes" /></td>
                        <td class="controls"><easy-cms:container_controls id="top_menu" type="simple_link" template="horiz_menu" sortfield="index" static="yes" /></td>
                      </tr>
                    </table>
                  </td>
              </tr>
              <tr>
                <td>
                  <table>
                    <tr>
                      <td id="left_area">
                        <table width="100%">
                          <tr>
                            <td>
                              <easy-cms:menu id="left_menu" template="left_menu" sortfield="id" border="yes" />
                            </td>
                          </tr>
                        </table>
                      </td>
                      <td id="content_pane">
				                <easy-cms:containersList id="content" sortfield="index" border="yes" />
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
          <td id="right_shadow"></td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      <table>
          <tr>
              <td id="bottom_shadow"></td>
              <td id="bottom_right_shadow"></td>
          </tr>
      <table>
    </td>
  </tr>
</table>


<easy-cms:ifUserLoggedIn>
<div id="easy_cms_menu">
	<div id="menuGlider">
	  <div class="scroller">
	    <div class="content">
				<div class="section" id="section1" style="background-color: #eeecdc; padding-left: 10px;">
						User : <easy-cms:value type="username" />&nbsp;<easy-cms:ifMode mode="edit"><span style="vertical-align: middle;"><easy-cms:user_controls /></span></easy-cms:ifMode>
					  (<a href="<easy-cms:action type="logon" />"><easy-cms:value type="logon" /></a>)
					  &nbsp;|&nbsp;
						Current page : <easy-cms:value type="pagename" />&nbsp;<easy-cms:ifMode mode="edit"><span style="vertical-align: middle;"><easy-cms:page_controls /></span></easy-cms:ifMode>
						&nbsp;|&nbsp;
						<a href="<easy-cms:action type="mode" />">switch to <easy-cms:value type="mode" /> mode</a>
					  &nbsp;|&nbsp;
					  <easy-cms:ifMode mode="edit">
							<a href="<easy-cms:action type="admin" />"><img style="vertical-align: middle;" src="interface/icons/icon_admin.png" border="0" />go to administration panel</a>
					  </easy-cms:ifMode>
		    </div>
		    <div class="section" id="section2">
		       <div style="cursor: pointer;" onclick="javascript:menuGlider.next();switchArrow();"><img id="arrow_img" src="includes/images/left_arrow.png" border="0" /></div>
		    </div>
	    </div>
	  </div>
	</div>
</div>
<script type="text/javascript" charset="utf-8">
	var menuGlider = new Glider('menuGlider', {duration:0.25});

	function stretch() {
		var contentOffsetWidth = document.getElementById('menuGlider').offsetWidth;
		document.getElementById('section1').style.width = (contentOffsetWidth-32) + 'px';
		document.getElementById('section1').style.display = 'block';
		document.getElementById('section2').style.display = 'block';
	}

	function switchArrow() {
		var imgArrow = document.getElementById('arrow_img').src;
		if(imgArrow.indexOf('right') >= 0) {
			imgArrow = imgArrow.replace('right','left');
		}
		else {
			imgArrow = imgArrow.replace('left','right');
		}
		document.getElementById('arrow_img').src = imgArrow;
	}

	window.onload = stretch;
</script>
</easy-cms:ifUserLoggedIn>

