{*********************************************************
@author:Julien George
@ email: j.george@esia-sa.com
**********************************************************}
{if $tab eq ''}
    {include file='overall_header.html'}
    <link rel="stylesheet" type="text/css" href="{$apache_path}o365.css"/>
    <div id="messages"></div>
    {include file='overall_node_control_header.html' node=$node status=$node_status idListService='ListService' jsCloseDialog="Utils.reload_active_tabs('#tabs')"}
	<div id="tabs" style="float:left;height:100%; width:99%;margin:1px;">
		<ul>
		    <li class="node-state"><a href="{$apache_path}/control_365.php?nodeid={$node.id}&amp;tab=servicestate" class="menutabs">
		    	{$lang.SHOW_SERVICE}</a>
		    </li>
			{include file="overall_node_control_header.html" node=$node default_tab="on"}
		    <li class="mailbox-icn small800">
		        <a href="{$apache_path}/control_365.php?nodeid={$node.id}&amp;tab=users" class="menutabs">
				{$lang.365_EXCHANGE_MAILBOX}
			    </a>
			</li>
		    <li class="mailclient-icn small800">
		        <a href="{$apache_path}/control_365.php?nodeid={$node.id}&amp;tab=appusage" class="menutabs">
				{$lang.365_EXCHANGE_APPS}
			    </a>
			</li>
		</ul>
	</div>
    {include file='overall_node_control_footer.html'}
	<script type="text/javascript">
	{literal}
		Utils.setTabs('#tabs');
	{/literal}
	</script>
    {include file='overall_footer.html'}
{elseif $tab =='users'}
        {if isset($error365)}
            <p class="EventCritical">ERROR <br />{$error365}</p>
        {/if}
		    <!-- load month, weekday and two digit year parsers -->
		    <script type="text/javascript" src="/libs/js/tablesorter/js/parsers/parser-date-month.min.js"></script>
		    <script type="text/javascript" src="/libs/js/tablesorter/js/parsers/parser-date-weekday.min.js"></script>
		    <script type="text/javascript" src="/libs/js/tablesorter/js/parsers/parser-date-two-digit-year.min.js"></script>
        <table class="tab" id="FileStatTable">
            <thead>
                <tr>
                    <th>{$lang.365_EXCHANGE_MAILBOX}</th>
                    <th>{$lang.365_EXCHANGE_MAILBOX_DESCRIPTION}</th>
                    <th class="sorter-ddmmyy" style="white-space: nowrap; width: 200px;">{$lang.365_EXCHANGE_DATE_CONNECT}</th>
                    <th>{$lang.365_EXCHANGE_MAILBOX_ELEM_COUNT}</th>
                    <th>{$lang.365_EXCHANGE_MAILBOX_ELEM_DELETE}</th>
                    <th>{$lang.365_EXCHANGE_MAILBOX_SIZE}</th>
                    <th>{$lang.365_EXCHANGE_MAILBOX_QUOTA_WARNING}</th>
                    <th>{$lang.365_EXCHANGE_MAILBOX_QUOTA_BLOCK}</th>
                    <th>{$lang.365_EXCHANGE_EMAIL_STORAGE_PERCENT}</th>
                </tr>
            </thead>
            <tbody>

            {foreach name=outer item=box key=$key from=$mailbox}
                <tr>
                    <td>{$box.name}</td>
                    <td>{$box.description}</td>
                    <td>{$box.last_activity}</td>
                    <td>{$box.elem_count}</td>
                    <td>{$box.elem_delete}</td>
	                <td data-text="{$box.used}">{$box.usedPretty}</td>
	                <td data-text="{$box.quota_warning}">{$box.quota_warning_pretty}</td>
	                <td data-text="{$box.quota_block}">{$box.quota_block_pretty}</td>
				    <td data-text="{$box.usedpercent}">
						{eui_bars_percentbar value=$box.usedpercent state=$box.state}
                    </td>
			    </tr>
		    {/foreach}
	        </tbody>
        </table>
		    <script type="text/javascript">
	    <!--
	    {literal}
	        Utils.createTable("#FileStatTable");
	      //-->
	      </script>
	    {/literal}
{elseif $tab =='appusage'}
        {if isset($error365)}
            <p class="EventCritical">ERROR <br />{$error365}</p>
        {/if}
    <div id="M365_exchange_client_stats" class="small800" style="width:100%;">
        <div id="M365_exchange_os_stats" class="small800">
            <div id="ExchangeAppOS" class="bigFive small800" style="width:20%;">
                <div class="tableview_title"><h1>{$lang.365_EXCHANGE_APPS_BY_OS}</h1></div>
                <div class="nodeViewInner365OSStats">
                    <div id="ExchangeOSChart"></div>
                </div>
            </div>
        </div>
        <div id="M365_exchange_app_connect_stat" class="small800">
            <div id="ExchangeAppOS" class="bigFive small800" style="width:58%;">
                <div class="tableview_title"><h1>{$lang.365_EXCHANGE_APPS_BY_OS}</h1></div>
                <div class="nodeViewInner365OSStats">
                    <div id="ExchangeAPPConnectChart"></div>
                </div>
            </div>
        </div>
        <div id="M365_exchange_app_type_stat" class="small800">
            <div id="ExchangeAppType" class="bigFive small800" style="width:20%;">
                <div class="tableview_title"><h1>{$lang.365_EXCHANGE_APPS_BY_TYPE}</h1></div>
                <div class="nodeViewInner365OSStats">
                    <div id="ExchangeAPPChart"></div>
                </div>
            </div>
        </div>
    </div>
        <div style="clear:both;"></div>
	    <!-- load month, weekday and two digit year parsers -->
		    <script type="text/javascript" src="/libs/js/tablesorter/js/parsers/parser-date-month.min.js"></script>
		    <script type="text/javascript" src="/libs/js/tablesorter/js/parsers/parser-date-weekday.min.js"></script>
		    <script type="text/javascript" src="/libs/js/tablesorter/js/parsers/parser-date-two-digit-year.min.js"></script>
        <div class="tableview_title tabHeader">
			<h1>{$lang.365_EXCHANGE_APPS_STATISTIC}</h1>
        <table class="tab" id="AppStatTable">
            <thead>
                <tr>
                    <th class="sorter-ddmmyy" style="width:110px;">{$lang.365_DATE}</th>
                    <th>{$lang.365_EXCHANGE_APP_WINDOWS_OUTLOOK}</th>
                    <th>{$lang.365_EXCHANGE_APP_MAC_OUTLOOK}</th>
                    <th>{$lang.365_EXCHANGE_APP_MAC_MAIL}</th>
                    <th>{$lang.365_EXCHANGE_APP_MOBILE_OUTLOOK}</th>
                    <th>{$lang.365_EXCHANGE_APP_MOBILE}</th>
                    <th>{$lang.365_EXCHANGE_APP_WEB}</th>
                    <th>{$lang.365_EXCHANGE_APP_POP}</th>
                    <th>{$lang.365_EXCHANGE_APP_IMAP}</th>
                    <th>{$lang.365_EXCHANGE_APP_SMTP}</th>
                </tr>
            </thead>
            <tbody>
            {foreach name=outer item=app key=$key from=$ts_appusage}
                <tr>
                    <td>{$app.date}</td>
                    <td>{$app.windows_outlook}</td>
                    <td>{$app.mac_outlook}</td>
                    <td>{$app.mac_mail}</td>
                    <td>{$app.mobile_outlook}</td>
                    <td>{$app.mobile_other}</td>
                    <td>{$app.web_outlook}</td>
                    <td>{$app.app_pop3}</td>
                    <td>{$app.app_imap}</td>
                    <td>{$app.app_smtp}</td>
			    </tr>
		    {/foreach}
	        </tbody>
        </table>
        </div>
		<script type="text/javascript">
			var chart_appos = {$chart_appos};
			var chart_apps = {$chart_apps};
			var chart_apps_line = {$chart_apps_line};

			{literal}
	        Utils.createTable("#AppStatTable");
			var osData = [];
			for(var key in chart_appos)
			{
				osData.push([key, chart_appos[key]]);
			}
            var chartOS = bb.generate({
                    bindto: '#ExchangeOSChart',
                    size: {
                        height: 200,
                    },
                    data: {
                        columns: osData,
                        type: 'donut'
                    },
                    legend: {
                       show: true,
                       position: 'right'
                    }
                });
			var appData = [];
			for(var key in chart_apps)
			{
				appData.push([key, chart_apps[key]]);
			}
            var chartAPP = bb.generate({
                    bindto: '#ExchangeAPPChart',
                    size: {
                        height: 200,
                    },
                    data: {
                        columns: appData,
                        type: 'pie'
                    },
                    legend: {
                       show: true,
                       position: 'right'
                    }
                });
            var chartAPPConnect = bb.generate({
                    bindto: '#ExchangeAPPConnectChart',
                    size: {
                        height: 200,
                    },
                    data: {
                        x: 'x',
                        json: chart_apps_line,
                    },
                    padding: {
                            left: 50,
                            right: 22,
                        },
                    legend: {
                                position: 'bottom',
                            },
                    axis: {
                        x: {
                            type: 'timeseries',
                            tick: {format: '%d-%m-%Y'}
                        },
                        y: {
                            show: true,
						    label: {
						    	position:"outer-middle"
						    }
                        }
                    }
                });
			{/literal}
		</script>
{elseif $tab =='servicestate'}
    <p id="365_request_error" class="EventCritical" style="display:none"></p>
    <div id="M365_stats" class="small800">
        <div id="debug"></div>
        <div id="ExchangeStatistic" class="bigFive small800" style="width:25%;">
            <div class="tableview_title"><h1>{$lang.365_SHAREPOINT_STATISTIC}</h1></div>
            <div class="nodeViewInner365Stats">
            <table class="tab365">
                <tr>
                    <td>{$lang.365_EXCHANGE_STATISTIC_DATE}</td>
                    <td id="ms365_exchangeDate"></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <h2>{$lang.365_EXCHANGE_ACCOUNT_ACTIVE}</h2>
                        <div id="ExchangeCountChart"></div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <h2>{$lang.365_EXCHANGE_STATISTIC_STORAGE}</h2>
                        <div id="ExchangeStorageChart"></div>
                    </td>
                </tr>
            </table>
            </div>
        </div>
        <div id="exchangeSendStatistic" class="bigFive small800" style="width:40%;">
                <div class="tableview_title"><h1>{$lang.365_EXCHANGE_GRAPH_SEND}</h1></div>
                <div class="nodeViewInner365">
                    <div id="ExchangeChart"></div>
                </div>
        </div>
        <div id="mailboxStatistic" class="bigFive small800" style="width:35%;">
                <div class="tableview_title"><h1>{$lang.365_EXCHANGE_TOP_USER}</h1></div>
                <div class="nodeViewInner365" style="overflow-y:scroll;">
                    <table id="mailTopStorageUsed" class="tab ui-widget-content">
                    <thead>
                        <th>{$lang.365_EXCHANGE_EMAIL}</th>
                        <th>{$lang.365_EXCHANGE_EMAIL_STORAGE}</th>
                        <th>{$lang.365_EXCHANGE_EMAIL_STORAGE_PERCENT}</th>
                    </thead>
                    <tbody></tbody>
                    </table>
                </div>
        </div>
    </div>
    <div id="screen_node"></div>
    <script type="text/javascript">
        /* <![CDATA[ */
        Utils.getServiceState({$node.id},'screen_node');
        var url = "/plugin/office365/display_365.php?nodeid={$node.id}";
        {literal}
        function createLine(id,item)
        {
                var tr = $('<tr></tr>');
                var td = $('<td>'+item.name+'</td>');
                tr.append(td);
                td = $('<td>'+item.usedPretty+'</td>');
                tr.append(td);
                td = $('<td>'+item.usedpercent+' %</td>');
                if(item.state == 'CRITICAL')
                {
                    td.addClass('Event365Critical');
                }
                else if(item.state == 'WARNING')
                {
                    td.addClass('Event365Warning');
                }
                else
                {
                    td.addClass('Event365OK');
                }
                tr.append(td);
                $('#'+id+' tbody').append(tr);
        }
        $.get( url+"&show=exchange" ).done(function( data )
        {
                data = JSON.parse(data);
                if('error' in data)
                {
                    $('#365_request_error').html(data.error);
                    $('#365_request_error').show();
                    return 0;
                }
                if('count' in data)
                {
                        p = $('<p>'+data.count.date+'</p>');
                        $('#ms365_exchangeDate').append(p);
                }
                data.mailboxusage.forEach( function(item,index) {createLine('mailTopStorageUsed',item);});
                var chartsev = bb.generate({
                    bindto: '#ExchangeChart',
                    size: {
                        height: 340,
                    },
                    padding: {
                            left: 45,
                            right: 22,
                        },
                    data: {
                        x: 'x',
                        json: data.activity,
                        type: 'bar'
                    },
                    bar: {
                        width: {
                            ratio: 0.8 // this makes bar width 50% of length between ticks
                        }
                    },
                    legend: {
                       show: true,
                    },
                    axis: {
                        x: {
                            type: 'timeseries',
                            tick: {format: '%d-%m-%Y'}
                        },
                    }
                });
                var tresh_warning = Math.round((data.count.total/100)*90);
                var tresh_error = Math.round((data.count.total/100)*95);
                var chartusage = bb.generate({
                            bindto: '#ExchangeCountChart',
                            size: {
                                height: 110,
                            },
                            data: {
                                type : 'gauge',
                                columns: [['active', data.count.active]],
                            },
                            legend: {
                                position: 'bottom'
                            },
                            gauge:
                            {
                                max: data.count.total,
                                label:
                                {
                                    format: function (value, ratio, id)
                                    {
                                        return value+' / '+data.count.total;
                                    }
                                }
                            },
                            color:
                            {
                                pattern: ['#83BC00', '#FFCB1F', '#FF9900'],
                                threshold: { values: [tresh_warning, tresh_error]}
                            }
                });
                var chartsto = bb.generate({
                    bindto: '#ExchangeStorageChart',
                    size: {
                        height: 170,
                    },
                    data: {
                        x: 'x',
                        json: data.storage,
                    },
                    padding: {
                            left: 50,
                            right: 22,
                        },
                    legend: {
                                show: false,
                                position: 'top',
                            },
                    axis: {
                        x: {
                            type: 'timeseries',
                            tick: {format: '%d-%m-%Y'}
                        },
                        y: {
                            show: true,
						    label: {
						    	position:"outer-middle"
						    },
						    tick: {
						      format: function(d)
						      {
						      		return Utils.convertByte(d);
						      }
                            }
                        }
                    }
                });
        });
        {/literal}
        /* ]]> */
    </script>
{/if}