<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="-1">

<title>Flire Maps</title>
<script type="text/javascript">var SiteLanguage = 'EN';</script> 
<script type="text/javascript">var AllowSiteDemoMode = false;</script>  <!--DO NOT MODIFY THIS LINE-->

<link rel="stylesheet" href="common/jquery/css/jquery-ui.css" />

<script src="http://maps.google.com/maps/api/js?key=AIzaSyDBj44eiLVzlT54-NfwU2ZoU3mlEw-IsF0&language=en"></script>
    
    <link rel="stylesheet" href="common/css/openlayers_style.css" type="text/css">
	<link rel="icon" type="image/png" href="common/images/favicon-16x16.png" sizes="16x16">
	<link rel="icon" type="image/png" href="common/images/favicon-32x32.png" sizes="32x32">

    <style type="text/css">
        html, body {
            height: 100%;
        }

        .olPopup p { margin:0px; font-size: .9em;}
        .olPopup h2 { font-size:1.2em; }

    </style>


<script type="text/javascript" src="EN/language/resource.js"></script> 

 
<script src="common/jquery/jquery-1.9.1.js"></script>
<script src="common/jquery/ui/1.10.1/jquery-ui.js"></script>


<script type="text/javascript" src="common/jquery/js/tablesorter/js/jquery.tablesorter.js"></script> 


<script src="common/jquery/js/jquerycookie/jquery.cookie.js"></script>

<link href="common/jquery/js/tablesorter/css/theme.flire.css" rel="stylesheet">

<link href="common/css/tooltip.css" rel="stylesheet">


<script src="EN/include/js/tooltip.js"></script>


<script src="/flire/freeversionfiles/js/soundmanager/script/soundmanager2.js"></script>
		<script>
			soundManager.setup({
				url: '/flire/freeversionfiles/js/soundmanager/swf/',
				// flashVersion: 9, // optional: shiny features (default = 8)
				// optional: ignore Flash where possible, use 100% HTML5 mode
				// preferFlash: false,
				onready: function() {
					// Ready to use; soundManager.createSound() etc. can now be called.
				}
			});
		</script>


<script src="/flire/freeversionfiles/js/_parameters.js"></script>
<script src="/flire/freeversionfiles/js/cookies.js"></script>
<script src="/flire/freeversionfiles/js/dates.js"></script>
<script src="/flire/freeversionfiles/js/map.js"></script>
<script src="/flire/freeversionfiles/js/legend.js"></script>
<script src="/flire/freeversionfiles/js/imageOverlays.js"></script>
<script src="/flire/freeversionfiles/js/data.js"></script>
<script src="/flire/freeversionfiles/js/kml.js"></script>
<script src="/flire/freeversionfiles/js/WeatherForecastData.js"></script>
<script src="/flire/freeversionfiles/js/gfmis_v2.js"></script>
<script src="/flire/freeversionfiles/js/gfmisIgnition.js"></script>
<script src="/flire/freeversionfiles/js/gfmisOutput.js"></script>
<script src="/flire/freeversionfiles/js/kbdiData.js"></script>
<script src="/flire/freeversionfiles/js/WeatherStations.js"></script>
<script src="/flire/freeversionfiles/js/WeatherForecastThematicMap.js"></script>
<script src="/flire/freeversionfiles/js/storms.js"></script>
<script src="/flire/freeversionfiles/js/floods.js"></script>
<script src="/flire/freeversionfiles/js/smartalerts.js"></script>
<script src="/flire/freeversionfiles/js/planning.js"></script>

<script type="text/javascript" src="/flire/freeversionfiles/js/ContextMenu/ContextMenu.js"></script>

<script>

var G = google.maps;

var zoom = 11;
var centerPoint = new G.LatLng(38.01218236699273,23.919021610636264);
var container;
var map;
var mapID=1;
 var KMLLayer1;
 var WeatherforecastCoverage;
 var VoronoiKBDICoverage;
 var KMLLayer3;
 var KMLLandLayer1;



	jQuery(function() {
		jQuery( "#menu" ).menu();
	});


	jQuery(function() {
		jQuery( "#tabs" ).tabs();
	});

	jQuery(function() {
		jQuery( "#sub_tabs1" ).tabs();
	});

	jQuery(function() {
		jQuery( "#accordion1" ).accordion({
			heightStyle: "content",
			active: false,
			collapsible: true
		});
	});

	jQuery(function() {
		jQuery("#accordion1").click(function() {
					jQuery('#accordion2').accordion({active: false });
					jQuery('#accordion3').accordion({active: false });
    	});
	});

	jQuery(function() {
		jQuery( "#accordion2" ).accordion({
			heightStyle: "content",
			active: false,
			collapsible: true
		});
	});


	jQuery(function() {
		jQuery("#accordion2").click(function() {
					jQuery('#accordion1').accordion({active: false });
					jQuery('#accordion3').accordion({active: false });
    	});
	});

	jQuery(function() {
		jQuery( "#accordion3" ).accordion({
			heightStyle: "content",
			active: false,
			collapsible: true
		});
	});


	jQuery(function() {
		jQuery("#accordion3").click(function() {
					jQuery('#accordion1').accordion({active: false });
					jQuery('#accordion2').accordion({active: false });
    	});
	});

 	jQuery(function() {
		jQuery( document ).tooltip();
 		track: true
	});



	function SetActiveTab(id) {
			jQuery("#tabs").tabs( "refresh" );
			jQuery("#tabs").tabs( "option", "active", id );
	}
	


 	jQuery(function() {
		jQuery( "input[type=submit], button" )
		.button()
		.click(function( event ) {
			event.preventDefault();
		});
	});


	jQuery(function() {
		jQuery( "#dialog-message" ).dialog({
			modal: true,
			resizable: false,
			autoOpen: false,
			closeOnEscape: false
		});
	});


	jQuery(function() {
		jQuery( "#Storms-Alert-dialog-message" ).dialog({
			modal: true,
			resizable: false,
			autoOpen: false,
			closeOnEscape: false
		});
	});


	jQuery(function() {
		jQuery( "#SmartAlerts-dialog-message" ).dialog({
			modal: true,
			resizable: false,
			autoOpen: false,
			closeOnEscape: false
		});
	});


	jQuery(window).resize(function() {	
		ResizeMapDivs(jQuery(window).width(), jQuery(window).height());
	});

