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

var $opacity=0; //0.1;
document.write('<img style="z-index:85; background-color: yellow; position:absolute; top:0px; left:0px; width:5em; height:60%; opacity:'+$opacity+';" onclick="javascript:step(-1);" 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="javascript:step(1);" src="spacer.gif">');

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==32) step(0); // space
//if (k==37) backward(); // arrow left 
if (k==38) zoom(2); // arrow up
//if (k==39) forward(); //  arrow right 
if (k==40) zoom(1); // arrow down
if (k==90) window.parent.frames['contents'].focus(); // z to move focus back to upper frame
if (k==188) step(-1); //, lower case <  
if (k==190) step(1); //.  lower case > 
if (k==191) step(0); //  lower case ? 
if (k==219) step(-2); // [ 
if (k==221) step(2); //  ] 
return false;
}


function insertmovie($filename,$aspect,$options,$imageframe)
{
	scroll(0,0);  //scroll back to top of page
	
//	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;
	}
	
// Set font relative to window size
	var P = Math.sqrt ($x*$x+$y*$y);
    P =  Math.floor (8+P/125);
	document.body.style.fontSize = P + 'px';
// 	alert(" "+P);

	$width= 0.98*$x;
	
	if (!$imageframe) {$imageframe="imageframe";}

    $otherlines=$options.split(" ")[0]+''; //get up to first blank, usually "4.2 controller autoplay"
    if ($options.indexOf(",") != -1)  //if contains comma then use "lines of text, fraction of vertical height, fraction of horizontal width". Fraction can be larger than 1.
    {
       	$y2 = $otherlines.split(",")[1]*($y - $otherlines.split(",")[0] * P - P);
    	if($otherlines.split(",")[2]) {$width = $otherlines.split(",")[2]*$width;}
    }
    else if ($otherlines < 1) //use fraction of vertical height
    {
    	$y2 = $otherlines * $y;
    }
    else //use lines of text
    {
    	$y2 = $y - $otherlines * P - P;
    }
 
	if ($width*$aspect > $y2) {$width=$y2/$aspect;}
	
	$myFramerate=1;
	if ($options.indexOf("framerate=") != -1)
	{
		$myFramerate=$options.split("framerate=")[1]; //portion that follows framerate=
		$myFramerate=1/$myFramerate.split(" ")[0];  //up to next blank  //25 fps becomes 0.04
	}
	var $code = '<video  playsinline id="videobox" width="' + $width + '" height="'+ ($width*$aspect) +'"';
	if ($options.indexOf("poster") != -1) {$code=$code + ' poster="' + $filename + '.png"';}
 	if ($options.indexOf("controller") != -1) {$code=$code + ' controls' ;} //must have controls to play in iOS
 	$code=$code + ' muted' ; //must be muted to autoplay in iOS
//	if ($options.indexOf("autoplay") != -1){$code=$code + ' autoplay' ;}
	if ($options.indexOf("loop") != -1){$code=$code + ' loop' ;}

	$time=0;
    if ($options.indexOf("starttime=") != -1)
	{
		$time=$options.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+' onloadeddata="this.currentTime='+$seconds+'"';
	}
	
	if ($options.indexOf("volume=") != -1)
	{
		$volume=$options.split("volume=")[1]; //portion that follows volume=
		$volume=$volume.split(" ")[0];  //up to next blank
		$code=$code+' onloadeddata="this.volume='+$volume+'"';
	}

	if ($filename.indexOf(".mov") != -1 || $filename.indexOf(".mp4") != -1) {$code=$code+'><source src="'+$filename+'"';  }   //extension specified so use it rather than default to mp4
	else {$code = $code+'><source src="' + $filename + '.mp4"';}
	$code=$code+' type="video/mp4"><source src="' + $filename + '.ogg" type="video/ogg">Your browser does not support HTML5 video.</video>';
	
	if ($options.indexOf("nocaption") == -1)
	{		
		$code=$code+'<div id="captionbox" style="font-size: 75%; position:relative; " ><img src="../keys/lbrack.png" onclick="step(-2);" style="display:inline-block; vertical-align:middle; ">&nbsp;&nbsp;';
		$code=$code+'Use&nbsp;&nbsp;<img src="../keys/comma.png" onclick="step(-1);" style="display:inline-block; vertical-align:middle; ">&nbsp;&nbsp;or';
		if ($options.indexOf("shortcaption") == -1)
		{
			$code=$code+'&nbsp;&nbsp;<img src="../keys/period.png" 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" onclick="step();" style="display:inline-block; vertical-align:middle; "> to play/pause';
		}
		else
		{
			$code=$code+'&nbsp;&nbsp;<img src="../keys/period.png" onclick="step(1);" style="display:inline-block; vertical-align:middle; ">&nbsp;&nbsp;to step,';
			$code=$code+'&nbsp;&nbsp;<img src="../keys/space.png" onclick="step();" style="display:inline-block; vertical-align:middle; "> to play';		
		}
		$code=$code+'&nbsp;&nbsp;<img src="../keys/rbrack.png" onclick="step(2);" style="display:inline-block; vertical-align:middle; ">.';

		$code=$code+'</div>';
	}
	document.getElementById($imageframe).innerHTML = $code;
 	if ($options.indexOf("autoplay") != -1){document.getElementById('videobox').play();}
//	alert($code);
}

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);
}

//https://github.com/codepo8/rotatezoomHTML5video/blob/master/transformvideo.js
//http://stackoverflow.com/questions/242608/disable-browsers-vertical-and-horizontal-scrollbars
function zoom(myzoom)
{
	var properties = ['transform', 'WebkitTransform', 'MozTransform', 'msTransform', 'OTransform'],
	prop = properties[0];
 
	for(i=0,j=properties.length;i<j;i++){
    	if(typeof document.getElementsByTagName('video')[0].style[properties[i]] !== 'undefined'){
      		prop = properties[i];
      		break;
    	}
  	}
//	document.getElementById('videobox').style[prop]='scale('+myzoom+')';
	if (myzoom==1) {
		document.getElementById('videobox').style[prop]='scale(1)';
		document.documentElement.style.overflow = 'hidden';  // firefox, chrome
		document.body.scroll = "no"; // ie only
	}
	else {
		document.getElementById('videobox').style[prop]='scale('+myzoom+') translate(25%,25%) ';  //translate so whole image is accessible
		document.documentElement.style.overflow = 'visible';  // firefox, chrome
		document.body.scroll = "yes"; // ie only
		document.getElementById('captionbox').style.zIndex = "-100"; //video over the caption
    }
}