$.extend(FiveStreet, {
    hasEverPlayedVideo: false,
    autoPlayTimer: 0,


    prepareContentVideos: function() {
        $("#areaContent a[href*=.flv]").flowplayer('/javascripts/lib/flowplayer/flowplayer-3.1.5.swf', {
            clip:  {
                autoPlay: false,
                autoBuffering: true
            }
        });
    },

    prepareTeaserVideos: function() {
        if (!$('#videoPlayerHolder').length) {
            return;
        }

        $('#videoPlayerHolder').flowplayer('/javascripts/lib/flowplayer/flowplayer-3.1.5.swf', {
            // clip properties common to all playlist entries
            clip: {
                baseUrl: '/flvs',
                subTitle: '5Street',
                time: '20 sec',
                title: '5Street',
                autoPlay: false ,
                onStart: function() {
                    FiveStreet.hasEverPlayedVideo = true;
                    clearInterval(FiveStreet.autoPlayTimer);
                }
            },
            canvas: {backgroundColor: "#111"},

            plugins: {
                controls: {
                    //url: 'flowplayer.controls-tube-3.1.5.swf',
                    timeBgColor: '#262626',
                    sliderColor: '#C9C9C9',
                    tooltipTextColor: '#D00000',
                    buttonOverColor: '#d765c2',
                    buttonColor: '#77b5df',
                    sliderGradient: 'none',
                    progressGradient: 'none',
                    backgroundGradient: 'none',
                    bufferColor: '#ffffff',
                    bufferGradient: 'none',
                    volumeSliderGradient: '#ffffff',
                    muteColor: '#ffffff',
                    volumeSliderColor: '#ffffff',
                    backgroundColor: '#242324',
                    borderRadius: '0px',
                    timeColor: 'none',
                    durationColor: '#ffffff',
                    progressColor: '#d765c2',
                    tooltipColor: '#C9C9C9',
                    height: 24,
                    opacity: 1.0,
                    all: false,
                    scrubber:true,
                    play: true,
                    mute: true,
                    playlist: false
                }
            },

            playlist: FiveStreet.videoPlayList
        });

        if ($f('videoPlayerHolder').getPlaylist().length > 1) {
            $f('videoPlayerHolder').playlist("#videoPlayerNavi:first", { loop:true });
            $f('videoPlayerHolder').onBegin(FiveStreet.hidePlaylist).onResume(FiveStreet.hidePlaylist);
            $f('videoPlayerHolder').onFinish(FiveStreet.showPlaylist);

            $("#videoPlayerNavi li").each(function() {
                var link = $(this).find("a");
                var spans = link.find("span");
                var name = $(spans[0]);
                var datespan = $(spans[1]);
                var img = $('<img />');
                var href = link.attr("href");
                href = href.substring(href.lastIndexOf("/") + 1);
                img.attr("alt", name.text());
                img.attr("src", "/flvs/thumbs/" + href + ".png");
                link.text('').append(img).append(name).append(datespan);
                $(this).append('<div class="thumbOverlay"></div>');
            });

            $("#videoPlayerNavi").jcarousel({
                'scroll': 1
            });
        } else {
            $('#videoOverlay').hide();
        }

        FiveStreet.autoPlayTimer = setInterval("FiveStreet.autoPlayVideo()", 1000);
        $(document).focus(function() {
            FiveStreet.autoPlayVideo();
        });
    },
    hidePlaylist: function() {
        $("#videoPlayer div.jcarousel-container").hide();
        $("#videoOverlay").hide();
    },
    showPlaylist: function() {

        $("#videoPlayer li a").css("visibility", "visible");
        $("#videoPlayer div.jcarousel-container").show();
        $("#videoOverlay").show();
    },
    autoPlayVideo: function() {
        var hasFocus = (document.hasFocus && document.hasFocus()) || (document.hasFocus == undefined)
        if (hasFocus && FiveStreet.hasEverPlayedVideo !== true) {
            $f("videoPlayerHolder").play();
        }
    },

    renderFromJsonWithoutVideos: FiveStreet.renderFromJson,
    renderFromJson: function(data) {
        FiveStreet.renderFromJsonWithoutVideos.call(this, data);
        if ($('#videoPlayer').css('display') === 'none') {
            $('#videoPlayerHolder').html('');
        } else if ($('#videoPlayerHolder').html() === '') {
            FiveStreet.prepareTeaserVideos();
        }

        FiveStreet.prepareContentVideos();
    }
});


$(document).ready(function() {
    FiveStreet.prepareTeaserVideos();
    FiveStreet.prepareContentVideos();
});