popup.js

var backgroundPage;

function ToggleMusicOff() {
    backgroundPage.ToggleMusic();
    $('#ToggleMusicOffWrapper').hide();
    $('#ToggleMusicOnWrapper').show();
}

function ToggleMusicOn() {
    backgroundPage.ToggleMusic();
    $('#ToggleMusicOnWrapper').hide();
    $('#ToggleMusicOffWrapper').show();
}

function ShuffleMusic() {
    backgroundPage.ShuffleMusic();
    PopulateGrid();
}

function NextSong() {
    backgroundPage.NextSong();
    PopulateGrid();
    SetGridCaption();
}

function GetPlaylist() {
    var playlist = [];
    try {
        playlist = JSON.parse(localStorage.getItem('playlist'));
    }
    catch (exception) {
    }

    if (playlist == null) { //RobW: == null is equal to === null and === undefined
        playlist = [];
    }

    return playlist;
}

function PopulateGrid() {
    var playlist = GetPlaylist();

    var $SongGrid = $('#SongGrid');
    $SongGrid.clearGridData();

    for (var i = 0; i < playlist.length; i++) {
        var datarow = { songname: '<a href="#" title="' + playlist[i].URL + '" class="clickTip"><img src="images/clipboard--plus.png" style="margin-bottom: -2px" /> </a>' + '<a href="#" onclick="RemoveSong(\'' + playlist[i].ID + '\')"><img src="images/cross.png" style="margin-bottom: -2px" /></a>' + playlist[i].Name, dateadded: "2012-04-20" };
        $SongGrid.addRowData(playlist[i].ID, datarow);
    }

    // on click tooltip with custom content
    $('a.clickTip').aToolTip({
        clickIt: true
    });
}

function RemoveSong(songID) {
    var playlist = GetPlaylist();

    var indexOfSong = -1;
    $.each(playlist, function (index, value) {
        if (value.ID == songID) {
            indexOfSong = index;
            return false; //RobW: Why look further if we have already found the id..?
        }
    });

    if (indexOfSong != -1) {
        playlist.splice(indexOfSong, 1);
        localStorage.setItem('playlist', JSON.stringify(playlist));
        PopulateGrid();
    }
}

function ClearPlaylist() {
    localStorage.setItem('playlist', []);
    PopulateGrid();
}

function BackupPlaylist() {
    var playlist = localStorage.getItem('playlist');
    localStorage.setItem('backup', playlist);
}

function LoadPlaylist() {
    var playlist = localStorage.getItem('backup');
    localStorage.setItem('playlist', playlist);
    PopulateGrid();
}

function EnqueueSong() {
    var playlist = GetPlaylist();

    var songUrl = $('#songUrlInput').val();
    var songID = GetIdFromUrl(songUrl);

    var songObject = {};
    songObject.URL = songUrl;
    songObject.ID = songID;

    $.getJSON('http://gdata.youtube.com/feeds/api/videos/' + songID + '?v=2&alt=json-in-script&callback=?', function (data) {
        songObject.Name = data.entry.title.$t;

        playlist.push(songObject);
        localStorage.setItem('playlist', JSON.stringify(playlist));

        //If there is now a song to initialize our playlist with, go ahead.
        if (playlist.length) { //RobW: Removed " == 1". If playlist != 0, then we can also play..
            backgroundPage.Initialize(playlist);
        }

        PopulateGrid();
    });
};

function textWidth(text, fontSize) {
    var calc = '<span style="display:none; font-size: ' + fontSize + 'px">' + text + '</span>';
    $('body').append(calc);
    var width = $('body').find('span:last').width();
    $('body').find('span:last').remove();
    return width;
};

$(document).ready(function () {
    /*RobW: ctrl can be detected using event.ctrlKey
    var ctrlDown = false;
    var ctrlKey = 17, vKey = 86, cKey = 67;

    $(document).keydown(function (e) {
        if (e.keyCode == ctrlKey) {
            ctrlDown = true;
        }
        else if (ctrlDown && e.keyCode == cKey) {
            $('#aToolTipCloseBtn').click();
        }
    }).keyup(function (e) {
        if (e.keyCode == ctrlKey) ctrlDown = false;
    });*/
    $(document).keydown(function(e) {
        if (e.ctrlKey && e.which == 67 /* = c key */) {
            $('#aToolTipCloseBtn').click();
        }
    });
});

