/// <reference path="jquery-1.4.2.min.js" />

var youtubeplayer;
var videoReady = false;
var currentItemIndex = 1;
var slideshow;
var videoPlaying = false;
var slideTime = 8000;
var firstVideoReady = false;


function mediaviewer() {

    $("#youtubeplayer").hide();
    
    var params = { allowScriptAccess: "always", wmode: "transparent" };
    swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=youtubeplayer", "youtubeplayer", "560", "304", "8", null, null, params);



    startSlideShow();    
    $(".mediaviewer").hover(
        function () {
            window.clearInterval(slideshow);
            $(this).attr("title", "PAUSED");
        },
        function () {
            startSlideShow();
        }
    );


    $(".mediaoptions").click(function () {
        firstVideoReady = false;
        changeContent($(this));
    });

    $("#mediapaging a").click(function (e) {
        e.preventDefault();
    });

    

    $(".mediaoptions:first").addClass("hold");

    $(".mediaoptions").hover(
        function () { $(this).addClass("hover"); },
        function () { $(this).removeClass("hover"); });

    $("#play").click(function () { play(); });
    $("#pause").click(function () { pause(); });

    var mediaItemCount = $(".mediaoptions:visible").length; //do not include the last <li> element.

    
    if (mediaItemCount > 10) {
        $(".btnscroll").show();
        setUpPaging();
    }

    var hasVideo = $("#mediapaging a[class='video']").length > 0;

    if (mediaItemCount <= 1 && !hasVideo) {
        $("#mediapaging").hide();
        $(".mediaviewer #caption").css("bottom", "30px");
        return;
    }

    //recheck number of visible buttons, add scroll btns if they are visible.
    mediaItemCount = $(".mediaoptions:visible").length + $(".btnscroll:visible").length;

    var controlWidth = $("#mediapaging").width();
    var widthOfButtons = (mediaItemCount * 44);
    var remaining = controlWidth - widthOfButtons - 10;
    $(".gallerybtnarea").width(remaining);
}

function startSlideShow(){
    window.clearInterval(slideshow);    

    slideshow = window.setInterval(function () {
        //Slideshow does not play when video is playing or if there is only one media item

        if (!videoPlaying && $(".mediaoptions").length != 1) {
            var index = currentItemIndex++;
            if (index > $(".mediaoptions").length - 1)
                index = 0;

            changeContent($(".mediaoptions").get(index));
        }
    }, slideTime);
    
}

function changeContent(choice) {
    var mediaOptionItem = $(choice);

    currentItemIndex = mediaOptionItem.index();

    var type = mediaOptionItem.children("a").attr("class");
    var caption = mediaOptionItem.children("a").attr("rel");
    var title = mediaOptionItem.children("a").attr("rev");
    var navUrl = mediaOptionItem.children("a").attr("href");

    $("#caption").fadeOut("slow", function () {
        $("#caption h2").text(caption);
        $("#caption h1").text(title);
        Cufon.replace('#caption h2, #caption h1', { textShadow: '1px 2px #000' });
    });


    $(".mediaoptions").removeClass("hold");
    mediaOptionItem.addClass("hold");

    var mediaItem = mediaOptionItem.children("a").attr("id");

    switch (type) {

        case "video":
            loadNewVideo(mediaItem);
            break;

        case "flickr":
            displayFlickrImage(mediaItem, navUrl);
            break;

        case "local":
            displayImage(mediaItem, navUrl);
            break;
    }
}


function loadNewVideo(id) {

    //if first item is video, not show by default
    if (!firstVideoReady) {
        $("#playerdiv").hide();
        firstVideoReady = true;
    }

    if ($("#youtubeplayer").is(":visible") && firstVideoReady) {

        youtubeplayer.cueVideoById(id);
        play();
        if (!$("#caption").is(":visible"))
            $("#caption").fadeIn();
        
    }
    else {

        $("#images").fadeOut('slow', function () {
            var width = $(this).width() / 2 - 60;
            $("#images").html("<img src='/Shared/Galleries/UploadedImages/" + id + ".jpg' id='hero' /><div class='overlay'>&nbsp;</div><img src='/Content/Images/MediaViewer/play-button-normal.png' id='mediaplaybutton' style='position:absolute;width:125px !important;height:132px !important;left:" + width + "px;top:100px;' />")
            .fadeIn('slow', function () {
                $("#caption").fadeIn();
            });

            firstVideoReady = false;
            $("#images").css("cursor", "default");

            //Set up media play button events
            $("#mediaplaybutton").hover(
                function () {
                    $(this).attr("src", "/Content/Images/MediaViewer/play-button-hover.png");
                    $(this).css("cursor", "pointer");
                },
                function () {
                    $(this).attr("src", "/Content/Images/MediaViewer/play-button-normal.png");
                    $(this).css("cursor", "default");
                }
            );


            $("#mediaplaybutton").click(function () {
                firstVideoReady = true;
                displayVideo(id);
            });
        });
    }
}

