// Code for displaying multimedia (images, video) in a popup player


// Some configurable sizes (in pixels):
var playerSizes =
{
    shadowSpacing:       30,
    shadowBorderWidth:   70,
    shadowBorderHeight:  70,
    controlsHeight:      30,
    controlsSideBGWidth: 5
};

var playerFadeTime = 200;
var playerResizeTime = 1000;


// Update player position, should be called when browser viewport has been resized
function positionPlayerPopup ()
{
    $("#player-popup .player-shadow").css({
        top:  $(window).height()/2 - $("#player-popup .player-shadow").height()/2,
        left: $(window).width()/2  - $("#player-popup .player-shadow").width()/2
    });
}


// Return object with various sizes that depend on the contentarea width/height, I'll need these in
// both the showPlayerPopup function as well as the resizePlayerPopup function.
function getContentDependentPlayerSizes(width, height, controlsVisible)
{
    controlsVisible = controlsVisible ? 1 : 0;

    var _shadowWidth  = width  + playerSizes.shadowSpacing*2;
    var _shadowHeight = height + playerSizes.shadowSpacing*2 +
                        playerSizes.controlsHeight*controlsVisible;

    return {
        shadowWidth:           _shadowWidth,
        shadowHeight:          _shadowHeight,
        shadowLeft:            $(window).width() /2 - _shadowWidth/2,
        shadowTop:             $(window).height()/2 - _shadowHeight/2,
        shadowNorthSouthWidth: width - playerSizes.shadowBorderWidth*2 + playerSizes.shadowSpacing*2,
        shadowEastWestHeight:  height + playerSizes.controlsHeight*controlsVisible -
                               playerSizes.shadowBorderHeight*2 + playerSizes.shadowSpacing*2,
        controlsWidth:         width - playerSizes.controlsSideBGWidth*2
    }
}



// Resize player to fit width/height in content area
function resizePlayerPopup(newContentWidth, newContentHeight, controlsVisible, time)
{
    var $popup    = $("#player-popup");
    var $shadow   = $popup.find(".player-shadow");
    var $controls = $popup.find(".player-controls");
    var $content  = $popup.find(".player-content");
    var $ns       = $shadow.find(".n, .s");
    var $ew       = $shadow.find(".e, .w");

    var newSizes = getContentDependentPlayerSizes(newContentWidth, newContentHeight,
        controlsVisible);

    // Try doing the animation myself, so that everything is animated in-sync (might be less
    // overhead too - fewer timers that need to be fired.
    $content.animate({ width:  newContentWidth, height: newContentHeight }, time);

    $shadow.animate({
        top:    newSizes.shadowTop,
        left:   newSizes.shadowLeft,
        width:  newSizes.shadowWidth,
        height: newSizes.shadowHeight
    }, time);

    $ns.animate({ width:  newSizes.shadowNorthSouthWidth }, time);
    $ew.animate({ height: newSizes.shadowEastWestHeight  }, time);

    $controls.animate({ width: newSizes.controlsWidth }, time);
}


// Resize and position player elements to fit the content and show the containing popup div
function showPlayerPopup(contentWidth, contentHeight, controlsVisible)
{
    var $popup = $("#player-popup");
    var $shadow = $popup.find(".player-shadow");
    var sizes = playerSizes;

    resizePlayerPopup(contentWidth, contentHeight, controlsVisible, 0);

    $(".player-content", $popup).css({ top: sizes.shadowSpacing, left: sizes.shadowSpacing });

    if (controlsVisible)
    {
        $(".player-controls", $popup).css({
            bottom: sizes.shadowSpacing,
            left:   sizes.shadowSpacing + sizes.controlsSideBGWidth,
            height: sizes.controlsHeight
        });
        $(".player-controls-leftbg, .player-controls-rightbg", $popup).css({
            bottom: sizes.shadowSpacing,
            width:  sizes.controlsSideBGWidth,
            height: sizes.controlsHeight
        });
        $(".player-controls-leftbg",  $popup).css('left',  sizes.shadowSpacing).show();
        $(".player-controls-rightbg", $popup).css('right', sizes.shadowSpacing).show();
        $(".player-controls", $popup).show();
    }
    else
    {
        $(".player-controls", $popup).hide();
        $(".player-controls-leftbg", $popup).hide();
        $(".player-controls-rightbg", $popup).hide();
    }

    $(".nw, .n, .ne", $shadow).css({ height: sizes.shadowBorderHeight });
    $(".sw, .s, .se", $shadow).css({ height: sizes.shadowBorderHeight, bottom: 0 });
    $(".nw, .w, .sw", $shadow).css({ width:  sizes.shadowBorderWidth });
    $(".ne, .e, .se", $shadow).css({ width:  sizes.shadowBorderWidth, right: 0 });

    $(".n, .s", $shadow).css({ left:  sizes.shadowBorderWidth });
    $(".e, .w", $shadow).css({ top: sizes.shadowBorderHeight });

    $(window).resize(positionPlayerPopup);

    $("#player-popup").fadeIn(playerFadeTime);
}


function hidePlayerPopup()
{
    $("#player-popup").fadeOut(playerFadeTime, function () { $("#player-popup div").stop(); });

    $(window).unbind('resize', positionPlayerPopup);
}


function initPlayerPopup()
{
    $(".trigger-player").live('click', function (e)
    {
        showPlayerPopup(800, 480, true);
        //e.preventDefault();
        // FIXME: Can I make 'back' hide the player? Might be possible with
        // window.location.hash/window.onhashchange, needs some further investigation
        // It seems that all I need to do is make sure that if new hash isnt '#player', hide it.
    });

    $("#playerTest").click(function ()
    {
        // Maybe keep track of current size to avoid needlessly resizing.
        resizePlayerPopup(600, 320, true, playerResizeTime);
    });

    // Hide when ESC is pressed or when the background is clicked
    $("#player-popup").click(function (e) { hidePlayerPopup() });
    $("#player-popup .player-content, #player-popup .player-controls").click(function (e)
        { e.preventDefault();return false; });

    $(document).keydown(function (e)
    {
        if (e.which == 27)
        {
            hidePlayerPopup();
            e.preventDefault();
        }
    });
}

$(initPlayerPopup);