﻿/*
jqIzeYoutubeMediacenter - (c) 2010 Emil Müller
http://ize.webhop.net/home/jquery-plugins/jqizeyoutubemediacenter
Released under the GPL License
http://www.gnu.org/licenses/gpl-3.0.txt
	
requires:
- jQuery 1.4.x
- jqIzeYoutubePlayer
- jqIzeYoutubeControls
- jqIzeYoutubePlaylist

Description:
Combines the controls jqIzeYoutubePlayer, jqIzeYoutubePlaylist and jqIzeYoutubeControls into a full fledged Youtube Mediacenter
*/

(function ($) {
    $.fn.IzeYoutubeMediacenter = function (settings) {
        var player = null;
        var playlist = null;
        var controls = null;
        var videoinfo = null;


        var config = {
            width: 800,
            height: 570,
            playlistID: '080755642A5745C6'
        };

        if (settings) $.extend(config, settings);

        init = function (el) {
            setupMainContainer(el);

            setupPlayerContainer(el);
            setupPlaylistContainer(el);
            setupControlsContainer($("#playerContainer"));
            setupVideoInfoContainer($("#playerContainer"));

            initPlayer(el);
            initPlaylist(el);
            initControls(el);
            initVideoInfo(el);
        }

        setupMainContainer = function (el) {
            $(el).css({ width: config.width, height: config.height, position: 'relative' });
        }

        setupPlayerContainer = function (el) {
            $(el).append($("<div />").attr("id", "playerContainer")
            .mouseenter(function () { if (controls != null) controls.fadeIn(); })
            .mouseleave(function () { if (controls != null) controls.fadeOut(); })
        );
        }

        setupPlaylistContainer = function (el) {
            $(el).append($("<div />").attr("id", "playlistContainer"));
        }

        setupControlsContainer = function (el) {
            $(el).append($("<div />").attr("id", "controlsContainer").css({ position: 'absolute', top: '410px', left: '10px' }));
        }

        setupVideoInfoContainer = function (el) {
            $(el).append($("<div />").attr("id", "videoInfoContainer").css({ position: 'absolute', top: '0px', left: '0px', opacity: '0.7' }));
        }

        initVideoInfo = function (el) {
            videoinfo = $("#videoInfoContainer", el).IzeYoutubeVideoInfo({ width: config.width });
        }

        initPlayer = function (el) {
            player = $("#playerContainer", el).IzeYoutubePlayer({
                height: 450,
                width: config.width,
                onEnded: function () { playlist.seekNext(); },
                onVideoInfo: function (info) { videoinfo.show(info); },
                onPlayerReady: function () { if (player.getIsReady()) playlist.seekFirst(); }
            });
        }

        initPlaylist = function (el) {
            playlist = $("#playlistContainer", el).IzeYoutubePlaylist({
                playlistID: config.playlistID, // '583A96FFCD1BE666', //'021B87CCA16D5E96', 
                width: config.width,
                height: config.height,
                onItemClick: function (index, videoId, url) { player.playVideo(videoId); },
                onPlaylistLoaded: function () {
                    if (player.getIsReady()) playlist.seekFirst();
                    //set width

                    $("#playlist").css({ width: ($(".item", $("#playlist")).length * 160) + 'px' });
                    $('#playlistContainer').serialScroll({
                        items: '.item',
                        offset: -((config.width / 2) - 80), //when scrolling to photo, stop 230 before reaching it (from the left)
                        start: 1, //as we are centering it, start at the 2nd
                        force: true,
                        event: 'click',
                        stop: true,
                        lock: false,
                        constant: false,
                        duration: 7000, //slow down the scrolling
                        cycle: false, //don't pull back once you reach the end
                        easing: 'easeOutQuart', //use this easing equation for a funny effect
                        jump: true //click on the images to scroll to them
                    });

                    $("#playlistContainer .item").mouseenter(function () { $("#playlistContainer").trigger('goto', [$(this).index()]); });
                }
            });
        }

        initControls = function (el) {
            controls = $("#controlsContainer", el).IzeYoutubeControls({
                onSeekFirstClick: function () { playlist.seekFirst(); },
                onSeekPreviousClick: function () { playlist.seekPrevious(); },
                onPlayClick: function () { player.play(); },
                onPauseClick: function () { player.pause(); },
                onSeekNextClick: function () { playlist.seekNext(); },
                onSeekEndClick: function () { playlist.seekEnd(); },
                onMuteClick: function () { player.mute(); },
                onUnMuteClick: function () { player.unMute(); },
                onPlaylistClick: function () { }
            });
        }



        this.each(function () {
            //setup element            
            init(this);
        });

        //put instance of this object in data
        $(this).data("ytmediacenter", this);
        return this;

    }

})(jQuery);


