// JavaScript for bordersmedia.com // Powers DHTML controls for Flash movies of episodes // Authored by Justin Todd @ Boxcar Studio - justin@boxcarstudio.com // Last Revision: 2007.07.26 // ********************************************************** // NOTICE: THIS SCRIPT REQUIRES NO MODIFICATION OTHER THAN UPDATED PATHS FOR THE IMAGES DEFINED AS THE "PLAY" AND "PAUSE" BUTTONS - IF MOVED TO A DIFFERENT SERVER/LOCATION. ALL OTHER CUSTOMIZATION IS PERFORMED ON THE EPISODE-SPECIFIC HTML PAGES // ********************************************************** // ========================================================== // getElementsByClassName // ========================================================== // define a function to allow us to get elements by className document.getElementsByClassName = function(cl) { var retnode = []; var myclass = new RegExp('\\b'+cl+'\\b'); var elem = this.getElementsByTagName('*'); for (var i = 0; i < elem.length; i++) { var classes = elem[i].className; if (myclass.test(classes)) retnode.push(elem[i]); } return retnode; }; // ========================================================== // JavaScript interface for Flash External API // ========================================================== // Use a variable to reference the embedded SWF. var flashVideoPlayer; /* When the HTML page loads (via the onLoad event of the tag) we have it call the initialize() function. */ function initialize() { /* Check if the browser is IE. If so, flashVideoPlayer is window.videoPlayer. Otherwise, it's window.document.videoPlayer. The videoPlayer is the id assigned to and tags. */ var ie = navigator.appName.indexOf("Microsoft") != -1; flashVideoPlayer = (ie) ? window['videoPlayer'] : document['videoPlayer']; } /* When the user clicks a play button in chapterSelection column, call the playVideo() function within the SWF, passing it the URL of the FLV file. */ // videoPath and videoPrefix are defined on the HTML page for each episode // the parameter whichVideo corresponds to the number of the active chapter function callFlashPlayVideo(whichVideo) { initialize(); flashVideoPlayer.playVideo(videoPath+videoPrefix+whichVideo+".flv"); } // Call the pauseResume() function within the SWF. toggles between play/pause for an FLV that has already been loaded into the SWF function callFlashPlayPauseVideo() { initialize(); flashVideoPlayer.pauseResume(); } // ========================================================== // Manipulate DIVs containing extended/extra chapter info // ========================================================== // functions to expand and contract chapter details function expandThisOne(chapterNumber) { if(document.getElementById) { // find all collapsed divs and store them in an array var collapsedChapters = document.getElementsByClassName('collapsedChapter'); // find all expandable divs and store them in an array var expandedChapters = document.getElementsByClassName('expandedChapter'); if(chapterNumber != 0) { var thisChapter = expandedChapters[chapterNumber-1]; // if the expanded details are showing, hide them if(thisChapter.style.display == 'block') { thisChapter.style.display = 'none'; } // otherwise, show the expanded details else { thisChapter.style.display = 'block'; } } // toggle the plus/minus icons next to the chapter names function swapIcon() { // get all images that are inside of a collapsed chapter div and store them in an array for (var i = 0; i < collapsedChapters.length; i++) { var chapterImages = collapsedChapters[i].getElementsByTagName('IMG') // loop through all the expansion icons for (var j = 0; j < chapterImages.length; j++) { if(chapterImages[j].className == 'expand') { // if the expandable div is visible, change the corresponding icon to a minus if(expandedChapters[i].style.display == 'block') { chapterImages[j].src = 'images/contract_icon.gif'; } // otherwise, set the icon back to a plus else { chapterImages[j].src = 'images/expand_icon.gif'; } } } } } // hide all expanded chapters other than the one that was clicked on for (var i = 0; i < expandedChapters.length; i++) { if(expandedChapters[i].id.search(chapterNumber) == -1) { expandedChapters[i].style.display = 'none'; } // call the function above to toggle the plus/minus icon swapIcon(); } } } // general function used to show/hide expandable chapters function toggleChapter(whichChapter) { expandThisOne(whichChapter); } // ========================================================== // Toggle play/pause buttons, "NOW PLAYING" status message and control play/pause stop on movies. // ========================================================== var isPlaying; // flag to remember currently playing chapter var isPaused; // flag to remember currently paused chapter // toggle the play/pause button; now playing status message function togglePlayStatus(whichChapter,expandable) // second parameter is used as a flag to indicate whether there are hidden/expandable divs (like on book club design). 0 = no expanding divs, 1 expanding divs present { if (document.getElementById) { // clear all "NOW PLAYING" messages var playMessage = document.getElementsByClassName('playStatus'); for (var i = 0; i < playMessage.length; i++) { playMessage[i].innerHTML = ' '; } // check to see if the chapter that was clicked on is already playing if(whichChapter == isPlaying) { // if so, change the button to "PLAY", pause the movie, flag that chapter as paused and clear the isPlaying variable var playButtons = document.getElementsByClassName('playButton'); for (var i = 0; i < playButtons.length; i++) { playButtons[i].src = '../images/play_button.jpg'; } callFlashPlayPauseVideo(); isPlaying = 'none'; isPaused = whichChapter; } else { // otherwise, flag isPlaying to correspond to the chapter that was clicked on isPlaying = whichChapter; // find the span containing the play status for the chapter that was clicked on and insert the "NOW PLAYING" status message into it var pStatus = document.getElementById('chapter'+isPlaying).getElementsByTagName('SPAN'); for (var i = 0; i < pStatus.length; i++) { if(pStatus[i].innerHTML == ' ') { pStatus[i].innerHTML = '
(NOW PLAYING)'; } } // loop through all the play buttons on the page. change the one that was just clicked to "PAUSE" and revert all others back to "PLAY" var playButtons = document.getElementsByClassName('playButton'); for (var i = 0; i < playButtons.length; i++) { if(playButtons[i].id == ('playButton'+isPlaying)) { playButtons[i].src = '../images/pause_button.jpg'; // if the page uses expandable chapter info, show the one that goes with the chapter that was clicked on if(expandable == 1) { //if(document.getElementById('chapter'+isPlaying+'expanded')) { toggleChapter(isPlaying); /*document.getElementById('chapter'+isPlaying+'expanded').style.display = 'block'; */ //} } } // otherwise, set the play button back to the default state, "PLAY" else { playButtons[i].src = '../images/play_button.jpg'; // and if there's an expandable element, hide it if(document.getElementById('chapter'+i+'expanded')) { document.getElementById('chapter'+i+'expanded').style.display = 'none'; } } } // if the chapter that was clicked on was paused previously, then toggle it to play/pause if(whichChapter == isPaused) { callFlashPlayPauseVideo(); } // otherwise, load the appropriate movie into the SWF container and play it else { callFlashPlayVideo(whichChapter); } } } }