showGallery = showVideo = function(){};

$(document).ready(function() {
    var perPage = 4, List, activeId = 0, $View, $List, page = 0, selectFile, LoadImage, LoadVideo, Load, $videoPlayer;

    /* 
    var addthis_pub = "civicresource";
    var addthis_options = 'favorites, digg, delicious, myspace, google, facebook, live, buzz, more';   
    var addthis_config = {
    ui_cobrand: '<div style="cursor: pointer;" onclick="addthis_close()">[close]</div>',
    ui_click: true,
    ui_delay: 50,
    ui_offset_top: -10,
    };
        
    var playVideo = $.getURLParam("playVideo");
    var defaultVideo = $.getURLParam("v");
    
    function selectText(id) {
    id = "#" + id;
    $(id).select();
    $(id).focus();
    }
    */

    showVideo = function(index) {
        index = index ? index : 0;
        //populate the dang thing with images
        videoFrameInit();
        showFrame();
        populateList(Math.floor(index / perPage));
        if(List.length > 0)
        {
            highlight(0);
            Load(0);
        }
    }

    showGallery = function(index)//no params
    {
        index = index ? index : 0;
        galleryFrameInit();        
        showFrame();
        //populate the dang thing with images
        populateList(Math.floor(index / perPage));
    }

    var LoadImage = function(index) {
        $View.empty();
        $View.append($("<img src='" + List[index].fullImage + "' height='100%' />"));
    }

    var LoadVideo = function(index) {
        $View.empty();
        $View.append('<iframe id="HomePageVideoFrame" frameborder="0" scrolling="no" src="/Pages/HomepageVideo.aspx?vguid=' + List[index].videoFile + '"></iframe>');
    }

    var showFrame = function() {
        if ($("#VideoPlayer").size())
            return false;

        var html = '<div id="VideoPlayer">' +
                    '<div style="width:779px; height:388px">' +
                        '<div style="height: 84px;">' +
                            '<div class="closeButton"></div>' +
        //'<div class="shareButton"></div>' +
        //'<div class="embedVideo"></div>' +
                        '<p class="info">Click thumbnails to view ' + (List == photoList ? 'image' : 'video') + '</p>' +
                        '</div><div class="videoView"></div>' +
                        '<div id="videoList"></div>' +
                        '<div class="clear"></div>' +
                    '</div>' +
                '</div>';

        $videoPlayer = $(html).dialog({
            autoOpen: true,
            width: 779,
            modal: true,
            resizable: false,
            draggable: false,
            dialogClass: 'videoPlayerDialog',
            closeOnEscape: true,
            overlay: { opacity: 0.3, background: "black" },
            close: function() {
                $videoPlayer.dialog('destroy');
                $videoPlayer.remove();
                if ($("#shareVideo").size())
                    $("#shareVideo").remove();
            }
        });

        $('#VideoPlayer .closeButton').click(function() {
            $videoPlayer.dialog('close');
        });

        $List = $('#videoList', $videoPlayer);
        $View = $('.videoView', $videoPlayer);
    }

    var videoFrameInit = function(videoID) {
        List = videoList;
        Load = LoadVideo;
    }

    var galleryFrameInit = function(pictureID) {
        List = photoList;
        Load = LoadImage;
    }

    var pv = function(page) {
        return function() {
            populateList(page);
        }
    }

    var selectFile = function(index) {
        return function() {
            highlight(index);
            Load(index);
        }
    }

    var highlight = function(index) {
        $(".videoListItem", $List).removeClass('active');
        $("#VideoListItem_" + index, $List).addClass('active');
        activeId = index;
    }

    var populateList = function(page) {
        var start = page * perPage;
        var end = start + perPage;
        var videos = 0;

        $List.empty();
        $.each(List.slice(start, end), function(i, v) {
            var ii = i + start;
            $vli = $('<div id="VideoListItem_' + ii + '" class="videoListItem' + ((ii == activeId) ? ' active' : '') + '">' +
                '<div class="thumb" ><img src="' + v.thumb + '" height=100% width=100% alt="' + v.title + '"></div>' +
                '<div class="videoListWrapper">' +
            //span added to title to get length
                    '<div class="titleEllipsis">... </div><div class="title"><span>' + v.title + '</span></div>' +
                    '<div class="description">' + v.description + '</div>' +
                '</div>' +
            '<div class="clear"></div></div>');

            $vli.click(selectFile(ii));
            $List.append($vli);
            //130px is the width of the videoListWrapper
            if ($(".videoListWrapper > .title span", $vli).width() < 130)
                $(".videoListWrapper > .titleEllipsis", $vli).css('display', 'none');
            videos++;
            if (i == 0 && List == photoList)
                $vli.click();
        });

        //pagination
        if (List.length > perPage) {
            var $pager = $('<div class="videoListPager">');
            var $pageLeft = $('<span class="pager-link cursor-pointer">&lt</span>');
            if (page != 0)
                $pageLeft.click(pv(page - 1));
            $pager.append($pageLeft);
            var maxPage = Math.ceil(List.length / perPage), stopPage, startPage;
            if (page > maxPage - 3) {
                stopPage = maxPage;
                startPage = maxPage - 5;
            }
            else {
                startPage = page - 2;
                stopPage = page + 3;
            }
            if (startPage < 0) {
                startPage = 0;
                stopPage = Math.min(maxPage, 5);
            }

            for (var i = startPage; i < stopPage; i++) {
                var $pageIcon = $('<span class="pager-' + ((i == page) ? 'current' : 'link cursor-pointer') + '">' + (i + 1) + '</span>');
                $pageIcon.click(pv(i));
                $pager.append($pageIcon);
            }
            var $pageRight = $('<span class="pager-link cursor-pointer">&gt;</span>');
            if ((stopPage - 1) > page)
                $pageRight.click(pv(page + 1));
            $pager.append($pageRight);
            $List.append($pager);
            var width = 0;
            $('span', $pager).each(function(i, v) {
                width += $(v).outerWidth(true);
            });
            //$pager.css('width', '' + Math.min(200, width) + 'px');
            $pager.css('margin-top', '' + (59 * (perPage - videos) + 5) + 'px');
        }
    }
});