var $filename = new Array();
var $header = new Array();
var $caption = new Array();
var $aspect = new Array();
var $framerate = new Array();
var $options = new Array();
var $choice=0;
var $fullwidth=0;
var $myFramerate=1;

$i=0;
$filename[$i]='empty.jpg';
$aspect[$i]=700/1280;
$header[$i]='';
$caption[$i]='';

if (location.search.length>1) 
{
	$choice = location.search.substring(1)
}
else 
{
	$choice = "0"
}

if (document.captureEvents) document.captureEvents(Event.KEYDOWN); //KEYPRESS does not see arrows
document.onkeydown = processKeypresses; 

var $opacity=0; //0.1;   //See also pageYOffset in insertpicture
document.write('<img style="z-index:85; background-color: yellow; position:absolute; top:0px; left:170px; width:5em; height:60%; opacity:'+$opacity+';" onclick="backward();" src="spacer.gif">');
document.write('<img style="z-index:84; background-color: yellow; position:absolute; top:0px; right:0px; width:5em; height:60%; opacity:'+$opacity+';" onclick="forward();" src="spacer.gif">');


function backward()
{
	$fullwidth=0;
	if ($choice>1) 
	{
		$choice--
	}
	else 
	{
		$choice=$numberoffiles
	}
	insertpicture($choice)
}

function forward()
{
	$fullwidth=0;
	if ($choice<$numberoffiles) 
	{
		$choice++
	}
	else 
	{
		$choice = "1"
	}
	insertpicture($choice)
}

function processKeypresses(e) {
//alert(navigator.appName);
if(navigator.appName == "Netscape") k = e.which; // key's ASCII code (Netscape and Mozilla and Safari)
else k=event.keyCode; // key's ASCII code (IE and Opera)
//alert(k);
if (k==13) forward(); // return
if (k==27) history.back(); // esc
if (k==37) backward(); // arrow left 
//if (k==33) backward(); // clicker page up
//if (k==38) $fullwidth=1; insertpicture($choice); // arrow up CLICK ON PICTURE INSTEAD
//if (k==34) forward(); // clicker page down 
if (k==39) forward(); //  arrow right 
//if (k==40) $fullwidth=0; insertpicture($choice); // arrow down CLICK ON PICTURE INSTEAD
if (k==90) window.parent.frames['contents'].focus(); // z to move focus back to upper frame (needed when thumb show is embedded in regular show
// movie controls
if (k==32) step(0); //  space toggles play
if (k==188) step(-1); //, below <  
if (k==190) step(1); //.  below > 
if (k==191) step(0); //  below ? toggles play
if (k==219) step(-2); // [ 
if (k==221) step(2); //  ] 
if (k==32) return false; // no further action
//if (k==33) return false; // no further action
//if (k==34) return false; // no further action
}

