/*
 * (c) 2011 David Krause, Interaktive Gestaltung
 * http://www.interaktive-gestaltung.de
 */

var videoControl;

$(document).ready(function()
{
    videoControl = new VideoControl();
    videoControl.init();
});

function VideoControl()
{
    var SELECTOR_VIDEO = '#containerVideo';
    var SELECTOR_HEADER = '#header';
    var SELECTOR_PREVIEW = '#videoPreview';
    var SELECTOR_VIDEO_LINK = '.videoTeaser a';
    var CONTAINER_PLAYER = 'videoPlayer';

    var VIDEO_FOLDER_PATH = '/frontend/video/movies/';
    var POSTER_PATH = '/frontend/video/posters/';
    var PLAYER_PATH = '/frontend/jwplayer/player.swf';

    this.init = function()
    {
        if (isIOS())
        {
            removePreview();
        }

        initLinks()
    }

    /**
     * Inits the links to control the video.
     *
     * The name of the video is derived from the class name of the parent div.
     */
    var initLinks = function ()
    {
        var videoLinks = $(SELECTOR_VIDEO_LINK);
        for (var i = 0; i < videoLinks.length; i++)
        {
            var link = videoLinks.eq(i);

            var videoName = link.parent().parent().attr('class');
            bindLink(link, videoName);
        }
    }

    /**
     * Binds the link to the actions.
     *
     * The link controls the displaying of the videoplayer and the poster image.
     *
     * @param link The link object
     * @param videoName The name of the video
     */
    var bindLink = function(link, videoName)
    {
        link.click(function(event)
        {
            showVideo(videoName);
            event.stopPropagation();
        });

        /*
        Mouseover only for non IOS devices, so tap on iPhone and co will directly show the videoplayer.
         */
        if (!isIOS())
        {
            link.mouseover(function()
            {
                showPreview(videoName);
            });

            link.mouseout(function()
            {
                hidePreview();
            });
        }
    }

    /**
     * Shows a Video.
     *
     * The video is embedded and starts playing.
     *
     * @param name The name of the video.
     */
    var showVideo = function(name)
    {
        var containerVideo = $(SELECTOR_VIDEO);

        // Hide video if its already playing
        if (containerVideo.is(':visible') ) hideVideo();

        // Hide the preview and header before starting the movie
        //hidePreview();
        fadeOutPreview();
        hideHeader();

        var width = 566;
        var height = 320;

        containerVideo.show();

        $(document).click(function()
        {
            hideVideo();
        });

        containerVideo.click(function(event)
        {
            event.stopPropagation();
        });

        // poster image only if iOS
        var image = (isIOS()) ? POSTER_PATH + name + '.jpg' : '';

        // Movie stretching dependend of aspect ratio.
        // Files with a ratio 4:3 must have "4_3" in the filename and are stretched to "uniform".
        // Else it is assumed we have a 16:9 ratio.
        var stretching = (name.indexOf('4_3') != -1) ? 'uniform' : 'exactfit';

        jwplayer(CONTAINER_PLAYER).setup({
            file: VIDEO_FOLDER_PATH + name + '.mov',
            width: width,
            height: height,
            stretching: stretching,
            image: image,
            autostart: true,
            events: {
                onComplete: function()
                {
                    if (!isIOS())
                    {
                        hideVideo();
                        hideHeader();
                        fadeInPreview(name);
                    }
                }
            },
            controlbar: {
                idlehide: true,
                position: 'over',
                margin: 0
            },
            modes: [
                {type: 'html5'},
                {type: 'flash', src: PLAYER_PATH}
                //{type: 'download'}
            ]

        });

    }

    /**
     * Hides the Video
     */
    var hideVideo = function ()
    {
        var containerVideo = $(SELECTOR_VIDEO);

        jwplayer(CONTAINER_PLAYER).remove();
        containerVideo.hide();

        $(document).unbind('click');
        containerVideo.unbind('click');

        showHeader();
    }

    /**
     * Shows the preview image.
     *
     * @param name The name of the preview image
     */
    var showPreview = function (name)
    {
        $(SELECTOR_PREVIEW).show();
        $(SELECTOR_PREVIEW).css({ opacity: 1 });
        $(SELECTOR_PREVIEW + ' img').hide();
        $(SELECTOR_PREVIEW + ' img.' + name).show();
    }

    /**
    * Hides the preview image
    *
    */
    var hidePreview = function ()
    {
        $(SELECTOR_PREVIEW + ' img').hide();
        $(SELECTOR_PREVIEW).hide();
    }

    /**
     * Fadeout of the preview image.
     * The whole container is faded!
     *
     */
    var fadeOutPreview = function ()
    {
        $(SELECTOR_PREVIEW).fadeTo(1000, 0);
    }

    /**
     * Fadein of the preview image.
     *
     * @param name The name of the preview image
     */
    var fadeInPreview = function (name)
    {
        showPreview(name);
        $(SELECTOR_PREVIEW + ' img.' + name).css({ opacity: 0 });
        $(SELECTOR_PREVIEW + ' img.' + name).fadeTo(500, 1, '', showHeader);
    }

    /**
     * Deletes the complete preview element.
     *
     * Used for iOS since the preview div disables the tap on the videoplayer
     *
     */
    var removePreview = function()
    {
        $(SELECTOR_PREVIEW).remove();
    }


    /**
     * Shows the header.
     *
     */
    var showHeader = function ()
    {
        $(SELECTOR_HEADER).show();
    }

    /**
    * Hides the header
    *
    */
    var hideHeader = function ()
    {
        $(SELECTOR_HEADER).hide();
    }


    var isIOS = function()
    {
        return (navigator.platform.indexOf("iPhone") != -1 || navigator.platform.indexOf("iPad") != -1)
    }

}