function displayVideo(id) {
    $("mediaplaybutton").remove();


    $("#images").fadeOut('slow', function () {

        $(".mediabtns").show();
        $("#youtubeplayer").show(); // onYouTubePlayerReady will fire because of this

        $("#playerdiv").fadeIn("slow",
            function () {
                changeContent($(".mediaoptions").eq(currentItemIndex - 1));
            });
    });
}

function displayImage(image, navUrl) {
    $("#images").fadeOut('slow', function () {
        $(this).html("<img src='" + image + "' class='" + navUrl + "' id='hero' /><div class='overlay'>&nbsp;</div>")
        .fadeIn('slow', function () {
            $("#caption").fadeIn();
        });
    });
    
    changeFieldsForImages();
}

function displayFlickrImage(image, navUrl) {
    $("#images").fadeOut('slow', function () {
        $(this).html("<img src='" + image + "' class='" + navUrl + "' id='hero' /><div class='overlay'>&nbsp;</div>")
        .fadeIn("slow", function () {
            $("#caption").fadeIn();
        });
    });
    changeFieldsForImages();
}

function changeFieldsForImages() {
    $("#youtubeplayer").hide();
    $("#playerdiv").hide();
    $(".mediabtns").hide();
    $("#images").click(function () { HeroClick(); });
    videoReady = false;
    videoPlaying = false;

    $("#images").css("cursor", "pointer");

    if ($("#hero").attr("class") != "" && $("#hero").attr("class") != null) {

        $("#hero").css("cursor", "pointer");
        $(".overlay").css("cursor", "pointer");
    }
}

function HeroClick() {

    var url = $("#hero").attr("class");
    if (url != null && url != "")
        window.location = url;

}

/* Player functions */

function onYouTubePlayerReady(playerid) {
    youtubeplayer = document.getElementById("youtubeplayer");
    youtubeplayer.addEventListener("onStateChange", "onPlayerStateChange");

    if (videoReady == false) {
        changeContent($(".mediaoptions").eq(currentItemIndex - 1));
        videoReady = true;
    }
}

function onPlayerStateChange(newState) {

    switch (newState) {

        case 1:
            $("#caption").hide();
            videoPlaying = true;
            break;

        case 5:
            $("#caption").show();
            videoPlaying = false;
            break;
    }
}


function play() {
    if (youtubeplayer) {
        youtubeplayer.playVideo();
    }
}
function pause() {
    if (youtubeplayer) {
        youtubeplayer.pauseVideo();
    }
}

function setUpPaging() {

    var position = 0;
    $(".mediaoptions").each(function () {
        position++;
        if (position > 10)
            $(this).hide();
    });

    $("#next input").click(function () {

        var firstVisibleId = parseInt($.trim($(".mediaoptions:visible:first").text()));
        var showObject;
        var hideObject;

        $(".mediaoptions").each(function () {

            var thisOption = parseInt($.trim($(this).text()));
            var OptionToShow = firstVisibleId + 10;

            if (thisOption == firstVisibleId) hideObject = $(this);
            if (thisOption == OptionToShow) showObject = $(this);
        });

        if (hideObject != null && showObject != null) {

            hideObject.hide();
            showObject.fadeIn();
        }

    });

    $("#prev input").click(function () {

        var LastVisibleId = parseInt($.trim($(".mediaoptions:visible:last").text()));
        var showObject;
        var hideObject;

        $(".mediaoptions").each(function () {

            var thisOption = parseInt($.trim($(this).text()));
            var OptionToShow = LastVisibleId - 10;

            if (thisOption == LastVisibleId) hideObject = $(this);
            if (thisOption == OptionToShow) showObject = $(this);
        });

        if (hideObject != null && showObject != null) {

            hideObject.hide();
            showObject.fadeIn();
        }

    });



}