{********************************************************* 
@author:Julien George
@ email: j.george@esia-sa.com
**********************************************************} 
{if $tab == ''}
	<div id="flowtabs" style="float:left;height:100%; width:99%;margin:1px;">
		<ul>
		    <li class="node-flow-channel-conf small800">
		        <a href="{$apache_path}/adv_tab_flows.php?nodeid={$node.id}&amp;tab=flows" class="menutabs">	
				{$lang.FLOWS_FLOWS}
			    </a>
			</li>
		    <li class="node-flow-collector-conf"><a href="{$apache_path}/control_syslog.php?nodeid={$node.id}&amp;tab=servicestate" class="menutabs">
		    	{$lang.FLOWS_COLLECTORS}</a>
		    </li>   
		</ul>
	</div> 
    <script type="text/javascript">
    /* <![CDATA[ */ {literal}

      $(function() {
        $( "#flowtabs" ).tabs({
        	heightStyle: "content",
          beforeLoad: function( event, ui ) {
	          	$('#esiaOverlay').show();
	          	$('#loadingGif').show();
            ui.jqXHR.fail(function() {
              ui.panel.html(
                "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                "If this wouldn't be a demo." );
	          	$('#esiaOverlay').hide();
	          	$('#loadingGif').hide();
            });
          },
          load: function (event, ui){
	          	$('#esiaOverlay').hide();
	          	$('#loadingGif').hide();
			    if(ui.panel.find("#page_login_detect").length > 0) location.reload();
		    },
        });
      });
        {/literal} 
      </script>
{elseif $tab == 'flows'}
	<link rel="stylesheet" type="text/css" href="{$apache_path}flows.css"/>
    <div class="tableview_title tabHeader">
        <script type="text/javascript" src="/theme/default/inc/common_ts.js"></script>
        <link href="/theme/default/inc/common_ts.css" rel="stylesheet" />
         <div id="Channelflows_request_error" style="display:none"></div>
        <div id="channel_stats" class="small800">
            <div id="debug"></div>
            <p class="infoHelp">{$lang.FLOWS_SRV_INFORMATION} {$server.name}</p>
            <div style="margin-top:15px;background: white">
                    <div class="tableview_title"><h1>{$lang.FLOWS_TOP10_PORT}</h1></div>
                    	<div id="ChannelflowTimeControl">
                    		<button type="button"  data-select="15min">15 {$lang.MINUTE}</button>
                    		<button data-select="1h">1 {$lang.HOUR}</button>
                    		<button data-select="6h">6 {$lang.HOUR}</button>
                    		<button class="active" data-select="1d">1 {$lang.DAY}</button>
                    		<button data-select="7d">7 {$lang.DAYS}</button>
                    		<button data-select="30d">1 {$lang.MONTH}</button>
                    	</div>
                <div class="bigFive small800" style="width:48%;">
                    <div class="tableview_title"><h1>{$lang.FLOWS_TOP10_PORT}</h1></div>
                    <div class="nodeViewInnerFlows"> 
                    	<div id="ChannelPortDirectionControl">
                    	    {$lang.FLOWS_DIRECTION}
                    		<button class="active" data-select=all>{$lang.FLOWS_DIRECTION_ALL}</button>
                    		<button data-select="upload">{$lang.FLOWS_DIRECTION_UPLOAD}</button>
                    		<button data-select="download">{$lang.FLOWS_DIRECTION_DOWNLOAD}</button>
                    	</div> 
                    	<div class="clear"></div>
	                    <div id="ChannelTopPort"></div>
                    </div>
                </div>

                <div id="ChannelflowsPerDay" class="bigFive small800" style="width:48%;">
                    <div class="tableview_title"><h1>{$lang.FLOWS_TOP_10}</h1></div>
                    <div class="nodeViewInnerFlows">
                    	<div id="ChannelflowSourceControl">
						    {$lang.FLOWS_IP}
                    		<button type="button" class="active" data-select=all>{$lang.FLOWS_IP_ALL}</button>
                    		<button type="button" data-select="lan">{$lang.FLOWS_IP_PRIVATE}</button>
                    		<button type="button" data-select="public">{$lang.FLOWS_IP_PUBLIC}</button>
                    	</div> 
                    	<div id="ChannelflowDirectionControl">
                    	    {$lang.FLOWS_DIRECTION}
                    		<button class="active" data-select=all>{$lang.FLOWS_DIRECTION_ALL}</button>
                    		<button data-select="upload">{$lang.FLOWS_DIRECTION_UPLOAD}</button>
                    		<button data-select="download">{$lang.FLOWS_DIRECTION_DOWNLOAD}</button>
                    	</div> 
                    	<div class="clear"></div>
                         <div id="ChannelflowsTopIP"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="clear"></div>
        <script type="text/javascript">
            /* <![CDATA[ */
            var url = "{$apache_flows_path}display_flows.php?nodeid={$server.id}&channel={$channel}";
            {literal}
            var charttop;
            var chartporttop;
            function loadClick(id)
            {
    			$(id+" button").on('click', function()
    			{
    						if(!$(this).hasClass('active')) 
    						{

    							$(id+" button.active").removeClass('active');
    							$(this).addClass('active');
    							loadGraph();
    						}
    			});
            }
            loadClick('#ChannelflowTimeControl');
            loadClick('#ChannelflowSourceControl');
            loadClick('#ChannelflowDirectionControl');
            loadTopPort();
            function loadTopPort()
            {
    			var time= $('#ChannelflowTimeControl button.active').data("select");
				$.get(url+"&show=topport&time="+time).done(function( data )
		        {
					data = JSON.parse(data);
		            if('error' in data)
		            {
		                $('#Channelflows_request_error .EventCritical').html(data.error);
		                $('#Channelflows_request_error').show();
		                return 0;
		            }
        			if(chartporttop)
        			{
					    chartporttop.flush();
            		}
		            chartporttop = bb.generate({
                        bindto: '#ChannelTopPort',
                        data: {
                            type : 'bar',
                            json: data
                        },
                        size: {
                            height: 300
                        },
                        axis: 
                        {
                            rotated: true,
                            y : 
                            {
                                tick: 
                                {
                                      format: function(x) { return d3.format("~s")(x); }
                                }
                            }
                        },
                        tooltip: 
                        {
                			format:
                			{
                				value: function (value, ratio, id) 
                				{
                					value = Utils.convertByte(value);
                					return value+'B';
                				}
                			}
                        },
                        grid: 
                        {
                            y: 
                            {
                                show: false
                            }
                        }
                    }); 
        		});
            }
        	function loadGraph()
        	{
    			var time= $('#ChannelflowTimeControl button.active').data("select");
    			var source= $('#ChannelflowSourceControl button.active').data("select");
    			var dir= $('#ChannelflowDirectionControl button.active').data("select");
    			var finalurl = url+"&show=topip&time="+time+"&ip="+source+"&direction="+dir;
    			if(charttop)
    			{
					charttop.flush();
        		}
				$.get(finalurl ).done(function( data )
        		{
					data = JSON.parse(data);
		            if('error' in data)
		            {
		                $('#Channelflows_request_error .EventCritical').html(data.error);
		                $('#Channelflows_request_error').show();
		                return 0;
		            }
		            if('collector_state' in data)
					{
						if(data.collector_state.ok != 0)
						{
							$('#ChannelcollectorState .EventOK').text(data.collector_state.ok);
							$('#ChannelcollectorState .EventOK').removeClass("EventDisable");
						}
						if(data.collector_state.warning != 0)
						{
							$('#ChannelcollectorState .EventWarning').text(data.collector_state.warning);
							$('#ChannelcollectorState .EventWarning').removeClass("EventDisable");
						}
						if(data.collector_state.critical != 0)
						{
							$('#ChannelcollectorState .EventCritical').text(data.collector_state.critical);
							$('#ChannelcollectorState .EventCritical').removeClass("EventDisable");
						}
						if(data.collector_state.unknown != 0)
						{
							$('#ChannelcollectorState .EventUnknown').text(data.collector_state.unknown);
							$('#ChannelcollectorState .EventUnknown').removeClass("EventDisable");
						}
						
					}
					charttop = bb.generate({
                        bindto: '#ChannelflowsTopIP',
                        data: {
                            type : 'bar',
                            columns: data.topip.data,
                        },
                        size: {
                            height: 300
                        },
                        axis: 
                        {
                            rotated: true,
                            y : 
                            {
                                tick: 
                                {
		      						      format: function(d) 
		      						      {
												value = Utils.convertByte(d);
												return value+'B';	
		      						      },
                                }
                            }
                        },
                        tooltip: 
                        {
                			format:
                			{
                				value: function (value, ratio, id) 
                				{
                					value = Utils.convertByte(value);
                					return value+'B';
                				}
                			}
                        },
                        grid: 
                        {
                            y: 
                            {
                                show: false
                            }
                        }
                    }); 
        		});
        	}
			loadGraph();
            {/literal}
            /* ]]> */
        </script>    
{/if}