$(document).ready(function () {
    $(".viewer").SQ1ImageViewer({ autoscroll: true });

    $(".mainNav  a.home").addClass("active");
    var sliderHTML = sliderContent(videos)

    $(".mainImage .image").html(sliderHTML)
    var pageCount = $(".mainImage .image > li").size();
    for (var i = 0; i < pageCount; i++) {
        $(".mainImage .buttons").append("<li>" + (i + 1) + "</li>")
    }
    $(".mainImage").SlideViewer({ autoscroll: false, width: 666 });
    var videosHTML = videoContent(videos)
    $("#video-modal ul").html(videosHTML)
    VideoJS.setupAllWhenReady();
    //    VideoJS.DOMReady(function () {
    //        $("#video-modal").hide()
    //    });

    $(".video-item").click(function () {
        var name = $(this).attr("title");
        $(".videos").hide();
        $("#" + name).show();
        var height = $(window).height();
        var width = $(window).width();
        var scrollTop = $(window).scrollTop();
        //640 + 364
        var top = ((height - 364) / 2) + scrollTop;
        var left = (width - 640) / 2
        $("#video-modal").css({ "left": left + "px", "top": top + "px", "z-index": 999 }).show();
    });

    $("#video-modal .close").click(function () {
        $("video").each(function () {
            this.player.pause();
        });
        if ($.browser.mozilla) {
            $("#video-modal").hide();
        } else {
            $("#video-modal").css({ "z-index": -999 });
        }
        //$("#video-modal").hide();
    });

});

function sliderContent(videos) {
    var strHTML = "";
    var cnt = 1;
    for (var i = 0; i < videos.length; i++) {
        var video = videos[i];
        var cntMod = cnt % 6;
        if (i == 0 || cntMod == 1) {
            strHTML += "<li>";
            strHTML += "<ul>";
        }
        strHTML += "<li>";
        strHTML += "<a class=\"video-item\" title=\"" + video.name + "\"><img height=\"124\" width=\"198\" alt=\"" + video.caption + "\" src=\"images/videos/" + video.thumb + "\"/></a>";
        strHTML += "<p>" + video.caption + "</p>";
        strHTML += "</li>";
        if (cntMod == 0 || cnt == videos.length) {
            strHTML += "</ul>";
            strHTML += "</li>";
        }
        cnt++;
    }
    return strHTML;
}

function videoContent(videos) {
    var strHTML = "";
    for (var i = 0; i < videos.length; i++) {
        var video = videos[i]
        strHTML += "<li id=\"" + video.name + "\" class=\"videos\">";
        strHTML += "<div class=\"video-js-box\">";
        //strHTML += "<a>"
        strHTML += "<video id=\"video_" + video.name + "\" class=\"video-js\" width=\"640\" height=\"364\" controls=\"controls\" preload=\"auto\" poster=\"http://173.203.192.142/images/videos/" + video.vidImage + "\">";
        strHTML += "<source src=\"http://173.203.192.142/videos/" + video.video + "\" type='video/mp4; codecs=\"avc1.42E01E, mp4a.40.2\"' />";
        strHTML += "<object id=\"flash_fallback_" + i + "\" class=\"vjs-flash-fallback\" width=\"640\" height=\"364\" type=\"application/x-shockwave-flash\"";
        strHTML += "data=\"http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf\">";
        strHTML += "<param name=\"movie\" value=\"http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf\" />";
        strHTML += "<param name=\"allowfullscreen\" value=\"true\" />";
        strHTML += "<param name=\"flashvars\" value='config={\"playlist\":[\"http://173.203.192.142/images/videos/" + video.vidImage + "\", {\"url\": \"http://173.203.192.142/videos/" + video.video + "\",\"autoPlay\":false,\"autoBuffering\":true}]}' />";
        strHTML += "<img src=\"http://173.203.192.142/images/videos/" + video.vidImage + "\" width=\"640\" height=\"364\" alt=\"Poster Image\"";
        strHTML += "title=\"No video playback capabilities.\" />"
        strHTML += "</object>"
        strHTML += "</video>"
        //strHTML += "</a>"
        strHTML += "</div>"
        strHTML += "</li>"
    }
    return strHTML;
}