{if $action!='getInfoDonut'}
	{include file='./overall_widget.html'}
{/if}
{if $action=='update'}
	{include file='overall_adm_iframe.html'}
	<form method="post" action="{$widget.path}&action=update" id="formWidget">
		<input type="hidden" id="widgetid" name="widgetid" value="{$widget.id}"/>
		<div class="typeToAdd">
			<div class="tableview_title">
				<h1>{$lang.ADM_PLUGIN_TYPE}</h1>
			</div>
			<div class="tableview">
				<div class="chooseType padMore">
					<div class="dashboard_select_type">
						<div>
							<label class="dashboard_widget widget_group_state type_table" for="table">
							<span>{$lang.TABLE}</span>
							<input type="radio" {if $type=='table'}checked="checked"{/if} id="table" onclick="selectType()" name="type" value="table"> </label>
						</div>
					</div>
					<div class="dashboard_select_type">
						<div>
							<label class="dashboard_widget widget_group_state type_ring" for="ring">
							<span>{$lang.RING}</span>
							<input type="radio" {if $type=='ring'}checked="checked"{/if} id="ring" onclick="selectType()" name="type" value="ring"> </label>
						</div>
					</div>
					<div class="dashboard_select_type">
						<div>
							<label class="dashboard_widget widget_group_state type_square" for="square">
							<span>{$lang.SQUARE}</span>
							<input type="radio" {if $type=='square'}checked="checked"{/if} id="square" onclick="selectType()" name="type" value="square"> </label>
						</div>
					</div>
					<div class="dashboard_select_type">
						<div>
							<label class="dashboard_widget widget_group_state type_donut" for="donut">
							<span>{$lang.DONUTS}</span>
							<input type="radio" {if $type=='donut'}checked="checked"{/if} id="donut" onclick="selectType()" name="type" value="donut"> </label>
						</div>
					</div>
					<div class="dashboard_select_type">
						<div>
							<label class="dashboard_widget widget_group_state type_pie" for="pie">
							<span>{$lang.PIE}</span>
							<input type="radio" {if $type=='pie'}checked="checked"{/if} id="pie" onclick="selectType()" name="type" value="pie"> </label>
						</div>
					</div>
					<div class="clear"></div>
				</div>
			</div>
		</div>
		<div class="exampleRendered">
			<div class="tableview_title">
				<h1>{$lang.EXAMPLE}</h1>
			</div>
			<div class="tableview padMore">
				<div id="typetable" class="selecttype" style="display:none; height:150px">
					<table class="{$parameter.table.class}" style="width: 80%; height: 80%; margin: auto; border-spacing: 10px 10px;">
						<tr><td colspan="4" class="EventOK">1</td></tr>
						<tr>
							<td class="EventWarning">1</td>
							<td class="EventCritical">1</td>
							<td class="EventUnknown">1</td>
							<td class="EventPending">1</td>
						</tr>
					</table>
				</div>
				<div id="typering" class="selecttype tileShape tileShapeRing" style="display:none">
			        <div class="shapeRow">
				        <div class="shapeContainer">
					        <div class="ring shapeItem EventOK" ><p>1</p></div>
				        </div>
				        <div class="shapeContainer">
					        <div class="ring shapeItem EventWarning"><p>1</p></div>
				        </div>
				        <div class="shapeContainer">
					        <div class="ring shapeItem EventCritical"><p>1</p></div>
				        </div>
			        </div>
				    <div class="shapeRow">
					        <div class="shapeContainer">
						        <div class="ring shapeItem EventUnknown"><p>1</p></div>
					        </div>
					        <div class="shapeContainer">
						        <div class="ring shapeItem EventPending"><p>1</p></div>
					        </div>
				     </div>
				</div>
				<div id="typesquare" class="selecttype tileShape tileShapeSquare" style="display:none">
			        <div class="shapeRow">
				        <div class="shapeContainer">
					        <div class="square shapeItem EventOK" ><p>1</p></div>
				        </div>
				        <div class="shapeContainer">
					        <div class="square shapeItem EventWarning"><p>1</p></div>
				        </div>
				        <div class="shapeContainer">
					        <div class="square shapeItem EventCritical"><p>1</p></div>
				        </div>
			        </div>
				    <div class="shapeRow">
					        <div class="shapeContainer">
						        <div class="square shapeItem EventUnknown"><p>1</p></div>
					        </div>
					        <div class="shapeContainer">
						        <div class="square shapeItem EventPending"><p>1</p></div>
					        </div>
				     </div>
				</div>
				<div id="typedonut" class="selecttype" style="display:none">
					<div id="chart" style="width:100%; height:150px; max-height:150px;"></div>
				</div>
				<div id="typepie" class="selecttype" style="display:none">
					<div id="chartpie" style="width:100%; height:150px; max-height:150px;"></div>
				</div>
			</div>
		</div>
		<div class="clear"></div>
        {include file='./overall_widget.html' view='administration' lang=$lang widget=$widget titlestyle=$titlestyle descriptionstyle=$descriptionstyle}

		<div class="clear"></div>
		<div class="miPage">
			<div class="tableview_title">
				<h1>{$lang.ADM_PLUGIN_PARAMETER}</h1>
			</div>
			<div class="tableview padMore choixCustom">
				<input type="checkbox" id="check_unknown" name="check_unknown" value="check_unknown" {if $check_unknown=='unknown'}checked="checked"{/if} />
				<label>{$lang.DASHBOARD_SHOW_UNKNOWN}</label><br />
				<input type="checkbox" id="check_blink" name="check_blink" value="check_blink" {if $parameter.blink=='blink'}checked="checked"{/if} />
				<label>{$lang.DASHBOARD_BLINK}</label>
			</div>
			<div class="tableview padMore choixCustom">
				<input type="radio" id="service_or_node" name="service_or_node" value="service" onclick="checkServiceOrNode()" {if $service_or_node=='service'}checked="checked"{/if} />
				<label>{$lang.SERVICE_STATE}</label>
				<input type="hidden" id="all_service" name="all_service" {if $all_service=='on'}checked{/if} onclick="checkAllServiceOrNode()" ><label id="all_service_label">{$lang.ALL_SERVICES}</label>
				<br>
				<input type="radio" id="service_or_node" name="service_or_node" value="node" onclick="checkServiceOrNode()" {if $service_or_node=='node'}checked="checked"{/if}/>
				<label>{$lang.NODES_STATE}</label>
				<input type="hidden" id="all_node" name="all_node" {if $all_node=='on'}checked{/if} onclick="checkAllServiceOrNode()" ><label id="all_node_label">{$lang.ALL_NODES}</label>
			</div>
		</div>
		<div class="miPage miPageEnd">
			<div class="tableview_title">
				<h1>{$title}</h1>
			</div>
			<div class="tableview padMore">						
				{if isset($parameter.service)}
					{eui_forms_selectServices name='services[]' id='selectservices' selected=$parameter.service}
				{elseif isset($parameter.nodeid)}
					{eui_forms_selectNodes name='select_elem[]' id='select_elem'  selected=$parameter.nodeid}
				{elseif isset($parameter.groupnodeid)}
					{eui_forms_selectGroups name='select_elem[]' id='select_elem'  selected=$parameter.groupnodeid}		
				{elseif isset($parameter.pluginid)}
					{eui_forms_select name='select_elem[]' id='select_elem' value=$dash_list_select label=$lang.PLUGINS selected=$selected_plugin}
				{/if}
				

			</div>
		</div>
		<div class="clear"></div>
		<script type="text/javascript">
		<!--
			{literal}
		 	checkServiceOrNode();
		 	checkAllServiceOrNode();
			function checkServiceOrNode()
			{
				var val = $('input[name=service_or_node]:checked').val();
				$('#nodes').prop('disabled', false).trigger("chosen:updated");

				if(val == 'service')
				{
					$('#all_service').attr('type', 'checkbox');
					$('#all_service_label').css('visibility', 'visible');
					$('#all_node').prop('checked', false);
					$('#all_node').attr('type', 'hidden');
					$('#all_node_label').css('visibility', 'hidden');
				}
				else if(val == 'node')
				{
					$('#all_node').attr('type', 'checkbox');
					$('#all_node_label').css('visibility', 'visible');
					$('#all_service').prop('checked', false);
					$('#all_service').attr('type', 'hidden');
					$('#all_service_label').css('visibility', 'hidden');
				}
				else
				{
					$('#all_node_label').css('visibility', 'hidden');
					$('#all_service_label').css('visibility', 'hidden');
				}
			}

			function checkAllServiceOrNode()
			{
				var val = $('input[name=service_or_node]:checked').val();
				if ($('#all_service').is(":checked") && val == 'service')
				{
					$('#nodes').prop('disabled', true).trigger("chosen:updated");
				}
				else if ($('#all_node').is(":checked") && val == 'node')
				{
					$('#nodes').prop('disabled', true).trigger("chosen:updated");
				}
				else
				{
					$('#nodes').prop('disabled', false).trigger("chosen:updated");
				}
			}


			function selectType()
			{
				$("input[type='radio']").parent().removeClass("active");
				$("input[type='radio']:checked").parent().addClass("active");
				var val = $("input[type='radio']:checked").val();
				$( ".selecttype").css("display","none");
				$( "#type"+val).css("display","block");
				if(val == 'donut')
				{
					var arr=Array(['OK',50],['warning',50],['critical',50],['unknwon',50]);
					var arr2=Array(['OK',0],['warning',0],['critical',0],['unknwon',0]);
					Utils.generateDonuts(arr2,arr,"chart",false,100,'auto',150);
                    $( "#check_blink").prop("disabled",true);

				}
				else if(val == 'pie')
				{
					var arr=Array(['OK',50],['warning',50],['critical',50],['unknwon',50]);
					var arr2=Array(['OK',0],['warning',0],['critical',0],['unknwon',0]);
					Utils.generatePieDashboard(arr2,arr,"chartpie",false,100,'auto',150);
                    $( "#check_blink").prop("disabled",true);
				}
                else
                {
                    $( "#check_blink").prop("disabled",false);
                }
			}
			selectType();
	      	{/literal}
		-->
		</script>
		<br />
		<a class="btnBack" href="/dashboard/default.php?action=updatetitle&id={$widget.tile}" >{$lang.RETURN}</a> <input type="submit" value="{$lang.SAVE}" /> <br />
	</form>
{elseif $action=='getInfo'}
	<div class="tableview_title">
		{if $serviceError > 5}
			<h1 id="tabTitle">{$lang.FIRST_FIVE_ERRORS}</h1>
		{/if}
	</div>
		<table class="tab" id="nodeTable">
			<thead>
				<tr>
					<th>{$lang.NODES}</th>
					<th>{$lang.SERVICE}</th>
					<th>{$lang.MESSAGE}</th>
				</tr>
			</thead>
			<tbody>
				{counter start=0 assign=i}
				{foreach from=$errors item=error}
					{foreach from=$error item=service}
						{if $i<5}
							<tr>
								<td>
									{$service.device}
								</td>
									{if $service.type=='critical'}
										<td class="EventCritical">
									{elseif $service.type=='warning'}
										<td class="EventWarning">
									{else}
										<td class="EventUnknown">
									{/if}
									{$service.common}
								</td>
								{if $service.value!=0}
									 <td><p>Value:{$service.value}<br />{$service.message}</p></td>
								{else}
									 <td style="max-width:300px; word-wrap:break-word;"><p>{$service.message}</p></td>
								{/if}
							</tr>
						{/if}
						{counter}
					{/foreach}
				{/foreach}
			</tbody>
		</table>
{elseif $action=='getInfoDonut'}
	{foreach from=$errors item=error}
		{$error},
	{/foreach}
{elseif $action=='empty'}
	<div class="tableview_title">
		<h1 style="{$parameter.title.style} width:100%;">{$widget.name}</h1>
	</div>
	<div style="text-align:center; width:100%;">
		<p class="descWidget" style="{$parameter.description.style}">{$widget.description}</p>
		<img src="/theme/default/images/icn_warning.png" alt="warning" />
		<p class="emptyWidget">{$lang.DASHBOARD_WIDGET_EMPTY}</p>
	</div>
{else}
	{include file='./overall_widget.html' view='title' widget=$widget parameter=$parameter}
	{strip}
	{if $parameter.type=="donut"}
		<div id="chart{$widget.id}" style="width:95% height:95%"></div>
		<script type="text/javascript">
		<!--
		var arr=Array();
		var arr2=Array();
		{foreach name=outer key=k item=error from=$state}
					        arr2.push(["{$k}",0]);
					        arr.push(["{$k}",{$error}]);
		{/foreach}
		$(document).ready(function()
		{ldelim}
			Utils.generateDonuts(arr2,arr,"chart{$widget.id}",false,100,'auto',{$height},"/dashboard/view_4state.php");
		{rdelim});
		-->
		</script>
	{elseif $parameter.type=="pie"}
		<div id="chart{$widget.id}" style="width:95% height:95%"></div>
		<script type="text/javascript">
		<!--
		var arr=Array();
		var arr2=Array();
		{foreach name=outer key=k item=error from=$state}
					        arr2.push(["{$k}",0]);
					        arr.push(["{$k}",{$error}]);
		{/foreach}
		$(document).ready(function()
		{ldelim}
			Utils.generatePieDashboard(arr2,arr,"chart{$widget.id}",false,100,'auto',{$height},"/dashboard/view_4state.php");
		{rdelim});
		-->
		</script>
	{elseif $parameter.type=="ring"}
		<div class="tileShape tileShapeRing">
			<div class="shapeRow">
				<div class="shapeContainer" data-widget="{$widget.id}">
					<div class="ring shapeItem EventOK {if $state.OK==0}EventDisable{/if}" ><p>{$state.OK}</p></div>
				</div>
				<div class="shapeContainer" data-widget="{$widget.id}">
					<div class="ring shapeItem EventWarning {if $state.warning==0}EventDisable {else}nodetooltip {if $parameter.blink eq 'blink'}eventBlink{/if}{/if}"><p>{$state.warning}</p></div>
				</div>
				<div class="shapeContainer" data-widget="{$widget.id}">
					<div class="ring shapeItem EventCritical {if $state.critical==0}EventDisable {else}nodetooltip {if $parameter.blink eq 'blink'}eventBlink{/if}{/if}"><p>{$state.critical}</p></div>
				</div>
			</div>
			{if isset($parameter.show_unknown) && $parameter.show_unknown eq 'unknown'}
				<div class="shapeRow">
					<div class="shapeContainer" data-widget="{$widget.id}">
						<div class="ring shapeItem EventUnknown {if $state.unknown==0}EventDisable {else}nodetooltip {if $parameter.blink eq 'blink'}eventBlink{/if}{/if}"><p>{$state.unknown}</p></div>
					</div>
					<div class="shapeContainer" data-widget="{$widget.id}">
						<div class="ring shapeItem EventPending {if $state.pending==0}EventDisable {else}nodetooltip{/if}"><p>{$state.pending}</p></div>
					</div>
				</div>
			{/if}
		</div>
	{elseif $parameter.type=="square"}
        <div class="tileShape tileShapeSquare">
			<div class="shapeRow">
                <div class="shapeContainer">
				    <div class="square shapeItem EventOK {if $state.OK==0}EventDisable{/if}" ><p>{$state.OK}</p></div>
                </div>
				<div class="shapeContainer" data-widget="{$widget.id}">
					<div class="square shapeItem EventWarning {if $state.warning==0}EventDisable{else}nodetooltip {if $parameter.blink eq 'blink'}eventBlink{/if}{/if}">
						<p>{$state.warning}</p>
					</div>
				</div>
				<div class="shapeContainer" data-widget="{$widget.id}">
					<div class="square shapeItem EventCritical {if $state.critical==0}EventDisable{else}nodetooltip {if $parameter.blink eq 'blink'}eventBlink{/if}{/if}">
						<p>{$state.critical}</p>
					</div>
				</div>
			</div>
			{if isset($parameter.show_unknown) && $parameter.show_unknown eq 'unknown'}
				<div class="shapeRow shapeOptionalRow">
					<div class="shapeContainer" data-widget="{$widget.id}">
						<div class="square shapeItem EventUnknown {if $state.unknown==0}EventDisable {else}nodetooltip {if $parameter.blink eq 'blink'}eventBlink{/if}{/if}"><p>{$state.unknown}</p></div>
					</div>
					<div class="shapeContainer" data-widget="{$widget.id}">
						<div class="square shapeItem EventPending {if $state.pending==0}EventDisable {else}nodetooltip{/if}"><p>{$state.pending}</p></div>
					</div>
				</div>
			{/if}
		</div>
	{else}
		<table class="{$parameter.table.class} tableNodeType" style="{$parameter.table.style}">
		<tr><td colspan="4" class="EventOK {if $state.OK==0}EventDisable{/if} " style="{$parameter.td.style}">{$state.OK}</td></tr>
		<tr data-widget="{$widget.id}">
			<td class="EventWarning {if $state.warning==0}EventDisable {else}nodetooltip {if $parameter.blink eq 'blink'}eventBlink{/if}{/if}" style="{$parameter.td.style}">{$state.warning}</td>
			<td class="EventCritical {if $state.critical==0}EventDisable {else}nodetooltip {if $parameter.blink eq 'blink'}eventBlink{/if}{/if}" style="{$parameter.td.style}">{$state.critical}</td>
            {if !isset($parameter.show_unknown) || $parameter.show_unknown eq 'unknown'}
			<td class="EventUnknown {if $state.unknown==0}EventDisable {else}nodetooltip {if $parameter.blink eq 'blink'}eventBlink{/if}{/if}" style="{$parameter.td.style}">{$state.unknown}</td>
			<td class="EventPending {if $state.pending==0}EventDisable {else}nodetooltip{/if}" style="{$parameter.td.style}">{$state.pending}</td>
            {/if}
		</tr>
		</table>
	{/if}
	{strip}
	<script type="text/javascript">
	{literal}
 	    $('.nodetooltip').tooltip({
		    tooltipClass: "custom-tooltip-styling",
		       items: "[class]",
		       position: { my: "right bottom", at: "left center"},
		       content: '... waiting on ajax ...',
		       open: function(evt, ui){
		         var element = $( this );
		         var widgetid = $( this ).parent().data("widget");
		         var state='pending';
		         //ui.tooltip.css("max-width", "auto !important");
		         if (element.hasClass("EventWarning"))
		     	 {
		        	state = 'warning';
		         }
		         else if(element.hasClass("EventCritical"))
		       	 {
		        	 state = 'critical';
		       	 }
		         else if(element.hasClass("EventUnknown"))
		         {
		        	 state = 'unknown';
		         }
		         var tip = $.ajax({ method: "GET",
	         			async:false,
	         			url: '/dashboard/view_4state.php',
	         			data: { id: widgetid, action:'getInfo', status:state},
	         			dataType: "html"});
	         	tip.done(function( msg )
	         	{
	         		element.tooltip('option', 'content', msg);
         	  	});
		       }
		     });

  	{/literal}
</script>
{/if}