// This code has been placed in the public domain and may be used without
// compensation or attribution.
////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
// Code by Patrick Hunlock
// http://www.hunlock.com/blogs/Digg_Style_Videos_For_Your_Blog
////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
// Video window function, handles urls, sets up embeds, makes window visible/invisible
////////////////////////////////////////////////////////////////////////////////
function playVid(vidId, noBlackout) {
////////////////////////////////////////////////////////////////////////////////
// Test to see if our video and blackout divisions have been set up.
// If no division was declared in the HTML then we'll go ahead and automatically
// create and style the necessary division.
////////////////////////////////////////////////////////////////////////////////
if (_vidPane==null) {
////////////////////////////////////////////////////////////////////////////////
/// Video Pane wasn't set up so see if it's declared in the HTML
////////////////////////////////////////////////////////////////////////////////
_vidPane=document.getElementById('vidPane');
if (!_vidPane) {
// user didn't create the division so create it for him.
// also asume no styleSheet and set basic styles.
var tbody = document.getElementsByTagName("body")[0];
tnode = document.createElement('div');
tnode.id='vidPane';
tnode.className='vidFrame';
tbody.appendChild(tnode);
_vidPane=document.getElementById('vidPane');
_vidPane.style.position='absolute';
_vidPane.style.display='none';
// _vidPane.style.backgroundColor='#ffdead';
// _vidPane.style.backgroundColor='#000';
_vidPane.style.backgroundColor='#333';
//_vidPane.style.border='1px solid #800000';
_vidPane.style.width='650px';
// _vidPane.style.height='382px';
_vidPane.style.height='410px';
_vidPane.style.cursor='move';
_vidPane.style.fontFamily='verdana';
_vidPane.style.fontSize='9pt';
_vidPane.style.zIndex='100';
_vidPane.style.paddingTop='5px';
_vidPane.style.paddingRight='5px';
_vidPane.style.paddingBottom='5px';
_vidPane.style.paddingLeft='0px';
_vidPane.style.textAlign='right';
// _vidPane.style.marginRight='auto';
//_vidPane.style.MozBorderRadius='10';
}
// If _vidPane wasn't defined then for sure _blackout wasn't
// so see if it was defined in the HTML
_blackout=document.getElementById('blackout');
if (!_blackout) {
// user didn't create the division so create it for him.
// also asume no styleSheet and set basic styles.
tnode = document.createElement('div');
tnode.id='blackout';
tbody.appendChild(tnode);
_blackout=document.getElementById('blackout');
_blackout.style.position='absolute';
_blackout.style.display='none';
_blackout.style.left='0px';
_blackout.style.top='0px';
_blackout.style.backgroundColor='#555555';
_blackout.style.opacity='.9';
_blackout.style.filter='alpha(opacity=90)';
_blackout.style.zIndex='50';
}
// Initialize the starting location of the video.
_vidPane.style.top='75px'; // Starting location horozontal
_vidPane.style.left='75px'; // Starting location verticle
}
// Shows (or hides) the vidPane layer. Accepts 2 parameteres.
// vidId is null (close window) or an anchor object (contains HREF value)
// vidId is mandatory example:
// noBlackout is optional. If you pass true, the background will not be "greyed out".
if (vidId==null) {
// Null is passed by the "close" link, so we'll hide the layer.
_vidPane.style.display='none';// Hide the division.
_vidPane.innerHTML=''; // purge it's html (kill video)
_blackout.style.display='none'; // Hide the blackout layer.
} else {
// Snag the url from the passed object
vidId=vidId.href;
// Next three lines make the blackout layer visible
// and makes sure it covers the entire page.
if (!noBlackout) {
_blackout.style.width='100%';
_blackout.style.height=(document.body.offsetHeightLINK';
// vidstring+=' CLOSE ';
vidstring+=' CLOSE X ';
// var vidstring =' LINK ';
// vidstring+=' CLOSE X ';
// vidstring += '
Unknown video service.';
}
// Insert our HTML and display the video window.
_vidPane.innerHTML=vidstring;
// Set the Y position of the video window so it's in the visible clip
var scrollTop = 0;
if (document.documentElement && document.documentElement.scrollTop)
scrollTop = document.documentElement.scrollTop;
else if (document.body)
scrollTop = document.body.scrollTop
_vidPane.style.top=scrollTop+50+'px';
// Video window was hidden so we'll make it visible
_vidPane.style.display='block';
}
// return false so the browser won't follow through with A HREF clicks.
return(false);
}
////////////////////////////////////////////////////////////////////////////////
// Drag and Grab handlers
////////////////////////////////////////////////////////////////////////////////
function moveHandler(e){
// Called automatically whenever the mouse is moved after a drag event starts
if (e == null) { e = window.event } // Get event data, if it wasn't passed, get it IE style.
if ( _dragOK ){ // is our global var set to true? is it ok to move the object?
_savedTarget.style.left=e.clientX-_dragXoffset+'px'; //OK to move, calculate the offset and move it
_savedTarget.style.top=e.clientY-_dragYoffset+'px'; // calculate the y offset and move it.
return false; // return false so browser doesn't try to do anything else.
} // End _dragOK check
} // End moveHandler
function cleanup(e) {
// Called whenever user lets up off a mouse button after a drag event starts
document.onmousemove=null; // Turn off the mousemove event (won't call moveHandler() now).
document.onmouseup=null; // Turn off the mouseup event (won't call cleanup() now).
_savedTarget.style.cursor=_orgCursor; // Restore original mouse shape
_dragOK=false; // Turn off the global constant we look for before moving stuff.
}
function dragHandler(e){
// Called automatically when user holds down the mouse button
var cursorType='-moz-grabbing'; // Set mouse type to grabbing hand
if (e == null) { e = window.event; cursorType='move';} // This is IE so get event info IE style
var target = e.target != null ? e.target : e.srcElement; // Save object of the event
if (target.className=="vidFrame") {// Did mouse go down over our dragable object?
_orgCursor=target.style.cursor; // Remember the current mouse shape
_savedTarget=target; // Remember the object we're working with
target.style.cursor=cursorType; // change mouse to "grab" icon
_dragOK=true; // When true, movehandler will move the window
_dragXoffset=e.clientX-parseInt(_savedTarget.style.left); // Remember current X offset
_dragYoffset=e.clientY-parseInt(_savedTarget.style.top); // Remember current Y offset
document.onmousemove=moveHandler; // Call moveHandler() when mouse moves
document.onmouseup=cleanup; // Call cleanup() when user lets go of mouse btn
return false; // IMPORTANT return false so browser doesn't do anything else.
} // End Click on classname = object check
} // End function dragHandler
// Start the event handler. When mouse is clicked, call dragHandler()
document.onmousedown=dragHandler;
// Initialize global variables.
var _savedTarget=null; // The target layer (effectively vidPane)
var _orgCursor=null; // The original Cursor (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
var _vidPane = null; // Video Layer -- won't be defined until a video is called
var _blackout= null; // blackout Layer. -- won't be defined until a video is called.
////////////////////////////////////////////////////////////////////////////////
// End of Patrick's code
////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
// Code by Michael Wang
// Additional code to dynamically update links
//
// Useful for forums and comments, and other places where you don't have
// user-level control over the link code.
//
// Scanning the page looking for video links does take a certain amount of time.
// Turn on bechmarking (see below) to see how long it's taking on your client.
////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
var DEBUG = 0; // 1 = turn on debug mode
var BENCHMARK = 0; // 1 = turn on benchmark mode
var IE_EVENT = 1; // 1 = attachEvent, 0 = addEventListener
// Check to see which event style we can use
if (window.addEventListener)
{
IE_EVENT = 0;
}
// Need to check for Firefox on OS X because of opacity bug with Flash
function isOSXFirefox()
{
var userAgent = navigator.userAgent.toLowerCase();
if (userAgent.indexOf('mac') != -1 && userAgent.indexOf('firefox') != -1)
{
return true;
}
}
// Why does JavaScript not have an insertAfter function?
function insertAfter(newElement, targetElement)
{
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement)
{
parent.appendChild(newElement);
}
else
{
parent.insertBefore(newElement, targetElement.nextSibling);
}
}
function createYouTubeImg()
{
var elem = document.createElement("img");
elem.setAttribute("src", "http://f13.net/images/youtube_icon_h_10.gif");
elem.setAttribute("class", "yt_icon");
elem.setAttribute("border", 0);
return elem;
}
function appendYouTubeIcon(elem, url)
{
var elem_yt_img = createYouTubeImg(url);
insertAfter(elem_yt_img, elem);
}
function appendYouTubeIconHref(elem, url)
{
var elem_yt_img = createYouTubeImg();
var elem_yt_href = document.createElement("a");
elem_yt_href.setAttribute("href", url);
elem_yt_href.appendChild(elem_yt_img);
insertAfter(elem_yt_href, elem);
}
////////////////////////////////////////////////////////////////////////////////
function runOnLoad()
{
if (DEBUG) alert("document loaded");
if (BENCHMARK)
{
var startTime=new Date().getTime();
}
var pars = document.getElementsByTagName('a');
for (var i = 0; i < pars.length; i++)
{
var vidInfo = pars[i].href.split('/');
// alert("i: " + i + " pars.length: " + pars.length);
// Make sure vidInfo has a domain name portion otherwise array access will cause JS error
if (vidInfo.length >= 2 && vidInfo[2].indexOf('youtube.com') >= 0)
{
if (DEBUG) alert("add onClick: " + vidInfo[2]);
// alert("innerHTML: " + pars.innerHTML);
// IE of course does things differently
if (IE_EVENT)
{
// pars[i].onclick = function () { return playVid(this, false); };
pars[i].onclick = function () { return playVid(this, true); };
appendYouTubeIconHref(pars[i], pars[i].href);
// pars and pars.length increment when we add new anchors to
// the document so we need to increment i as well otherwise
// the loop will never end
i++;
}
else
{
// Turn off blackout if on OS X Firefox
if (isOSXFirefox())
{
pars[i].setAttribute('onClick', 'return playVid(this, true)');
}
else
{
// pars[i].setAttribute('onClick', 'return playVid(this, false)');
pars[i].setAttribute('onClick', 'return playVid(this, true)');
}
appendYouTubeIconHref(pars[i], pars[i].href);
// pars and pars.length increment when we add new anchors to
// the document so we need to increment i as well otherwise
// the loop will never end
i++;
}
}
}
if (BENCHMARK)
{
var endTime=new Date().getTime();
alert("Elapsed time: " + (endTime - startTime) + " ms");
}
}
////////////////////////////////////////////////////////////////////////////////
// Setup onload event handler
////////////////////////////////////////////////////////////////////////////////
if (IE_EVENT)
{
window.attachEvent("onload", runOnLoad);
}
else
{
window.addEventListener("load", runOnLoad, false);
}
////////////////////////////////////////////////////////////////////////////////
// End of Michael's code
////////////////////////////////////////////////////////////////////////////////
// " LINKCLOSE