<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>JSTAR Mapper</title>
      <meta content="initial-scale=1.0, user-scalable=no, width=device-width" name="viewport">
      <script id='_fed_an_ua_tag' async src='https://dap.digitalgov.gov/Universal-Federated-Analytics-Min.js?agency=DOC&amp;subagency=NOAA&amp;pua=UA-48915369-1'></script>
      <link href='https://www.star.nesdis.noaa.gov/star/global/images/favicon.ico' rel='icon' type='image/png'>
      <script src="./lib/jquery-1.11.2.min.js"></script>
      <script src="lib/html2canvas.min.js"></script>
      <link href="./lib/bootstrap.min.css" rel="stylesheet">
      <script src="./lib/bootstrap.min.js"></script>
      <link href="./lib/ol_dev.css" rel="stylesheet">
      <script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script>
      <script src="https://unpkg.com/canvg@3.0.4/lib/umd.js"></script>
      <script src="lib/moment.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.15/proj4.js"></script>
      <link href="./lib/local_dev_LKB.css" rel="stylesheet">
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
      <script>
         $(document).ready(function() {
         	// Add minus icon for collapse element which is open by default
         	$(".collapse.in").each(function() {
         		$(this).siblings(".panel-heading").find(".glyphicon").addClass("glyphicon-minus").removeClass("glyphicon-plus");
         	});
         	// Toggle plus minus icon on show hide of collapse element
         	$(".collapse").on('show.bs.collapse', function() {
         		$(this).parent().find(".glyphicon").removeClass("glyphicon-plus").addClass("glyphicon-minus");
         	}).on('hide.bs.collapse', function() {
         		$(this).parent().find(".glyphicon").removeClass("glyphicon-minus").addClass("glyphicon-plus");
         	});
         });
         
                
      </script>
   </head>
   <body>
      <div class="container-fluid" style="padding-left:0px; padding-right:0px;">
         <div class="row-fluid">
            <div class="span12">
               <!--//START of Nav //-->
               <div class="col-lg-2" id="leftNav">
                  <div style="padding: 4px;">
                     <div class="logo-panel" id="logo-panel" style="display: block;">
                        <div>
                           <a href="index.php"><img alt="JSTAR Mapper logo" 
						   title="JSTAR Mapper"
						   class="img-responsive" src="images/MapperLogo_NOAA.png"></a>
                        </div>
                     </div>
                     <!--// DATE picker here //-->
                     <div style="margin-top: 0px;">
                        <form class="form-inline" role="form">
                           <div>
                              <table>
                                 <tr>
                                    <td>
                                       <button id="nextd" tabindex="-1" title="step ahead 1 day"><span 
									   class="fa fa-chevron-up"></span></button>
                                    </td>
                                    <td>
                                       <button id="nextmonth" tabindex="-1" title="step ahead 1 month"><span 
									   class="fa fa-chevron-up""></span></button>
                                    </td>
                                    <td>
                                       <button id="nextyear" tabindex="-1" title="step ahead 1 year"><span 
									    class="fa fa-chevron-up"></span></button>
                                    </td>
                                 </tr>
                                 <tr>
                                    <td>
                                       <input disabled id="currd" tabindex="-1" title="date" type="text">
                                    </td>
                                    <td style='width: 36px;'>
                                       <input disabled id="currmonth" tabindex="-1" title="month" type="text">
                                    </td>
                                    <td>
                                       <input disabled id="curryear" tabindex="-1" title="year" type="text">
                                    </td>
                                 </tr>
                                 <tr class="row3">
                                    <td>
                                       <button id="prevd" tabindex="-1" title='step back 1 day'><span 
									    class="fa fa-chevron-down"></span></button>
                                    </td>
                                    <td>
                                       <button id="prevmonth" tabindex="-1" title='step back 1 month'><span 
									    class="fa fa-chevron-down"></span></button>
                                    </td>
                                    <td>
                                       <button id="prevyear" tabindex="-1" title='step back 1 year'><span 
									    class="fa fa-chevron-down"></span></button>
                                    </td>
                                 </tr>
                              </table>
                           </div>
						<div class="clearing" style="height: 12px;"></div>
                        </form>
                        <div id="projectionControl" 
						 style="float: left; width: 7.4em; margin: 6px 0 0 3px;">
                           <h4 class='proj2'><label class="proj" for="view_select">Projection</label></h4>
                           <select id="view_select" onchange="updateProjection()" 
						   title="choose a view">
                              <option value="asc">Global day</option>
                              <option value="dec">Global night</option>
                              <option value="arc">Arctic</option>
                              <option value="ant">Antarctic</option>
                           </select>
                        </div>
                     </div>
                     <!--// END DATE picker here //-->
                     <div class="layerBox panel panel-default" id="algo_panel" style="clear: both !important;">
                        <div class="panel-heading">
                           <div class="showCheck" id="l2product-checkbox">
                              <input id="l2product" onchange="showOn(0)" type="checkbox" value="">&nbsp;
                              <label for="l2product" title="show layer 1">Show</label>
                           </div>
                           <h4 class="panel-title"><a data-parent="#accordion" data-toggle="collapse" href="#collapseOne"><span class="glyphicon glyphicon-plus"></span> Layer 1</a></h4>
                        </div>
                        <div class="panel-collapse collapse in" id="collapseOne">
                           <select id="sat_select" onchange="updateProducts(0)" title="choose a satellite">
                              
							  <option value="N20"> NOAA-20 </option>
							  <option value="SNPP"> Suomi NPP </option>
                              <option value="GCOM"> GCOM </option>
                              <option value="S5P"> Sentinel 5P </option>
                           </select>
                           <select id="sens_select" onchange="updateProducts(0)" 
						   title="choose a product group">
                              <option value="Land"> Land </option>
                              <option value="Aerosols"> Aerosols </option>
                              <option value="NUCAPS Trace Gases"> NUCAPS Trace Gases </option>
                              <option value="NUCAPS Soundings"> NUCAPS Soundings </option>
                              <option value="Cryosphere"> Crysophere </option>
                              <option value="Ocean"> Ocean </option>
                              <option value="MIRS"> MIRS </option>
                              <option value="OMPS"> OMPS </option>
                              <option value="VIIRS Imagery"> VIIRS Imagery </option>
                           </select>
                           <select id="prod_select" onchange="updateProducts(0)" title="choose a product">
                              <option value="frpi"> I-Band Fire Radiative Power </option>
                           </select>
                           <select id="level_select" onchange="updateProducts(0)" style="display:none" title="choose a level">
                              <option> none </option>
                           </select>
                           <label class="op visually-hidden" for="slider">Opacity</label>
                           <input id="slider" max="1" min="0" oninput="layers.prods.setOpacity(this.value); updatePermalink()" step="any" title="drag handle to adjust layer opacity" type="range" value="1"> 
                        </div>
                     </div>
                     <div class="layerBox panel" id="algo_panel2">
                        <div class="panel-heading">
                           <div class="showCheck" id="l2product-checkbox2">
                              <input id="l2product2" onchange="showOn(1)" type="checkbox" value="">&nbsp;
                              <label for="l2product2" title="show layer 2">Show</label>
                           </div>
                           <h4 class="panel-title"><a data-parent="#accordion" data-toggle="collapse" href="#collapseTwo"><span class="glyphicon glyphicon-plus"></span> Layer 2</a></h4>
                        </div>
                        <div class="panel-collapse collapse" id="collapseTwo">
                           <select id="sat_select2" onchange="updateProducts(1)" title="choose a satellite">
                              <option value="N20"> NOAA-20 </option>
							  <option value="SNPP"> Suomi NPP </option>
                              <option value="GCOM"> GCOM </option>
                              <option value="S5P"> Sentinel 5P </option>
                           </select>
                           <select id="sens_select2" onchange="updateProducts(1)" 
						   title="choose a product group">
                              <option value="Land"> Land </option>
                              <option value="Aerosols"> Aerosols </option>
                              <option value="NUCAPS Trace Gases"> NUCAPS Trace Gases </option>
                              <option value="NUCAPS Soundings"> NUCAPS Soundings </option>
                              <option value="Cryosphere"> Crysophere </option>
                              <option value="Ocean"> Ocean </option>
                              <option value="MIRS Soundings"> MIRS Soundings </option>
                              <option value="OMPS"> OMPS </option>
                              <option value="VIIRS Imagery"> VIIRS Imagery </option>
                           </select>
                           <select id="prod_select2" onchange="updateProducts(1)" title="choose a product">
                              <option value="frpi"> I-Band Fire Radiative Power </option>
                           </select>
                           <select hidden="" id="level_select2" onchange="updateProducts(1)" 
						   title="choose a product group">
                              <option> none </option>
                           </select>
                           <label class="op visually-hidden" for="slider2">Opacity</label>
                           <input id="slider2" max="1" min="0" oninput="layers.prods2.setOpacity(this.value); updatePermalink();" step="any" title="drag handle to adjust layer opacity" type="range" value="1"> 
                        </div>
                     </div>
                     <div class="layerBox panel" id="algo_panel3">
                        <div class="panel-heading">
                           <div class="showCheck" id="l2product-checkbox3">
                              <input id="l2product3" onchange="showOn(2)" type="checkbox" value="">&nbsp;
                              <label for="l2product3" title="show layer 3">Show</label>
                           </div>
                           <h4 class="panel-title"><a data-parent="#accordion" data-toggle="collapse" href="#collapseThree"><span class="glyphicon glyphicon-plus"></span> Layer 3</a></h4>
                        </div>
                        <div class="panel-collapse collapse" id="collapseThree">
                           <select id="sat_select3" onchange="updateProducts(2)" title="choose a satellite">
                              <option value="N20"> NOAA-20 </option>
                              <option value="SNPP"> Suomi NPP </option>
                              <option value="GCOM"> GCOM </option>
                              <option value="S5P"> Sentinel 5P </option>
                           </select>
                           <select id="sens_select3" onchange="updateProducts(2)" title="choose a sensor">
                              <option value="Land"> Land </option>
                              <option value="Aerosols"> Aerosols </option>
                              <option value="NUCAPS Trace Gases"> NUCAPS Trace Gases </option>
                              <option value="NUCAPS Soundings"> NUCAPS Soundings </option>
                              <option value="Cryosphere"> Crysophere </option>
                              <option value="Ocean"> Ocean </option>
                              <option value="MIRS Soundings"> MIRS Soundings </option>
                              <option value="OMPS"> OMPS </option>
                              <option value="VIIRS Imagery"> VIIRS Imagery </option>
                           </select>
                           <select id="prod_select3" onchange="updateProducts(2)" title="choose a product">
                              <option value="frpi"> I-Band Fire Radiative Power </option>
                           </select>
                           <select hidden="" id="level_select3" onchange="updateProducts(2)" title="choose a sensor">
                              <option> none </option>
                           </select>
                           <label class="op visually-hidden" for="slider3">Opacity</label>
                           <input id="slider3" max="1" min="0" oninput="layers.prods3.setOpacity(this.value); updatePermalink();" step="any" title="drag handle to adjust layer opacity" type="range" value="1"> 
                        </div>
                     </div>
                     <div class="layerBox panel" id='nonProd'>
                        <div class="panel-heading">
                           <h4 class="panel-title" style='width: 80%;'><a data-parent="#accordion" data-toggle="collapse" href="#collapseFour"><span class="glyphicon glyphicon-plus"></span> Other layers</a></h4>
                        </div>
                        <div class="panel-collapse collapse" id="collapseFour">
                           <div class="checkbox">
                              <label>
                              <input checked="checked" id="truecolor" onchange="updateTrueColor()" tabindex="-1" type="checkbox" value=""><span id="ent">SNPP VIIRS true&nbsp;color</span></label>
                           </div>
                           <div class="checkbox">
                              <label>
                              <input id="granlines" onchange="updateGranules()" tabindex="-1" type="checkbox" value=""><span id="granname">SNPP VIIRS data&nbsp;granules</span></label>
                           </div>
                           <div class="checkbox">
                              <label>
                              <input id="roadmap" onchange="updateRoadmap()" tabindex="-1" type="checkbox" value="">Road Map</label>
                           </div>
						   <div class="checkbox">
                              <label>
                              <input id="surfacetype" onchange="updateSurfaceType()" tabindex="-1" type="checkbox" value="">Surface Type</label>
                           </div>
                           <div class="checkbox">
                              <label>
                              <input checked="checked" id="borders" onchange="updateBorders()" tabindex="-1" type="checkbox" value="">Borders</label>
                           </div>
                           <div class="checkbox">
                              <label>
                              <input id="title" onchange="updateTitle()" tabindex="-1" type="checkbox" value="">Title</label>
                           </div>
                        </div>
                     </div>
					<!-- <div id='animControls' class="layerBox panel">
		<div class="panel-heading">
			<h4 class="panel-title" style='width: 80%;'><a data-toggle="collapse" data-parent="#accordion" 
			href="#collapseSix"><span class="glyphicon glyphicon-plus"></span> Animation controls</a></h4>
		</div>

                <div id="collapseSix" class="panel-collapse collapse">
			<button type="button" class="btn btn-info btn-md" title="slower" onclick="animateSlower()">