/*
	jQuery(function(){
		jQuery('table').tablesorter({
			widgets        : [ 'zebra', 'columns' ],
 			usNumberFormat : false,
			usDateFormat : false,
			sortReset      : true,
			sortRestart    : true
		});
	});
		
*/

 jQuery(function() {
	jQuery( "#progressbar" ).progressbar({
	value: 0
	});
});


//#contactNumber
jQuery(document).ready(function() {
    jQuery('.flire-input-number').keyup(function() {
        var numbers = jQuery(this).val();
        jQuery(this).val(numbers.replace(/\D/, ''));
    });
});

	
jQuery(function() {
//	jQuery( "#datepicker" ).datepicker( jQuery.datepicker.regional[ "gr" ] );
	jQuery( "#datepicker1" ).datepicker({
	//	buttonImage: 'common/images/calendar3.png',
    //    buttonImageOnly: true,
	//	buttonText: "Click to select a date",
	//	showOn: 'both',
		dateFormat: "yy-mm-dd",
	    onSelect: function(selected,evnt) {
        	getKBDIForDate(selected);
    	}
	});
});

	
jQuery(function() {
//	jQuery( "#datepicker" ).datepicker( jQuery.datepicker.regional[ "gr" ] );
	jQuery( "#datepicker2" ).datepicker({
	//	buttonImage: 'common/images/calendar3.png',
    //    buttonImageOnly: true,
	//	buttonText: "Click to select a date",
	//	showOn: 'both',
		dateFormat: "yymmdd",
	    onSelect: function(selected,evnt) {
        	FloodsInfoRefreshData(selected,-1);
    	}
	});
});


jQuery(function() {
    jQuery( "#PlanningToolMapDivResizableDiv" ).resizable();
});

jQuery(function() {
	jQuery( "#PlanningToolMapDivResizableDiv" ).resizable({
			stop: function( event, ui ) {
	  					_PlanningToolMapResize();
  					}
	});
});

	
</script>


<style>

/* Map Conext Menu Style */
.context_menu {
    background: show;
    background-color: white;
    border: 1px solid gray;
}
.context_menu_item {
    background: show;
    background-color: white;
	padding:3px 6px;
}
.context_menu_item:hover {
     background-color: #cccccc;
}
.context_menu_separator{
	background-color:gray;
	height:1px;
	margin:0;
	padding:0;
}

.ui-tooltip {
	visibility:hidden;
	display:none;
}

/* For Google Maps popup windows */

.gm-style .gm-style-iw, .gm-style .gm-style-iw a, .gm-style .gm-style-iw span, .gm-style .gm-style-iw label, .gm-style .gm-style-iw div {
	margin:0;
	padding:5px;
	border:0;
	font-weight:inherit;
	font-style:inherit;
	font-size:10px;
	font-family: Verdana,Arial,sans-serif;
	vertical-align:baseline;
 }

.planning_tool_senarios_catalog {
	font-size: 120%;
	margin-bottom: 0.5em;
}

.planning_tool_textA {
	font-size: 110%;
	margin-bottom: 0.5em;
}

.planning_tool_textB {
	font-size: 120%;
	margin-bottom: 0.5em;
}

.ui-menu { width: 150px; }
.ui-widget { font-size: 0.7em; }

.menu_accordions { width: 200px; }

/*.ui-accordion .ui-accordion-content { padding: 1em 1.2em; }*/
.ui-accordion .ui-accordion-content { padding: .8em .8em; }

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
	font-weight: bold;
	font-size: 100%;
	background: none repeat scroll 0 0 #D8D8D8;
}