function insertpicture(n)
{
//	window.scrollTo(0,0);  //scroll back to top of page

	$choice=n;  //remember selected file
	if (n>=0)
	{
		if (n>$numberoffiles) {n=$numberoffiles}
		for ($i=1;$i<=$numberoffiles;$i=$i+1) {document.getElementById('thumb'+$i).style.border="";}
 		if (n>0) {document.getElementById('thumb'+$choice).style.border="1px solid blue";} //hilite selected

//		www.geekpedia.com/code100_Get-window-width-and-height.html   
		var $x=0;
		var $y=0;
		
		if (self.innerHeight) // all except Explorer
		{
			$x=self.innerWidth;
			$y=self.innerHeight;
		}
		else if (document.documentElement && document.documentElement.clientHeight) //Explorer 6 strict mode
		{
			$x=document.documentElement.clientWidth;
			$y=document.documentElement.clientHeight;
		}
		else if (document.body) // other Explorers
		{
			$x=document.body.clientWidth;
			$y=document.body.clientHeight;
		}
		
		$width0= $x-0.08*$x-140;  // 140 pixel left column plus 4 * 2% margins
		$y=.98*$y;
//		if($caption[n]){$y=$y-24*$caption[n].length*5/$y; if($caption[n].match("<br>")) {$y=$y-24;}} //adjust for text lines
    	if($header[n]) {$y=$y-48;}  //leave space for header and caption

    	if ($filename[n].match(".mp4")) {$y=$y-24;} //leave space for control bar
    	if ($filename[n].match(".mov")) {$y=$y-24;}

		if (!$options[n]) //options not set
		{
			$options[n]="";
		}

		if (!$aspect[n]>0) //aspect value not set
		{
			$aspect[n]=1;
		}

		$width=$width0;
		if ($width*$aspect[n] > $y )
		{
			$width=$y/$aspect[n];
		}

		$code=""
    	if(typeof(window.pageYOffset) == 'number') 
    	{
    		scrolltop = window.pageYOffset; 
    		if(scrolltop>0) {$code='<img src="../images/spacer.jpg" height="'+scrolltop+'px" width="200px"><br>';}

			$code=$code+'<img style="z-index:83; background-color: yellow; position:absolute; left:170px; width:5em; height:60%; opacity:'+$opacity+';" onclick="backward();" src="spacer.gif">';
			$code=$code+'<img style="z-index:82; background-color: yellow; position:absolute; right:0px; width:5em; height:60%; opacity:'+$opacity+';" onclick="forward();" src="spacer.gif">';
    	}
		
 		$code=$code+'<div style="width:'+$width0+'px;"><div align="center">';
 		if ($header[n]!="") $code=$code+$header[n]+'<br>';
 		if ($filename[n].match(".html")) //file is a webpage
 		{
 			  $code=$code+'<iframe src="../slides/'+$filename[n]+'" width='+$width0+' height='+$y+' frameborder="0" style="display:block;"></iframe>';
//			  alert($code);
 		}
 		else if ($filename[n].match(".mov")==null && $filename[n].match(".mp4")==null)
 		{
			if ($filename[n]!="" && $filename[n].match("thumbs/")==null)
			{
			    $code=$code+'<img src="../images/';
			    $code=$code+$filename[n]+'" width=';
				if ($fullwidth==1) 
				{
					$code=$code+$width0+'px height='+ ($width0*$aspect[n]+0) +'px onclick="javascript:$fullwidth=0; insertpicture($choice);">';
				}
				else 
				{
					$code=$code+$width+'px height='+ ($width*$aspect[n]+0) +'px onclick="javascript:$fullwidth=1; insertpicture($choice);">';
				}
			}
		}
		else  //file is a movie
		{
//			$code=$code+'<a href="../movies/' + $filename[n] + '" target="blank">';
			$code=$code+'<video playsinline id="videobox" width="' + $width + '" height="'+ ($width*$aspect[n]) + '"';
			if ($options[n])
			{
				$myFramerate=1;
				if ($options[n].indexOf("framerate=") != -1)
				{
					$myFramerate=$options[n].split("framerate=")[1]; //portion that follows framerate=
					$myFramerate=1/$myFramerate.split(" ")[0];  //up to next blank  //25 fps becomes 0.04 increment
				}

				if ($options[n].indexOf("loop") != -1) {$code=$code + ' loop '}
				
				$time=0;
				$code=$code+' onloadeddata="';
				if ($options[n].indexOf("starttime=") != -1)
				{
					$time=$options[n].split("starttime=")[1]; //portion that follows starttime=
					$time=$time.split(" ")[0];  //up to next blank
					$time = $time.split(':'); // split it at the colons 00:00:00.0
					$seconds= (+$time[0]) * 60 + (+$time[1]) + (+$time[2]/60); // convert to seconds
					$code=$code+' this.currentTime='+$seconds+'; ';
				}
				if ($options[n].indexOf("volume=") != -1)
				{
					$volume=$options[n].split("volume=")[1]; //portion that follows volume=
					$volume=$volume.split(" ")[0];  //up to next blank
					$code=$code+' this.volume='+$volume+'; ';
				}
				$code=$code+'"';
			}
			
			if ($options[n].indexOf("controls") != -1)  //Use movie controller if requested
			{ 
	    		$code=$code+' controls ><source src="../movies/'+$filename[n]+'" type="video/mp4">'; 
	    		$code=$code+'Your browser does not support HTML5 video.</video>';
			}
	    	else //or use single step controls for graphs
	    	{
	    		$code=$code+'><source src="../movies/'+$filename[n]+'" type="video/mp4">'; 
	    		$code=$code+'Your browser does not support HTML5 video.</video>';
				$code=$code+'<div style="font-size: 75%; " ><img src="../keys/lbrack.png" alt="Press left bracket or click me for first image in movie" onclick="step(-2);" style="display:inline-block; vertical-align:middle; ">&nbsp;&nbsp;';
				$code=$code+'Use&nbsp;&nbsp;<img src="../keys/comma.png" alt="Press comma or click me to back up one movie frame" onclick="step(-1);" style="display:inline-block; vertical-align:middle; ">&nbsp;&nbsp;or';
				$code=$code+'&nbsp;&nbsp;<img src="../keys/period.png" alt="Press period or click me to advance one movie frame" onclick="step(1);" style="display:inline-block; vertical-align:middle; ">&nbsp;&nbsp;to change single frames, and';
				$code=$code+'&nbsp;&nbsp;<img src="../keys/space.png" alt="Press spacebar or click me to toggle movie play" onclick="step();" style="display:inline-block; vertical-align:middle; "> to play/pause.';
				$code=$code+'&nbsp;&nbsp;<img src="../keys/rbrack.png" alt="Press left bracket or click me for last image in movie" onclick="step(2);" style="display:inline-block; vertical-align:middle; "></div>';
	    	}
	    }	
		$code=$code+'</div>'+ $caption[n]+'</div>';
//		alert($code);
 		document.getElementById('pictureframe').innerHTML=$code;
 		if ($options[n].indexOf("playbackrate=") != -1)
		{
			$playbackrate=$options[n].split("playbackrate=")[1]; //portion that follows playbackrate=
			$playbackrate=$playbackrate.split(" ")[0];  //up to next blank
			document.querySelector('video').playbackRate = $playbackrate; //0.24 * 25fps = 6fps, 0.04 * 25fps = 1fps
		}
 		document.getElementById('videobox').play();
 	}
 	else //filename instead of number, used by conductivity
 	{
		$myFramerate=1/15; 	
		$code='<table></tr><td>'+($choice.split('/')[1]).split('_')[0]+'&nbsp;&nbsp;</td><td><video playsinline autoplay id="videobox" height=320px >'; //autoplay on iphone loads first frame
		$code=$code+'<source src="../movies/' + $choice + '.mp4" type="video/mp4">'; 
    	$code=$code+'Your browser does not support HTML5 video.</video>';
    	$code=$code+'<div align="center" style="font-size: 75%;" ><img src="../keys/lbrack.png" alt="Press left bracket or click me for first image in movie" onclick="step(-2);" style="display:inline-block; vertical-align:middle; ">&nbsp;&nbsp;';
		$code=$code+'&nbsp;&nbsp;Use <img src="../keys/space.png" alt="Press spacebar or click me to toggle movie play" onclick="step();" style="display:inline-block; vertical-align:middle; "> to play/pause.';
		$code=$code+'&nbsp;&nbsp;<img src="../keys/rbrack.png" alt="Press left bracket or click me for last image in movie" onclick="step(2);" style="display:inline-block; vertical-align:middle; "></div>';
    	$code=$code+'</td></tr></table>';
//		alert($code);
 		document.getElementById('pictureframe').innerHTML=$code;
//	  	document.getElementById('videobox').pause();   //wait for user to play (these movies are short)
 	}
}