<span class="glyphicon glyphicon-backward"></span> 
</button>
<button type="button" class="btn btn-info btn-md" title="step backward" onclick="animatePrev()">
<span class="glyphicon glyphicon-step-backward"></span> 
</button>
<button type="button" class="btn btn-info btn-md"  title="animate" onclick="animatePlay()">
<span id="anim_play_stop" class="glyphicon glyphicon-play"></span> 
</button>
<button type="button" class="btn btn-info btn-md" title="step forward" onclick="animateNext()">
<span class="glyphicon glyphicon-step-forward"></span> 
</button>

<button type="button" class="btn btn-info btn-md" title="faster" onclick="animateFaster()">
<span class="glyphicon glyphicon-forward"></span> 
</button>
		</div>

	</div>-->
				 <div class="layerBox panel" id='aboutBox' style="display: none;">
					<div class="panel-heading">
					   <h4 class="panel-title" style='width: 80%;'><a 
					   data-parent="#accordion" data-toggle="collapse" href="#collapseFive"><span class="glyphicon glyphicon-plus"></span> News</a></h4>
					</div>
					<div class="panel-collapse collapse" id="collapseFive">
					   <ul id="newsList"></ul>
					</div>
				 </div>
                  </div>
                  <!--// END of padding container //-->
               </div>
               <!--// END of nav column //-->
               <div class="map" id="map">
                  <div class="openbtn glyphicon glyphicon-menu-left" onclick="openNav(" id="openbutton" data-html2canvas-ignore="true"></div>
                  <div class="saveIm" id="downloadContainer" data-html2canvas-ignore="true">
                     <div class="glyphicon glyphicon-download-alt center" id="download"></div>
                  </div>
                  <div class="overlay" id="vienna"></div>
				  <div class="latlon" id="latlonBox"></div>
                  <div class="granuleindicator" id="granuleindicator" style="visibility:hidden"></div>
				  <div class="legend" id="legend"></div>
				  <div class="dummyCB" id="dummyCBcont"></div>
               </div>
            </div>
         </div>
      </div>
      <div class="map">
         <div class="newspopup" id="newspop" style="visibility:hidden">
            <div class="newsClose glyphicon glyphicon-remove" onclick='document.getElemen (tById("newspop").style.visibility="hidden"'></div>
            <h4 id="newsHead"></h4>
            <p id="newsText"></p>
            <a href="" id="newsLink">Map URL</a> 
         </div>
            <!--// END of out containing DIV //-->
            <script src="lib/products.js"></script>
            <script src="doc/news.js"></script>
            <script src="lib/combinedScripts.js"></script>
         </div>
      </div>
   </body>
</html>