{# Access to menu features must be defined at user`s profile.
		   There are 2 branches with completely different set of menus: 
		   1) Top company user
		   2) Customer`s user
		   THIS PART IS FOR 1) TOP COMPANY USER
	#}

<div class="top_main">
	<div class="top_login">
		<a href="logout" id = "mnu_logout" class="easyui-linkbutton" data-options="iconCls:'icon-logout'">Logout</a>
	</div>
    <div class="top_logo">
		<img src="{{ asset('bundles/acmesosmon/images/logo.png') }}">
	</div>	
	<div class="top_center">	
		<div class="top_info">
			{{ username }} 
		</div>
	
		<div style="display:inline-block; width:600px">
			<a href="#" id = "mnu_reports"   class="easyui-menubutton" data-options="menu:'#mm20'">Reports</a>
			<a href="#" id = "mnu_admin"     class="easyui-menubutton" data-options="menu:'#mm21'">Admin</a>
			<a href="#" id = "mnu_support"   class="easyui-linkbutton" data-options="plain:true">Support</a>
			
			<div id="mm20"  style="width:200px;">
				<div data-options="name:'stationsrep'">Billable Systems</div>
				<div data-options="name:'a_historylog'">History log</div>
				<div data-options="name:'summarypage'">Usage summary</div>	
				<div data-options="name:'calllog'">Call log</div>	
				<div data-options="name:'billing'">Billing</div>	
				<div data-options="name:'batteries'">Battery stats</div>
				<div data-options="name:'extstatus'">Systems extended status</div>				

			</div>
			<div id="mm21"  style="width:200px;">	
				<div data-options="name:'a_actlog'">Activity log</div>
				<div data-options="name:'rawdata'">Raw data</div>
				<div data-options="name:'testmail'">Test mail</div>				
			</div>		
		</div>			
	</div>
</div>	
<script>
			
	jQuery(function($){		

		var ddlMenu20 = $('#mnu_reports').menubutton({ menu: '#mm20' }); 
		$(ddlMenu20.menubutton('options').menu).menu({ 
			onClick: function (item) {
				switch(item.name) {	
				case 'stationsrep':
					add_page('Billable Systems', 'app/billablesystems/{{ companyid }}', true);
					break;					
				case 'a_historylog':
					add_page('History log', 'app/historylog/{{ companyid }}', true);
					break;	
				case 'summarypage':
					add_page('Usage summary', 'app/summarypage/{{ companyid }}', true);
					break;	
				case 'calllog':
					add_page('Call log', 'app/calllog/{{ companyid }}', true);
					break;
				case 'billing':
					add_page('Billing', 'app/billing/{{ companyid }}', true);
					break;
				case 'batteries':
					add_page('Battery stats', 'app/batteries/{{ companyid }}', true);
					break;					
				case 'extstatus':
					add_page('Extended status', 'app/extstatus/{{ companyid }}', true);
					break;					
				}		
			} 
		});	
		var ddlMenu21 = $('#mnu_admin').menubutton({ menu: '#mm21' }); 
		$(ddlMenu21.menubutton('options').menu).menu({ 
			onClick: function (item) {
				switch(item.name) {					
				case 'a_actlog':
					add_page('Act log', 'app/actlog/{{ companyid }}', true);
					break;		
				case 'rawdata':
					add_page('Raw data', 'app/raws', true);
					break;	
				case 'testmail':
				
					$.messager.prompt('Target email', 'Please enter valid email to test mail sending', function(r){
						if (r){			
				
							$.ajax({
								type: "GET",
								url: 'app/testmail/'+r,
								dataType: "json",
								success: function(data) {	
									console.log('mail:', data);
								}	
							});					
						}
					});	
							
					break;					
				}				
			} 
		});						
	});		
	
</script>