.ui-widget-header { background: #EBF5EB; }
.ui-tabs .ui-tabs-panel { padding: 0em 0em; }
#tabs { heightStyle: "fill" }
#sub_tabs1 { heightStyle: "fill" }  

/*.ui-tabs .ui-tabs-nav {
    background-color: #f1f1f1;
}*/
	
.legendtable {
    border-collapse: separate;
	border:5px;
	border-spacing:2px;
	width: 100%;
/*	background-color:#E6EEEE;*/
}
.legendtable tr {
/*	background-color:#E6EEEE;*/
}
.legendtable td {
/*	background-color:#E6EEEE;*/
	vertical-align:middle;
}
.legendtable th {
	text-align:center;
	height:20px;
/*	font-weight:bold; */
}


table.tablesorter thead tr th, table.tablesorter tfoot tr th {
    background-color: #ABDBDA;
	padding-right: 20px;
}

table.tablesorter-default th {
	text-align:center;
}

table.tablesorter-default td {
	vertical-align:middle;
	text-align:center;
}

.title_H2 {
	font-size: 120%; 
	color: #003A6B; 
	font-weight: bold; 
	margin-left: 5px;
}

h3 {
	font-size: 120%; 
}

</style>
 



</head>
<body onLoad="init()" style="margin:0px; min-width:850px;"> 


	<div id="outerDiv" style="width:100%; background-color:#EBF5EB; overflow:hidden; margin-left:0px; left:0px;">

		<div id="superTitleDiv" style="float:left; width:100%; height:50px; background-color:#CDE287;">
			<table style="width:100%; height:50px;"><tr>
					<td style="width:271px; text-align:left"><a href="http://www.flire.eu" target="_blank"><img src="common/images/banner2a.png" border="0" title="FLIRE is a demonstration program that aims to develop an integrated Decision Support System (DSS) for the Combined Assessment and Management of Flood and Fire."></a></td>
					
					<td style="text-align:center"><img id='middlesupetitle' src="common/images/banner2b.png" border="0"></td>
					
					<td style="width:110px; text-align:right"><a href="http://ec.europa.eu/environment/life/" target="_blank"><img src="common/images/banner2c.png" border="0" title="LIFE is the EU’s financial instrument supporting environmental and nature conservation projects throughout the EU, as well as in some candidate, acceding and neighbouring countries. Since 1992, LIFE has co-financed some 3708 projects, contributing approximately €2.8 billion to the protection of the environment."></a></td>
					
			</tr></table>
<!--			<center><img src="common/images/banner2.png" border="0"></center> -->
		</div>

		<div id="LeftColumnDiv" style="float:left; width:220px; height:500px; overflow:auto; overflow-x:hidden;">


	
			<!-- Left accordion MENU -->
			<div class="menu_accordions" id="accordion1">
				<h3 title="Website version, updates information e.t.c.">
					<table><tr><td><img src="common/images/art/about_1_25.png" /></td><td>About Flire Website...</td></tr></table>
				</h3>
				<div>
					<p><span id ="WebsiteSelectLanguageSpan"></span></p>
					<p><span id ="WebsiteLastUpdateDateSpan"></span></p>
					<p><span id ="WebsiteVersionSpan"></span></p>
					<br /><hr>
					<br /><font color="red">Free Edition</font>
					<br /><b>Username: free</b>
					<p><b><a href="application.asp?language=EN&action=login">Logout from the application</a></b></p>
					<br />
					<p><div id ="WebsiteParametersSettingsDiv"></div></p> 
					<br />
					<p><div id ="WebsiteUpdateInfoDiv"></div></p> 
				</div>
				
			</div>
		
	
			<div class="menu_accordions" id="accordion2">
			
				<h3 title="Select map overlays to show/hide. Focus on specific overlays etc.">
					<table><tr><td><img src="common/images/art/map_1_25.png" /></td><td>Map Overlays</td></tr></table>								
				</h3>
				<div>

					<div id="mapLegendDiv"></div>	
<!--					<p><a href="#" onClick="customMapLegend()">Update</a></p>  -->
				</div>

			</div>


			<div class="menu_accordions" id="accordion3">
				<h3 title="Statistical analysis of Flire Website use.">
					<table><tr><td><img src="common/images/art/flag_1_25.png" /></td><td>Flire Website Statistics</td></tr></table>				
				</h3>
				<div>
				
					<p><div id ="StatisticsInfoSpan"></div></p>
					<br />
					<p align="center"><a href="#" onClick="ClearStatistics()" title="Click to clear all statistic data about the use of this website.">Clear Statistics</a></p>
				
				</div>
			</div>


	
		</div>

		<!-- Divider between Left Column and Right Column -->
		<div id="ColumnsDivider1" style="cursor:pointer; left: 0px; margin-right: 0px; height:500px; width:8px; float:left; background-image:url(common/images/collapse1.png); background-position:center; background-repeat:no-repeat; background-color:#DCDCDC" onClick="ShowHideLeftColumnDiv();" onMouseOver="Divider1MouseOver();" onMouseOut="Divider1MouseOut();"></div>			


		<div id="mapContainerDiv" style="left: 0px; margin-right: 0px; height:500px; width:800px; float:right; overflow:hidden; background-color:#EBF5EB">				
		
			<div id="tabs">
				<ul id="tabs_ul">
					<li><a href="#tabs-1" onClick="MapTabClicked(1)" title="Display coverages with cartographic data, weather forecast data, etc on maps">					
						<table><tr><td><img src="common/images/art/map_1_25.png" /></td><td>Map</td></tr></table>
					</a></li>
					<li><a href="#tabs-2" onClick="MapTabClicked(2)" title="Weather forecast data, daily updated">
						<table><tr><td><img src="common/images/art/meteo_1_25.png" /></td><td>Weather Forecast</td></tr></table>					
					</a></li>
					<li><a href="#tabs-3" onClick="MapTabClicked(3)" title="Weather Observation Stations data, updated in real time">
						<table><tr><td><img src="common/images/art/info_1_25.png" /></td><td>Weather Stations</td></tr></table>					
					</a></li>
					<li><a href="#tabs-4" onClick="MapTabClicked(4)" title="Geographic Fire Management Information System">					
						<table><tr><td><img src="common/images/art/fire_1_25.png" /></td><td>Fire Management</td></tr></table>
					</a></li>      
					<li><a href="#tabs-5" onClick="MapTabClicked(5)" title="Fire Danger Index Data">
						<table><tr><td><img src="common/images/art/flood_2_25.png" /></td><td>Fire Danger Index</td></tr></table>					
					</a></li>      
					<li><a href="#tabs-6" onClick="MapTabClicked(6)" title="Floodplain Data">					
						<table><tr><td><img src="common/images/art/flood_1_25.png" /></td><td>Floodplain Data</td></tr></table>
					</a></li>      
					<li><a href="#tabs-7" onClick="MapTabClicked(7)" title="Alerts">
						<table><tr><td><img src="common/images/art/storms_1_25.png" /></td><td>Alerts</td></tr></table>
					</a></li>      
					<li><a href="#tabs-8" onClick="MapTabClicked(8)" title="Planning Tool">
						<table><tr><td><img src="common/images/art/tools_1_25.png" /></td><td>Planning Tool</td></tr></table>
					</a></li>      
				</ul>
				<div id="tabs-1">

					<div id="mapDiv" style="height: 468px; width:794px"></div>				 
			
				</div>

				<div id="tabs-2">
					<div id="tab3DataDiv" style="overflow-y:auto; overflow-x: hidden; height:468px;"> 

						<span id="WeatherForecastOptionsDiv"><p><h2>Weather Forecast Data Options</h2></p></span>


							<p>
							<img border="0" src="common/images/bullet1.png">
							Default Date Time sorting direction:
							<form>
								<p><input type="checkbox" id="ForecastDateTimeDefaultSortOrderChk" checked="checked" onClick="SetForecastDateTimeSortOrder();"> <span title="Descending: newer data on top">Descending</span></p>
							</form>
							</p>
						

						<span id="noaForecastDataTitleDiv"><p><h2>Weather Forecast Data</h2></p></span>
						<br />
						
						<span id="noaForecastQueryMenu">
							<!-- <p><a href="#" onClick="GetNoaForeCastAvailableData('getmonths','')">Find Months</a></p> -->
						</span>
						<span id="noaForecastQueryData"></span>
						<br>
					</div>
				</div>

				<div id="tabs-3">
					<div id="tab2DataDiv" style="overflow-y:auto; overflow-x: hidden; height:468px;"> 
						<span id="WeatherStationsOptionsDiv"><p><h2>Weather Observation Stations Options</h2></p></span>

							<p>
							<img border="0" src="common/images/bullet1.png">
							Request Timeout (seconds): 
								<span title="This is the time that the browser waits for Weather Observation Stations server response. After this number of seconds the request is aborted and the connection with the server is closed.">
									<input style="width:40px;" id="WS_data_options_request_timeout" maxlength="4" value="120" class="flire-input-number ui-input-text ui-body-c ui-corner-all" onBlur="SaveUserOptionsToCookies(3, false);"/>
								</span>
								<a href="#" onClick="SaveUserOptionsToCookies(3, true);" title="Set default value"><img src="common/images/default1.png" border="0"></a>
								 
							<br />
							<img border="0" src="common/images/bullet1.png">
							Consider as old data older than: 
								<span title="This is the hours limit so that weather stations data older than this threshold value are considered to be too old to be used by the system.">
									<input style="width:20px;" id="WS_options_time_limit" maxlength="2" value="4" class="flire-input-number ui-input-text ui-body-c ui-corner-all" onBlur="SaveUserOptionsToCookies(4, false);"/> 
								</span>
								<a href="#" onClick="SaveUserOptionsToCookies(4, true);" title="Set default value"><img src="common/images/default1.png" border="0"></a> hours.
							</p>	 
							<br />
							<p>
							<img border="0" src="common/images/bullet1.png">
							How to display weather stations with old data:
							<form>
								<p><input type="checkbox" id="oldDataWSFormatCheck1" checked="checked" onClick="UpdateWSwithOldDataFormat();"> Red color</p>
								<p><input type="checkbox" id="oldDataWSFormatCheck2" onClick="UpdateWSwithOldDataFormat();"> Line through</p>
								<p><input type="checkbox" id="oldDataWSFormatCheck3" checked="checked" onClick="UpdateWSwithOldDataFormat();"> Italic</p>
								<p><input type="checkbox" id="oldDataWSFormatCheck4" onClick="UpdateWSwithOldDataFormat();"> Ignore them</p>
							</form>
							</p>




						<span id="WeatherStationsDataTitleDiv"><p><h2>Weather Observation Stations Data</h2></p></span>
						<br />  
						<span id="WeatherStationsDataMenu">
							<button id="WeatherStationsDataButton" onClick="Get_Weather_Stations_Data()" title="Click to receive latest weather observation stations data">						
									<table border="0" width="150px"><tr>
									<td><img src="common/images/art/info_1_45.png" /></td>
									<td>Update Stations data</td>
									</tr>
									</table>																																																	
							</button>
						</span>
						<span id="WeatherStationsDataTimeDiv"><p></p></span>
						<span id="WeatherStationsDataDiv"></span>	 
					</div> 
					
				</div>


			
				<div id="tabs-4">
					<div id="tab4DataDiv" style="overflow:hidden; height:468px;"> 
					
					
						<div id="sub_tabs1">
							<ul id="sub_tabs1_ul">
								<li><a href="#sub_tabs1_1" onClick="" title="Standard">Standard</a></li>
								<li><a href="#sub_tabs1_2" onClick="" title="Advanced">Advanced</a></li>
							</ul>
							<div id="sub_tabs1_1">

								<div id="sub_tabs1_1_DataDiv" style="overflow-y:auto; overflow-x: hidden; height:468px;">			 
			
									<span id="gfmisOutputStepsSelectionPanlDiv1"></span>
			
									<span id="gfmisDataTitleDiv2"><p><h2>Geographic Fire Management Information System Use</h2></p></span>
										<span style="font-size:120%; color:#FF0000">In free edition all Fire Management Information System data are virtual data used only for demostration.</span><br/>

									<span id="gfmisSimulationDurationNoteDiv1"><p>simulation time</p></span>
			
									<p>1. Click to <a href="#" onClick="CreateNewgfmisFireIgnitionPoint();" title ="Insert a new ignition point (if ignition points limit is not reached)">insert ignition point</a> for fire management information system.</p>
									<p>2. <a href="#" onClick="Get_Weather_Stations_Data();" title="Receive latest weather observation stations data">Update</a> Weather observation stations data.</p>
			
									<br />
	
									<button id="gfmisDataButton1" onClick="Use_gfmis_Service(0)" title="Click to send request to fire management information system">
									<table border="0" width="150px"><tr>
									<td><img src="common/images/art/fire_1_45.png" /></td>
									<td>Receive fire management information system data</td>
									</tr>
									</table>																																				
									</button>
	
			
								</div>	
							</div>
					
							<div id="sub_tabs1_2">
					
								<div id="sub_tabs1_2_DataDiv" style="overflow-y:auto; overflow-x: hidden; height:468px;">  
					
					
									<span id="gfmisDataOptionsDiv"><p><h2>Geographic Fire Management Information System Options</h2></p></span>
					
										<form> 
										<img border="0" src="common/images/bullet1.png">
										Request Timeout (seconds): 
											<span title="This is the time that the browser waits for Fire Management Information System server response. After this number of seconds the request is aborted and the connection with the Fire Management Information System server is closed.">
												<input style="width:40px;" id="gfmis_options_request_timeout" maxlength="4" value="120" class="flire-input-number ui-input-text ui-body-c ui-corner-all" onBlur="SaveUserOptionsToCookies(1, false);"/>
											</span>
											<a href="#" onClick="SaveUserOptionsToCookies(1, true);" title="Set default value"><img src="common/images/default1.png" border="0"></a>
								 
								 
										<br />
										<img border="0" src="common/images/bullet1.png">
										Fire Management Information System Output Processing Timeout (seconds): 
											<span title="This is the time that the browser waits in order to parse the Fire Management Information System service output. This processing is necessary for the display of the Fire Management Information System service output information on map. After this number of seconds the processing is aborted and the connection with the Fire Management Information System server is closed.">
												<input style="width:30px;" id="gfmis_options_processing_timeout" maxlength="3" value="40" class="flire-input-number ui-input-text ui-body-c ui-corner-all" onBlur="SaveUserOptionsToCookies(2, false);"/>
											</span>
												<a href="#" onClick="SaveUserOptionsToCookies(2, true);" title="Set default value"><img src="common/images/default1.png" border="0"></a>
						
										</form>
							
							
										<p>
										<img border="0" src="common/images/bullet1.png"> 
										Click to <a href="#" onClick="ClearAllgfmisFireIgnitionPointsMarkers();" title="Clear all fire ignition points">clear all ignition points</a>.
										</p>
							
									<span id="gfmisOutputStepsSelectionPanlDiv2"></span>
					
									<span id="gfmisDataTitleDiv2"><p><h2>Geographic Fire Management Information System Use</h2></p></span>
										<span style="font-size:120%; color:#FF0000">In free edition all Fire Management Information System data are virtual data used only for demostration.</span><br/>
						
									<p>1. Click to <a href="#" onClick="CreateNewgfmisFireIgnitionPoint();" title ="Insert a new ignition point (if ignition points limit is not reached)">insert ignition point</a> for fire management information system.</p>
									<p>2. <a href="#" onClick="Get_Weather_Stations_Data();" title="Receive latest weather observation stations data">Update</a> Weather observation stations data.</p>
									<p>3. <a href="#" onClick="FocusOnSelectedAreaForgfmis();" title="Focus map on the selected area of interest for the weather observation stations used for gfmis service.">Focus map on selected area of interest</a> for gfmis service.</p>
									<p>4. <a href="#" onClick="DisplayValidWeatherStationsListForgfmis();" title="Display Weather Observation Stations Catalog with valid data that are located within the selected area of interest">Weather Stations</a> located within the selected area.</p>
									<p>5. Simulation duration:								
										<select id="simdur_option" onChange="UpdateSimulationDurationNoteDiv();">
									      	<option value="30">30 minutes</option>
									      	<option value="60">60 minutes</option>
									      	<option value="90">90 minutes</option>
									      	<option value="120">120 minutes</option>
									      	<option value="150">150 minutes</option>
									      	<option value="180" selected="1">180 minutes</option>
									      	<option value="210">210 minutes</option>
									      	<option value="240">240 minutes</option>
									      	<option value="270">270 minutes</option>
									      	<option value="300">300 minutes</option>
									      	<option value="360">360 minutes</option>
										</select></p>
									<p>6. Simulation step duration:								
										<select id="simsteps_option" onChange="UpdateSimulationDurationNoteDiv();">
									      	<option value="30">30 minutes</option>
									      	<option value="60" selected="1">60 minutes</option>
									      	<option value="90">90 minutes</option>
									      	<option value="120">120 minutes</option>
										</select></p>

						
									<br />
					
									<button id="gfmisDataButton2" onClick="Use_gfmis_Service(0)" title="Click to send request to fire management information system">								
										<table border="0" width="150px"><tr>
										<td><img src="common/images/art/fire_1_45.png" /></td>
										<td>Receive fire management information system data</td>
										</tr>
										</table>																											
									</button>
									<br />

									<p><h2>Decision Support System with Fire Management Information System <span id="gfmisDSSDateTimeSelectedSpan"></span></h2></p>
										<span style="font-size:120%; color:#FF0000">In free edition all Fire Management Information System data are virtual data used only for demostration.</span><br/>

									<p>1. Select a <a href="#" onClick="ShowTabWithForecastData();" title="Select a Time of a Date (with available Weather Forecast Data) in order to use this time with Decision Support System of fire management information system">Time of a Date with available Weather Forecast Data</a>.</p>
									<p>2. Click to <a href="#" onClick="CreateNewgfmisFireIgnitionPoint();" title="Insert a new ignition point (if ignition points limit is not reached)">insert ignition point</a> for gfmis service.</p>
						
									<br />
									<button id="gfmisDataButton" onClick="Use_gfmis_Service(3)" title="Click to send request to decision support system of fire management information system">
										<table border="0" width="150px"><tr>
										<td><img src="common/images/art/fire_2_45.png" /></td>
										<td>Receive decision support system data</td>
										</tr>
										</table>
									</button>
						
									<br />
						
									<p><h2>Communication with Fire Management Information System Server</h2></p>
									Request: <span id="gfmisQueryRequest"></span>
									<br />
									Response: <span id="gfmisQueryResponse"></span>
									<br />
									<form id="gfmisOptionsForm" method="post"> 
			     						<textarea id="gfmisQueryOptionsURL" style="width: 486px; height: 99px; visibility:hidden; display:none;"></textarea> 								
									</form>						

								</div>
							</div> <!-- sub_tabs1-2 -->
						</div> <!-- sub_tabs1 -->
						
						
					</div>
				</div> <!-- tabs-4 -->

			
				<div id="tabs-5">

					<div id="tab5DataDiv" style="overflow-y:auto; overflow-x: hidden; height:468px;"> 
					
						<span id="KBDIDataOptionsDiv"><p><h2>Fire Danger Index Options</h2></p></span>
							<form> 
							<img border="0" src="common/images/bullet1.png">
							Request Timeout (seconds): 
								<span title="This is the time that the browser waits for Fire Danger Index data server response. After this number of seconds the request is aborted and the connection with the server is closed.">
									<input style="width:40px;" id="kbdi_options_request_timeout" maxlength="4" value="120" class="flire-input-number ui-input-text ui-body-c ui-corner-all" onBlur="SaveUserOptionsToCookies(5, false);"/>
								</span>
								<a href="#" onClick="SaveUserOptionsToCookies(5, true);" title="Set default value"><img src="common/images/default1.png" border="0"></a>
								 
							<br />
							<p><h2>Parameters for Fire Danger Index Data request</h2></p>
							<span style="font-size:120%; color:#FF0000">In free edition all Fire Danger Index data are virtual data used only for demostration.</span><br/>
							<button id="GetTodayKBDIDataButton" onClick="SelectDateAndGetKBDIData(0)" title="Click to receive Fire Danger Index data for Today">
								<table border="0" width="150px"><tr>
								<td><img src="common/images/art/flood_2_45.png" /></td>
								<td>Fire Danger Index data for <b>today</b></td>
								</tr></table>
							</button>						
							<button id="GetTomorrowKBDIDataButton" onClick="SelectDateAndGetKBDIData(1)" title="Click to receive Fire Danger Index data for Tomorrow">
								<table border="0" width="150px"><tr>
								<td><img src="common/images/art/flood_2_45.png" /></td>
								<td>Fire Danger Index data for <b>tomorrow</b></td>
								</tr></table>
							</button>						
							<input type="hidden" id="datepicker1" size="30" />
							<button id="GetKBDIDataButton" onClick="SelectDateAndGetKBDIData(-1)" title="Click to select a date and receive Fire Danger Index data for that date">
								<table border="0" width="220px"><tr>
								<td><img src="common/images/art/flood_2_calendar_45.png" /></td>
								<td>Select a date and receive Fire Danger Index data for that date</td>
								</tr></table>
							</button>						
							</form>
											
						<br />
						Request: <span id="KBDIQueryRequest"></span>
						<p><h2>Fire Danger Index Data <span id="KBDIResultsDataDatesDecriptionSpan"></span></h2></p>		
						<span style="font-size:120%; color:#FF0000">In free edition all Fire Danger Index data are virtual data used only for demostration.</span><br/>
						<span id="KBDIQueryResponseDataFiles"></span>
						<br />
						<span id="KBDIRetrievedDataSpan"></span>
						
						
					</div>
				</div> <!-- tabs-5 -->
		
		
				<div id="tabs-6">
				
					<div id="tab6DataDiv" style="overflow-y:auto; overflow-x: hidden; height:468px;"> 
					
						<span id="FloodplainDataOptionsDiv"><p><h2>Probable Floodplain Data Options</h2></p></span>
							<form> 
							<img border="0" src="common/images/bullet1.png">
							Request Timeout (seconds): 
								<span title="This is the time that the browser waits for Probable Floodplain Data server response. After this number of seconds the request is aborted and the connection with the server is closed.">
									<input style="width:40px;" id="Floods_options_request_timeout" maxlength="4" value="120" class="flire-input-number ui-input-text ui-body-c ui-corner-all" onBlur="SaveUserOptionsToCookies(7, false);"/>
								</span>
								<a href="#" onClick="SaveUserOptionsToCookies(7, true);" title="Set default value"><img src="common/images/default1.png" border="0"></a>
								 
							</form>
							
						<p><h2>Probable Floodplain Data. Free edition</h2></p>	
							
						<span style="font-size:120%; color:#FF0000">In free edition all Probable Floodplain data are virtual data used only for demostration.</span><br/>
						<span id="FloodsRetrievedDataForTodaySpan"></span>
				
						<button id="GetFloodsDataButtonForToday" onClick="FloodsInfoRefreshData('',0)" title="Receive Probable Floodplain Data Catalog for today"><table border="0" width="150px"><tr>
							<td><img src="common/images/art/flood_1_45.png" /></td>
							<td>Receive Probable Floodplain Data Catalog for <b>today</b></td>
							</tr></table></button>
				
						<br />
						<span id="FloodsRetrievedDataForTomorrowSpan"></span>

						<button id="GetFloodsDataButtonForTomorrow" onClick="FloodsInfoRefreshData('',1)" title="Receive Probable Floodplain Data Catalog for tomorrow"><table border="0" width="150px"><tr>
							<td><img src="common/images/art/flood_1_45.png" /></td>
							<td>Receive Probable Floodplain Data Catalog for <b>tomorrow</b></td>
							</tr></table></button>						
						
						<br />
						<p><h2>Probable Floodplain Data for other dates. Free edition</h2></p>		
						<span style="font-size:120%; color:#FF0000">In free edition all Probable Floodplain data are virtual data used only for demostration.</span><br/>
							<form>
								<input type="hidden" id="datepicker2" size="30" />
								<button id="GetFloodsDataButtonForADate" onClick="SelectDateAndGetFloodsData()" title="Select a date and receive Probable Floodplain Data Catalog for that date">
									<table border="0" width="150px"><tr>
									<td><img src="common/images/art/flood_2_calendar_45.png" /></td>
									<td>Select a date and receive Probable Floodplain Data Catalog for that date</td>
									</tr>
									</table>
								</button>														
							</form>
						<br />
						<span id="FloodsRetrievedDataForADateSpan"></span>
				
					</div>
				
				</div> <!-- tabs-6 -->

			
				<div id="tabs-7">
				
					<div id="tab7DataDiv" style="overflow-y:auto; overflow-x: hidden; height:468px;"> 
					
						<p><h2>1st Level of Smart Alerts (based on observations). Free edition</h2></p>		
						<span style="font-size:120%; color:#FF0000">In free edition all Smart Alerts data are virtual data used only for demostration.</span><br/>
						<p><h3>Options</h3></p>		
						<span id="SmartAlertsLevelOneStatusPanelOptionSpan"></span>
						<span id="SmartAlertsLevelOneRetrievedDataTimeDiv"></span>
						<br />
						<span id="SmartAlertsLevelOneRetrievedDataSpan"></span>						
						<br />

						<p><h2>2nd Level of Smart Alerts (based on storm detection). Free edition</h2></p>		
						<span style="font-size:120%; color:#FF0000">In free edition all Smart Alerts data are virtual data used only for demostration.</span><br/>
						<p><h3>Storm Alerts Options</h3></p>		
						<span id="StormAlertStatusPanelOptionSpan"></span>
						<br /><br />
				
						<p><h2>3rd Level of Smart Alerts (based on forecast data). Free edition</h2></p>		
						<span style="font-size:120%; color:#FF0000">In free edition all Smart Alerts data are virtual data used only for demostration.</span><br/>
						<p><h3>Options</h3></p>		
						<span id="SmartAlertsLevelThreeStatusPanelOptionSpan"></span>
						<span id="SmartAlertsLevelThreeRetrievedDataTimeDiv"></span>
						<br />
						<span id="SmartAlertsLevelThreeRetrievedDataSpan"></span>						
						<br />

					</div>
					
				</div> <!-- tabs-7 -->


				<div id="tabs-8">
				
					<div id="tab8DataDiv" style="overflow-y:auto; overflow-x: hidden; height:468px;"> 
					
							<p><h2>Select one of the following probable scenarios (free edition)</h2></p>
							<span style="font-size:120%; color:#FF0000">In full edition a large number of probable scenarios is available.</span><br/>
							<span id="PlanningToolScenariosCatalogSpan" class="planning_tool_senarios_catalog"></span>
							<span id="PlanningToolScenarioTitleSpan"></span>

							<div id="PlanningToolScenarioDiv" style="display:none; visibility:hidden; overflow-y:auto; overflow-x: hidden;"> 
								
								<table style="border-spacing: 10px;"><tr><td style="background-color:#ebf5eb;" width="10">
								<div id="PlanningToolMapDivResizableDiv" class="ui-widget-content" height="100px">
										<div id="PlanningToolMapDiv" style="overflow-y:auto; overflow-x: hidden; height:100%; width:100%;"></div> 
								</div>
								<hr style="height:10px; background-color:#ffffff; border:0px">
								<span id="PlanningToolScenarioTextASpan" class="planning_tool_textA"></span>
								</td><td style="background-color:#ebf5eb; vertical-align:top;">
										<span id="PlanningToolScenarioTextBSpan" class="planning_tool_textB"></span>
								</td></tr></table>	
							</div>
					
					</div>

				</div> <!-- tabs-8 -->
				
				
			</div>	<!-- tabs -->	
		
		
		</div> <!-- mapContainerDiv -->


		
	<div id="StatusBarDiv" style="float:left; font-size: 0.7em; background-color:#EBF5EB; border-bottom-style:solid; border-bottom-color:#C0C0C0; border-bottom-width:thin; bottom:0px; left:0px; height:auto; width:100%" >

			<div id="gfmisOutputStatusPanel" style="float:left; visibility:hidden; display:none; border-top-style:solid; border-top-color:#C0C0C0; border-top-width:thin; overflow:auto; min-width:100px; width:100%; height:100%; padding:2px; padding-left:10px;"></div>
		
			<div id="SmartAlertsLevelOneInfoStatusPanel" style="float:left; visibility:hidden; display:none; border-top-style:solid; border-top-color:#C0C0C0; border-top-width:thin; overflow:auto; min-width:100px; width:100%; height:100%; padding:2px; padding-left:10px;"></div>
		
			<div id="StormInfoStatusPanel" style="float:left; visibility:hidden; display:none; border-top-style:solid; border-top-color:#C0C0C0; border-top-width:thin; overflow:auto; min-width:100px; width:100%; height:100%; padding:2px; padding-left:10px;"></div>

			<div id="SmartAlertsLevelThreeInfoStatusPanel" style="float:left; visibility:hidden; display:none; border-top-style:solid; border-top-color:#C0C0C0; border-top-width:thin; overflow:auto; min-width:100px; width:100%; height:100%; padding:2px; padding-left:10px;"></div>

	</div>


	<!-- Footer Div with Logos -->
	<div id="FooterDiv" style="float:left; font-size: 0.7em; background-color:#F0F5FA; border-bottom-style:solid; border-bottom-color:#C0C0C0; border-bottom-width:thin; bottom:0px; left:0px; height:auto;">
		<center>
		<a target="_blank" title="National Technical University of Athens" href="http://www.civil.ntua.gr/laboratories/8/"><img src="common/images/art/logo_ntua.png" border="0"></a>
		<a target="_blank" title="Imperial College London" href="http://www3.imperial.ac.uk/"><img src="common/images/art/logo_icl.png" border="0"></a>
		<a target="_blank" title="Research Institute for Geo-Hydrological Protection" href="http://www.irpi.cnr.it/"><img src="common/images/art/logo_irpi.png" border="0"></a>
		<a target="_blank" title="National Observatory of Athens" href="http://www.noa.gr"><img src="common/images/art/logo_noa.png" border="0"></a>
		<a target="_blank" title="Foundation for Research and Technology-Hellas" href="http://www.iacm.forth.gr"><img src="common/images/art/logo_forth.png" border="0"></a>
		<a target="_blank" title="ALGOSYSTEMS S.A." href="http://www.algosystems.gr"><img src="common/images/art/logo_algosystems.png" border="0"></a>
		</center>
	</div> 


				<div id="dialog-message" title="Download complete">
					<span id="dialog-icon" class="ui-icon ui-icon-info" style="float: left; margin: 0 7px 50px 0;"></span>
					<span id="dialog-message-body"></span>
					<div id="progressbar"></div>
					
				</div>		

				<div id="Storms-Alert-dialog-message" title="Storms Alert">
					<span id="Storms-Alert-dialog-icon"  style="float: left;"></span>
					<span id="Storms-Alert-dialog-message-body"></span>
				</div>		

				<div id="SmartAlerts-dialog-message" title="Storms Alert">
					<span id="SmartAlerts-dialog-icon"  style="float: left;"></span>
					<span id="SmartAlerts-dialog-message-body"></span>
				</div>		

				<div id="legend-image-message" title="Overlay description">
					<span id="legend-image-message-body"></span>

				</div>		


	</div> <!--outer-->

		
	
</body>
</html>
