var $player, $playerWorkspace, $embedCodeId;

function renderEmbedCode() {
    var embedCode = $embedCodeId.val(),
        width = parseInt(embedCode.match(/width:(\d+)/)[1]),
        height = parseInt(embedCode.match(/height:(\d+)/)[1]);

    $player.animate({ opacity: 0.001, height: height}, 'slow', function () {
        $player.html(embedCode);
        $player.fadeTo('slow', 1.0);
    });
}

$(function() {

    $player = $('#player');
    $playerWorkspace = $('#playerWorkspace');
    $embedCodeId = $('#embedCodeId');

    renderEmbedCode();

    $embedCodeId.add("#permalinkId")
        .click(function(event){
            $(this).select();
            event.preventDefault();
        });

    // Selecting embed and player toggles
    var $embedSelector = $('#embedSelector');
    if ($embedSelector.length) {
        $embedSelector.change(function(){
            $("option:selected", $embedSelector).each(function () {
                newEmbed = $(this).val();

                // We have our width and height.  Now we need to construct the embed text
                $embedCodeId
                    .val(newEmbed)
                    .animate( { backgroundColor : "#eff6ab"}, 200)
                    .animate( { backgroundColor : "#787b87"}, 1000);

                renderEmbedCode();
            });
        });
    }

});