if(fsMedia == undefined){ var fsMedia = {}; } /*fs-multimedia-cp*/ /** @class Multimedia Center Piece module behavior @param xDomElement {Object} DOM element of the module to attach to (this may also be a CSS selector for element) @param xParameters {Object} Parameter hash; currently only used to pass an MSN video ID to this MMCP */ fsMedia.MultimediaCP = function(xDomElement, xParameters) { // Keep references to important elements for quick access this._xDomElement = $(xDomElement); //get tabs this._xTabContainerDomElement = $(".tab-container", this._xDomElement); this._xPhotoTabDomElement = $(".tab.photo", this._xTabContainerDomElement)[0];//.get(0); this._xPhotoTab1DomElement = $(".tab.photo", this._xTabContainerDomElement)[1];//.get(1); this._xVideoTabDomElement = $(".tab.video", this._xTabContainerDomElement)[0];//.get(0); this._xVideoTab1DomElement = $(".tab.video", this._xTabContainerDomElement)[1];//.get(1); this._xGalleryTabDomElement = $(".tab.gallery", this._xTabContainerDomElement)[0];//.get(0); this._xGalleryTab1DomElement = $(".tab.gallery", this._xTabContainerDomElement)[1];//.get(1); this._xMapsTabDomElement = $(".tab.maps", this._xTabContainerDomElement)[0];//.get(0); this._xMapsTab1DomElement = $(".tab.maps", this._xTabContainerDomElement)[1];//.get(1); //get CP elements this._xPhotoPanelDomElement = $(".panel > div.photo", this._xDomElement)[0];//.get(0); this._xPhotoPanel1DomElement = $(".panel > div.photo", this._xDomElement)[1];//.get(1); this._xVideoPanelDomElement = $(".panel > div.video", this._xDomElement)[0];//.get(0); this._xVideoPanel1DomElement = $(".panel > div.video", this._xDomElement)[1];//.get(1); this._xGalleryPanelDomElement = $(".panel > div.gallery", this._xDomElement)[0];//.get(0); this._xGalleryPanel1DomElement = $(".panel > div.gallery", this._xDomElement)[1];//.get(1); this._xMapsPanelDomElement = $(".panel > div.maps", this._xDomElement)[0];//.get(0); this._xMapsPanel1DomElement = $(".panel > div.maps", this._xDomElement)[1];//.get(1); // If parameters were passed, extract them here if (xParameters) { this.pageName = xParameters.pageName; if (xParameters.video) { this._sVideoId = xParameters.video.id; } if (xParameters.video1) { this._sVideoId1 = xParameters.video1.id; } } this.init(); } fsMedia.MultimediaCP.prototype = { /** DOM element representing this multimedia CP @type Object @private */ _xDomElement : null, /** DOM element representing the tab container @type Object @private */ _xTabContainerDomElement : null, /** DOM element representing the "Photo" tab @type Object @private */ _xPhotoTabDomElement : null, /** DOM element representing the "Video" tab @type Object @private */ _xVideoTabDomElement : null, /** DOM element representing the "Photo" panel @type Object @private */ _xPhotoPanelDomElement : null, /** DOM element representing the "Video" panel @type Object @private */ _xVideoPanelDomElement : null, /** DOM element representing the MSN video player SWF @type Object @private */ _xMsnPlayer : null, /** Main initialization @private */ init : function() { var xThis = this; //fix for video click event when video is the first tab // if(xThis._xPhotoTabDomElement == undefined && this._sVideoId != undefined){ if($('.panel.selected:eq(0) div.video').length > 0) { $(xThis._xVideoPanelDomElement).unbind().click(function() { xThis.instantiateVideo(xThis._sVideoId, 0); }); // End BIND }else{ if(xThis._xPhotoTabDomElement != undefined){ if($(xThis._xPhotoPanelDomElement).hasClass("caption")) $(".panel-container").addClass("caption"); } } // Global click handler for tab/panel selection $(this._xDomElement).click(function(xEvent) { var xTarget = xEvent.target; switch (xTarget) { case xThis._xPhotoTabDomElement:xThis.selectPanel(xThis._xPhotoPanelDomElement); break; case xThis._xPhotoTab1DomElement:xThis.selectPanel(xThis._xPhotoPanel1DomElement); break; case xThis._xVideoTabDomElement:xThis.selectPanel(xThis._xVideoPanelDomElement); break; case xThis._xVideoTab1DomElement:xThis.selectPanel(xThis._xVideoPanel1DomElement); break; case xThis._xGalleryTabDomElement:xThis.selectPanel(xThis._xGalleryPanelDomElement); break; case xThis._xGalleryTab1DomElement:xThis.selectPanel(xThis._xGalleryPanel1DomElement); break; case xThis._xMapsTabDomElement:xThis.selectPanel(xThis._xMapsPanelDomElement); break; case xThis._xMapsTab1DomElement:xThis.selectPanel(xThis._xMapsPanel1DomElement); break; } }); // Ensure proper initialization of "selected" panel var xSelectedPanelDomElement = $(".panel.selected", this._xDomElement).get(0); if (xSelectedPanelDomElement) { // Initialize the tab that has the "selected" class this.selectPanel(xSelectedPanelDomElement, true); }else { // Or the very first tab, if none is selected this.selectPanel($(".panel:eq(0)", this._xDomElement).get(0), true); } }, /** Select the specified panel. @param xPanelDomElement DOM element of the panel to be opened @param bForce Flag: force to open, even if the panel already has the "selected" class @private */ selectPanel : function(xPanelDomElement, bForce /* = false */) { var xThis = this; if (!bForce && ($(xPanelDomElement).parent()).hasClass("selected")) { // Do not switch to requested panel if it is already selected, *unless* we are explicitly forced to return; } // Select requested tab, unselect all others ($(xPanelDomElement).parent()).addClass("selected").siblings("div").removeClass("selected"); // Stop video, in case any is currently playing this.removeVideo(); switch (xPanelDomElement) { //Select PHOTO panel case this._xPhotoPanelDomElement: $(this._xPhotoTabDomElement).addClass("selected").siblings("a").removeClass("selected"); if($(this._xPhotoPanelDomElement).hasClass("caption")) $(".panel-container").addClass("caption"); else $(".panel-container").removeClass("caption"); fsAnalytics(this, {type: 'link', description: this.pageName+" CP - Photo 1"}); fsLoadAds(); break; case this._xPhotoPanel1DomElement: $(this._xPhotoTab1DomElement).addClass("selected").siblings("a").removeClass("selected"); if($(this._xPhotoPanel1DomElement).hasClass("caption"))$(".panel-container").addClass("caption"); $(".panel-container").removeClass("caption"); fsAnalytics(this, {type: 'link', description: this.pageName+" CP - Photo 2"}); fsLoadAds(); break; // Select VIDEO panel case this._xVideoPanelDomElement: $(this._xVideoTabDomElement).addClass("selected").siblings("a").removeClass("selected"); $(".panel-container").removeClass("caption"); fsAnalytics(this, {type: 'link', description: this.pageName+" CP - Video 1"}); fsLoadAds(); $(this._xVideoPanelDomElement).show(); //bind click event to the video's image $(this._xVideoPanelDomElement).unbind().click(function() { xThis.instantiateVideo(xThis._sVideoId, 0); }); // End BIND break; case this._xVideoPanel1DomElement: $(this._xVideoTab1DomElement).addClass("selected").siblings("a").removeClass("selected"); $(".panel-container").removeClass("caption"); fsAnalytics(this, {type: 'link', description: this.pageName +" CP - Video 2"}); fsLoadAds(); $(this._xVideoPanel1DomElement).show(); //bind click event to the video's image $(this._xVideoPanel1DomElement).unbind().click(function() { xThis.instantiateVideo(xThis._sVideoId1, 1); }); // End BIND break; //Select GALLERY panel case this._xGalleryPanelDomElement: $(this._xGalleryTabDomElement).addClass("selected").siblings("a").removeClass("selected"); $(".panel-container").removeClass("caption"); fsAnalytics(this, {type: 'link', description: this.pageName +" CP - Gallery 1"}); fsLoadAds(); break; case this._xGalleryPanel1DomElement: $(this._xGalleryTab1DomElement).addClass("selected").siblings("a").removeClass("selected"); $(".panel-container").removeClass("caption"); fsAnalytics(this, {type: 'link', description: this.pageName +" CP - Gallery 2"}); fsLoadAds(); break; //Select MAPS panel case this._xMapsPanelDomElement: $(this._xMapsTabDomElement).addClass("selected").siblings("a").removeClass("selected"); $(".panel-container").removeClass("caption"); fsAnalytics(this._xMapsTabDomElement, {type: 'link', description: this.pageName +" CP - Map 1"}); /*var layer = new VEShapeLayer(); var veLayerSpec = new VEShapeSourceSpecification(VEDataType.VECollection, '76D4388C0C2D9939!112', layer); map.ImportShapeLayerData(veLayerSpec); */ fsLoadAds(); break; case this._xMapsPanel1DomElement: $(this._xMapsTab1DomElement).addClass("selected").siblings("a").removeClass("selected"); $(".panel-container").removeClass("caption"); fsAnalytics(this._xMapsTab1DomElement, {type: 'link', description: this.pageName +" CP - Map 1"}); fsLoadAds(); break; } }, /** Instantiate a new MSN video player with the specified MSN video ID. NOTE: It would generally be preferable to reuse the previous MSN video player instance (as is done in the general Home/Section Front CP. However, the video player SWF does not allow rewinding (or resetting) a video in a way that will display both the video still image and the "click to play" caption, as it normally would upon initial instantiation. (This is mainly an issue in IE browsers). Therefore, this function chooses to re-instantiate the video player each time. If a missing still image and a "click to continue" caption are acceptable, this function can be rewritten to reuse a previous instance of the video player. @param sVideoId MSN video ID @private */ instantiateVideo : function(sVideoId, tabNum) { // If there is already an instance of the player running in this CP, remove it this.removeVideo(); if($(".panel").length == 1)fsAnalytics(this, {type: 'link', description: "MP2 CP - Video Tab"}); //get the element id var sDomElement = $(this._xVideoPanelDomElement).children(".player")[0]; if(tabNum == 1)sDomElement = $(this._xVideoPanel1DomElement).children(".player")[0]; this._sDomElementId = $(sDomElement).attr("id"); var playerId = sVideoId +"_player_flash"; //var trackingId = "IV2_en-us_foxsports_cp"; // Create a new video player instance here this._xPlayerContainerDomElement = $("
").addClass("playerDiv").attr("id", sVideoId + "_player_p"); //$(this._xVideoPanelDomElement).append(this._xPlayerContainerDomElement); if(tabNum == 0){ this._xVideoPanelElement = $(this._xVideoPanelDomElement).parent(); $(this._xVideoPanelDomElement).hide(); $(this._xVideoPanelElement).append(this._xPlayerContainerDomElement); } else { this._xVideoPanel1Element = $(this._xVideoPanel1DomElement).parent(); $(this._xVideoPanel1DomElement).hide(); $(this._xVideoPanel1Element).append(this._xPlayerContainerDomElement); } Msn.Video.createWidget(sVideoId + "_player_p", 'Player', 600, 381,{"configCsid": "Fox%20Sports","configName": "video_player","player.defaultVidId": sVideoId,"player.c": "v","player.v": sVideoId, "player.fr": "IV2_en-us_foxsports_articles","player.endslateMode": "V5", "player.ad" : "true", "player.adFull" : "web", "player.adPartial" : "partial", "player.playAdBeforeFirstVid" : "true", "player.timePlaying" : "90", "player.skin" : "0", "player.ap": "true", "player.mkt": "en-us", "player.hideOptions": "false", "player.hideEmail": "false", "player.hideInfo": "false", "player.hideLink" : "false", "player.ifs" : "true", "player.msnlink": "false", "player.title" : "false", "player.linkback": "http://msn.foxsports.com/video", "player.linkoverride": "http://msn.foxsports.com/video?vid=", "player.rv": "true", "player.rva": "&alg=1"}, playerId); this._xMsnPlayer = $("#" +playerId).get(0); }, /** Stop and remove MSN video player (if it is currently instantiated). @private */ removeVideo: function() { // If a video is currently playing, stop it first if (this._xMsnPlayer) { try { this._xMsnPlayer.vidPause(); }catch (xException) {} } // Then remove the video player SWF completely. if (this._xPlayerContainerDomElement) { $(this._xPlayerContainerDomElement).remove(); delete this._xPlayerContainerDomElement; this._xPlayerContainerDomElement = null; } } }