"use strict";

var tt = {};

/**
 * Creates a small player div that links to player.php.
 *
 * @param object options {htmlId =>, flv =>, title =>, img =>, speaker => }
 */
tt.playerLink = function (options) {
    var insert, container, content, footer, link, speaker;
    insert = document.getElementById(options.htmlId);
    if (!insert) {
        return false;
    }

    // container (outer div)
    container = document.createElement("div");
    container.className = "small_vbox";

    // content (inner div)
    content = document.createElement("div");
    content.className = "small_vbox_content";

    // footer (final div for styling)
    footer = document.createElement("div");
    footer.className = "small_vbox_footer";
    footer.innerHTML = " ";

    // speaker (appears after footer)
    speaker = document.createElement("p");
    speaker.className = "small_vbox_speaker";
    speaker.innerHTML = options.speaker;

    // video link
    link = document.createElement("a");
    link.href = "/player/player.php?video=" +
        options.flv + "&title=" + encodeURI(options.title);

    // insert an image if available
    if (options.img) {
        link.innerHTML = '<img src="' + options.img + '">';
    }
    link.innerHTML = link.innerHTML + options.title.replace("\n", "<br>");

    content.appendChild(link);
    container.appendChild(content);
    container.appendChild(footer);
    insert.appendChild(container);
    insert.appendChild(speaker);
};

/**
 * Embeds an FLV player and creates a transcript link.
 *
 * @param string id    HTML id to insert into.
 * @param string flv   FLV filename (transcript must be the same)
 * @param string title FLV title
 */
tt.player = function (id, flv, title) {
    var insert, playerLoc, embed, flash, transcript;
    insert = document.getElementById(id);
    if (!insert) {
        return false;
    }

    // EMBED elements won't center in IE, so we need to center the container
    tt.setStyle(insert, "text-align: center");

    // location of the player SWF
    playerLoc = "/player/player_flv_maxi.swf";

    // construct the EMBED element
    embed = document.createElement("embed");
    embed.setAttribute("src", playerLoc);
    embed.setAttribute("type", "application/x-shockwave-flash");
    embed.setAttribute("width", 320);
    embed.setAttribute("height", 240);
    embed.setAttribute("allowfullscreen", "true");

    // flashvars
    flash = [
        "flv=" + flv,
        "title=" + title,
        "showvolume=1",
        "showtime=1",
        "showplayer=always",
        "showloading=always",
        "showfullscreen=1",
        "showiconplay=1"
    ];
    embed.setAttribute("flashvars", flash.join("&"));

    // transcript
    transcript = document.createElement("a");
    transcript.setAttribute("href", flv.replace(/flv$/, "html"));
    transcript.appendChild(document.createTextNode("Transcript"));
    transcript.setAttribute("target", "blank");
    tt.setStyle(transcript, "display: block; margin: 0.5em 0 2em");

    // add the video
    insert.appendChild(embed);
    insert.appendChild(transcript);
};

/**
 * Cross-platform function for setting the style of an element.
 *
 * Internet Explorer doesn't recognize .setAttribute('style', '<styles>'),
 * but instead recognizes .style.cssText('<styles>').
 *
 * @param Object obj   Object to set the style of.
 * @param string style CSS attributes.
 * @return void
 */
tt.setStyle = function (obj, style) {
    obj.setAttribute('style', style); // good browser
    obj.style.cssText = style;        // IE
};