{*********************************************************
@author:Julien George
@ email: j.george@esia-sa.com
**********************************************************}
<style type="text/css">
	@media all and (max-width: 1024px)
	{
		#server_info_tab
	    {
		display: none;
	    }

	}
</style>

<style>
 .ui-progressbar {
position: relative;
}
.progress-label {
position: absolute;
left: 0px;
width:100%;
text-align:center;
top: 4px;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
}

</style>

<div class="wmiDiv ">
	<div class="tableview_title">
		<h1>WMI</h1>
		<div class="pager">
			<ul class="triList">
				<li class="triElement">
					<span class="reduce panelToggle" href="#">
						Réduire
					</span>
				</li>
			</ul>
		</div>
	</div>
	<div class="tableview padMore2">
		<div class="tableview padMore2 tabInnerPadMore2" style="float:left; width:25%; min-height:270px; ">
			<div class="tableview_title"><h1 align="center">{$l_hardware} :</h1></div>
			<table class="ajax tab">
				<tr id="mb"><td>{$l_Motherboard} :</td><tr/>
				<tr id="cpu"><td>{$l_CPU} :</td><tr/>
				<tr id="ram"><td>{$l_RAM} :</td><tr/>
				<tr id="eth"><td>{$l_network} :</td><tr/>
			</table>
		</div>
		<div class="tableview padMore2 tabInnerPadMore2" style="float:left; width:25%; min-height:270px; ">
			<div class="tableview_title"><h1 align="center">{$l_partitions} :</h1></div>
			<table class="ajax tab">
				<tr id="part"/>
			</table>
		</div>
		<div class="tableview padMore2 tabInnerPadMore2" style="float:left; width:25%; min-height:270px; ">
			<div class="tableview_title"><h1 align="center">{$l_software} :</h1></div>
			<table class="ajax tab">
				<tr id="os"><td>{$l_OS} :</td></tr>
				<tr id="updates"><td>{$l_updates} :</td></tr>
				<tr id="security"><td>{$l_security} :</td></tr>
			</table>
		</div>
		<div class="tableview padMore2 tabInnerPadMore2" style="float:left; width:25%; min-height:270px; ">
			<div class="tableview_title"><h1 align="center">{$l_date} :</h1></div>
			<table class="ajax tab">
					<tr id="date"/>
			</table>
		</div>
		<div class="clear"></div>
	</div>
</div>
<div id="screen_node"></div>

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

$(function(){
	var node_id={$node_id};
{literal}

	$("table.ajax td").attr({"width":"1px"}).css({"white-space":"nowrap","font-weight":"bold"});

	$("table.ajax [id]").each(function(){
		//Affichage de la barre de progression
		$(this).append("<td><div/></td>");
		$(this).find("div").progressbar({value: false});
	});

	$("table.ajax tr").each(function(){
		//Chargement des données
		$(this).load('./wmi_widget.php', 'node_id='+node_id+'&mode='+ $(this).attr("id"),function( response, status, xhr ){
			if( status == "error"){
				 var msg = "Sorry but there was an error: ";
				 $( "#error" ).html( msg + xhr.status + " " + xhr.statusText );
			}
			else{
				//Remplace les anciennes données par les nouvelles
				var childs=$(this).children();
				$(this).after(childs);
				$(this).remove();

				childs.find("td:first").attr({"width":"1px"}).css({"white-space":"nowrap","font-weight":"bold"});
				childs.find("td.bar").each(function(){ //On remplace le texte par une barre pour les classes "bar"
					//Initialisation des variables
					var val=parseInt($(this).text());
					var color=$(this).find(".color").text();

					//Création de la barre
					$(this).empty();
					$(this).append('<div><div class="progress-label"></div></div>');
					$(this).find(".progress-label").text(" "+val+"%");

					$(this).children().progressbar({value: val});

					//Gestion de la couleur de la barre
					if( color != null ){
					var regexp = new RegExp(".*\.png|\.jpg|\.gif$");
					if (regexp.test(color))     {
						$(this).find(".ui-progressbar-value" ).css({"background-image":"url("+color+")","background-repeat":"repeat"});
					}
					else $(this).find(".ui-progressbar-value" ).css({"background": color} );
					}
				});
				childs.find("td.textbar").each(function(){ //On remplace le texte par une barre pour les classes "bar"
					//Initialisation des variables
					var color=$(this).find(".color").text();
					$(this).find(".color").empty();
					var text=$(this).text();

					//Création de la barre
					$(this).empty();
					$(this).append('<div><div class="progress-label"></div></div>');
					$(this).find(".progress-label").text(text);

					$(this).children().progressbar({value: 100});

					//Gestion de la couleur de la barre
					if( color != null ){
					var regexp = new RegExp(".*\.png|\.jpg|\.gif$");
					if (regexp.test(color))     {
						$(this).find(".ui-progressbar-value" ).css({"background-image":"url("+color+")","background-repeat":"repeat"});
					}
					else $(this).find(".ui-progressbar-value" ).css({"background": color} );
					}

					 //Eviter bug d'affichage des barres qui se produit parfois quand on reviens sur la page Etats des services
					$(this).find(".progress-label").css("width",$(this).children().css("width"));//La valeur 99% doit être différence de celle d'origine 100%
				});
			}
		});
	});
});

{/literal}

</script>

<p class="footer hideDEV">{$l_srv_page_exe} {$execute_time}{$l_srv_page_exe_time}.</p>