$(document).ready(function () {
    /* RobW: This section makes no sense! At init, #Right contains an empty table. Setting a fixed height is awful. */
    var rightColumnWidth = $('#Right').width();
    var rightColumnHeight = $('#Right').height();
    var songnameColumnWidth = (rightColumnWidth * 2) / 3;
    var dateaddedColumnWidth = rightColumnWidth / 3;

    $("#SongGrid").jqGrid({
        align: 'center',
        colNames: ['Song Name', 'Date Added'],
        colModel: [
      { name: 'songname', index: 'songname', width: songnameColumnWidth },
      { name: 'dateadded', index: 'dateadded', width: dateaddedColumnWidth },
    ],
        rowNum: 10,
        rowList: [10, 20, 30],
        sortname: 'songname',
        sortorder: 'desc',
        gridview: true,
        caption: 'Your Songs',
        width: rightColumnWidth,
        height: 'auto'
    });

    $('#MenuContent').css('min-height', rightColumnHeight + 51);

    $("#songUrlInput").keyup(function (event) {
        var validator = IsValidSong(this.value);

        if (validator.isValidSong == true) {
            EnqueueSong();
        }

        if (validator.msg != "Invalid") {
            $(this).attr('placeholder', validator.msg);
            this.value = '';
            $(this).blur();
            window.setTimeout(
                function () {
                    $('#songUrlInput').attr('placeholder', "Moar Music! Gimmie dat link.");
                },
                2000);
        }
    });

    chrome.extension.onConnect.addListener(function (port) {
        port.onMessage.addListener(function (msg) {
            if (msg.playerState == "Buffering") {
                SetGridCaption("Buffering: " + GetPlaylist()[0].Name);
            }
            else if (msg.playerState == "Playing") {
                $("#SongGrid").setCaption("Playing: " + GetPlaylist()[0].Name);
            }
            else if (msg.playerState == "Paused") {
                SetGridCaption("Paused: " + GetPlaylist()[0].Name);
            }
        });
    });

    $("#ToggleMusicOnWrapper").click(ToggleMusicOn);
    $("#ToggleMusicOffWrapper").click(ToggleMusicOff);
    $("#ShuffleMusic").click(ShuffleMusic);
    $("#NextSong").click(NextSong);

    PopulateGrid();
    backgroundPage = chrome.extension.getBackgroundPage();

    var playlist = GetPlaylist();
    if (playlist.length > 0) {
        backgroundPage.Initialize(playlist);
    }
});

function SetGridCaption(caption) {
    var fontSize = 18;

    while (textWidth(caption, fontSize) > 330) {
        fontSize--;
    }

    $("#SongGrid").setCaption("");
    $('.ui-jqgrid-title').css('padding-left', 0);
    $('.ui-jqgrid-title').css('font-size', fontSize + 'px');
    $("#SongGrid").setCaption(caption);
}

function IsValidSong(url) {
    var validator = new Object();
    validator.isValidSong = true;
    validator.msg = "Thanks!";

    //var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
    //var match = url.match(regExp);
    //if (match && match[7].length == 11) {
    var regExp = /https?:\/\/(?:[0-9A-Z-]+\.)?(?:youtu\.be\/|youtube\.com\S*[^\w\-\s])([\w\-]{11})(?=[^\w\-]|$)(?![?=&+%\w]*(?:['"][^<>]*>|<\/a>))[?=&+%\w]*/i;
    var match = regExp.exec(url);
    if (match) {
        var playlist = GetPlaylist();

        $.each(playlist, function (index, value) {
            if (value.ID == match[1]) {
                validator.isValidSong = false;
                validator.msg = "I already know that one!";
            }
        });
    }
    else {
        validator.isValidSong = false;
        validator.msg = "Invalid";
    }

    return validator;
}

function GetIdFromUrl(url) {
    //var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
    //var match = url.match(regExp);
    //if (match && match[7].length == 11) {
    var regExp = /https?:\/\/(?:[0-9A-Z-]+\.)?(?:youtu\.be\/|youtube\.com\S*[^\w\-\s])([\w\-]{11})(?=[^\w\-]|$)(?![?=&+%\w]*(?:['"][^<>]*>|<\/a>))[?=&+%\w]*/i;
    var match = regExp.exec(url);
    if (match) {
        return match[1];
    }
    else {
        alert("Failed to read youtube URL. Did you enter a valid link?");
    }
}