<?php //homeweatherstation sun & moon information kind of a unique approach 12th July July 2016// ?>
<?php include_once('livedata.php');?>
<link href="css/main.min.css" rel="stylesheet prefetch" type="text/css">
<link href="font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet prefetch" type="text/css">
<style>
body{background-color: #3d3d3d;}
.sunposition{display:inline;font-size:12px;margin-top:-110px;margin-left:115px;color:#f26c4f;line-height:11px}.sunsetposition{display:inline;font-size:12px;margin-top:-110px;margin-left:-130px;color:#66a1ba;line-height:11px}.sunup{position:absolute;margin-top:70px;margin-left:-100px}.sundown{position:absolute;margin-top:-5px;margin-left:210px}.sunpositionsunrise{position:absolute;font-size:12px;margin-top:-110px;margin-left:140px;color:#f26c4f;line-height:11px}.sunpositionsunset{position:absolute;font-size:12px;margin-top:-110px;margin-left:445px;color:#66a1ba;line-height:11px}.sunposition1{position:absolute;top:280px;left:260px}sm-progress-arc{display:block;width:150px;background-image:url(img/sunrisebac.png);background-repeat:no-repeat;}.hoursgoneby{position:absolute;top:40px;left:25px;font-size:12px;color:#ccc}.wi-meteor:before {content: "\f071";color:#f26c4f;}
</style>
 <script src="js/jquery.js"></script> 
 <?php //homeweatherstation calculate sunrise/set times and differences
		date_default_timezone_set($TZ);
        $result = date_sun_info( time(), $lat, $lon );		
		// homeweatherstation sun hours graphic beta June27th 2016//
		$suns =date( 'H.i.s', $result['sunset'] );
		$sunr= date( 'H.i.s', $result['sunrise']  );
		$now =date('H.i.s');
		$diff3 = $now - $sunr ;	
		
		
		$suns =date( 'H.i.s', $result['sunset'] );
		$sunr= date( 'H.i.s', $result['sunrise']  );
		$now =date('H.i.s');
		$diff4 = $suns - $sunr ;		        	
        // homeweatherstation to sunset	(1)
        $startdate="$now"; 
        $enddate="$suns"; 
        $diff=strtotime($enddate)-strtotime($startdate); 
        $temp=$diff/86400; 
        $days1=floor($temp);  $temp=24*($temp-$days1); 
        $hours1=floor($temp);  $temp=60*($temp-$hours1); 
        $minutes1=floor($temp);  $temp=60*($temp-$minutes1);
        $seconds1=floor($temp); 		
		 // homeweatherstation from sunrise	(2)
        $startdate="$sunr"; 
        $enddate="$now"; 
        $diff=strtotime($enddate)-strtotime($startdate); 
        $temp=$diff/86400; 
        $days2=floor($temp);  $temp=24*($temp-$days2); 
        $hours2=floor($temp);  $temp=60*($temp-$hours2); 
        $minutes2=floor($temp);  $temp=60*($temp-$minutes2);
        $seconds2=floor($temp); 		
		 // homeweatherstation to sunrise after (00:00) midnight (3)	
        $startdate="$now"; 
        $enddate="$sunr"; 
        $diff=strtotime($enddate)-strtotime($startdate); 
        $temp=$diff/86400; 
        $days3=floor($temp);  $temp=24*($temp-$days3); 
        $hours3=floor($temp);  $temp=60*($temp-$hours3); 
        $minutes3=floor($temp);  $temp=60*($temp-$minutes3);
        $seconds3=floor($temp); 
		
		
		 // homeweatherstation to sunrise after (00:00) midnight (3)	
        $startdate="$sunr"; 
        $enddate="$suns"; 
        $diff=strtotime($enddate)-strtotime($startdate); 
        $temp=$diff/86400; 
        $days4=floor($temp);  $temp=24*($temp-$days4); 
        $hours4=floor($temp);  $temp=60*($temp-$hours4); 
        $minutes4=floor($temp);  $temp=60*($temp-$minutes4);
		$seconds4=floor($temp); 
		
		
		// end homeweatherstation calculations		 
?>
<!-- homeweatherstation moon info Add the container -->
<div id="container" style="width: 600px; height: 430px; border:0px;">
<div class="titleforecast"><span style="color:#ccc;font-size:1em;margin-left:120px;margin-top:25px;"><i class="fa fa-map-marker1 fa-1x"></i> <?php
echo "${stationName} \n";
?><strong>Current</strong> <i class='wi wi-moon-alt-waning-crescent-3' ></i> <span style="color:#59a6c2"> Moon  </span>  <span style="color:#f27260;"> 
<i class='wi wi-horizon-alt' ></i> Sun  </span>Information </span></span></div>
<div style="margin-left:-30px;width:600px;position:static;">
<!-- MOON  phase for homeweather station--> 
 <div class="mooncircle"><moonhead>
 Luminance</moonhead><br />
<?php  $date="";$time="";$tzone="$TZ </span>" ;do_phase($date,$time,$tzone);
function do_phase($date,$time,$tzone){
$moondata=phase(strtotime($date.' '.$time.' '.$tzone));
$MoonIllum=$moondata[1];$MoonIllum=round($MoonIllum,2);$MoonIllum*=100;
if($MoonIllum==0){$phase="New Moon";}
if($MoonIllum==100){$phase="Full Moon";}
print"$MoonIllum%\n";}?>
<?php echo $moon = moon_posit($months, $days, $years);?>
</div> 
<div class="mooninfo">
<span style="color:#f26c4f;font-size:0.9em;"> Moonrise:
<span style="color:#ccc;font-weight:normal;">
<?php echo  date('d-m-Y H:i',$MoonRise ),"\n";?><i class='wi wi-moonrise'></i></span>
<span style="color:#66a1ba;">&nbsp;Moonset:<span style="color:#ccc;font-weight:normal;">
<?php echo date('d-m-Y H:i',$MoonSet ),"\n";?><i class='wi wi-moonset'></i></span>
<br />
</span></span>

<span style="color:#ccc;font-size:0.9em;"> 
<i class='wi wi-moon-new'></i> 
Next Full Moon<span style="color:#f26c4f;"> 
<?php  // homeweatherstation fullmoon info output 1st Aug
$moon = new MoonPhase();
//$nextnewmoon1 = date( 'jS-M-Y', $moon->new_moon() );
echo "";
if(date('jS-M-Y')  < $moon->full_moon()) {echo date( 'jS-M-Y', $moon->full_moon() );}
else if(date('jS-M-Y')  > $moon->full_moon()) {echo date( 'jS-M-Y', $moon->next_full_moon() );}
?></span>

<span style="color:#ccc;"> 
<i class='wi wi-moon-full'></i> 
<?php // homeweatherstation create an instance of the next new moon
$moon = new MoonPhase();
$nextnewmoon = date( 'jS-M-Y', $moon->next_new_moon() );
echo "New Moon <span style='color:#66a1ba;'>$nextnewmoon";?></span>
<br />

<i class='wi wi-moon-alt-waning-crescent-3' ></i> 
<?php // homeweatherstation create an instance of the age of moon
$moon = new MoonPhase();
$moonage =round($moon->age(),2);
echo "Moon is <span style='color:#66a1ba;'>$moonage days old";?></span>

<i class='wi wi-meteor' ></i> <span style="color:#66a1ba;"> 
<?php // homeweather station simple meteor shower output of major shower events  august 7th 2016 brian underdown //
$date=date("m,d");if($date=="08,07"){echo "Perseids 8th-14th";}else if($date=="08,08"){echo "Perseids 8th-14th";}else if($date=="08,09"){echo "Perseids 8th-14th";}else if($date=="08,10"){echo "Perseids 8th-14th";}else if($date=="08,11"){echo "Perseids peak viewing";}else if($date=="08,12"){echo "Perseids peak viewing";}else if($date=="08,13"){echo "Perseids peak viewing";}else if($date=="08,14"){echo "Perseids peak passed";}else if($date=="01,03"){echo "Quadrantids peak viewing";}else if($date=="01,04"){echo "Quadrantids peak viewing";}else if($date=="04,21"){echo "Lyrids peak viewing";}else if($date=="04,22"){echo "Lyrids peak viewing";}else if($date=="05,05"){echo "Eta Aquarids peak viewing";}else if($date=="05,06"){echo "Eta Aquarids peak viewing";}else if($date=="07,28"){echo "Delta Aquarids peak viewing";}else if($date=="07,29"){echo "Delta Aquarids peak viewing";}else if($date=="10,7"){echo "Draconids peak viewing";}else if($date=="10,20"){echo "Orionids peak viewing";}else if($date=="10,21"){echo "Orionids peak viewing";}else if($date=="11,4"){echo "South Taurids peak viewing";}else if($date=="11,5"){echo "South Taurids peak viewing";}else if($date=="11,11"){echo "North Taurids peak viewing";}else if($date=="11,11"){echo "North Taurids peak viewing";}else if($date=="11,16"){echo "Leonids peak viewing";}else if($date=="11,17"){echo "Leonids peak viewing";}else if($date=="12,13"){echo "Geminids peak viewing";}else if($date=="13,14"){echo "Geminids peak viewing";}else{echo "No Major Showers";}?></span><br />
</span></span></span>
<div class="line"></div>
<!--- homeweather station animated beta sun hours designed by brian underdown June 2016 --->
<?php  // homeweatherstation sunrise/set/first light/last light simple script using in built php 
date_default_timezone_set($TZ);$result = date_sun_info( time(), $lat, $lon );
?> 
<div class="sunpos">
       <div class="sunpos-times">       
       </div>        
    <div class="sunrisesunset">
        <div class="sunrise"> <i class='wi wi-sunrise'></i>
        Sunrise: <?php echo '', date( 'H:i', $result['sunrise'] ), " " ;?></div>
        <div class="sunset">
        Sunset: <?php echo '', date( 'H:i', $result['sunset'] ), " " ;?> <i class='wi wi-sunset'></i></div>
    </div>  
    <div class="firstlight">
        <div class="sunrise">
        <span style="color:#ee7259;"><i class='wi wi-horizon' ></i></span> 
        First Light:<?php echo '', date( 'H:i', $result['civil_twilight_begin'] ), " " ;?></div>
        <div class="sunset">
        Last Light: <?php echo '', date( 'H:i', $result['civil_twilight_end'] ), " " ;?><span style="color:#ee7259;"><i class='wi wi-horizon' ></i></span>
        </div></div></div></div></div></div> 

 <!--homeweatherstation daylight hours canvas circle designed by brian underdown August 8th 2016--- updated june27th 2016-->
 <?php $zenith=90+(50/60);$sunrise=date_sunrise(time(),SUNFUNCS_RET_STRING,$lat,$lon,$zenith,$UTC);$sunrise_time=date(strtotime(date("H:i").' '.$sunrise));$sunset=date_sunset(time(),SUNFUNCS_RET_STRING,$lat,$lon,$zenith,$UTC);$sunset_time=date(strtotime(date("H:i").' '.$sunset));$date1=date_create("$sunset");$date2=date_create("$sunrise");$today=date('H.i:s');$diff=date_diff($date1,$date2);?>  
<div class="daylight" id="daylight" data-percent="<?php echo $hours4;?>:<?php echo '';if($minutes4 <10) {echo '0'.$minutes4;}else echo "$minutes4";?>" color='#fff'></div>   
        <script>
		<!--minified homweatherstation daylight script june23rd 2016 --- updated june27th 2016 --->
		var el=document.getElementById("daylight"),options={percent:el.getAttribute("data-percent")||24,size:el.getAttribute("data-size")||160,lineWidth:el.getAttribute("data-line")||10,rotate:el.getAttribute("data-rotate")||0},canvas=document.createElement("canvas"),span=document.createElement("daylighthours");span.textContent=options.percent+" hrs","undefined"!=typeof G_vmlCanvasManager&&G_vmlCanvasManager.initElement(canvas);var ctx=canvas.getContext("2d");canvas.width=canvas.height=options.size,el.appendChild(span),el.appendChild(canvas),ctx.translate(options.size/2,options.size/2),ctx.rotate((-0.5+options.rotate/180)*Math.PI);var radius=(options.size-options.lineWidth)/2,drawCircle=function(t,e,a){a=Math.min(Math.max(0,a||1),1),ctx.beginPath(),ctx.arc(0,0,radius,0,2*Math.PI*a,!1),ctx.strokeStyle=t,ctx.lineCap="square",ctx.lineWidth=e,ctx.stroke()};drawCircle("#555",options.lineWidth,1),drawCircle("#f26c4f",options.lineWidth,options.percent/24);      
        </script>
        
<div class="sunpositionsunrise">
<?php  // homeweatherstation sunrise info output
echo "";
if(date('H.i')  < $sunr) {echo "${hours3}hrs ${minutes3} mins<br>to Sunrise ";}
else if(date('H.i')  > $suns) {echo 'Darkness<br>Hours';}
else echo "Sunrise was ${hours2}hrs<br>${minutes2} mins ago";
?></div>  
<div class="sunpositionsunset">
<?php // homeweatherstation sunset/horizon 
echo "";
if(date('H.i')  < $sunr) {echo 'Sun is below<br>horizon';}
else if(date('H.i')  > $suns) {echo 'Sun is below<br>horizon';}
else echo "${hours1}hrs ${minutes1} mins<br>till Sunset ";
?>
</div>
<div class="sunposition1">
<div class="sunup"> 
 <img src="img/sunup.png" width="35" height="35" alt="homeweatherstation sunrise"/></div>
 <div ng-app="app">
 <sm-progress-arc progress="
  <?php // simple progess for daylight hours passed for homeweatherstation
  if ($now<$sunr)print "0";  
  else if ($now>$suns)print "0";  
  else print $hours2;  
  ?>
  "> 
  </sm-progress-arc>     
</div>
<div class="sundown"> 
 <img src="img/sundown.png" width="35" height="35" alt="homeweatherstation sunset"/></div> 
</div>
<div style="margin-top:-25px;position:absolute;">
<Script Language='Javascript'>document.write(unescape('%3C%61%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%77%65%61%74%68%65%72%2D%64%69%73%70%6C%61%79%2E%63%6F%6D%22%20%74%61%72%67%65%74%3D%22%5F%62%6C%61%6E%6B%22%3E%20%3C%69%6D%67%20%73%72%63%3D%22%69%6D%67%2F%73%6D%61%6C%6C%6C%6F%67%6F%2E%70%6E%67%22%20%3E%3C%2F%61%3E'));</Script></div>
 <script src='js/angular.js'></script>
 <script src='js/d3.js'></script>
  <script>
  "use strict";angular.module("app",[]).directive("smProgressArc",function(){return{scope:{progress:"="},restrict:"AE",link:function link(scope,elem,attrs){console.log(scope.progress);var container=elem[0];var pi=Math.PI,width=container.offsetWidth;var outerRadius=width/2;var innerRadius=0*outerRadius;console.log("width",width);var svg=d3.select(container).append("svg").attr("width",width).attr("height",width/2).append("g").attr("transform","translate("+width/2+","+width/2+")");var arc=d3.svg.arc().innerRadius(outerRadius).outerRadius(innerRadius).startAngle(-pi/2).endAngle(pi/2);svg.append("path").attr("class","arc").attr("d",arc).attr("fill","rgba(233, 235, 241, 0.5)");var percent=-pi/2+scope.progress*pi/<?php print $diff4;?>;arc.endAngle(percent);svg.append("path").attr("d",arc).attr("fill","rgba(242, 108, 79, 0.8)");}};});   
  </script>
  
  
</div></div></div>
<!--- Homeweatherstation respect the design and the time it took to make the code ---->
