/*********************************
theater.js for EA.com
code by Chris Nott (chris.nott(AT)blastradius.com)
*********************************/
// global vars
var mediaType;
var mediaID;
var mediaList;
var currentMediaIndex;
var gameID;
// constants
var mediaListItemHeight = 103;
var mediaListScrollbar = null;
var imageRoot = 'http://images.ea.com/sports/madden06/_img/psp';
var screenshotContainerWidth = 593;
var screenshotContainerHeight = 348;
var filterClearOptionValue = '-all-';
var mediaTypeVideos = 'videos';
var mediaTypeScreenshots = 'screenshots';
var mediaTypeMusic = 'music';
/******************************************************************************
Initialization
*****************************************************************************/
function initTheater() {
// over-ride current toggleTitleNav() function on game menu to prevent filter from hovering over menu
// delay a bit so that title nav component can load (may appear after theater component in source)
setTimeout("overRideToggleTitleNav()", 500);
// populate the filters
switch(mediaType) {
case mediaTypeVideos:
populateVideoFilter();
break;
case mediaTypeScreenshots:
populateScreenshotFilter();
break;
case mediaTypeMusic:
populateMusicFilter();
break;
}
// highlight correct media selector button
switch(mediaType) {
case mediaTypeVideos:
document.getElementById('selector-video').src = imageRoot + '/theater_video_on.gif';
break;
case mediaTypeScreenshots:
document.getElementById('selector-screenshot').src = imageRoot + '/theater_screenshot_on.gif';
break;
case mediaTypeMusic:
document.getElementById('selector-music').src = imageRoot + '/theater_music_on.gif';
break;
}
// show music link only if we are allowed to
if (gameID && showMusic == 'no') {
if(document.getElementById('selector-music') != null){
var selectorMusicImg = document.getElementById('selector-music');
selectorMusicImg.src = imageRoot + '/p.gif';
selectorMusicImg.parentNode.href = '#';
document.getElementById('musicbutton').innerHTML = "
";
}
}
// if game-specific theater, hide link to game main page
if (gameID) {
document.getElementById('current-media-game-link').style.display = 'none';
}
// filter media list
filterMediaList();
// if all media have been filtered out of the list, show error message and quit
if (mediaList.length == 0) {
document.getElementById('media-list-container').innerHTML = '
There is currently no available media for the ' + mediaType + ' section. Please try again soon
'; return; } // display media list buildMediaList(); // if the mediaType is music, send the mediaList info to flash // note: this is now called by the flash when it is ready // sendMusicDataToFlash(); // if there is a specific media ID passed in on the url string, play the related media if (mediaID) { for (var mediaIndex = 0; mediaIndex < mediaList.length; mediaIndex++) { if (mediaList[mediaIndex].mediaID == mediaID) { currentMediaIndex = mediaIndex; loadMedia(mediaIndex, false, true); break; } } } // otherwise, load first media item (but don't start playing) else { currentMediaIndex = 0; loadMedia(0, false, true); } // preload screenshots if (mediaType == mediaTypeScreenshots) { preloadScreenshots(); } preloadOffscreenInterfaceImages(); } function preloadOffscreenInterfaceImages() { (new Image()).src = imageRoot + '/theater_prev_btn_on.gif'; (new Image()).src = imageRoot + '/theater_next_btn_on.gif'; (new Image()).src = imageRoot + '/theater_full_screen_btn_on.gif'; (new Image()).src = imageRoot + '/theater_slideshow_off_btn_on.gif'; (new Image()).src = imageRoot + '/theater_slideshow_on_btn_off.gif'; (new Image()).src = imageRoot + '/theater_slideshow_on_btn_on.gif'; } /****************************************************************************** Build dropdown filters *****************************************************************************/ // unoptimized due to last minute updates and no time to polish - #31 function populateVideoFilter() { var selectElement = document.getElementById('filter-videos'); // first option is the "all" option selectElement.options[0] = new Option('All Videos', filterClearOptionValue, false, (batchFilter == filterClearOptionValue ? true : false)); // build list of unique batch names var batchList = new Array(); for (var mediaIndex = 0; mediaIndex < mediaList.length; mediaIndex++) { var mediaItem = mediaList[mediaIndex]; if (mediaItem.batchName != -1) { batchList[mediaItem.batchName] = mediaItem.batchName; } } // build options for batches for (batch in batchList) { var nextOptionIndex = selectElement.length; selectElement.options[nextOptionIndex] = new Option(batchList[batch], removeSpaces(batchList[batch].toLowerCase())) } // setting the 'selected' parameter in a new Option() doesn't work in IE // must loop thru and set selectedIndex after all options built for (var optionIndex = 0; optionIndex < selectElement.length; optionIndex++) { if (selectElement.options[optionIndex].value == batchFilter) { selectElement.selectedIndex = optionIndex; break; } } // submit on select selectElement.onchange = function() { var currentOption = this.options[this.selectedIndex]; if (currentOption.value != '') { this.form.submit(); } }; // don't show filter if there are no options if (selectElement.options.length <= 1) { selectElement.style.display = 'none'; } } function populateScreenshotFilter() { var selectElement = document.getElementById('filter-screenshots'); // first option is the "all" option selectElement.options[0] = new Option('All Screenshots', filterClearOptionValue, false, (platformFilter == filterClearOptionValue ? true : false)); // build list of unique platforms var platformList = new Array(); for (var mediaIndex = 0; mediaIndex < mediaList.length; mediaIndex++) { var mediaItem = mediaList[mediaIndex]; if (mediaItem.platform != -1) { platformList[mediaItem.platform] = mediaItem.platform; } } // build options for platforms for (curplatform in platformList) { var nextOptionIndex = selectElement.length; selectElement.options[nextOptionIndex] = new Option(platformMapping[platformList[curplatform]], platformList[curplatform], false, (platformFilter == platformList[curplatform] ? true : false)); selectElement.options[nextOptionIndex].className = 'platformFilter' } // build list of unique batch names var batchList = new Array(); for (var mediaIndex = 0; mediaIndex < mediaList.length; mediaIndex++) { var mediaItem = mediaList[mediaIndex]; if (mediaItem.batchName != -1) { batchList[mediaItem.batchName] = mediaItem.batchName; } } // build options for batches for (batch in batchList) { var nextOptionIndex = selectElement.length; selectElement.options[nextOptionIndex] = new Option(batchList[batch], removeSpaces(batchList[batch].toLowerCase())) selectElement.options[nextOptionIndex].className = 'batchFilter' } // setting the 'selected' parameter in a new Option() doesn't work in IE // must loop thru and set selectedIndex after all options built for (var optionIndex = 0; optionIndex < selectElement.length; optionIndex++) { if ( (selectElement.options[optionIndex].className == 'platformFilter' && selectElement.options[optionIndex].value == platformFilter) || (selectElement.options[optionIndex].className == 'batchFilter' && selectElement.options[optionIndex].value == batchFilter) ) { selectElement.selectedIndex = optionIndex; break; } } // submit on select selectElement.onchange = function() { var currentOption = this.options[this.selectedIndex]; if (currentOption.value != '') { this.name = currentOption.className; this.form.submit(); } }; // don't show filter if there are no options if (selectElement.options.length <= 1) { selectElement.style.display = 'none'; } } function populateMusicFilter() { var selectElement = document.getElementById('filter-music'); selectElement.options[0] = new Option('All Songs', filterClearOptionValue, false, (artistNameFilter == filterClearOptionValue ? true : false)); selectElement.options[0].className = 'artistNameFilter'; // filter by artist selectElement.options[1] = new Option('Songs By:', '', false, false); // build list of unique artists var artistList = new Array(); for (var mediaIndex = 0; mediaIndex < mediaList.length; mediaIndex++) { var mediaItem = mediaList[mediaIndex]; artistList[mediaItem.artistName] = mediaItem.artistName; } // build options for artists for (artistName in artistList) { var nextOptionIndex = selectElement.length selectElement.options[nextOptionIndex] = new Option(artistList[artistName], artistList[artistName], false, (artistNameFilter == artistList[artistName] ? true : false)); selectElement.options[nextOptionIndex].className = 'artistNameFilter'; } // filter by game name (only if this isn't a game-specific theater) if (gameID == null) { selectElement.options[selectElement.length] = new Option('Songs From:', '', false, false); // build list of unique games var gameList = new Array(); for (var mediaIndex = 0; mediaIndex < mediaList.length; mediaIndex++) { var mediaItem = mediaList[mediaIndex]; gameList[mediaItem.gameName] = mediaItem.gameName; } // build options for games for (gameName in gameList) { var nextOptionIndex = selectElement.length selectElement.options[nextOptionIndex] = new Option(gameList[gameName], gameList[gameName], false, (gameNameFilter == gameList[gameName] ? true : false)); selectElement.options[nextOptionIndex].className = 'gameNameFilter' } } // setting the 'selected' parameter in a new Option() doesn't work in IE // must loop thru and set selectedIndex after all options built for (var optionIndex = 0; optionIndex < selectElement.length; optionIndex++) { if ( (selectElement.options[optionIndex].className == 'artistNameFilter' && selectElement.options[optionIndex].value == artistNameFilter) || (selectElement.options[optionIndex].className == 'gameNameFilter' && selectElement.options[optionIndex].value == gameNameFilter) ) { selectElement.selectedIndex = optionIndex; break; } } // class name of selected option becomes the name of the select selectElement.onchange = function() { var currentOption = this.options[this.selectedIndex]; if (currentOption.value != '') { this.name = currentOption.className; this.form.submit(); } }; // don't show filter if there are no options if (selectElement.options.length <= 1) { selectElement.style.display = 'none'; } } /****************************************************************************** Filter / build media list *****************************************************************************/ function filterMediaList() { // filter list based on dropdown filter // for videos and screenshots, filter by platform if ((mediaType == mediaTypeVideos || mediaType == mediaTypeScreenshots) && platformFilter != '' && platformFilter != filterClearOptionValue) { for (var mediaIndex = 0; mediaIndex < mediaList.length; mediaIndex++) { if (mediaList[mediaIndex].platform != platformFilter) { mediaList.splice(mediaIndex, 1); mediaIndex--; } } } // for music, filter by artist name... else if (mediaType == mediaTypeMusic && artistNameFilter != '' && artistNameFilter != filterClearOptionValue) { for (var mediaIndex = 0; mediaIndex < mediaList.length; mediaIndex++) { if (mediaList[mediaIndex].artistName != artistNameFilter) { mediaList.splice(mediaIndex, 1); mediaIndex--; } } } // ...or by game name else if (mediaType == mediaTypeMusic && gameNameFilter != '' && gameNameFilter != filterClearOptionValue) { for (var mediaIndex = 0; mediaIndex < mediaList.length; mediaIndex++) { if (mediaList[mediaIndex].gameName != gameNameFilter) { mediaList.splice(mediaIndex, 1); mediaIndex--; } } } // filter by batch if ((mediaType == mediaTypeVideos || mediaType == mediaTypeScreenshots) && batchFilter != '' && batchFilter != filterClearOptionValue) { for (var mediaIndex = 0; mediaIndex < mediaList.length; mediaIndex++) { if (removeSpaces(mediaList[mediaIndex].batchName.toLowerCase()) != batchFilter) { mediaList.splice(mediaIndex, 1); mediaIndex--; } } } } function buildMediaList() { var numMedia = mediaList.length; for (var mediaIndex = 0; mediaIndex < numMedia; mediaIndex++) { var mediaItem = mediaList[mediaIndex]; // create list item var listItemElement = document.createElement('LI'); listItemElement.mediaIndex = mediaIndex; listItemElement.id = 'media' + mediaIndex; listItemElement.className = (mediaItem == numMedia - 1) ? 'last-item' : ''; listItemElement.onclick = function() { loadMedia(this.mediaIndex); } // populate list item // thumbnail image var thumbnailElement = document.createElement('IMG'); thumbnailElement.src = mediaItem.thumbImage; listItemElement.appendChild(thumbnailElement); // text (is media-specific) var descriptionElement = document.createElement('A'); descriptionElement.setAttribute('href', '#'); switch(mediaType) { case mediaTypeVideos: descriptionElement.innerHTML = getVideoItemText(mediaItem); break; case mediaTypeScreenshots: descriptionElement.innerHTML = getScreenshotItemText(mediaItem); break; case mediaTypeMusic: descriptionElement.innerHTML = getMusicItemText(mediaItem); break; } listItemElement.appendChild(descriptionElement); // append new list item to media list document.getElementById('media-list').appendChild(listItemElement); } // set media list scrollbar to correct height setTimeout("mediaListScrollbar = new scrollbar('media-list-scrollbar', 'media-list');", 1000); } /****************************************************************************** All Media *****************************************************************************/ function loadMedia(mediaIndex, autoplayVideo, init) { // set new item as the current one setCurrentMediaItem(mediaIndex); // populate game title, etc var currentMediaItem = mediaList[currentMediaIndex]; // current-media-game-info document.getElementById('current-media-game-logo').src = currentMediaItem.gameLogoImage; document.getElementById('current-media-game-link').href = currentMediaItem.gameLinkURL; document.getElementById('current-media-game-link').innerHTML = currentMediaItem.gameLinkText; document.getElementById('buy-it-link').href = currentMediaItem.gameBuyItLinkURL; document.getElementById('game-box-art').src = currentMediaItem.gameBoxArtImage; //hide links to media that does not yet have a released game or a site if(currentMediaItem.gameLinkURL != "") document.getElementById('current-media-game-link').style.display = "block"; else document.getElementById('current-media-game-link').style.display = "none"; if(currentMediaItem.gameBuyItLinkURL.charAt(currentMediaItem.gameBuyItLinkURL.length-1) != "=") document.getElementById('buy-it-link').style.display = "block"; else document.getElementById('buy-it-link').style.display = "none"; // current-media-description document.getElementById('current-media-game-type-logo').src = currentMediaItem.gameTypeLogoImage; document.getElementById('current-media-description-text').innerHTML = currentMediaItem.descriptionLong; document.getElementById('current-media-counter').innerHTML = (mediaIndex + 1) + '/' + mediaList.length; // media-specific stuff switch(mediaType) { case mediaTypeVideos: loadVideo(autoplayVideo) break; case mediaTypeScreenshots: loadScreenshot() break; case mediaTypeMusic: loadMusic(init) break; } } function setCurrentMediaItem(mediaIndex) { // highlight media item document.getElementById('media' + currentMediaIndex).className = ''; currentMediaIndex = mediaIndex; document.getElementById('media' + currentMediaIndex).className = 'current'; // scroll media list to bring current item into view if needed var mediaListItem = document.getElementById('media' + currentMediaIndex); if (mediaListScrollbar) { mediaListScrollbar.scrollIntoView(mediaListItem.offsetTop, mediaListItemHeight); } } function getNextMediaIndex() { var nextMediaIndex = currentMediaIndex + 1; if (nextMediaIndex >= mediaList.length) { nextMediaIndex = 0; } return nextMediaIndex; } function getPrevMediaIndex() { var prevMediaIndex = currentMediaIndex - 1; if (prevMediaIndex < 0) { prevMediaIndex = mediaList.length - 1; } return prevMediaIndex; } /****************************************************************************** Videos *****************************************************************************/ function loadVideo(autoplay) { var currentMediaItem = mediaList[currentMediaIndex]; // quicktime object top.quicktimeFrame.location.href = '/_components/madden06/theater_video.html?movie=' + currentMediaItem.videoURL + '&autoplay=' + (isUndefined(autoplay) ? true: autoplay); // full screen button if (currentMediaItem.fullscreenURL) { document.getElementById('view-fullscreen-link').href = currentMediaItem.fullscreenURL; document.getElementById('view-fullscreen-link').style.display = 'inline'; } else { document.getElementById('view-fullscreen-link').style.display = 'none'; } // current-media-description stuff document.getElementById('current-media-title').innerHTML = currentMediaItem.mediaTitle; document.getElementById('current-media-platform').innerHTML = currentMediaItem.platform != -1 ? platformMapping[currentMediaItem.platform] : ''; document.getElementById('current-media-date').innerHTML = currentMediaItem.postedDate ? currentMediaItem.postedDate : ''; } function loadNextVideo() { loadMedia(getNextMediaIndex()); } function loadPrevVideo() { loadMedia(getPrevMediaIndex()); } function loadFullscreen() { loadMedia(currentMediaIndex, false); } function getVideoItemText(mediaItem) { var text = mediaItem.mediaTitle + ' ' + (mediaItem.videoByteLength ? ('