/* * ToggleVid v0.95 * By Kenneth Foner, 2011 * Some code used with permission from Google under the Apache 2.0 license. */ $(document).ready(function() { if ($('#videoDiv').is('*')) { // If videoDiv exists, load the player. if (swfobject.hasFlashPlayerVersion("1")) { // If client has flash... hasFlash = true; loadPlayer(); } else { hasFlash = false; toggleVid(-1); } } $('div.vl').click(function() { toggleVid(this.id); }); $('div.vl').hover( function() { vlhover(this.id); }, function() { vlunhover(this.id); } ); }); // This function is called when an error is thrown by the player function onPlayerError(errorCode) { alert("An error occured of type:" + errorCode); } // This function is automatically called by the player once it loads function onYouTubePlayerReady(playerId) { ytplayer = document.getElementById("ytPlayer"); ytplayer.addEventListener("onError", "onPlayerError"); } // The "main method" of this sample. Called when someone clicks "Run". function loadPlayer() { // The video to load var videoID = VIDEO_IDS[0]; // Lets Flash from another domain call JavaScript var params = { allowScriptAccess: "always" }; // The element id of the Flash embed var atts = { id: "ytPlayer" }; // All of the magic handled by SWFObject (http://code.google.com/p/swfobject/) swfobject.embedSWF("http://www.youtube.com/v/" + videoID + "&enablejsapi=1&playerapiid=player1&rel=0&showsearch=0&showinfo=0&iv_load_policy=3&fs=0", "videoDiv", videoWidth, videoHeight, "8", null, null, params, atts); toggleVid(0); // Sets the selector to its initial state } // Toggles between videos using the YT javascript API and do interface sparkly magic. function toggleVid(labelid) { // toggleVid is called with zero argument on the load of . When this happens, the youtube player is not yet initialized. Thus, when called with zero argument, it just does the interface-y stuff, setting the video label displayed to the first one. if (labelid == 0) { labelid = LABELS[0]; vidnum = 0; } else if (labelid == -1) { vidnum = -1; } else // If passed an id as an argument, sets vidnum to the position of it in LABELS. This bridge logic between LABELS and VIDEO_IDS is why the two need to correspond in order. When called with a label as argument, not zero, toggleVid actually acts on the video. { // This is a replacement for the ARRAY.indexOf(foo) construct which works fine in all browsers... except it doesn't exist in IE8-. for (var i=0; i < LABELS.length; i++) { if (LABELS[i] == labelid) { vidnum = i; } } if (!hasFlash) { vidnum = -1; labelid = -1; alert("You need Adobe Flashplayer to watch videos."); } } selectedlabel = labelid; // selectedlabel is a variable which can be accessed by the hover functions. // For each label in the list, apply a default style if not selected, and a "highlighted" style if selected. Styleable aspects are color, width, marginLeft, fontWeight, and border. for (var p=0; p < LABELS.length; p++) { document.getElementById(LABELS[p]).style.background = (LABELS[p] == labelid) ? vlhighlightcolor : vlnormalcolor; document.getElementById(LABELS[p]).style.width = (LABELS[p] == labelid) ? vlhighlightwidth : vlnormalwidth; document.getElementById(LABELS[p]).style.marginLeft = (LABELS[p] == labelid) ? vlhighlightindent : vlnormalindent; document.getElementById(LABELS[p]).style.fontWeight = (LABELS[p] == labelid) ? vlhighlightfontweight : vlnormalfontweight; // If this is the first or last label, apply special top/bottom-of-list borders. document.getElementById(LABELS[p]).style.borderBottom = (p == LABELS.length - 1) ? vloutsideborder : ""; document.getElementById(LABELS[p]).style.borderTop = (p == 0) ? vloutsideborder : ""; if (LABELS[p] == labelid) { document.getElementById(LABELS[p]).style.border = vlhighlightborder; } } // Logic to draw the shadow of the selected label. if (vidnum < LABELS.length - 1 && vidnum > -1) // If selected label is not the last one, give the cell below it a top border and make the bottom shadow div invisible. { document.getElementById(LABELS[vidnum+1]).style.borderTop = vlbottomshadowborder; document.getElementById("vlbottomshadow").style.borderColor = "white"; } else if (vidnum > -1) // If selected label *is* the last one, give the bottom shadow div the correct border, size, and spacing to create a shadow. { document.getElementById("vlbottomshadow").style.borderTop = vlbottomshadowborder; document.getElementById("vlbottomshadow").style.width = vlendshadowlength; document.getElementById("vlbottomshadow").style.marginLeft = vlnormalindent; } if (vidnum > 0) // If selected label is not the first one, give the cell above it a top border and make the top shadow div invisible. { document.getElementById(LABELS[vidnum-1]).style.borderBottom = vltopshadowborder; document.getElementById("vltopshadow").style.borderColor = "white"; } else if (vidnum == 0) // If selected label *is* the first one, give the top shadow div the correct border, size, and spacing to create a shadow. { document.getElementById("vltopshadow").style.borderBottom = vltopshadowborder; document.getElementById("vltopshadow").style.width = vlendshadowlength; document.getElementById("vltopshadow").style.marginLeft = vlnormalindent; } // Set the video to the selected video. This is at the end so that if the YouTube player has not yet loaded, the labels logic still is evaluated. if (typeof ytplayer != 'undefined') { ytplayer.cueVideoById(VIDEO_IDS[vidnum]); // Cues the movie. } } // onMouseOver effect for labels. function vlhover(id) { document.getElementById(id).style.background = (id == selectedlabel) ? vlhighlightcolor : vlhovercolor; } // onMouseOff reset effect for labels. function vlunhover(id) { document.getElementById(id).style.background = (id == selectedlabel) ? vlhighlightcolor : vlnormalcolor; }