function step(mystep)
{
	myVid=document.getElementById("videobox");
//	myVid.loop = false;   //loop messes up step by step at ends
	if(myVid.readyState !== 4) {myVid.play(); myVid.pause();} //load if not loaded, needed because autoplay does not work in iOS
	if(mystep==-1) { //reverse
		myVid.pause();
		if (myVid.currentTime - $myFramerate < 0){myVid.currentTime=myVid.duration;}
		else {myVid.currentTime+=-$myFramerate;}
	}
	else if(mystep==1) { //forward
		myVid.pause();
		if (myVid.currentTime + $myFramerate > myVid.duration){myVid.currentTime="0";}
		else {myVid.currentTime+=+$myFramerate;} 
	}
	else if(mystep==-2) { //beginning
		myVid.pause();
		myVid.currentTime="0";
	}
	else if(mystep==2) { //end
		myVid.pause();
		myVid.currentTime=myVid.duration;
	}
	else {  //toggle play
		if(myVid.paused) {
			myVid.currentTime+=+$myFramerate; //otherwise slow frame rate makes delayed response
     		myVid.play();
   		}
   		else {
      		myVid.pause();
   		}
	}
	myVid.currentTime=myVid.currentTime.toFixed(6); //extra digits build up
//alert(myVid.currentTime+" "+myVid.duration+" "+$myFramerate);
}