<html>
<head>
<!-- 
  /*
  for this to be appealing, it needs to be able to spawn a window to track the playback but leave the initial window
  in case want to stop the current playing show
  
  eventually, this could get to be quite a few shows!  Maybe too big to be a simple list.  falcon player uses flat dir so any org will need to be via file name
  
  suggest:
  
  Park_Filename_Year.sh  replace spaces with + example:
  DL_Fantasmic_2012-10-03.sh
  
  then sort the files alpha and the respective park shows should group nicely and replicate recordings will be in chron order
  
  move the random playback selector to this script and provide an option for it to roll on until stopped.
  
  allow queue of several into a playlist
  
  expand this to allow simple controller functionality, too.
  */
-->

<style>
 div#player{
	 max-width:800px;
	 margin:auto;
	 
 }
 #status{
  border: 1px solid #333;
  //box-shadow: 8px 8px 5px #444;
  padding: 8px 12px;
  background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
  width:100%;
  display:inline;
  float: left;
  color: gray;
  font-size:2em;
  //vertical-align:center;
  margin-top:auto;
  margin-bottom:auto;
 }
 #off{
  display:inline;
  float:right;
  font-size:1em;
 }
 #parks{
	 font-size:120%;
 }	 
 #choices{
	 clear:all;
	 width:100%;
	 font-size:130%;
	margin-top:20px;
	 margin-bottom:20px;
	 line-height:120%;
	 color:white;
	 background-color:gray;
	
 }
 #choices a{
	 text-decoration:none;
	  //color:#f0e68c;
	  color:#fafad2;
 }
 #sdate{
	 font-size:70%;
	 margin-left: 10px;
 }
 #playing{
	 color:black;
	 border: 1px solid #333;
	 background-color:white;
	 padding: 0px 5px 0px 5px;
	 width:55%;
	 height:1.3em;
	 margin-right:10px;
	 margin-left:10px;
	 display:inline;
     float:right;
	 overflow: hidden;
 }
.shadowbox {
  border: 1px solid #333;
  //box-shadow: 8px 8px 5px #444;
  padding: 8px 12px;
  //background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
}
</style>
<script type="text/javascript">

function sendRequest(req){
var oReq = new XMLHttpRequest();

oReq.addEventListener("loadend", loadEnd);

oReq.open("GET", req.href);
oReq.send();
var re = /.*scriptName=(.*)\.sh/;
var str = req.href;
var nstr = str.replace(re,'$1');
var ff = document.getElementById('playing');
			//ff.innerHTML=nstr;
			ff.innerHTML=req.innerHTML;
			document.getElementById('off').removeAttribute("disabled");
return false;
}


function loadEnd(e) {
  console.log("The transfer is complete.");
  
  var ff = document.getElementById('playing');
  ff.innerHTML = "&nbsp;";
  document.getElementById('off').setAttribute("disabled", "disabled");
}

function stopPlayback(){
	//var u = new URL("http://fpp.local/runEventScript.php?scriptName=.stopvideos.sh");
	var a = document.createElement('a');
    a.setAttribute('href',"/runEventScript.php?scriptName=.stopvideos.sh");
    a.innerHTML = "Stop Playback";
	sendRequest(a);
}
</script>
</head>
<body>
<div id="player">
<div id="status">Now Playing: <button id="off" type="button" onclick="stopPlayback();return false;">Stop</button><div id="playing">&nbsp;</div></div>
<br/>
<?php
//get the files available from the scripts dir
//$d = dir("/home/fpp/media/scripts");
$parks = array();
$parks['DL']='Disneyland';
$parks['DLP']='Disneyland - Parades';
$parks['DWO']='Disney World - Osborne Lights';

$curPark='';
$d = '/home/fpp/media/scripts';
$fls = array_diff(scandir($d), array('..', '.'));
//create the links
//while (false !== ($entry = $d->read())) {
print '<div id="choices" class="shadowbox">';	
foreach($fls as $f){
	$parts=explode('_',$f);
	if(count($parts) > 1 && isset($parks[$parts[0]])){
		if($parts[0] != $curPark){
			print '<p id="parks">'.$parks[$parts[0]].'</p>';	
			$curPark=$parts[0];
		}
		$show='&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'.str_replace('-',' ',$parts[1]);
		if(isset($parts[2])){
			$show.='<span id="sdate">('.str_replace('.sh','',$parts[2]).')</span>';
		}	
	}else{
		if($parts[0][0] != '.'){
			$show=$parts[0];
		}
	}
   //echo '<a href="/runEventScript.php?scriptName='.$entry.'" target="_blank">'.$entry.'</a><br/>';
   print '<p><a href="/runEventScript.php?scriptName='.$f.'" onclick="sendRequest(this);return false;">'.$show.'</a></p>';
}
print '</div>';
//$d->close();
//include a stop button
?>

</div><!-- end player div -->
</body>
</html>