function $(ElId){ return document.getElementById(ElId); } // onload: //window.onload = InitWmpRadio; window.onload = CheckSystemStatus; window.onunload = UnloadWmpRadio; // global vars: --------------------------------------- var StationListItemImageSize = {x:100,y:56} var StationDetailsImageSize = {x:144,y:81} var FreeStationItems; // holds a collection of stations where subscription=free var RadioPlayerObj; // global reference to wmp object var SessionStartTimeMs = 0; // holds application start time var BufferingDisplayInterval; // holds reference to interval var UpdateBufferingIntervalRunning = false; var PositionDisplayInterval; // holds reference to interval var UpdatePositionIntervalRunning = false; var TrackSkips = 0; // number of skips user makes per playlist // ---------------------------------------------------- function UnloadWmpRadio(){ // if there is a song playing or paused, send reporting call RadioReporting.Send(true); } function CheckSystemStatus(){ var s = new ClientSystemStatus(); if(s.OsOk && s.BrowserOk && s.ActivexOk && s.WmpOk && s.FirefoxActivexResponsive){ InitWmpRadio(); }else{ // problem(s): generate error messages SystemRequirementFailureInit(s); } } function SystemRequirementFailureInit(StatusObj){ var MsgLiElArray = new Array(); if(!StatusObj.OsOk){ MsgLiElArray.push(ReturnElementLi(CopyStrings.SystemRequirementFailure.Os)); SystemRequirementFailureDisplay(MsgLiElArray); return; } if(!StatusObj.BrowserOk){ MsgLiElArray.push(ReturnElementLi(CopyStrings.SystemRequirementFailure.Browser)); SystemRequirementFailureDisplay(MsgLiElArray); return; } if(!StatusObj.WmpOk){ MsgLiElArray.push(ReturnElementLi(CopyStrings.SystemRequirementFailure.Wmp)); } if(!StatusObj.ActivexOk){ MsgLiElArray.push(ReturnElementLi(CopyStrings.SystemRequirementFailure.Activex)); } if(!StatusObj.FirefoxActivexResponsive){ MsgLiElArray.push(ReturnElementLi(CopyStrings.SystemRequirementFailure.FirefoxActivex)); } SystemRequirementFailureDisplay(MsgLiElArray); } function SystemRequirementFailureDisplay(ElementArray){ // hide station browser: $("StationBrowserContainer").style.display="none"; // hide radio container: $("RadioContainer").style.display="none"; // show system requirement failure heading: $("SystemRequirementMessagesHeading").innerHTML = CopyStrings.SystemRequirementFailure.Heading; // show message display: $("SystemRequirementMessagesContainer").style.display = "block"; // add li elements to ul: for(u=0; u < ElementArray.length; u++){ $("SystemRequirementMessagesList").appendChild(ElementArray[u]); } } function ReturnElementLi(TxtStr){ var NewLi = document.createElement("li"); NewLi.innerHTML = TxtStr; return NewLi; } function PopulateUiWithCopyStrings(){ // set button image alt attributes: $("BtnPause").setAttribute("alt",CopyStrings.Button.Pause); $("BtnPlay").setAttribute("alt",CopyStrings.Button.Play); $("BtnNext").setAttribute("alt",CopyStrings.Button.Next); // player status: $("RadioUiConnectingDisplay").innerHTML = CopyStrings.PlayerStatus.Connecting + "..."; $("RadioUiBufferingDisplay_txt").innerHTML = CopyStrings.PlayerStatus.Buffering; $("RadioUiPositionDisplay_txt").innerHTML = CopyStrings.PlayerStatus.Playing; $("StationDisplayListeningTo").innerHTML = CopyStrings.ListeningTo; $("StationDetailsListenBtn").innerHTML = CopyStrings.StationBrowser.Listen; $("StationDetailsBackBtn").innerHTML = CopyStrings.StationBrowser.Back; $("StationDetailsGenresTitle").innerHTML = CopyStrings.StationBrowser.Genres; $("StationDetailsArtistsTitle").innerHTML = CopyStrings.StationBrowser.Artists; } function InitWmpRadio(){ // set SessionStartTimeMs: var TimeNow = new Date(); SessionStartTimeMs = parseInt(TimeNow.getTime()); WriteToLog("InitWmpRadio()"); PopulateUiWithCopyStrings(); RadioPlayerObj = TargetWmpObj(); // station dropdown change event handler: $("StationDropdownSelect").onchange = StationSelectChangeHandler; // button event handlers $("BtnPlay").onclick = RadioUiPlay; $("BtnPause").onclick = RadioUiPause; $("BtnNext").onclick = RadioUiNext; $("StationDetailsBackBtn").onclick = StationDetailsBackBtnHandler; $("StationDetailsListenBtn").onclick = StationItemClickToListen; MakeRolloverImg($("BtnPlay")); MakeRolloverImg($("BtnPause")); MakeRolloverImg($("BtnNext")); // get list of stations: //var StationsRequest = YAHOO.util.Connect.asyncRequest('GET', StationsListUrl, StationsRequestCallback); WriteToLog("Station list requested from: " + StationsListUrl); loadStationXML(StationsListUrl); } function TargetWmpObj(){ var WmpTmpObj = $("WmpRadioPlayer"); // var BlankAsxUrl = "http://www.mtvx-d.mtvi.com/global/apps/broadband/radio/xml/load.asx"; // try{ // var TmpX = WmpTmpObj.newPlaylist("",BlankAsxUrl); // } // catch(e){ // alert("couldn't create playlist: " + e); // } // alert("will try again..."); // try{ // var TmpX = WmpTmpObj.newPlaylist("",BlankAsxUrl); // } // catch(e){ // alert("couldn't create playlist, again: " + e); // } //if(!WmpTmpObj.newPlaylist("","")){ // // do something to kickstart WMP obj... // alert("could not create playlist"); //} return WmpTmpObj; } function MakeRolloverImg(ImgObj){ ImgObj.Enabled = true; ImgObj.SrcOut = ImgObj.src; ImgObj.SrcOver = ImgObj.getAttribute("src_over"); try{ ImgObj.SrcDisabled = ImgObj.getAttribute("src_disabled"); } catch(e){} ImgObj.onmouseover = function(){ if(this.Enabled){ this.src = this.SrcOver; } } ImgObj.onmouseout = function(){ if(this.Enabled){ this.src = this.SrcOut; } } ImgObj.DisableOrEnableImg = DisableOrEnableImg; // preload image PreloadImg(ImgObj.SrcOver); } function DisableOrEnableImg(Enable){ this.Enabled = Enable; if(this.Enabled){ this.src = this.SrcOut; }else{ this.src = this.SrcDisabled; } } var StationsRequestCallback = { success: StationsRequestSuccessHandler, failure: StationsRequestFailureHandler } function StationsRequestFailureHandler(r){ WriteToLog("StationsRequestFailureHandler(): status: " + r.status + " statusText: " + r.statusText); } function StationsRequestSuccessHandler(r){ var StationsXml = InitXmlObj(r.responseText); //alert(r.responseText) //alert(StationsXml.hasChildNodes()); parseStationXML(StationsXml); } function stateChange(){ // if xmlhttp shows "loaded" if (xmlhttp.readyState==4){ // if "OK" if (xmlhttp.status==200){ parseStationXML(xmlhttp.responseXML); } else{ //alert("Problem retrieving XML data"); } } } function loadStationXML(xmlLink) { if (window.ActiveXObject) { var parser=new ActiveXObject("microsoft.xmldom"); parser.async="false"; parser.load(xmlLink); var xmlData = parser; parseStationXML(xmlData); } else { xmlhttp=new XMLHttpRequest(); xmlhttp.onreadystatechange=stateChange; xmlhttp.open("GET",xmlLink,true); xmlhttp.send(); } } function parseStationXML(StationsXml) { var StationItems = StationsXml.getElementsByTagName("item"); FreeStationItems = new Array(); WriteToLog("stations found: " + StationItems.length); for(i=0; i < StationItems.length; i++){ // if free, add to collection: var Subscription = StationItems[i].getElementsByTagName("usageType")[0].childNodes[0].nodeValue; if(Subscription == "Free" || Subscription == "Subscription"){ // add to array FreeStationItems.push(new StationObject(StationItems[i])); } } WriteToLog("'free' stations found: " + FreeStationItems.length); // populate station dropdown with stations: for(i=0; i < FreeStationItems.length; i++){ if(stationId==""){ $("StationDropdownSelect").appendChild(ReturnOption(FreeStationItems[i].Title,FreeStationItems[i].Id,false)); } else { if (stationId == FreeStationItems[i].Id){ $("StationDropdownSelect").appendChild(ReturnOption(FreeStationItems[i].Title,FreeStationItems[i].Id,true)); } else { $("StationDropdownSelect").appendChild(ReturnOption(FreeStationItems[i].Title,FreeStationItems[i].Id,false)); } } } // populate station-browser with stations: for(i=0; i < FreeStationItems.length; i++){ $("StationListOutput").appendChild(ReturnStationListItemElement(FreeStationItems[i])); } // if page was reached without 'stationId' param, load player // with first free station if(stationId==""){ // no 'stationId' param passed to page // put first station name into ui: $("StationDisplay").innerHTML = FreeStationItems[0].Title; // play first station: LoadNewPlaylistIntoWmp(StationDetailsUrl + FreeStationItems[0].Id); }else{ LoadNewPlaylistIntoWmp(StationUrl); $("StationDisplay").innerHTML = ReturnStationNameWithId(stationId); } } function StationSelectChangeHandler(){ // update station name display: $("StationDisplay").innerHTML = ReturnStationNameWithId(this.value); // build full url: sUrl = StationDetailsUrl + this.value; // load player LoadNewPlaylistIntoWmp(sUrl); } function StationGoBtnHandler(){ // build full url: sUrl = StationDetailsUrl + sId; // load player LoadNewPlaylistIntoWmp(sUrl); } function ReturnStationNameWithId(Id){ var sName = ""; for(i=0; i < FreeStationItems.length; i++){ if(FreeStationItems[i].Id == Id){ sName = FreeStationItems[i].Title; } } return sName; } function LoadNewPlaylistIntoWmp(sUrl){ // reporting: RadioReporting.Send(true); var root_playlist = RadioPlayerObj.newPlaylist("",""); RadioPlayerObj.currentPlaylist = root_playlist; root_playlist.appendItem(RadioPlayerObj.newMedia(sUrl)); WriteToLog("playlist loaded into player from: " + sUrl); // reset number of skips: TrackSkips = 0; // reset next button $("BtnNext").DisableOrEnableImg(true); // play: RadioPlayerObj.controls.play(); } function RadioUiPlay(){ RadioPlayerObj.controls.play(); WriteToLog("'play' button clicked: RadioUiPlay()"); } function RadioUiPause(){ RadioPlayerObj.controls.pause(); WriteToLog("'pause' button clicked: RadioUiPause()"); // hide buffering and song progress display: //$("RadioUiBufferingDisplay").style.display = "none"; // buffering //$("RadioUiPositionDisplay").style.display = "none"; // track progress //$("RadioUiConnectingDisplay").style.display = "none"; // conecting } function RadioUiNext(){ WriteToLog("'next' button clicked: RadioUiNext()"); //RadioPlayerObj.controls.next(); NOWPLAYING.playNextUp(); } function StationObject(XmlItem){ this.Id = XmlItem.getAttribute("id"); this.Title = XmlItem.getElementsByTagName("title")[0].childNodes[0].nodeValue; this.Description = XmlItem.getElementsByTagName("desc")[0].childNodes[0].nodeValue; if (XmlItem.getElementsByTagName("img")[0]) { this.ImgSrc = XmlItem.getElementsByTagName("img")[0].getAttribute("src"); } else { this.ImgSrc = '/global/apps/braodband/radio/img/spacer.gif'; } this.Genres = new Array(); this.Artists = new Array(); // populate genres: var GenresCollection = XmlItem.getElementsByTagName("genres")[0].getElementsByTagName("genre"); for(j=0; j < GenresCollection.length; j++){ if (GenresCollection[j].childNodes[0].nodeValue){ this.Genres.push(GenresCollection[j].childNodes[0].nodeValue); } } // populate artists: var ArtistsCollection = XmlItem.getElementsByTagName("includedArtists")[0].getElementsByTagName("artist"); for(j=0; j < ArtistsCollection.length; j++){ if (ArtistsCollection[j].childNodes[0]){ this.Artists.push(ArtistsCollection[j].childNodes[0].nodeValue); } } } function ReturnStationListItemElement(StationObj){ // outside container: var StationElement = document.createElement("div"); StationElement.className = "StationElementContainer"; // image: var StationImg = document.createElement("img"); StationImg.width = StationListItemImageSize.x; StationImg.height = StationListItemImageSize.y; // store station obj as property: StationImg.StationObj = StationObj; StationImg.onload = function(){ FitImageToSize(this,StationListItemImageSize.x,StationListItemImageSize.y); } // click handler: StationImg.onclick = StationItemClickForDetails; StationImg.src = StationObj.ImgSrc; StationElement.appendChild(StationImg); // add to container // station name: var StationName = document.createElement("div"); StationName.innerHTML = StationObj.Title; StationName.className = "StationListName"; // store station obj as property: StationName.StationObj = StationObj; // click handler: StationName.onclick = StationItemClickForDetails; StationElement.appendChild(StationName); // add to container // genres: var GenreListElement = document.createElement("div"); GenreListElement.className = "StationListGenre"; for(var p=0; p < StationObj.Genres.length; p++){ GenreListElement.innerHTML += StationObj.Genres[p]; if(p < (StationObj.Genres.length + 1)){ GenreListElement.innerHTML += "
"; } } StationElement.appendChild(GenreListElement); // add to container // details button: var StationDetailsBtn = document.createElement("div"); StationDetailsBtn.innerHTML = CopyStrings.StationBrowser.Details; StationDetailsBtn.className = "StationDetailsBtn"; // store station obj as property: StationDetailsBtn.StationObj = StationObj; // click handler: StationDetailsBtn.onclick = StationItemClickForDetails; StationElement.appendChild(StationDetailsBtn); // add to container // listen button: var StationListenBtn = document.createElement("div"); StationListenBtn.innerHTML = CopyStrings.StationBrowser.Listen; StationListenBtn.className = "StationListenBtn"; // store station obj as property: StationListenBtn.StationObj = StationObj; // click handler: StationListenBtn.onclick = StationItemClickToListen; StationElement.appendChild(StationListenBtn); // add to container return StationElement; } function StationItemClickForDetails(){ $("StationListOutput").style.display = "none"; // hide station list $("StationDetailsOutput").style.display = "block"; // show details // populate UI with data: // image: $("StationDetailsImg").onload = function(){ FitImageToSize(this,StationDetailsImageSize.x,StationDetailsImageSize.y); } $("StationDetailsImg").src = this.StationObj.ImgSrc; // title: $("StationDetailsTitle").innerHTML = this.StationObj.Title; // listen button: store station obj as property: $("StationDetailsListenBtn").StationObj = this.StationObj; // description: $("StationDetailsDescription").innerHTML = this.StationObj.Description; // genres: var GenresHtmlStr = ""; for(k=0; k < this.StationObj.Genres.length; k++){ GenresHtmlStr += this.StationObj.Genres[k]; if(k < (this.StationObj.Genres.length - 1)){ GenresHtmlStr += ", "; } } $("StationDetailsGenresList").innerHTML = GenresHtmlStr; // artists: var ArtistsHtmlStr = ""; for(j=0; j < this.StationObj.Artists.length; j++){ ArtistsHtmlStr += this.StationObj.Artists[j]; if(j < (this.StationObj.Artists.length - 1)){ ArtistsHtmlStr += ", "; } } $("StationDetailsArtistsList").innerHTML = ArtistsHtmlStr; } function StationItemClickToListen(){ LoadNewPlaylistIntoWmp(StationDetailsUrl + this.StationObj.Id); $("StationDropdownSelect"). $("StationDisplay").innerHTML = this.StationObj.Title; } function StationDetailsBackBtnHandler(){ $("StationDetailsOutput").style.display = "none"; // hide details $("StationListOutput").style.display = "block"; // show station list } function InitXmlObj(XmlDataStr){ //XmlDataStr = CleanUpXmlDataStr(XmlDataStr); var XmlObj = null; if(document.implementation && document.implementation.createDocument){ var MyParser = new DOMParser(); XmlObj = MyParser.parseFromString(XmlDataStr, "text/xml"); }else if (window.ActiveXObject){ XmlObj = new ActiveXObject("Microsoft.XMLDOM"); //XmlObj = new ActiveXObject("MSXML2.DOMDocument"); XmlObj.async="false"; XmlObj.loadXML(XmlDataStr); } return XmlObj; } function CleanUpXmlDataStr(XmlDataStr){ XmlDataStr = replaceCharacters(XmlDataStr,"\r\n"," "); // remove line-breaks IE XmlDataStr = replaceCharacters(XmlDataStr,"\n"," "); // remove line-breaks Mozilla while(XmlDataStr.indexOf(" ")!= -1){// remove excess spaces.... XmlDataStr = replaceCharacters(XmlDataStr," "," "); } XmlDataStr = replaceCharacters(XmlDataStr,"> <","><"); // remove spaces between tags return XmlDataStr; } function ReturnOption(oLabel,oValue,selected){ var NewOpt = document.createElement("option"); NewOpt.value = oValue; if (selected) { NewOpt.selected = true; } NewOpt.innerHTML = oLabel; return NewOpt; } function replaceCharacters(conversionString,inChar,outChar){ var convertedString = conversionString.split(inChar); convertedString = convertedString.join(outChar); return convertedString; } // Begin wmp event handlers ------------------------------------- function WmpEventPlayStateChange(NewState){ // determine new playstate: var NewPlayStateText = ""; switch(NewState){ case 0: NewPlayStateText = "Undefined"; break; case 1: NewPlayStateText = "Stopped"; break; case 2: NewPlayStateText = "Paused"; break; case 3: NewPlayStateText = "Playing"; break; case 4: NewPlayStateText = "ScanForward"; break; case 5: NewPlayStateText = "ScanReverse"; break; case 6: NewPlayStateText = "Buffering"; break; case 7: NewPlayStateText = "Waiting"; break; case 8: NewPlayStateText = "MediaEnded"; break; case 9: NewPlayStateText = "Transitioning"; break; case 10: NewPlayStateText = "Ready"; break; case 11: NewPlayStateText = "Reconnecting"; break; default: NewPlayStateText = ""; } // log event and new state WriteToLog("RadioPlayerObj.playStateChange: " + NewPlayStateText); // send reporting call if song ended, or if stopped: if(NewPlayStateText == "MediaEnded"){ RadioReporting.Send(false); } if(NewPlayStateText == "Stopped"){ RadioReporting.Send(true); } if(NewPlayStateText == "Playing"){ // set interval to update UI progress indication if(!UpdatePositionIntervalRunning){ // only if interval isn't already set PositionDisplayInterval = window.setInterval("UpdatePositionUiDisplay()", 1000); WriteToLog("PositionDisplayInterval Started"); UpdatePositionIntervalRunning = true; } // make sure buffering display is hidden: $("RadioUiBufferingDisplay").style.display = "none"; // make sure 'connecting...' is hidden $("RadioUiConnectingDisplay").style.display = "none"; // make sure song progress display is visible: $("RadioUiPositionDisplay").style.display = "block"; // change status text from paused to playing: $("RadioUiPositionDisplay_txt").innerHTML = CopyStrings.PlayerStatus.Playing; // update now playing info $("RadioUiNowPlayingDisplay").innerHTML = NOWPLAYING.display(); // update reporting obj track info RadioReporting.UpdateTrack(); }else if(NewPlayStateText == "Paused"){ // make sure buffering display is hidden: $("RadioUiBufferingDisplay").style.display = "none"; // make sure 'connecting...' is hidden $("RadioUiConnectingDisplay").style.display = "none"; // make sure song progress display is visible: $("RadioUiPositionDisplay").style.display = "block"; // change status text from playing to paused: $("RadioUiPositionDisplay_txt").innerHTML = CopyStrings.PlayerStatus.Paused; }else{ if(UpdatePositionIntervalRunning){ // only if interval is already set window.clearInterval(PositionDisplayInterval); WriteToLog("PositionDisplayInterval Ended"); UpdatePositionIntervalRunning = false; $("PositionValue").innerHTML = ""; // clear any remaining html } // clear now playing info $("RadioUiNowPlayingDisplay").innerHTML = ""; if(NewPlayStateText == "Transitioning"){ // hide song progress and buffering, show 'Connecting...' $("RadioUiBufferingDisplay").style.display = "none"; $("RadioUiPositionDisplay").style.display = "none"; $("RadioUiConnectingDisplay").style.display = "block"; } } if (NOWPLAYING.hasCoAd()){ NOWPLAYING.displayCoAd('load'); if (NewPlayStateText == "Playing") { var startURL = NOWPLAYING.getStartUrl(); if (document.getElementById("adCallImage")){ document.getElementById("adCallImage").innerHTML = ""; } } else if (NewPlayStateText == "MediaEnded"){ var endURL = NOWPLAYING.getEndUrl(); if (document.getElementById("adCallImage")){ document.getElementById("adCallImage").innerHTML = ""; } } } } function UpdatePositionUiDisplay(){ // update ui display $("PositionValue").innerHTML = RadioPlayerObj.controls.currentPositionString + " / " + RadioPlayerObj.currentMedia.durationString; // update reporting obj with new position: RadioReporting.duration = parseInt(RadioPlayerObj.controls.currentPosition); } function WmpEventBuffering(Start){ WriteToLog("RadioPlayerObj.buffering: start = " + Start); if(Start == true){ // Buffering started: Start the timer that updates UI display if(!UpdateBufferingIntervalRunning){ // only if interval isn't already set BufferingDisplayInterval = window.setInterval("UpdateBufferingUiDisplay()", 1000); WriteToLog("BufferingDisplayInterval Started"); UpdateBufferingIntervalRunning = true; // hide 'connecting...' display: $("RadioUiConnectingDisplay").style.display = "none"; // hide song progress display: $("RadioUiPositionDisplay").style.display = "none"; // unhide buffering display: $("RadioUiBufferingDisplay").style.display = "block"; } }else{ // Buffering complete: Stop the timer that updates UI display if(UpdateBufferingIntervalRunning){ // only if interval is already set window.clearInterval(BufferingDisplayInterval); WriteToLog("BufferingDisplayInterval Ended"); UpdateBufferingIntervalRunning = false; } $("BufferingValue").innerHTML = ""; // clear any remaining buffering progress value // hide buffering display: $("RadioUiBufferingDisplay").style.display = "none"; // unhide song progress display $("RadioUiPositionDisplay").style.display = "block"; } } // end wmp event handlers ------------------------------------- function UpdateBufferingUiDisplay(){ $("BufferingValue").innerHTML = RadioPlayerObj.network.bufferingProgress; } // Begin Debugging functions ------------------------------- function WriteToLog(HtmStr){ if(DebugParam){ // only do if debug=true // time stamp var TimeNow = new Date(); var SessionTimeMs = parseInt(TimeNow.getTime()) - SessionStartTimeMs; HtmStr = "Log ["+SessionTimeMs+"ms] : " + HtmStr + "
"; try { $("LoggingOutput").innerHTML = HtmStr + $("LoggingOutput").innerHTML; } catch(e){} } } // End Debugging functions -------------------------------