var VideoChannel = {

    tag:null,
    host: "http://www.on-sport.dk",
    player: "http://www.on-sport.dk/v.swf",
    playerHeight: 360,
    playerWidth: 640,
    videos: [],
    currentVideo: null,

    getVideos: function() {
        var script = escape("<script src='" + VideoChannel.host + "/js/photos?tag=" + VideoChannel.tag + "&size=100&callback=VideoChannel.videosReceived' type='text/javascript'></script>");
        document.write(unescape(script));
    },

    videosReceived: function(videos) {
        VideoChannel.videos = videos.photos;
        VideoChannel.createVideoPreviews(1);
        VideoChannel.createMiniVideoScroller();
    },

    createVideoPreviews: function(max) {

        max = max > VideoChannel.videos.length ? VideoChannel.videos.length : max;

        for (var i = 0; i < max; i++) {

            var video = VideoChannel.videos[i];

            var id = video.photo_id;

            if (typeof id == "undefined") {
                continue;
            }

            var title = video.title;
            var imageSource = VideoChannel.host + video.standard_download;

            var playIcon = jq("<img src='/img/play.png'/>");
            playIcon.css("position", "absolute");
            playIcon.css("margin-left", "-106px");
            playIcon.css("margin-top", "34px");

            var imageDiv = jq("<div></div>");
            imageDiv.append("<img src='" + imageSource + "' height='90px' width='189px'/>");
            imageDiv.append(playIcon);

            var div = jq("<div class='video'></div>");
            div.append(imageDiv);
            div.append("<p><a>" + title + "</a></p>");
            div.css("cursor", "pointer");

            div.find("a").lightBox({
                imageLoading: '/img/lightbox/loading.gif',
                imageBtnClose: '/img/lightbox/close.gif'
            });

            (function(video) {
                div.find("a").click(function() {
                    VideoChannel.currentVideo = video;
                    VideoChannel.loadVideo();
                });
            })(video);

            (function(div) {
                div.click(function() {
                    div.find("a").trigger("click");
                });
            })(div);

            jq("#videos").append(div);
        }
    },

    createMiniVideoScroller: function() {

        var inner = jq("<div class='inner'></div>");

        for (var i = 0; i < VideoChannel.videos.length; i++) {

            var video = VideoChannel.videos[i];

            var image = jq("<img />");
            image.attr("src", VideoChannel.host + video.standard_download);

            var anchor = jq("<a></a>");
            anchor.append(image);

            var item = jq("<div class='item'></div>");
            item.append(anchor);

            item.find("a").lightBox({
                imageLoading: '/img/lightbox/loading.gif',
                imageBtnClose: '/img/lightbox/close.gif'
            });

            (function(video) {
                item.click(function() {
                    VideoChannel.currentVideo = video;
                    VideoChannel.loadVideo();
                });
            })(video);

            (function(video) {
                item.find("a").click(function() {
                    VideoChannel.currentVideo = video;
                    VideoChannel.loadVideo();
                });
            })(video);

            (function(item) {
                item.click(function() {
                    item.find("a").trigger("click");
                });
            })(item);

            inner.append(item);
        }

        var outer = jq("<div class='outer'></div>");
        outer.append(inner);

        var arrows = jq("<div class='arrows'></div>");
        arrows.append("<div class='leftarrow'><<</div>");
        arrows.append("<div class='rightarrow'>>></div>");

        var container = jq("<div class='miniscroll scroll'></div>");
        container.append(outer);
        container.append(arrows);
        jq("#videos").append(container);
        VideoChannel.initializeScrolling("miniscroll");
    },

    loadVideo: function() {

        if (VideoChannel.currentVideo == null) {
            return;
        }

        var id = VideoChannel.currentVideo.photo_id;
        var title = VideoChannel.currentVideo.title;
        var description = VideoChannel.currentVideo.content;

        var flashVars = "showDescriptions=0&photo_id=" + id + "";

        var flashObject = "<object height='" + VideoChannel.playerHeight + "' width='" + VideoChannel.playerWidth + "' classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000'>";
        flashObject += "<param name='movie' value='" + VideoChannel.player + "' />";
        flashObject += "<param name='FlashVars' value='" + flashVars + "' />";
        flashObject += "<param name='allowfullscreen' value='true' />";
        flashObject += "<param name='allowscriptaccess' value='always' />";
        flashObject += "<embed";
        flashObject += " height='" + VideoChannel.playerHeight + "'";
        flashObject += " width='" + VideoChannel.playerWidth + "'";
        flashObject += " flashvars='" + flashVars + "'";
        flashObject += " allowfullscreen='true'";
        flashObject += " allowscriptaccess='always'";
        flashObject += " type='application/x-shockwave-flash'";
        flashObject += " src='" + VideoChannel.player + "'";
        flashObject += "></embed>";
        flashObject += "</object>";

        var boxContent = jq("#lightbox-container-image-box");
        boxContent.click(function() { return false; });
        boxContent.css("height", (VideoChannel.playerHeight + 10) + "px");
        boxContent.css("width", (VideoChannel.playerWidth + 20) + "px");
        boxContent.css("padding-top", "10px");
        boxContent.html(jq(flashObject));

        var descriptionHtml = "<h4>" + title + "</h4>";
        descriptionHtml += "<br />";
        descriptionHtml += description;

        var infoDiv = document.getElementById('lightbox-video-info');

        if (infoDiv == null) {

            infoDiv = jq("<div id='lightbox-video-info'></div>");
            infoDiv.html(descriptionHtml);

            var boxData = jq("#lightbox-container-image-data-box");
            boxData.click(function() { return false; });
            boxData.css("width", VideoChannel.playerWidth + "px");
            boxData.append(infoDiv);
            boxData.append(VideoChannel.createVideoScroller());
            VideoChannel.initializeScrolling("videoscroll");
            boxData.show();
        }
        else {
            jq(infoDiv).html(descriptionHtml);
        }
    },

    createVideoScroller: function() {

        var inner = jq("<div class='inner'></div>");

        for (var i = 0; i < VideoChannel.videos.length; i++) {

            var video = VideoChannel.videos[i];

            var image = jq("<img />");
            image.attr("src", VideoChannel.host + video.standard_download);

            var item = jq("<div class='item'></div>");
            item.append(image);

            (function(video) {
                item.click(function() {
                    VideoChannel.currentVideo = video;
                    VideoChannel.loadVideo();
                });

                item.hover(
                    function() {
                        jq(".videoscroll").append("<div class='popuptext'>" + video.title + "</div>");

                    },
                    function() {
                        jq(".videoscroll .popuptext").remove();
                    });

            })(video);

            inner.append(item);
        }

        var outer = jq("<div class='outer'></div>");
        outer.append(inner);

        var arrows = jq("<div class='arrows'></div>");
        arrows.append("<div class='leftarrow'><<</div>");
        arrows.append("<div class='rightarrow'>>></div>");

        var container = jq("<div class='videoscroll scroll'></div>");
        container.append(outer);
        container.append(arrows);
        return container;
    },

    initializeScrolling: function(name) {

        var scroller = jq("." + name + ".scroll");
        var outer = scroller.find(".outer");
        var inner = scroller.find(".inner");
        var items = inner.children(".item");

        var totalWidth = 0;
        var interval = 0;

        for (var j = 0; j < items.length; j++) {

            var item = jq(items[j]);

            var width = parseInt(item.css("width"));
            var padding_left = parseInt(item.css("padding-left"));
            var padding_right = parseInt(item.css("padding-right"));
            var margin_left = parseInt(item.css("margin-left"));
            var margin_right = parseInt(item.css("margin-right"));

            if (!isNaN(width)) {
                totalWidth += width;
            }

            if (!isNaN(padding_left)) {
                totalWidth += padding_left;
            }

            if (!isNaN(padding_right)) {
                totalWidth += padding_right;
            }

            if (!isNaN(margin_left)) {
                totalWidth += margin_left;
            }

            if (!isNaN(margin_right)) {
                totalWidth += margin_right;
            }

            if (j == 0) {
                interval = totalWidth * 3;
            }
        }

        inner.css("width", totalWidth + "px");

        (function(interval) {
            scroller.find(".leftarrow").click(function() {
                outer.scrollLeft(outer.scrollLeft() - interval);
            });
        })(interval);

        (function(interval) {
            scroller.find(".rightarrow").click(function() {
                outer.scrollLeft(outer.scrollLeft() + interval);
            });
        })(interval);
    }
}