{*********************************************************
@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}website.css"/>
        <div id="messages"></div>
        {include file='overall_node_control_header.html' node=$node status=$node_status idListService='ListService' jsCloseDialog='reload_active_tabs'}
	    	    
	    <div id="tabs" style="float:left;height:100%; width:99%;margin:1px;">
		    <ul>
		        <li class="node-state"><a href="{$apache_path}/control_website.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'}
		    </ul>
	    </div>

        {include file='overall_node_control_footer.html'}
        <script type="text/javascript">
        /* <![CDATA[ */ {literal}

          $(function() {
            $( "#tabs" ).tabs({
            	heightStyle: "content",
              beforeLoad: function( event, ui ) {
	              	$('#esiaOverlay').show();
	              	$('#loadingGif').show();
			        return true;
                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();
		        },
            });
          });
	        function reload_active_tabs()
          	{
          		var current_index = $("#tabs").tabs("option","active");
          		$("#tabs").tabs('load',current_index);
          	}
            {/literal}
          </script>


    {include file='overall_footer.html'}
{elseif $tab =='servicestate'}
        {*Onglet par défaut*}


        <div style="position:relative;">
            <div class="bigFive" style="width:60%;height:470px">
                <div class="tableview_title">
                  {if isset($url_host)}
          			 	  <h1>{$lang.WEBSITE_VISUAL_REPRESENTATION} - {$url_host}</h1>
                  {/if}
          		</div>
                <div style="width:100%;height:420px;background: center / contain no-repeat url({$snap});background-position: center top;background-size:97%;background-repeat: no-repeat;">
                  <!-- <img src="{$snap}" style="object-fit: cover;object-position: center top;" width="99%" height="91%";>  -->
                  {if isset($url_iframe)}
                    <iframe id="inlineFrameExample"
						class="websiteIframe"
                        width="100%"
                        height="427"
                        src="{$url_iframe}">
                    </iframe>
                  {/if} 
                </div>
            </div>

				{strip}
        		<div class="bigFive tableview responseTimeTab" style="width:40%;height:470px">

          			<div class="tableview_title">
          			 	  <h1>{$lang.WEBSITE_RESPONSE_TIME}</h1>
          			</div>
					<div class="padMore">
						<div class="gaugeContainer" style="position:relative;">
		                    <div style="text-align: center; width:50%;position:relative; top:0; left:0;">
								<h1>HTTP</h1>
		                        <div id="gaugeHTTP"  ></div>
		                    </div>
		                    <div style="text-align: center; width:50%; position:absolute; top:0; right:0;">
								<h1>DNS</h1>
		                        <div id="gaugeDNS" ></div>
		                    </div>
		                </div>
		                {if isset($expires_in) && isset($services_state_certificat_exp)}
							<table class="tab certExp-tab">
								<tr>
									<td>{$lang.WEBSITE_CERTIFICATE_EXPIRATION_DATE}</td>
									<td class="{$certExpStateClass}">{$expires_in}</td>
								</tr>
							</table>
						{/if}
						{if $isQualys == true}
							<table class="display-qualys">
								<tr>
									<td class="display-qualys-title">Overall Rating</td>
									<td class="display-qualys-data" style="background-color: {$gradeColor};"> {$grade} </td>
								</tr>
								<tr>
									<td colspan="2" style="height:2px;"></td>
								</tr>
								<tr>
									<td class="display-qualys-title">Trusted</td>
									<td class="display-qualys-data" style="background-color: {$trustedColor};"> {$isTrusted} <br> {$isTrusted_values} </td>
								</tr>
								<tr>
									<td colspan="2" style="height:2px;"></td>
								</tr>
								<tr>
									<td class="display-qualys-title">Chain issues</td>
									<td class="display-qualys-data" style="background-color: {$ChainissuesColor};"> {$Chain_issues} </td>
								</tr>
							</table>
		                {/if}
					</div>
				</div>
				{/strip}
	        </div>


        <div id="Mwebsite_stats" class="small800">
        </div>
        <div id="screen_node"></div>



        <script type="text/javascript">
            /* <![CDATA[ */
            Utils.getServiceState({$node.id},'screen_node');
            /* ]]> */
        </script>

        <script type="text/javascript">
        function gauge_pm(data,bind,legend,min_g,max_g,couleur,pwidth,pheight,time) {
        	if(!pwidth){ pwidth="auto"; }
        	if(!pheight){ pheight=undefined; }

        	var chart = bb.generate({
        		bindto: '#'+bind,
        		data: {
        			columns: [[legend, 0]],
        			type:"gauge"
        			},
        		color: {
        			pattern: [couleur],
        			threshold: { values:[5]}
        			},
        		size: {
        		  height: pheight
        		},
        		gauge: {
        			label:{
        				format: function(value, ratio){
        					return value + ' s';
        				},
        			},
        			min: min_g,
        			max: max_g,
        			units: " "
        		},
        		legend: {
        			show: legend
        		},
        		tooltip: {
        			format: {
        				value: function (value, ratio, id) {
        					var format = d3.format(',');
        					return format(value);
        				}
        			}
        		}
        	});
          setTimeout(function () {
        	    chart.load({
        	    	columns: [[legend,data]]
        	    });
        	}, time);

          }
          // gauge_pm(1.2,"gaugeHTTP","http",0,5,"#83bc00");
          // gauge_pm(0.4,"gaugeDNS","dns",0,5,"#83bc00");
          {if isset($services_state_http)&&isset($services_state_dns)&&isset($tmp_rep_http)&&isset($tmp_rep_dns)}
              if({$services_state_http}==0)
              {
                  gauge_pm({$tmp_rep_http},"gaugeHTTP","http",0,5,"#83bc00",140,150);
              }
              else if ({$services_state_http}==1)
              {
                  gauge_pm({$tmp_rep_http},"gaugeHTTP","http",0,5,"#ffcb1f",140,150);
              }
              else if ({$services_state_http}==2)
              {
                  gauge_pm({$tmp_rep_http},"gaugeHTTP","http",0,5,"#da002e",140,150);
              }


              if({$services_state_dns}==0)
              {
                  gauge_pm({$tmp_rep_dns},"gaugeDNS","dns",0,5,"#83bc00",140,150);
              }
              else if ({$services_state_dns}==1)
              {
                  gauge_pm({$tmp_rep_dns},"gaugeDNS","dns",0,5,"#ffcb1f",140,150);
              }
              else if ({$services_state_dns}==2)
              {
                  gauge_pm({$tmp_rep_dns},"gaugeDNS","dns",0,5,"#da002e",140,150);
              }
          {else}
              gauge_pm(0,"gaugeHTTP","http",0,5,"#da002e",140,150);
              gauge_pm(0,"gaugeDNS","dns",0,5,"#da002e",140,150);
          {/if}

        </script>
{/if}