<!-- Paste this code into an external JavaScript file named: video.js -->
/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
Created by: Patrick Hunlock :: http://www.hunlock.com/
Licensed under: Public Domain */
function getElementsByClass (searchClass) {
// This function returns an array of all HTML objects with the
// specified className. Tag is optional
var returnArray = [];
var els = document.getElementsByTagName('*');
var pattern = new RegExp('(^|\\s)'+searchClass+'(\\s|$)');
for (var i = 0; i &lt; els.length; i++) {
if ( pattern.test(els[i].className) ) { returnArray.push(els[i]); }
}
return returnArray;
}
function popVideo(vid, darken) {
// This function accepts a division ID (vid), either a string or the
actual
// object itself. vid is mandatory. darken is optional, if it's true
// the page will be greyed out under the video.
var videos = getElementsByClass('video'); // Get all the videos on the
page.
var isplaying=null;
for(i=0; i<videos.length i="" loop="" through=""
 all="" videos="" (videos[i].style.display="='block')"
 isplaying="videos[i].id;" remember="" its=""
 tmp="videos[i].innerHTML;" division="" destroy=""
 videos[i].style.display="none" terminate=""
 videos[i].innerhtml="" rebuild="" contents=""
 this="" handles="" darkening="" background=""
 while="" a="" video="" is="" playing=""
 first="" see="" exists="" (!dark=""
 doesn't="" exist="" it's="" never=""
 been="" created="" we'll="" here=""
 apply="" some="" basic="" styles=""
 tbody="document.getElementsByTagName(&quot;body&quot;)[0];"
 tnode="document.createElement('div');" create="" layer=""
 tnode.style.backgroundcolor="rgb(0, 0, 0)" make=""
 black="" tnode.style.opacity="0.7" set=""
 opacity="" (firefox/opera=""
 tnode.style.mozopacity="0.70" firefox="" 1.5=""
 tnode.style.filter="alpha(opacity=70)" ie=""
 tnode.style.zindex="1" zindex="" 50="" floats=""
 tnode.style.position="absolute" position="" absolutely=""
 tnode.style.top="0px" in="" top=""
 tnode.style.left="0px" left="" corner="" of=""
 tnode.style.overflow="hidden" try="" avoid=""
 making="" scroll="" bars=""
 tnode.style.display="none" start="" out=""
 hidden="" tnode.id="darkenScreenObject" name=""
 so="" we="" can="" find="" later=""
 tbody.appendchild(tnode="" add="" it="" to=""
 web="" dark="" get="" object=""
 dark.style.display="none" ;="" ((isplaying="=vid)||(/"
 lose$/i.test(vid="" return="" false=""
 (typeof(vid="=&quot;string&quot;)" vid="document.getElementById(vid);"
 (vid&&typeof(vid="=&quot;object&quot;)" (darken="" calculate=""
 the="" page="" width="" and="" height=""
 window.innerheight="" &="" )="" {=""
 pagewidth="window.innerWidth" window.scrollmaxx="" var=""
 pageheight="window.innerHeight" +="" window.scrollmaxy=""
 }="" else="" if="" document.body.scrollheight="">
document.body.offsetHeight ) {
var pageWidth = document.body.scrollWidth;
var pageHeight = document.body.scrollHeight;
} else {
var pageWidth = document.body.offsetWidth + document.body.offsetLeft;
var pageHeight = document.body.offsetHeight + document.body.offsetTop;
}
//set the shader to cover the entire page and make it visible.
dark.style.width= pageWidth+'px';
dark.style.height= pageHeight+'px';
dark.style.display='block';
}
// Make the video visible and set the zindex so its on top of
everything else
vid.style.zIndex='100';
vid.style.display='block';
var scrollTop = 0;
if (document.documentElement &amp;&amp;
document.documentElement.scrollTop)
scrollTop = document.documentElement.scrollTop;
else if (document.body)
scrollTop = document.body.scrollTop;
// set the starting x and y position of the video
vid.style.top=scrollTop+Math.floor((document.documentElement.clientHeight/2)-(vid.offsetHeight/2))+'px';
vid.style.left=Math.floor((document.documentElement.clientWidth/2)-(vid.offsetWidth/2))+'px';
}
return false;
}
// This portion will allow the video to be dragged and dropped
var savedTarget=null; // The layer being moved
var orgCursor=null; // The original mouse style so we can restore it
var dragOK=false; // True if we're allowed to move the element under
mouse
var dragXoffset=0; // How much we've moved the element on the
horozontal
var dragYoffset=0; // How much we've moved the element on the verticle
function moveHandler(e){
// This function moves the layer when the mouse is moved.
// it's called automatically by the onmousemove handler
if (e == null) { e = window.event }
if (e.button&lt;=1&amp;&amp;dragOK){
savedTarget.style.left=e.clientX-dragXoffset+'px';
savedTarget.style.top=e.clientY-dragYoffset+'px';
return false;
}
}
function cleanup(e) {
// This is called when the user releases the mouse
// it clears out the move and mouseup event handlers
// and resets the cursor.
document.onmousemove=null;
document.onmouseup=null;
savedTarget.style.cursor=orgCursor;
dragOK=false;
return false;
}
function dragHandler(e){
// This is called when the user clicks on the page
// It checks to see if the click happened over an
// element with a class name of "video", if if it
// did, it sets up move and mouseup handlers.
var cursorType='-moz-grabbing';
if (e == null) { e = window.event; cursorType='move';}
var target = e.target != null ? e.target : e.srcElement;
if (target.className=="video") {
orgCursor=target.style.cursor;
savedTarget=target;
target.style.cursor=cursorType;
dragOK=true;
dragXoffset=e.clientX-parseInt(target.style.left);
dragYoffset=e.clientY-parseInt(target.style.top);
document.onmousemove=moveHandler;
document.onmouseup=cleanup;
return false;
}
}
//This next line will call dragHandler whenever
//the user clicks the mouse button on the page.
//Draghandler will check to see if the mouse is over
//a layer with the classname of 'video' and if so
//set up the drag and drop events.
document.onmousedown=dragHandler;
</videos.length>