lalam = lala; // TODO: CLEAN THIS IN THE FLASH - STILL REFS lalam
lala.mojo = {
    init: function() {
        this.USER_AGENT = navigator.userAgent.toLowerCase();
        this.IE6 = this.USER_AGENT.indexOf('msie 6.') != -1;
        this.IE = this.USER_AGENT.indexOf('msie') != -1;
        this.SAFARI = this.USER_AGENT.indexOf('safari') != -1 && this.USER_AGENT.indexOf('chrome') == -1;
    },

    elem: function(idOrElem) {
        return typeof(idOrElem) == 'string' ? document.getElementById(idOrElem)
                : idOrElem;
    },

    ltrim: function(str) {
        var newStr =  str.replace(/^\s+/, '');
        return newStr.replace(/\s+$/, '');
    },

    lescapeForHash: function(str, withSlashes) {
        // We need to encode percent signs in the string otherwise decode
        // will choke .. TODO: prob missing other chars... and why are
        // we decode/encode again??
        str = str.replace(/\%/g, '%25');

        str = encodeURI(decodeURI(str));
        if (withSlashes) {
            str = str.replace(/\//g, '%2F');
            str = str.replace(/\%2f/gi, "%252F");
        }
        str = str.replace(/&/g, '%26');
        str = str.replace(/#/g, '%23');
        str = str.replace(/\?/g, '%3F');

        return str;
    },

    lescape: function(str) {
        return window.escape(str).replace(/\//g, "%252F");
    },

    lescapeHTML: function(s, includeWhiteSpace) {
        s = s.replace(/\&/g,'&');
        s = s.replace(/\xA0/g,' ');
        s = s.replace(/\>/g,'>');
        s = s.replace(/\</g,'&lt;');
        s = s.replace(/\"/g,'&quot;');

        if (includeWhiteSpace) {
            s = s.replace(/\r\n/g,'<br>');
            s = s.replace(/\n/g,'<br>');
            s = s.replace(/  /g,' &nbsp;');
            s = s.replace(/&nbsp; /g,'&nbsp;&nbsp;');
        }
        return s;
    },

    lunderbarsForSpaces: function(s) {
        s = s.replace(/%20/g, "_");
        s = s.replace(/ /g, "_");
        return s;
    },

    flattenArtistList: function(artistList, sep) {
        if (!sep) sep = ', ';
        artistList = artistList.split('::');
        var artists = [];
        for (var i = 0; i < artistList.length; i++) {
            artists.push(artistList[i]);
            if (i != artistList.length - 1) artists.push(sep);
        }
        return artists.join('');
    },

    // TODO: TAKE THIS OUT  
    log: function(msg) {
        if (msg == null) msg = 'null';

        var actionsHtml =
                "<a style='color: white; position: absolute; top: -1px; " +
                "right: 25px;'" +
                " href='javascript:lala.mojo.clearPanel()'>clear</a>" +
                "<a style='color: white; position: absolute; top: -1px; " +
                "right: 5px;'" +
                " href='javascript:lala.mojo.closePanel()'>x</a>";

        if (!lala.mojo.log._errorDiv) {
            var div = document.createElement("DIV");
            div.id = 'errPanel';
            lala.mojo.log._errorDiv = document.body.appendChild(div);

            var styles = {
                'position': 'absolute',
                'textAlign': 'left',
                'border': '4px solid #0099ff',
                'borderBottom': '4px outset #0099ff',
                'borderRight': '4px outset #0099ff',
                'padding': '5px 10px',
                'bottom': '20px',
                'right': '50px',
                'width': '500px',
                'height': '200px',
                'overflow': 'auto',
                'background': 'black',
                'color': 'white',
                'fontSize': '11px'
            };
            for (var k in styles) {
                div.style[k] = styles[k];
            };

            div.innerHTML = actionsHtml;
        } else {
            if (lala.mojo.log._errorDiv.innerHTML == "") {
                lala.mojo.log._errorDiv.innerHTML = actionsHtml;
            }
           lala.mojo.log._errorDiv.style.display = 'block';
        }
        lala.mojo.log._errorDiv.innerHTML += '<div style="color:white">&gt; ' + msg + '</div>';
    },

      closePanel: function() {
        lala.mojo.log._errorDiv.style.display = 'none';
        lala.mojo.log._errorDiv.innerHTML = "";
    },

    clearPanel: function() {
        lala.mojo.log._errorDiv.innerHTML =
                "<a style='color: white; position: absolute; top: -1px; " +
                "right: 25px;'" +
                " href='javascript:lala.mojo.clearPanel()'>clear</a>" +
                "<a style='color: white; position: absolute; top: -1px; " +
                "right: 5px;'" +
                " href='javascript:lala.mojo.closePanel()'>x</a>";
    }
};

lala.MediaPlayer = {
    COLLAPSED_WIDTH: 81,
    EXPANDED_WIDTH: 289,
    IE6_PLAYER_HEIGHT_FROM_BOTTOM: 93,
    _links: [],
    _anchorMap: {},   // maps hrefs to matching anchor objects
    _playlistMap: {}, // maps hrefs to matching playlist anchors
    _trackData: {},
    _currentAnchor: null,
    _currentBag: null,
    _trackIndex: -1,
    _swfLoaded: false,
    _tweenInterval: null,
    _playerDiv: null,
    _resizeTimer: null,
    _expanded: false,
    _playlistTracks: null,
    _playlistFlyout: null,

    status: 'stopped',

    create: function() {
        // for some odd reason an extra pixel shows up in ie6
        if (lala.mojo.IE6) {
            this.COLLAPSED_WIDTH = 80;
            this.EXPANDED_WIDTH = 288;
        }

        var playerStyles = this.getPlayerStyles();
        playerStyles = playerStyles.replace(/_STATIC_BASE_URL_/g, lala.staticBaseUrl);
        document.write(playerStyles);

        var browserClass = "";
        if (lala.mojo.IE6) {
            browserClass = "lmp_ie6";
        } else if (lala.mojo.IE) {
            browserClass = "lmp_ie";
        }

        var playerHTML = [ "<div id='lmp_wrapper' class='" + browserClass + "'>",
            "<div id='lalaMediaPlayer' style='width: " + this.COLLAPSED_WIDTH + "px;' class='lmp_closed'>",
            "<div id='lmp_container' class='new_sprite lmp_bg'>",
            "<div id='lalaWidgetPlayer'></div>",
            "<div id='lmp_logo_container' class='new_sprite' onclick='lala.MediaPlayer.onHandleClick(this)'><div id='lmp_logo' class='new_sprite'></div></div>",
            "<a id='lmp_queue' class='new_sprite lmp_queue' href='#' onclick='lala.MediaPlayer.onPlaylistClick(); return false;'></a>",
            "<a id='lmp_prev' class='new_sprite lmp_prev' href='#' onclick='lala.MediaPlayer.onPrevClick(); return false;'></a>",
            "<a id='lmp_next' class='new_sprite lmp_next' href='#' onclick='lala.MediaPlayer.onNextClick(); return false;'></a>",
            "<a href='#' id='lmp_handle' onclick='lala.MediaPlayer.onHandleClick(this); return false;' title='Expand Lala Media Player' class='new_sprite'>",
            "</a>",
            "</div></div>",
            "</div>"].join("");

        document.write(playerHTML);

        if (lala.mojo.IE6) {
            var self = this;
            window.onresize = window.onscroll = function () {
                self.onResizeOrScroll();
            };
        }
    },

    init: function(params) {
        lala.partnerId          = params.partnerId || 'lala';
        this.playerAutoExpand   = params.playerAutoExpand;
        this.playAllId          = params.playAllId;
        this.useSignupDialog    = (typeof(params.useSignupDialog) != 'undefined') ? params.useSignupDialog : true;
        this.callbackUrl        = params.callbackUrl;
        this.partnerId          = lala.partnerId;
        this.hideText           = (typeof(params.hideText) != 'undefined') ? params.hideText : false;

        // these I need to set up manually
        this.partnerName        = params.partnerName;
        this.partnerSite        = params.partnerSite;
        this.logoUrl            = params.logoUrl;
    },

    onLoad: function() {
        var self = lala.MediaPlayer;
        var playlist = document.createElement("div");
        playlist.id = 'lmp_playlist';

        // Look for the special Lala divs
        var divs = document.getElementsByTagName("DIV");
        for (var i = 0; i < divs.length; i++) {
            var div = divs[i];
            if (div.className.match(/lalaMediaPlayer/)) {
                var type = div.getAttribute('lmpType');
                switch (type) {
                    case 'song':
                        this._addAndRenderSongDiv(div);
                        break;
                    case 'album':
                        this._addAndRenderAlbumDiv(div);
                        break;
                    default:
                        // no-op
                        break;
                }
            }
        }

        // the _addAndRegister functions above add to this._links
        if (this._links.length <= 0) {
            this.close();
            return;
        }

        this._playlistFlyout = new lala.MediaPlayer.Flyout({
            id: "lmp_playlistFlyout",
            left: 0,
            width: 276,
            height: 200,
            contentElt: playlist,
            growCallback: function() {
                self._playlistTracks.style.overflowY = "auto";
            },
            defaultTitle: "Playlist"
        });

        var player = lala.mojo.elem('lalaMediaPlayer');
        if (player) player.className = "lmp_collapsed";

        if (this.playerAutoExpand) {
            this.expand();
        } else {
            this.collapse();
        }

        var playerParams = {
            partnerId: this.partnerId,
            host: lala.host,
            userImageHost: lala.userImgUrl,
            useSignupDialog: this.useSignupDialog,
            noBorder: true,
            adDivId: 'lalaWidgetPlayerAd'
        };
        if (lala.isDevMode) {
            playerParams.devMode = true;
        }

        var onPlayerLoaded = function() {
            lala.MediaPlayer._swfLoaded = true;
            lala.MediaPlayer.playAllSongs(true);
        };

        var onPlayerStatusChange = function(data) {
            lala.MediaPlayer.status = data.status;
            lala.MediaPlayer._currentBag = [data.song];
            lala.MediaPlayer._notifyPlayStatus(lala.MediaPlayer.status);
        };

        var onPlaybackFatalError = function() { /* do nothing */ };

        var onPlaybackError = function () {
            setTimeout(function() {
                lala.MediaPlayer.onNextClick();
            }, 100);
        };

        var onPlaybackComplete = function() {
            setTimeout(function() {
                lala.MediaPlayer.onNextClick();
            }, 100);
        };

        lala.Player.addEventListener(lala.Player.EVENT_PLAYBACK_ERROR, onPlaybackError);
        lala.Player.addEventListener(lala.Player.EVENT_PLAYBACK_FATAL_ERROR, onPlaybackFatalError);
        lala.Player.addEventListener(lala.Player.EVENT_PLAYBACK_COMPLETE, onPlaybackComplete);
        lala.Player.addEventListener(lala.Player.EVENT_PLAYER_STATUS_CHANGE, onPlayerStatusChange);
        lala.Player.addEventListener(lala.Player.EVENT_PLAYER_LOADED, onPlayerLoaded);

        // single song widget uses for tracking to use widget.mediaplayer instead
        // of widget.song
        playerParams.isMediaPlayer = true;
        lala.Player.init(
                "lalaWidgetPlayer",
                {width: "100%", height: "100%" },
                playerParams);

        if (this.useSignupDialog) {
            lala.SignupDialog.init({
                callbackUrl: this.callbackUrl,
                partnerId: this.partnerId,
                sslBaseUrl: lala.sslActionBaseURL,
                logoUrl: this.logoUrl
            });
        }

        // render the play all button
        if (this.playAllId) {
            var playAllButton = lala.mojo.elem(this.playAllId);
            if (playAllButton) {
                playAllButton.innerHTML = '<a class="lmp_playAllButton" href="javascript: void 0" onclick="lala.MediaPlayer.playAllSongs(); return false;"></a>';
            } else if (console) {
                // console is firebug whatnot
                console.error('The id you specified for the play all button does not exist.');
            }
        }
    },

    _addAndRenderSongDiv: function(div) {
        var title          = div.getAttribute('lmpTitle');
        var songId         = div.getAttribute('lmpId');
        var linkId         = div.getAttribute('lmpLinkId');
        var artistList     = div.getAttribute('lmpArtistList');
        var flatArtistList = lala.mojo.flattenArtistList(artistList);
        var artistLinks    = this.getArtistListLinks(artistList);
        var canBuyMp3      = div.getAttribute('lmpcanBuyMp3');
        var buyLink        = this.getSongBuyLink(songId, title, flatArtistList, canBuyMp3);

        var htmlTitle = lala.mojo.lescapeHTML(title) + ' by ' + lala.mojo.lescapeHTML(flatArtistList);
        var width = this.hideText ? 'auto' : '100%';
        var html = '<table class="lmpSongTable" style="width:' + width + ';"><tr>'
                + '<td width="32">' + buyLink + '</td>'
                + '<td width="32"><a class="lmp_playIcon" style="text-decoration: none;" href="'
                + this.getSongUrl(songId, title, flatArtistList, linkId)
                + '">&nbsp;</a></td>';
        if (!this.hideText) {
            html += '<td class="lmpTextCell" title="' + htmlTitle +'">' + this.getSongLink(songId, title, flatArtistList, linkId)
                    + ' by ' + artistLinks + '</td>';
        }

        html += '</tr></table>';
        
        div.innerHTML = html;
        this._setupAnchor(div, false, songId, title + ' by ' + flatArtistList);
    },

    _addAndRenderAlbumDiv: function(div) {
        var artists        = div.getAttribute('lmpArtistList');
        var artistLinks    = this.getArtistListLinks(artists);
        var flatArtistList = lala.mojo.flattenArtistList(artists);
        var title          = div.getAttribute('lmpTitle');
        var albumId        = div.getAttribute('lmpId');
        var trackCount     = div.getAttribute('lmpTrackCount');
        var albumLink      = this.getAlbumLink(albumId, title, flatArtistList);
        var albumUrl       = this.getAlbumUrl(albumId, title, flatArtistList);
        var buyLink        = this.getAlbumBuyLink(albumId, title, flatArtistList, div.getAttribute('lmpcanBuyMp3'));

        var htmlTitle = lala.mojo.lescapeHTML(title) + ' by ' + lala.mojo.lescapeHTML(flatArtistList);
        var width = this.hideText ? 'auto' : '100%';
        var html = '<table class="lmpAlbumTable" style="width:' + width + ';"><tr>'
                + '<td width="32">' + buyLink + '</td>'
                + '<td width="32"><a class="lmp_playIcon" style="text-decoration:none" href="'
                + albumUrl +'">&nbsp;</a></td>';
        if (!this.hideText) {
            html += '<td class="lmpTextCell" title="' + htmlTitle +'">' + trackCount + ' track' + (trackCount == 1 ? '' : 's') + ' - '
                    + albumLink + ' by ' + artistLinks + '</td>';
        }
        html += '</tr></table>';

        div.innerHTML = html;
        this._setupAnchor(div, true, albumId, title + ' by ' + flatArtistList);
    },

    // data is id or artist name
    // display is what gets shown in the queue
    _setupAnchor: function(div, isBag, data, display) {
        var playAnchor = null;
        // find the play button inside the div - inserted there by a render
        // function above
        var anchors = div.getElementsByTagName('A');
        for (var i = 0; i < anchors.length; i++) {
            if(anchors[i].className.indexOf('lmp_playIcon') != -1) {
                playAnchor = anchors[i];
                break;
            }
        }

        playAnchor.origHTML = display;
        playAnchor.linkType = div.getAttribute('lmpType');;
        playAnchor.data = data;
        playAnchor.linkIndex = this._links.length;
        playAnchor.isBag = isBag;
        playAnchor.onclick = function() {
            lala.MediaPlayer.playBagOrSong(
                    this,  // anchor
                    true,  // autoPlay
                    false, // loadBag
                    true,  // onlyThisBag
                    false  // skipToggle
                    );
            return false;
        };

        this._links.push(playAnchor);
        this._registerLink(playAnchor);
    },

    getAlbumLink: function(discId, title, artist) {
        return '<a class="lmpAlbumLink" target="_blank" href="'
                + this.getAlbumUrl(discId, title, artist)
                + '">'
                + lala.mojo.lescapeHTML(title) + '</a>';
    },

    getAlbumUrl: function(discId, title,  artist) {
        var path = '';
        if (discId) { // Matched
            path = 'landing/album/' + discId;
            if (title) {
                // The pages don't use this data, just for SEO theory
                if (artist) path += '/' + lala.mojo.lescapeForHash(artist);
                path += '/' + lala.mojo.lescapeForHash(title);
            }
        } else if (title) { // Unmatched
            path = 'landing/search/' + lala.mojo.lescape(title);
        }
        return this._resolvePath(path, '&click=album');
    },

    getArtistLink: function(name) {
        var path = 'landing/artist/'
                + lala.mojo.lunderbarsForSpaces(lala.mojo.lescapeForHash(name, true)); 
        return '<a class="lmpArtistLink" target="_blank" href="'
                + this._resolvePath(path, '&click=artist')
                + '">' +  lala.mojo.lescapeHTML(name) + '</a>';
    },

    getArtistListLinks: function(artistList) {
        var artists = artistList.split('::');
        var artistLinks = [];
        for (var i = 0; i < artists.length; i++) {
            var name = artists[i];
            var artistLink = this.getArtistLink(name);
            if (i != artists.length - 1) artistLink += ', ';
            artistLinks.push(artistLink);
        }
        return artistLinks.join('');
    },

    getSongLink: function(songId, title, artist, linkId) {
        return '<a target="_blank" class="lmpSongLink" href="'
                + this.getSongUrl(songId, title, artist, linkId)
                + '">' + lala.mojo.lescapeHTML(title) + '</a>';
    },

    getSongUrl: function(songId, title, artist, linkId) {
        var path = '';
        var extra = '';
        if (linkId) {
            path = 'landing/song/' + linkId;
            if (title) {
                // The pages don't use this data, just for SEO theory
                if (artist) path += '/' + lala.mojo.lescapeForHash(artist);
                path += '/' + lala.mojo.lescapeForHash(title);
            }
        } else {
            path = 'landing/';
            extra = '&song=' + lala.mojo.lescapeForHash(title)
                    + '&artist=' + lala.mojo.lescapeForHash(artist);
        }

        return this._resolvePath(path, extra + '&click=song');
    },

    getAlbumBuyLink: function(albumId, title, artist, canBuyMp3) {
        return this._getBuyButton(albumId, title, artist, canBuyMp3, 'album');

    },

    getSongBuyLink: function(songId, title, artist, canBuyMp3) {
        return this._getBuyButton(songId, title, artist, canBuyMp3, 'song');
    },

    // type is used to generate the right url when you can't buy the mp3 directly
    _getBuyButton: function(albumId, title, artist, canBuyMp3, type) {
        return '<a target="_blank" class="lmp_buyIcon" href="'
                + this.getBuyUrl(albumId, title, artist, canBuyMp3, type)
                + '" style="text-decoration: none;">&nbsp;</a>';
    },

    // type is used to generate the right url when you can't buy the mp3 directly
    getBuyUrl: function(lalaId, title, artist, canBuyMp3, type) {
        var path = '';
        var extra = '';

        if (canBuyMp3 == 'true') {
            path = 'landing/purchase/mp3/' + lalaId;
        } else {
            artist = lala.mojo.lescapeForHash(artist);
            title = lala.mojo.lescapeForHash(title);
            path = 'landing';
            extra = '&artist=' + artist + '&' + type + '=' + title;
        }

        // Camel case here for "consistency"
        var counterTypeName = type.substring(0,1).toUpperCase() + type.substring(1);
        extra += '&click=buy' + counterTypeName + 'FromPage';
        return this._resolvePath(path, extra);
    },

    _resolvePath: function(path, trackingExtra) {
        if (!trackingExtra) trackingExtra = '';
        return lala.baseUrl + '/' + path + '?fc=widget.mediaplayerpage.' + this.partnerId + trackingExtra;
    },

    loadOrPlayFirstTrackOrBag: function(isLoad) {
        var anchor = lala.MediaPlayer._links[0];
        this.playBagOrSong(
                anchor,  // anchor
                !isLoad, // autoPlay
                false,   // loadBag
                true,    // onlyThisBag
                true     // skipToggle
                );
    },

    playBagOrSong: function(anchor,
                            autoPlay,
                            loadBag,
                            onlyThisBag,
                            skipToggle,
                            playIndex,
                            playlistElt,
                            forcePlaySong) {
        if (!skipToggle
                && (anchor == this._currentAnchor
                && this.status != "stopped"
                && (typeof(playIndex) == "undefined"
                || playIndex == null
                || playIndex == this._trackIndex)
                )) {
            this.toggle();
            return true;
        }

        if (anchor.isBag && !forcePlaySong) {
            lala.MediaPlayer.onBagClick(anchor, playlistElt, autoPlay, loadBag, onlyThisBag);
        } else {
            lala.MediaPlayer.onPlayClick(anchor, playIndex, !autoPlay);
        }
        return false;
    },

    playAllSongs: function(isLoad) {
        this.updatePlaylistUI(this._links);
        lala.MediaPlayer.loadOrPlayFirstTrackOrBag(isLoad);
    },

    updatePlaylistUI: function(links, onlyThisBag) {
        this.playingAllSongs = !onlyThisBag;
        var playlist = lala.mojo.elem('lmp_playlist');

        var playlistTracks = document.createElement("ul");
        playlistTracks.id = 'lmp_playlistTracks';

        for (var i = 0; i < links.length; i++) {
            var playAnchor = links[i];
            this._addPlaylistElem(playAnchor, playlistTracks, onlyThisBag);
        }
        if (this._playlistTracks) playlist.removeChild(this._playlistTracks);
        playlist.appendChild(playlistTracks);
        this._playlistTracks = playlistTracks;
    },

    // wait until idle for 200ms before repositioning
    onResizeOrScroll: function() {
        if (this._resizeTimer) {
            clearTimeout(this._resizeTimer);
        }

        var self = this;
        this._resizeTimer = setTimeout(function() {
            self.doResize();
        }, 200);
    },

    doResize: function() {
        var heightFromBottom = this.IE6_PLAYER_HEIGHT_FROM_BOTTOM;
        var winHeight = document.documentElement.scrollTop + document.documentElement.clientHeight;
        this._playerDiv = this._playerDiv || lala.mojo.elem('lalaMediaPlayer');
        this._playerDiv.style.top = (winHeight - heightFromBottom) + 'px';

        if (this._playlistFlyout) {
            this._playlistFlyout.setTop(winHeight - (this._playlistFlyout._expanded ? this._playlistFlyout.getHeight() : this._playlistFlyout.AD_HEIGHT) - heightFromBottom);
        }
    },

    // returns boolean whether it was toggled or not
    onPlayClick: function(anchor, playIndex, bLoadOnly) {
        if (!bLoadOnly) {
            this.expand();
        }

        if (this._swfLoaded) {
            this._notifyPlayStatus('stopped');
            this._updateSelectedTracks(false);

            this._currentAnchor = anchor;
            this._currentBag = this._trackData[anchor.href];
            this._trackIndex = playIndex || 0;

            this._updateSelectedTracks(true);

            switch (anchor.linkType) {
                case 'song':
                    lala.Player.playSongById(anchor.data, !bLoadOnly);
                    break;
                case 'album':
                case 'artist':
                case 'playlist':
                    var song = this._currentBag[this._trackIndex];
                    lala.Player.playSongById(song.songLalaId, !bLoadOnly);
                    break;
                case 'mp3':
                    window.setTimeout(function() {
                        lala.MediaPlayer.playMP3(anchor.linkIndex, bLoadOnly);
                    }, 100);
                    break;
            }
        }
        return false;
    },

    disablePrevButton: function() {
        lala.mojo.elem('lmp_prev').className = 'lmp_prev_disabled new_sprite';
    },

    disableNextButton: function() {
        lala.mojo.elem('lmp_next').className = 'lmp_next_disabled new_sprite';
    },

    onBagClick: function(anchor, playlistElt, autoPlay, loadBag, onlyThisBag) {
        // short cutting this because we don't want this functionality at the
        // moment, but we may want it again in the future
        onlyThisBag = false;
        if (playlistElt) {
            playlistElt.parentNode.className = (playlistElt.parentNode.className == "lmp_open") ? "lmp_closed" : "lmp_open";
            // this is for when we're toggling the open/close bag view in the queue
            // don't do API call if track data already loaded
            if (loadBag && this._trackData[anchor.href]) {
                return;
            }
        }
        if (this._swfLoaded) {
            var linkIndex = anchor.linkIndex;
            var nodeIndex = onlyThisBag ? 0 : anchor.linkIndex;
            switch (anchor.linkType) {
                case 'album':
                    if (typeof(loadBag) == 'undefined') {
                        loadBag = !autoPlay;
                    }
                    lala.Player.playAlbumById(anchor.data, autoPlay, linkIndex, loadBag, nodeIndex);
                    break;
                case 'artist':
                    if (typeof(loadBag) == 'undefined') {
                        loadBag = !autoPlay;
                    }
                    lala.Player.playArtist(decodeURIComponent(anchor.data.replace(/_/g, ' ')), autoPlay, linkIndex, loadBag, nodeIndex);
                    break;
                case 'playlist':
                    if (typeof(loadBag) == 'undefined') {
                        loadBag = !autoPlay;
                    }
                    lala.Player.playPlaylist(anchor.data, autoPlay, linkIndex, loadBag, nodeIndex);
                    break;
            }
            if (onlyThisBag) {
                this.updatePlaylistUI([anchor], true);
            }
        }
    },

    onTrackDetails: function(linkIndex, tracks, bLoadOnly) {
        this.onDetails(linkIndex, tracks, bLoadOnly);
    },

    onAlbumDetails: function(linkIndex, tracks, bLoadOnly, bLoadBag, nodeIndex) {
        this.onBagDetails(linkIndex, tracks, nodeIndex);
        if (!bLoadBag) {
            this.onDetails(linkIndex, tracks, bLoadOnly);
        }
    },

    onArtistDetails: function(linkIndex, tracks, bLoadOnly, bLoadBag, nodeIndex) {
        this.onBagDetails(linkIndex, tracks, nodeIndex);
        if (!bLoadBag) {
            this.onDetails(linkIndex, tracks, bLoadOnly);
        }
    },

    onPlaylistDetails: function(linkIndex, tracks, bLoadOnly, bLoadBag, nodeIndex) {
        this.onBagDetails(linkIndex, tracks, nodeIndex);
        if (!bLoadBag) {
            this.onDetails(linkIndex, tracks, bLoadOnly);
        }
    },

    onBagDetails: function(linkIndex, tracks, nodeIndex) {
        var anchor = this._links[linkIndex];
        this._trackData[anchor.href] = tracks;

        var playlistElt = this._playlistTracks.childNodes[nodeIndex];
        if (playlistElt) {
            // make sure we don't double load data.  if the playlist element already
            // has more than one child exit out
            if (playlistElt.childNodes.length == 1) {
                for (var i=0; i<tracks.length; i++) {
                    var item = document.createElement('div');
                    var elem = document.createElement('a');
                    if (this._currentAnchor == anchor && i == this._trackIndex) {
                        elem.className = "lmp_selected";
                    }
                    elem.source = anchor;
                    elem.href = anchor.href;
                    elem.innerHTML = (i + 1) + ". " + tracks[i].title;
                    elem.playIndex = i;
                    elem.onclick = function() {
                        lala.MediaPlayer.playBagOrSong(
                                this.source,
                                true,
                                null,
                                null,
                                null,
                                this.playIndex,
                                null,
                                true);
                        return false;
                    };
                    item.appendChild(elem);
                    playlistElt.appendChild(item);

                    this._registerPlaylistLink(elem, i);
                }
            }
        }
    },

    onDetails: function(linkIndex, tracks, bLoadOnly) {
        var anchor = this._links[linkIndex];
        this._trackData[anchor.href] = tracks;
        this._currentBag = tracks;

        // For the first load, we'll honor the initial track index
        // and then reset it to zero
        this._trackIndex = lala.playerTrackIndex;
        lala.playerTrackIndex = 0;

        this.onPlayClick(anchor, null, bLoadOnly);
    },

    playMP3: function(linkIndex, bLoadOnly) {
        var anchor = this._links[linkIndex];
        var tracks = [ { isMP3: true, url: anchor.href } ];
        this._trackData[anchor.href] = tracks;
        this._currentBag = tracks;

        this._trackIndex = lala.playerTrackIndex;
        lala.playerTrackIndex = 0;

        var title = 'Unknown title';
        var artist = 'Unknown artist';
        var arr = anchor.origHTML.split("-");
        if (arr.length > 1) {
            title = lala.mojo.ltrim(arr[0]);
            artist = lala.mojo.ltrim(arr[1]);
        } else {
            arr = anchor.origHTML.split("::");
            if (arr.length > 1) {
                // this is different to be backwards compatible with gorilla vs bear
                artist = lala.mojo.ltrim(arr[0]);
                title = lala.mojo.ltrim(arr[1]);
            } else {
                arr = anchor.origHTML.split("by");
                if (arr.length > 1) {
                    title = lala.mojo.ltrim(arr[0]);
                    artist = lala.mojo.ltrim(arr[1]);
                }
            }
        }

        lala.Player.playMP3(anchor.data, title, artist, null, !bLoadOnly);
    },

    onPlaylistClick: function() {
        if (lala.mojo.elem('lmp_queue').className.indexOf('disabled') != -1) return;
        if (this._playlistFlyout.isExpanded()) {
            this._playlistFlyout.collapse();
        } else {
            this.hideFlyouts();
            if (this._playlistTracks)
                this._playlistTracks.style.overflowY = "hidden";
            this._playlistFlyout.expand();
        }
    },

    toggle: function() {
        if (this._currentBag && this._currentBag.length > 0) {
            lala.Player.togglePlayback();
        }
    },

    onNextClick: function() {
        if (lala.mojo.elem('lmp_next').className.indexOf('disabled') != -1) return;

        var linkIndex = this._currentAnchor.linkIndex;
        var anchor = this._links[linkIndex];
        this._currentBag = this._trackData[anchor.href];

        // we are currently playing a bag, just skip to next track in the bag
        if (this._currentBag && this._trackIndex < this._currentBag.length - 1) {
            this.onPlayClick(anchor, this._trackIndex + 1, false);
        } else if (this.playingAllSongs) {
            // we're done with a song or bag, go to next song or bag
            if (this._currentAnchor) {
                if (linkIndex < this._links.length - 1) {
                    var link = this._links[linkIndex+1];
                    this.playBagOrSong(
                            link,  // anchor
                            true,  // autoPlay
                            false, // loadBag
                            false, // onlyThisBag
                            false  // skipToggle
                            );
                }
            }
        }
    },

    onPrevClick: function() {
        if (lala.mojo.elem('lmp_prev').className.indexOf('disabled') != -1) return;

        var linkIndex = this._currentAnchor.linkIndex;
        var anchor = this._links[linkIndex];
        this._currentBag = this._trackData[anchor.href];

        if (this._currentBag && this._trackIndex > 0) {
            this.onPlayClick(anchor, this._trackIndex - 1, false);
        } else if (this.playingAllSongs) {
            // play the prev bag if available
            if (this._currentAnchor) {
                if (linkIndex > 0) {
                    var link = this._links[linkIndex - 1];
                    this.playBagOrSong(
                            link,  // anchor
                            true,  // autoPlay
                            false, // loadBag
                            false, // onlyThisBag
                            false  // skipToggle
                            );
                }
            }
        }
    },

    close: function() {
        this._notifyPlayStatus('stopped');

        this._expanded = false;
        this._endTween();

        this._playerDiv = this._playerDiv || lala.mojo.elem('lalaMediaPlayer');
        this._playerDiv.className = 'lmp_closed';
    },

    onHandleClick: function(elem) {
        var handle = lala.mojo.elem('lmp_handle');
        if (this._expanded) {
            handle.title = 'Expand Lala Media Player';
            this.collapse();
            handle.className = 'new_sprite';
        } else {
            handle.title = 'Collapse Lala Media Player';
            this.expand();
            handle.className += ' expanded';
        }
    },

    hideAd: function() {
        this._playlistFlyout._flyoutElt.style.display = 'none';
    },

    showAd: function() {
        this._playlistFlyout._flyoutElt.style.display = 'block';
    },

    hideFlyouts: function() {
        this._playlistFlyout.collapse();
    },

    expand: function() {
        // don't expand if we're already open
        if (!this._expanded) {
            this._playerDiv = this._playerDiv || lala.mojo.elem('lalaMediaPlayer');
            this._playerDiv.style.width = this.COLLAPSED_WIDTH + "px";
            this._playerDiv.className = "lmp_expanded";

            this.hideFlyouts();
            this.showAd();

            this._expanded = true;
            this._startTween();
        }
    },

    collapse: function() {
        this.hideFlyouts();
        this.hideAd();

        this._expanded = false;
        this._endTween();

        this._playerDiv = this._playerDiv || lala.mojo.elem('lalaMediaPlayer');
        this._playerDiv.className = "lmp_collapsed";
        this._playerDiv.style.width = this.COLLAPSED_WIDTH + "px";
    },

    grow: function() {
        this._playerDiv = this._playerDiv || lala.mojo.elem('lalaMediaPlayer');
        var newWidth = Math.min(this._playerDiv.clientWidth + 50, this.EXPANDED_WIDTH);
        this._playerDiv.style.width = newWidth + "px";

        if (newWidth >= this.EXPANDED_WIDTH) {
            this._endTween();

            if (lala.playerAutoExpand) {
                lala.playerAutoExpand = false;
            }
        }
    },

    _notifyPlayStatus: function(status) {
        // find anchors with the current href and update class according to status
        if (this._currentAnchor) {
            var anchors = this._anchorMap[this._currentAnchor.href];
            if (anchors) {
                for (var i=0; i<anchors.length; i++) {
                    var tmpClass = anchors[i].className;
                    tmpClass = tmpClass.replace(/\s?lmp_playing/, '').replace(/\s?lmp_paused/, '').replace(/\s?lmp_stopped/, '');
                    tmpClass = tmpClass + " lmp_" + status;
                    anchors[i].className = tmpClass;
                }
            }
        }
    },

    _updateSelectedTracks: function(bSelected) {
        if (this._currentAnchor && this._trackIndex >= 0) {
            var anchors = this._playlistMap[this._currentAnchor.href+this._trackIndex];
            if (anchors) {
                for (var i=0; i < anchors.length; i++) {
                    var item = anchors[i];
                    if (item.source == this._currentAnchor && item.playIndex == this._trackIndex) {
                        if (bSelected) {
                            item.className = "lmp_selected";
                            if (item.source.isBag) {
                                var bagNode = item.parentNode.parentNode;
                                bagNode.className = bagNode.className.replace(/lmp_closed/, "lmp_open");
                            }
                        } else {
                            item.className = "";
                        }
                    }
                }
            }
        }
    },

    _registerLink: function(anchor) {
        if (!this._anchorMap[anchor.href]) {
            this._anchorMap[anchor.href] = [];
        }
        this._anchorMap[anchor.href].push(anchor);
    },

    _registerPlaylistLink: function(anchor, linkIndex) {
        var key = anchor.href + linkIndex;
        if (!this._playlistMap[key]) {
            this._playlistMap[key] = [];
        }

        this._playlistMap[key].push(anchor);
    },

    _startTween: function() {
        var self = this;
        this._tweenInterval = setInterval(function() {
            self.grow();
        }, 15);
    },

    _endTween: function() {
        clearInterval(this._tweenInterval);
        this._tweenInterval = null;
    },

    // by playlist, I mean queue
    _addPlaylistElem: function(link, playlist, onlyThisBag) {
        var item = document.createElement('li');
        var elem = document.createElement('a');
        elem.source = link;
        elem.href = link.href;
        elem.innerHTML = (onlyThisBag ? '' : (link.linkIndex + 1) + ". ") + link.origHTML;
        if (!link.isBag) {
            elem.playIndex = 0;
            this._registerPlaylistLink(elem, 0);
        } else {
            item.className = "lmp_closed";
            elem.className = "lmp_bag";
        }
        elem.onclick = function() {
            lala.MediaPlayer.playBagOrSong(
                    this.source,        // anchor
                    !this.source.isBag, // autoPlay
                    true,               // loadBag
                    false,              // onlyThisBag
                    this.source.isBag,  // skipToggle
                    this.playIndex,     // playIndex
                    elem                // playlistElt
                    );
            return false;
        };
        item.appendChild(elem);
        playlist.appendChild(item);
    },

    getPlayerStyles: function() {
        return "<style type='text/css'>                                                     \
.lalaMediaPlayer .lmp_playIcon,                                                             \
.lalaMediaPlayer .lmp_buyIcon {                                                             \
    outline-color:-moz-use-text-color !important;                                           \
    outline-style:none !important;                                                          \
    outline-width:medium !important;                                                        \
}                                                                                           \
                                                                                            \
.lmp_playIcon {                                                                             \
    display:block;                                                                          \
    height:20px;                                                                            \
    width:20px;                                                                             \
    left:0px;                                                                               \
    overflow:hidden;                                                                        \
    position:absolute;                                                                      \
    top: -2px;                                                                              \
    background: transparent url(_STATIC_BASE_URL_/images/mediaplayer/btns_widget.gif) no-repeat;\
    display: block;                                                                          \
    position: absolute;                                                                      \
}                                                                                            \
                                                                                             \
.lmp_stopped .lmp_playIcon,                                                                  \
.lmp_paused .lmp_playIcon {                                                                  \
    background-position: 0px -652px;                                                         \
}                                                                                            \
                                                                                             \
.lalaMediaPlayer .lmp_playIcon {                                                             \
    position: static;                                                                        \
    width: 32px;                                                                             \
    height: 32px;                                                                            \
    background-position: 0px -944px;                                                         \
}                                                                                            \
                                                                                             \
.lalaMediaPlayer .lmp_playIcon:hover {                                                       \
    background-position: 0px -986px;                                                         \
    text-decoration: none;                                                                   \
}                                                                                            \
                                                                                             \
.lmp_stopped:hover .lmp_playIcon,                                                            \
.lmp_paused:hover .lmp_playIcon {                                                            \
    background-position: 0px -682px;                                                         \
}                                                                                            \
                                                                                             \
.lmp_playing .lmp_playIcon {                                                                 \
    background-position: 0px -712px;                                                         \
}                                                                                            \
                                                                                             \
.lalaMediaPlayer .lmp_playing {                                                              \
   background-position: 0px -1028px;                                                         \
}                                                                                            \
                                                                                             \
.lalaMediaPlayer .lmp_playing:hover {                                                        \
   background-position: 0px -1070px;                                                         \
}                                                                                                 \
                                                                                                  \
.lmp_playing:hover .lmp_playIcon {                                                                \
    background-position: 0px -742px;                                                              \
}                                                                                                 \
                                                                                                  \
#lmp_playlistTracks a.lmp_bag {                                                                   \
    background: transparent url(_STATIC_BASE_URL_/images/mediaplayer/btns_widget.png) no-repeat;  \
}                                                                                                 \
                                                                                                  \
.lmp_ie6 #lmp_playlistTracks a.lmp_bag {                                                          \
    background: transparent url(_STATIC_BASE_URL_/images/mediaplayer/btns_widget.gif) no-repeat;  \
}                                                                                           \
                                                                                            \
#lalaMediaPlayer.lmp_closed {                                                               \
    visibility: hidden;                                                                     \
}                                                                                           \
                                                                                            \
.lmp_ie6 #lalaMediaPlayer {                                                                 \
    position: absolute;                                                                     \
    left: 0px;                                                                              \
    bottom: 10px;                                                                           \
}                                                                                           \
                                                                                            \
#lalaMediaPlayer {                                                                          \
    z-index: 999;                                                                           \
    position: fixed;                                                                        \
    height: 72px;                                                                           \
    left: -1px;                                                                             \
    overflow: hidden;                                                                       \
    background-repeat: no-repeat;                                                           \
    background-position: 0px 0px;                                                           \
    bottom: 20px;                                                                           \
}                                                                                           \
                                                                                            \
#lalaMediaPlayer.lmp_collapsed {                                                            \
    background-position: 0px -70px;                                                         \
}                                                                                           \
                                                                                            \
.lmp_flyout a,                                                                              \
.lmp_flyoutCollapsed a,                                                                     \
#lalaMediaPlayer a {                                                                        \
    outline-color:-moz-use-text-color !important;                                           \
    outline-style:none !important;                                                          \
    outline-width:medium !important;                                                        \
}                                                                                           \
                                                                                            \
.lmp_ie6 #lalaMediaPlayer {                                                                 \
    background-image: none;                                                                 \
    background-repeat: no-repeat;                                                           \
    background-position: 0px 0px;                                                           \
    bottom: 20px;                                                                           \
}                                                                                           \
                                                                                            \
.lmp_flyout,                                                                                \
.lmp_flyoutCollapsed {                                                                      \
    position: fixed;                                                                        \
    z-index: 999;                                                                           \
    bottom:92px;                                                                            \
    overflow:hidden;                                                                        \
}                                                                                           \
                                                                                            \
.lmp_ie6 .lmp_flyout,                                                                       \
.lmp_ie6 .lmp_flyoutCollapsed {                                                             \
    position: absolute;                                                                     \
    bottom: 92px;                                                                           \
}                                                                                           \
                                                                                            \
.lmp_flyout {                                                                               \
    display: block;                                                                         \
}                                                                                           \
                                                                                            \
.lmp_flyoutCollapsed {                                                                      \
    height: 0px;                                                                            \
}                                                                                           \
                                                                                            \
.lmp_flyoutPane {                                                                           \
    position: absolute;                                                                     \
    left: 0px;                                                                              \
    top: 125px;                                                                             \
}                                                                                           \
                                                                                            \
#lmp_playlist {                                                                             \
    width:100%;                                                                             \
    height:100%;                                                                            \
}                                                                                           \
                                                                                            \
#lmp_playlistTracks {                                                                       \
    left:0;                                                                                 \
    margin:0;                                                                               \
    padding:0;                                                                              \
    width:100%;                                                                             \
    height:100%;                                                                            \
    overflow-x:hidden;                                                                      \
}                                                                                           \
                                                                                            \
#lmp_playlistTracks li {                                                                    \
    padding: 0;                                                                             \
    left:0;                                                                                 \
    margin:0;                                                                               \
}                                                                                           \
                                                                                            \
#lmp_playlistTracks a {                                                                     \
    display:block;                                                                          \
    font-family: Arial;                                                                     \
    color: #FFFFFF;                                                                         \
    font-size:11px;                                                                         \
    line-height: 20px;                                                                      \
    margin:0;                                                                               \
    overflow:hidden;                                                                        \
    padding:0 0 0 11px;                                                                     \
    text-decoration:none;                                                                   \
    white-space:nowrap;                                                                     \
    width:100%;                                                                             \
}                                                                                           \
                                                                                            \
#lmp_playlistTracks .lmp_open a,                                                            \
#lmp_playlistTracks .lmp_closed a {                                                         \
    padding-left: 20px;                                                                     \
}                                                                                           \
                                                                                            \
#lmp_playlistTracks .lmp_open div a,                                                        \
#lmp_playlistTracks .lmp_closed div a {                                                     \
    padding-left: 20px;                                                                     \
}                                                                                           \
                                                                                            \
#lmp_playlistTracks .lmp_open a.lmp_bag {                                                   \
    background-position: 10px -908px;                                                       \
}                                                                                           \
                                                                                            \
#lmp_playlistTracks .lmp_closed a.lmp_bag {                                                 \
    background-position: 11px -922px;                                                       \
}                                                                                           \
                                                                                            \
#lmp_playlistTracks .lmp_open div {                                                         \
    display: block;                                                                         \
}                                                                                           \
                                                                                            \
#lmp_playlistTracks .lmp_closed div {                                                       \
    display: none;                                                                          \
}                                                                                           \
                                                                                            \
#lmp_playlistTracks a.lmp_selected:hover {                                                  \
    background-color: #4aadfe;                                                              \
}                                                                                           \
                                                                                            \
#lmp_playlistTracks a.lmp_selected {                                                        \
    background-color: #339cf2;                                                              \
}                                                                                           \
                                                                                            \
#lmp_playlistTracks a:hover {                                                               \
    background-color: #5686c7;                                                              \
}                                                                                           \
                                                                                            \
#lmp_container {                                                                            \
    overflow: hidden;                                                                       \
    position: relative;                                                                     \
    width: 289px;                                                                           \
    height: 69px;                                                                           \
    background-position: 0px -494px;                                                        \
    background-repeat: repeat-x;                                                            \
    border-top: 1px solid #333;                                                             \
    border-bottom: 1px solid #333;                                                          \
}                                                                                           \
                                                                                            \
.lmp_collapsed #lmp_container {                                                             \
    width: 81px;                                                                            \
}                                                                                           \
.lmp_collapsed .lmp_queue,                                                                  \
.lmp_collapsed .lmp_queue_disabled,                                                         \
.lmp_collapsed .lmp_prev,                                                                   \
.lmp_collapsed .lmp_prev_disabled,                                                          \
.lmp_collapsed .lmp_next,                                                                   \
.lmp_collapsed .lmp_next_disabled {                                                         \
    visibility: hidden;                                                                     \
}                                                                                           \
.lmp_collapsed #lmp_logo_container {                                                        \
    display: block;                                                                         \
}                                                                                           \
#lmp_logo_container {                                                                       \
    cursor: pointer;                                                                        \
    width: 69px;                                                                            \
    position: absolute;                                                                     \
    top: 0px;                                                                               \
    left: 0px;                                                                              \
    height: 69px;                                                                           \
    display: none;                                                                          \
    background-position: 0 -573px;                                                          \
    background-repeat: repeat-x;                                                            \
}                                                                                           \
#lmp_logo {                                                                                 \
    width: 42px;                                                                            \
    height: 42px;                                                                           \
    background-position: 0px -390px;                                                        \
    left: 13px;                                                                             \
    top: 14px;                                                                              \
}                                                                                           \
#lmp_logo:hover {                                                                           \
    background-position: 0px -442px;                                                        \
}                                                                                           \
                                                                                            \
#lalaWidgetPlayer {                                                                         \
    position: absolute;                                                                     \
    width: 220px;                                                                           \
    height: 70px;                                                                           \
    left: 58px;                                                                             \
    top: 0px;                                                                               \
}                                                                                           \
                                                                                            \
#lmp_handle {                                                                               \
    position: absolute;                                                                     \
    right: 0px;                                                                             \
    top: 0px;                                                                               \
    width: 12px;                                                                            \
    height: 70px;                                                                           \
    overflow: hidden;                                                                       \
    background-position: 0px -233px;                                                        \
    background-color: #333333;                                                              \
}                                                                                           \
                                                                                            \
#lmp_handle:hover {                                                                         \
    background-position: 0px -311px;                                                        \
    background-color: #454545;                                                              \
}                                                                                           \
                                                                                            \
.lmp_expanded #lmp_handle {                                                                 \
    background-position: -20px -233px;                                                      \
}                                                                                               \
                                                                                                \
.lmp_expanded #lmp_handle:hover {                                                               \
    background-position: -20px -311px;                                                          \
}                                                                                               \
                                                                                                \
.lmp_flyoutContent {                                                                            \
    position: relative;                                                                         \
    width: 100%;                                                                                \
    height: 100%;                                                                               \
    overflow: hidden;                                                                           \
}                                                                                               \
                                                                                                \
.lmp_flyoutContainer {                                                                          \
    position: relative;                                                                         \
    overflow: hidden;                                                                           \
    width: 100%;                                                                                \
    height: 100%;                                                                               \
}                                                                                               \
                                                                                                \
.lmp_flyoutLeft {                                                                               \
    position: absolute;                                                                         \
    width: 11px;                                                                                \
    height: 100%;                                                                               \
    background-position: -10px -100px;                                                          \
    left: 0px;                                                                                  \
}                                                                                               \
                                                                                                \
.lmp_flyoutMiddle {                                                                             \
    position: absolute;                                                                         \
    left: 11px;                                                                                 \
    height: 100%;                                                                               \
    background-position: 0px -94px;                                                             \
}                                                                                               \
                                                                                                \
.lmp_flyoutRight {                                                                              \
    position: absolute;                                                                         \
    width: 5px;                                                                                 \
    height: 100%;                                                                               \
    background-position: -31px -100px;                                                          \
    right: 0px;                                                                                 \
}                                                                                               \
                                                                                                \
.lmp_flyoutTitle {                                                                              \
    position: absolute;                                                                         \
    height: 50px;                                                                               \
    top: 0px;                                                                                   \
    left: 0px;                                                                                  \
    overflow: hidden;                                                                           \
    text-align: center;                                                                         \
    padding: 5px 0px;                                                                           \
    background-color: #000;                                                                     \
}                                                                                               \
                                                                                                \
.lmp_flyoutTitle a,                                                                             \
.lmp_flyoutTitle {                                                                              \
    color: #FFFFFF;                                                                             \
    font-family: Arial;                                                                         \
    font-size: 11px;                                                                            \
    line-height: 14px;                                                                          \
}                                                                                               \
                                                                                                \
.lmp_flyoutContentWrapper {                                                                     \
    position: absolute;                                                                         \
    top: 60px;                                                                                  \
    left: 0px;                                                                                  \
    text-align: left;                                                                           \
    display: none;                                                                              \
    opacity: 0.9;                                                                               \
    filter: alpha( opacity=90);                                                                 \
    background-color: #000;                                                                     \
}                                                                                               \
                                                                                                \
.new_sprite {                                                                                   \
    background: transparent url(_STATIC_BASE_URL_/images/mediaplayer/btns_widget.png) no-repeat;\
    display: block;                                                                             \
    position: absolute;                                                                         \
}                                                                                               \
                                                                                                \
.lmp_ie6 .new_sprite {                                                                          \
    background: transparent url(_STATIC_BASE_URL_/images/mediaplayer/btns_widget.gif) no-repeat;\
}                                                                                               \
.lmp_queue {                                                                                    \
    background-position: 0px 0px;                                                               \
    width: 38px;                                                                                \
    height: 12px;                                                                               \
    top: 0px;                                                                                   \
    left: 11px;                                                                                 \
}                                                                                               \
.lmp_queue:hover {                                                                              \
    background-position: 0px -22px;                                                             \
}                                                                                               \
.lmp_queue_disabled {                                                                           \
    background-position: 0px -44px;                                                             \
    width: 38px;                                                                                \
    height: 12px;                                                                               \
    top: 0px;                                                                                   \
    left: 11px;                                                                                 \
    cursor: default;                                                                            \
}                                                                                               \
.lmp_ie6 .lmp_queue_disabled {                                                                  \
    background-position: 0px -44px;                                                             \
}                                                                                               \
.lmp_ie6 .lmp_prev_disabled {                                                                   \
    background-position: 0px -122px;                                                            \
}                                                                                               \
.lmp_ie6 .lmp_prev {                                                                            \
    background-position: 0px -66px;                                                             \
}                                                                                               \
.lmp_ie6 .lmp_next_disabled {                                                                   \
    background-position: 0px -206px;                                                            \
}                                                                                               \
.lmp_ie6 .lmp_next {                                                                            \
    background-position: 0px -150px;                                                            \
}                                                                                               \
.lmp_next {                                                                                     \
    background-position: 0px -150px;                                                            \
    width: 20px;                                                                                \
    height: 18px;                                                                               \
    top: 18px;                                                                                  \
    left: 30px;                                                                                 \
}                                                                                               \
.lmp_next:hover {                                                                               \
    background-position: 0px -178px;                                                            \
}                                                                                               \
.lmp_next_disabled {                                                                            \
    background-position: 0px -206px;                                                            \
    width: 20px;                                                                                \
    height: 18px;                                                                               \
    top: 18px;                                                                                  \
    left: 30px;                                                                                 \
    cursor: default;                                                                            \
}                                                                                               \
.lmp_prev {                                                                                     \
    background-position: 0px -66px;                                                             \
    width: 20px;                                                                                \
    height: 18px;                                                                               \
    top: 18px;                                                                                  \
    left: 10px;                                                                                 \
}                                                                                               \
.lmp_prev:hover {                                                                               \
    background-position: 0px -94px;                                                             \
}                                                                                               \
.lmp_prev_disabled {                                                                            \
    background-position: 0px -122px;                                                            \
    width: 20px;                                                                                \
    height: 18px;                                                                               \
    top: 18px;                                                                                  \
    left: 10px;                                                                                 \
    cursor: default;                                                                            \
}                                                                                               \
.lmp_playAllButton {                                                                            \
    background: transparent url(_STATIC_BASE_URL_/images/mediaplayer/btns_widget.gif) no-repeat;\
    background-position: 0px -832px;                                                            \
    width: 82px;                                                                                \
    height: 32px;                                                                               \
    display: block;                                                                             \
}                                                                                               \
.lmp_playAllButton:hover {                                                                      \
    background-position: 0px -874px;                                                            \
}                                                                                               \
                                                                                                \
.lalaMediaPlayer table {                                                                        \
    table-layout: fixed;                                                                        \
}                                                                                               \
                                                                                                \
.lalaMediaPlayer table td {                                                                     \
    text-align: left;                                                                           \
    overflow: hidden;                                                                           \
    white-space: nowrap;                                                                        \
    text-overflow: ellipsis;                                                                    \
}                                                                                               \
                                                                                                \
.lalaMediaPlayer .lmp_buyIcon {                                                                 \
    background: transparent url(_STATIC_BASE_URL_/images/mediaplayer/btns_widget.gif) no-repeat;\
    background-position: 0 -1112px;                                                             \
    display: block;                                                                             \
    width: 32px;                                                                                \
    height: 32px;                                                                               \
    text-decoration: none !important;                                                           \
}                                                                                               \
                                                                                                \
.lalaMediaPlayer a.lmp_buyIcon:hover {                                                          \
    text-decoration: none; !important;                                                          \
    background-position: 0 -1154px;                                                             \
}                                                                                               \
                                                                                                \
</style>";
    }
};

lala.MediaPlayer.Flyout = function(params) {
    var wrapper = lala.mojo.elem('lmp_wrapper');
    if (wrapper) {
        this._id = params.id;
        this._left = params.left;
        this._width = params.width;
        this._height = params.height;
        this._contentElt = params.contentElt;
        this._contentHTML = params.contentHTML || "";
        this._growCallback = params.growCallback;

        this._flyoutElt = null;
        this._paneElt = null;
        this._titleElt = null;
        this._expanded = false;
        this._tweenInterval = null;
        this._top = 0;

        this.AD_HEIGHT = 60;

        this.create(wrapper);
    }
};

lala.MediaPlayer.Flyout.prototype.create = function(container) {
    this._flyoutElt = document.createElement("div");
    this._flyoutElt.id = this._id;
    this._flyoutElt.className = 'lmp_flyoutCollapsed';
    this._flyoutElt.style.width = this._width + "px";
    this._flyoutElt.style.height = this._height + "px";
    this._flyoutElt.style.left = this._left + "px";

    this._paneElt = document.createElement("div");
    this._paneElt.id = this._id + "Pane";
    this._paneElt.className = 'lmp_flyoutPane';
    this._paneElt.style.width = this._width + "px";
    this._paneElt.style.height = this._height + "px";

    this._titleElt = document.createElement("div");
    this._titleElt.className = 'lmp_flyoutTitle';
    this._titleElt.id = 'lalaWidgetPlayerAd';
    this._titleElt.style.width = "100%";
    this._titleElt.innerHTML = '<a href="http://' + lala.host + '/landing?fc=partner.mediaplayer.widgetad.betterWayToPlay" target="_blank"><img src="' + lala.staticBaseUrl + '/images/mediaplayer/default_ad_big.gif"/></a>';
    this._paneElt.appendChild(this._titleElt);

    this._foWrapper = document.createElement("div");
    this._foWrapper.className = 'lmp_flyoutContentWrapper';
    this._foWrapper.style.width = (this._width) + "px";
    this._foWrapper.style.height = (this._height - this.AD_HEIGHT) + "px";
    this._paneElt.appendChild(this._foWrapper);

    var foContent = document.createElement("div");
    foContent.className = 'lmp_flyoutContent';

    if (this._contentHTML) {
        foContent.innerHTML = this._contentHTML;
    } else if (this._contentElt) {
        foContent.appendChild(this._contentElt);
    }

    this._foWrapper.appendChild(foContent);

    this._flyoutElt.appendChild(this._paneElt);
    container.appendChild(this._flyoutElt);
};

lala.MediaPlayer.Flyout.prototype.getHeight = function() {
    return this._height;
};

lala.MediaPlayer.Flyout.prototype.setTop = function(newTop) {
    this._flyoutElt.style.top = newTop + "px";
};

lala.MediaPlayer.Flyout.prototype.isExpanded = function() {
    return this._expanded;
};

lala.MediaPlayer.Flyout.prototype.expand = function() {
    this._expanded = true;
    this._flyoutElt.className = 'lmp_flyout';
    this._flyoutElt.style.height = this._height + 'px';
    this._top = this._height - this.AD_HEIGHT;
    this._paneElt.style.top = this._top + "px";
    this._foWrapper.style.display = 'block';

    if (lala.mojo.IE6) {
        var winHeight = document.documentElement.scrollTop + document.documentElement.clientHeight;
        this.setTop(winHeight - this._height - lala.MediaPlayer.IE6_PLAYER_HEIGHT_FROM_BOTTOM);
    }

    this._startTween();
};

lala.MediaPlayer.Flyout.prototype.collapse = function() {
    this._expanded = false;
    this._endTween();

    this._flyoutElt.className = "lmp_flyoutCollapsed";
    this._flyoutElt.style.height = this.AD_HEIGHT + 'px';
    this._top = 0;
//    this._top = this._height - this.AD_HEIGHT;
    this._paneElt.style.top = this._top + "px";
    this._foWrapper.style.display = 'none';

    if (lala.mojo.IE6) {
        var winHeight = document.documentElement.scrollTop + document.documentElement.clientHeight;
        this.setTop(winHeight - this.AD_HEIGHT - lala.MediaPlayer.IE6_PLAYER_HEIGHT_FROM_BOTTOM);
    }
};

lala.MediaPlayer.Flyout.prototype.grow = function() {
    this._top = Math.max(0, this._top - 10);
    this._paneElt.style.top = this._top + "px";

    if (this._top == 0) {
        if (this._growCallback) {
            this._growCallback();
        }
        this._endTween();
    }
};

lala.MediaPlayer.Flyout.prototype.setTitle = function(title) {
    this._titleElt.innerHTML = title;
};

lala.MediaPlayer.Flyout.prototype._startTween = function() {
    var self = this;
    this._tweenInterval = setInterval(function() {
        self.grow();
    }, 15);
};

lala.MediaPlayer.Flyout.prototype._endTween = function() {
    clearInterval(this._tweenInterval);
    this._tweenInterval = null;
};

if (window.addEventListener) {
    window.addEventListener('load', lala.onload, false);
} else {
    window.attachEvent('onload', lala.onload);
}

if (typeof(lala_host) == 'undefined') {
    lala.host = "www.lala.com";
} else {
    lala.host = lala_host;
}

if (typeof(lala_coverArtUrl) == 'undefined') {
    lala.coverArtUrl = "http://album-images.lala.com/servlet/ArtWorkServlet";
} else {
    lala.coverArtUrl = lala_coverArtUrl;
}

if (typeof(lala_userImgUrl) == 'undefined') {
    lala.userImgUrl = 'http://user-images.lala.com/servlet/UserImageServlet';
} else {
    lala.userImgUrl = lala_userImgUrl;
}

if (typeof(lala_externalStaticBaseUrl) == 'undefined') {
    lala.externalStaticBaseUrl = 'http://www.lala.com/external';
} else {
    lala.externalStaticBaseUrl = lala_externalStaticBaseUrl;
}

if (typeof(lala_sslActionBaseURL) != 'undefined') { // Needed by signup dialog
    lala.sslActionBaseURL = lala_sslActionBaseURL;
}

if (typeof(lala_isDevMode) == 'undefined') {
    lala.isDevMode = false;
} else {
    lala.isDevMode = lala_isDevMode;
}

lala.baseUrl = "http://" + lala.host;
lala.versionPath =
        lala.host.indexOf('dhcp') != -1 || lala.host.indexOf('localhost') != -1 || lala.host.indexOf('dev.lala') != -1
                ? 'static' : 'external';
lala.staticBaseUrl = lala.baseUrl + "/" + lala.versionPath;

lala.mojo.init();
lala.MediaPlayer.create();