function MM_showHideLayers() { //v9.0
    var i, p, v, obj, args = MM_showHideLayers.arguments;
    for (i = 0; i < (args.length - 2); i += 3)
        with (document) if (getElementById && ((obj = getElementById(args[i])) != null)) {
        v = args[i + 2];
        if (obj.style) { obj = obj.style; v = (v == 'show') ? 'block' : (v == 'hide') ? 'none' : v; }
        obj.display = v;
    }
}


var Data = {
    URL: {
        Blog: "/Torchbearers_Pledges.asp",
        Index: "/Index.asp"
    },
    Utils: {
        getRandom: function() {
            var d = new Date();
            return d.toUTCString();
        },
        getFormattedDate: function(date) {
            var day = date.getDate();
            var month = date.getMonth();
            //Date dt= new Date();
            month = Data.Constants.Months[month];
            var year = date.getFullYear();
            return month + " " + day + ", " + year;
        },
        getFormattedDate2: function(date) {
            var day = date.getDate();
            var month = date.getMonth();
            //Date dt= new Date();
            var year = date.getFullYear();
            return day + "/" + (month + 1) + "/" + year;
        },
        getFromLocation: function(title) {
            var fromStr = "";
            var location = title.split(" ");
            var isFrom = true;
            location.each(function(str) {
                if (str == "-") {
                    isFrom = false;
                }
                else if (isFrom) {
                    fromStr += " " + str;
                }
            });
            return fromStr;
            //return location[0];
        },
        getToLocation: function(title) {
            var toStr = "";
            var isTo = false;
            var location = title.split(" ");
            location.each(function(str) {
                if (str == "-")
                    isTo = true;
                else if (isTo) {
                    toStr += " " + str;
                }
            });
            return toStr;
        },
        getExcerpt: function(text, length) {
            var str = text.substr(0, length);
            var lastIndex = str.indexOf('.');
            str = str.substr(0, lastIndex) + "..";
            return str;
        },
        mergeObjects: function(obj1, obj2) {
            // note overwrites obj1 keys that are in obj2
            $H(obj2).each(function(obj) {
                obj1[obj.key] = obj.value;
            });
            return obj1;
        },
        getThumbDimensions: function(width, height, maxWidth, maxHeight) {
            var dim = {};
            // unhandled case where maxWidth / maxHeight are larger than width / height
            // and all fields must be provided

            if (width > height) {
                dim.width = maxWidth;
                dim.height = Math.ceil(height / (width / maxWidth));
                if (dim.height > maxHeight){
                    dim.height = maxHeight;
                    dim.width = Math.ceil(width / (height / maxHeight));
                }
            }
            else {
                dim.height = maxHeight;
                dim.width = Math.ceil(width / (height / maxHeight));
                if (dim.width > maxWidth){
                    dim.width = maxWidth;
                    dim.height = Math.ceil(height / (width / maxWidth));
                }
            }
            return dim;
        }
    },
    Constants: {
        Months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
        MaxThumbWidth: 54,
        MaxThumbHeight: 40,
        SideBarMaxThumbWidth: 28,
        SideBarMaxThumbHeight: 22,
        SideBarThumbMargin: 3,
        ThumbMargin: 5,
        ThumbBorderWidth: 1,
        ThumbPaddingWidth: 2,
        OverlayMaxPhotoWidth: 394,
        OverlayMaxPhotoHeight: 264,
        OverlayMaxVideoWidth: 394,
        OverlayMaxVideoHeight: 296,
        MaxPhotoWidth: 227,
        MaxPhotoHeight: 227,
        MaxBlogPhotoWidth: 158,
        SideBarMaxVideoWidth: 87,
        SideBarMaxVideoHeight: 65
    },
    Blog: {
        getDay: function(day_id, options) {
            var url = "getDayPoints.asp?rand=" + Data.Utils.getRandom();

            options = options || {};
            var params = { day_id: day_id };
            Data.Utils.mergeObjects(params, options);

            new Ajax.Request(url, {
                method: 'post',
                parameters: params,
                onSuccess: function(transport) {
                    var response = transport.responseJSON;
                    var dayBlog = transport.responseJSON.dayBlog;
                    if (dayBlog) {
                        //document.fire("update:editor", { content: dayBlog.content });
                        //UI.Blog.display(response);
                    }
                    if (response.points) {
                        //var points = transport.responseJSON.points;
                        //addPoints(response);
                    }

                    if (!options.overlayOnly) {
                        document.fire("blogContent:update", { data: response });
                        if (options.map)
                            document.fire("mapPoints:update", { data: response });
                    }

                }
            });

        }
    },
    Communities: {
        getDay: function(day_id, options) {
            var url = "getCommunities.asp?rand=" + Data.Utils.getRandom();

            options = options || {};

            new Ajax.Request(url, {
                method: 'post',
                parameters: { day_id: day_id },
                onSuccess: function(transport) {
                    var response = transport.responseJSON;
                    
                    document.fire("communities:update", { data: response, options: options });
                }
            });    
        }
    },
    Media: {
        DefaultBlogImage: {
            URL: "images/home/large_pictures/Image_of_the_Day.jpg",
            thumbURL: "images/home/large_pictures/Image_of_the_Day.jpg",
            fullURL: "images/home/large_pictures/Image_of_the_Day.jpg",
            width: 227,
            height: 170
        },
        init: function(){
            Element.observe(document, "media:updateRequired", onMediaUpdateRequired);
            function onMediaUpdateRequired(e){
                Data.Media.getDay(e.memo.day_id);
            }
        },        
        getDay: function(day_id, options) {
            var url = "getMedia.asp?rand=" + Data.Utils.getRandom();

            options = options || {};

            new Ajax.Request(url, {
                method: 'post',
                parameters: { day_id: day_id, searchType: '' },
                onSuccess: function(transport) {
                    var response = transport.responseJSON;
                    
                    //if (photos) {
                    //UI.Photos.display(response);
                    //UI.Photos = new PhotosUI(response);
                    //}
                    //alert(!options.overlayOnly);
                    //if (!options.overlayOnly){
                    if (response.videos)
                        response.videos.day_id = day_id;
                    Data.Media.landscapePrioritize(response.photos);
                    Data.Media.setPhotoProperty(response.videos.dayVideos, false);
                    Data.Media.setPhotoProperty(response.videos.weekVideos, false);
                    Data.Media.setPhotoProperty(response.photos, true);
                    
                    document.fire("media:update", { data: response, options: options });
                    setTimeout(function(){ document.fire("tab:init"); }, 500);
                    
                    //}
                    //document.fire("overlayPhotos:update", { data: response });
                }
            });
        },
        setPhotoProperty: function(arr, bool){
            arr.each(function(media){
                media.isPhoto = bool;
            });
        },
        landscapePrioritize: function(mediaArr){
            // if first image is a portrait, then swap it with first landscape
            if (!mediaArr || mediaArr.length == 0) return;
            
            var first = mediaArr[0];
            if (parseInt(first.height) > parseInt(first.width)){
                for (var i = 1; i < mediaArr.length; i++){
                    if (parseInt(mediaArr[i].width) >= parseInt(mediaArr[i].height)){
                        var current = mediaArr[i];
                        mediaArr[i] = first;
                        mediaArr[0] = current;
                        return mediaArr;
                    }                        
                }
            }
            return mediaArr;
        }        
    },
    Videos: {
        getDay: function(day_id, options) {
            var url = "getMedia.asp?rand=" + Data.Utils.getRandom();

            options = options || {};

            new Ajax.Request(url, {
                method: 'post',
                parameters: { day_id: day_id, searchType: 'video' },
                onSuccess: function(transport) {
                    var response = transport.responseJSON;
                    var photos = transport.responseJSON.photos;
                    document.fire("media:update", { data: response, options: options });
                    setTimeout(function(){ document.fire("tab:init"); }, 500);

                }
            });
        }
    }
};

var UI = {
    Elements: {
        selectValue: function(selectionBox, value) {
            var sel = $(selectionBox);
            // change selection
            for (var i = 0; i < sel.options.length; i++) {
                if (sel.options[i].value == value) {
                    sel.selectedIndex = i;
                    break;
                }
            }
        },
        hasSelectionValue: function(selectionBox, value){
            var sel = $(selectionBox);            
            for (var i = 0; i < sel.options.length; i++) {
                if (sel.options[i].value == value) {
                    return true;
                }
            }
            return false;
        },
        // PROTOTYPE JS 1.6.1 setStyle does not work properly in IE8
        setStyle: function(element, styles) {
          element = $(element);
          var elementStyle = element.style, match;
          if (Object.isString(styles)) {
            element.style.cssText += ';' + styles;
            return styles.include('opacity') ?
              element.setOpacity(styles.match(/opacity:\s*(\d?\.?\d*)/)[1]) : element;
          }
          for (var property in styles) {
            if (property == 'opacity') {
              element.setOpacity(styles[property]);
            } else if (property == 'width') {
              element.style.cssText += '; width: ' + styles[property] + ';'
            } else {
              elementStyle[(property == 'float' || property == 'cssFloat') ?
                (Object.isUndefined(elementStyle.styleFloat) ? 'cssFloat' : 'styleFloat') :
                  property] = styles[property];
            }
          }
          return element;
        }        
    },
    Utils: {
        addToContainer: function(element, container) {
            Element.cleanWhitespace($(container));
            if (container.innerHTML == "") {
                container.appendChild(element);
            }
            else {
                var lastElement = $(container).lastChild;
                Element.insert($(lastElement), { after: element });
            }
        }
    }
};


var SideBarVideosUI = Class.create({
    initialize: function(containerID, options) {
        this.container = $(containerID);
        this.containerID = containerID;
        var sidebarUI = this;
        this.numColumns = 2;
        this.type = options.type;  // 'dayVideos' or 'weekVideos'
        this.tabIndex = options.tabIndex;
        this.parentContainerID = options.parentContainerID;

        Element.observe(document, "mediaUpdateListener:disable", this.disableEventListener.bindAsEventListener(this));
        Element.observe(document, "mediaUpdateListener:enable", this.enableEventListener.bindAsEventListener(this));
        
        this.enableEventListener();
    },
    disableEventListener: function(){
        Event.stopObserving(document, "media:update", this.boundOnMediaUpdate);
    },
    enableEventListener: function(){
        this.boundOnMediaUpdate = onVideosUpdate.bindAsEventListener(this);
        Element.observe(document, "media:update", this.boundOnMediaUpdate);
        var sidebarUI = this;
        function onVideosUpdate(e) {
            sidebarUI.videos = e.memo.data.videos;
            sidebarUI.day_id = e.memo.data.day_id;
            //if (sidebarUI.videos[this.type].length > 0)
            sidebarUI.display();
            //sidebarUI.toggleDisplay();
        }
    },
    display: function() {
        var sidebarUI = this;
        var tr, td;
        sidebarUI.container.update("");

        var paddingWidth = Data.Constants.ThumbPaddingWidth;

        this.videos[this.type].each(function(video, index) {
            if (index % sidebarUI.numColumns == 0) {
                tr = new Element("tr");
                UI.Utils.addToContainer(tr, sidebarUI.container);
            }
            td = new Element("td");

            var dim = Data.Utils.getThumbDimensions(video.width, video.height, Data.Constants.SideBarMaxVideoWidth, Data.Constants.SideBarMaxVideoHeight);
            var photoImg = new Element("img", { src: video.thumbURL, width: dim.width, height: dim.height });

            UI.Elements.setStyle(photoImg, { "float": "left" });
            UI.Elements.setStyle(photoImg, { paddingLeft: Math.ceil((Data.Constants.SideBarMaxVideoWidth + paddingWidth * 2 - dim.width) / 2) + "px", paddingRight: Math.floor((Data.Constants.SideBarMaxVideoWidth + paddingWidth * 2 - dim.width) / 2) + "px" });
            UI.Elements.setStyle(photoImg, { paddingTop: Math.ceil((Data.Constants.SideBarMaxVideoHeight + paddingWidth * 2 - dim.height) / 2) + "px", paddingBottom: Math.floor((Data.Constants.SideBarMaxVideoHeight + paddingWidth * 2 - dim.height) / 2) + "px" });

            photoImg.addClassName('photogold');

            var link = new Element("a", { href: '#', id: sidebarUI.container.id + '-link-' + index });
            link.observe('click', function() {
                //alert(sidebarUI.day_id);
                UI.Overlay.display(sidebarUI.day_id, index, sidebarUI.tabIndex); 
                return false;
            });

            link.update(photoImg);

            UI.Utils.addToContainer(link, td);
            UI.Utils.addToContainer(td, tr);
        });
    },
    hide: function(){
        //$('ExampleA').childElements()[this.tabIndex].hide();
        if ($(this.parentContainerID))
            $(this.parentContainerID).hide();
        else {                                    
            $('ExampleA').childElements()[this.tabIndex].hide();            
            $($('ExampleA').childElements()[this.tabIndex].readAttribute('rel')).hide();            
        }
    },
    show: function(){    
        if (this.parentContainerID)
            $(this.parentContainerID).show();
        else {
            $('ExampleA').childElements()[this.tabIndex].show();
            //$($('ExampleA').childElements()[this.tabIndex].readAttribute('rel')).show();
        }
    },
    toggleDisplay: function(){
        if (this.videos[this.type].length > 0)
            this.show();
        else 
            this.hide();
    },
    hasContent: function(){
        return this.videos[this.type].length > 0;
    },
    isVisible: function(){
        if (this.alwaysVisible) 
            return true;
        if (this.parentContainerID)
            $(this.parentContainerID).visible();
        else
            return $($('ExampleA').childElements()[this.tabIndex].readAttribute('rel')).visible();
    }
});


var SideBarPhotosUI = Class.create({
    initialize: function(container, options) {
        //this.photos = container.photos;
        this.container = container;
        this.numColumns = 5;
        //this.day_id = container.day_id;
        var sidebarUI = this;
        this.tabIndex = options.tabIndex;
        
        Element.observe(document, "mediaUpdateListener:disable", this.disableEventListener.bindAsEventListener(this));
        Element.observe(document, "mediaUpdateListener:enable", this.enableEventListener.bindAsEventListener(this));
        this.enableEventListener();
    },
    disableEventListener: function(){
        Event.stopObserving(document, "media:update", this.boundOnMediaUpdate);
    },
    enableEventListener: function(){
        this.boundOnMediaUpdate = onMediaUpdate.bindAsEventListener(this);
        Element.observe(document, "media:update", this.boundOnMediaUpdate);
        var sidebarUI = this;
        function onMediaUpdate(e) {
            sidebarUI.photos = e.memo.data.photos;
            sidebarUI.day_id = e.memo.data.day_id;

            //$('dayNumOverlayContainer').update(sidebarUI.day_id);

            var photo = sidebarUI.photos[0] || Data.Media.DefaultBlogImage;
            var photoImg = new Element("img", { src: photo.URL, width: Data.Constants.MaxBlogPhotoWidth, height: Math.ceil(photo.height / (photo.width / Data.Constants.MaxBlogPhotoWidth)) });
            photoImg.addClassName('photomain');
            $('blogPhotoContainer').update(photoImg);
            
            sidebarUI.display();
            //sidebarUI.toggleDisplay();
        }
    },
    display: function() {
        var sidebarUI = this;
        var tr, td;
        sidebarUI.container.update("");

        var paddingWidth = Data.Constants.ThumbPaddingWidth;

        this.photos.each(function(photo, index) {
            if (index % sidebarUI.numColumns == 0) {
                tr = new Element("tr");
                UI.Utils.addToContainer(tr, sidebarUI.container);
            }
            td = new Element("td");

            var dim = Data.Utils.getThumbDimensions(photo.width, photo.height, Data.Constants.SideBarMaxThumbWidth, Data.Constants.SideBarMaxThumbHeight);
            var photoImg = new Element("img", { src: photo.thumbURL, width: dim.width, height: dim.height });

            UI.Elements.setStyle(photoImg, { "float": "left" });
            UI.Elements.setStyle(photoImg, { paddingLeft: Math.ceil((Data.Constants.SideBarMaxThumbWidth + paddingWidth * 2 - dim.width) / 2) + "px", paddingRight: Math.floor((Data.Constants.SideBarMaxThumbWidth + paddingWidth * 2 - dim.width) / 2) + "px" });
            UI.Elements.setStyle(photoImg, { paddingTop: Math.ceil((Data.Constants.SideBarMaxThumbHeight + paddingWidth * 2 - dim.height) / 2) + "px", paddingBottom: Math.floor((Data.Constants.SideBarMaxThumbHeight + paddingWidth * 2 - dim.height) / 2) + "px" });

            photoImg.addClassName('photo');

            var link = new Element("a", { href: '#', id: sidebarUI.container.id + '-link-' + index });
            link.observe('click', function() {
                UI.Overlay.display(sidebarUI.day_id, index, 0); 
                return false;
            });

            link.update(photoImg);

            UI.Utils.addToContainer(link, td);
            UI.Utils.addToContainer(td, tr);
        });
    },
    hide: function(){
        //UI.SideBarTabs.cycleit("next");
        $('ExampleA').childElements()[this.tabIndex].hide();
        $($('ExampleA').childElements()[this.tabIndex].readAttribute('rel')).hide();
        //alert("hide");
    },
    show: function(){    
        $('ExampleA').childElements()[this.tabIndex].show();
        //$($('ExampleA').childElements()[this.tabIndex].readAttribute('rel')).show();
    },
    toggleDisplay: function(){
        if (this.photos.length > 0)
            this.show();
        else {
            this.hide();
        }
    },
    hasContent: function(){
        return this.photos.length > 0;
    },
    isVisible: function(){
        if (this.alwaysVisible) 
            return true;
        else
            return $($('ExampleA').childElements()[this.tabIndex].readAttribute('rel')).visible();
    }
});

var TabManager = Class.create({
    initialize: function(dynamicTabs, tabs, parentContainerClass){
        this.dynamicTabs = dynamicTabs;
        this.tabs = tabs;
        this.parentContainerClass = parentContainerClass;
        Element.observe(document, "tab:init", this.init.bindAsEventListener(this));
        this.selectedTab = 0;
    },
    init: function(){
        var tabManager = this;
        var tabs = this.tabs;
        var selectedTabVisible = false;
        // new exception:  always show Photo and Video Tab - check .alwaysVisible property
        for (var i = 0; i < tabs.length; i++){
            //alert("tab " + i + " hasContent: " + tabs[i].hasContent());
            if (!tabs[i].hasContent() && !tabs[i].alwaysVisible){                
                tabs[i].hide();
            }
            else {
                if (tabs[i].isVisible()){
                    selectedTabVisible = true;
                }
                tabs[i].show();
            }                
        }        
        
        if (selectedTabVisible) { return; }  // selected tab is already visible, do nothing
        
        for (var i = 0; i < tabs.length; i++){
            if (tabs[i].hasContent() && tabs[i].isVisible()){
                //alert("TAB " + i + " hasContent and visible");
                if (this.dynamicTabs)
                    this.dynamicTabs.expandit(i);
                //expandDone = true;
                //alert("toggle");
                toggleDisplay();
                return;  // tab with content already chosen, no need to initialize
            }
            //else tabs[i].hide();
        }
        /*
        if (expandDone) { 
            toggleDisplay();
            return;
        }*/
        for (var i = 0; i < tabs.length; i++){
            if (tabs[i].hasContent() && !tabs[i].isVisible()){
                //alert("TAB " + i + " expanding");
                if (this.dynamicTabs)
                    this.dynamicTabs.expandit(i);
                toggleDisplay();
                return;
            }
            //else tabs[i].hide();
        }
        
        
        toggleDisplay();
                
        function toggleDisplay(){            
            if (tabManager.parentContainerClass && tabs.any(function(tab){ return tab.isVisible(); }))
                $$(tabManager.parentContainerClass).each(function(container){ container.show(); });                
            else
                $$(tabManager.parentContainerClass).each(function(container){ container.hide(); });
        }
    }
});

var VideoTabUI = Class.create({
    initialize: function(selectBox, options) {
        this.selection = $(selectBox);
        var tabUI = this;
        this.updateEvent = options.updateEvent;
        this.type = options.type;  // 'dayVideos' or 'weekVideos'
        this.mediaContainer = $(options.mediaContainerID);
        this.containerID = options.mediaContainerID;
        this.tab = $(options.tabID);
        this.tabIndex = options.tabIndex;
        this.alwaysVisible = options.alwaysVisible;
        this.currentVideo;
        this.hasFlash = true;

        
        Element.observe(document, 'media:update', onMediaUpdate.bindAsEventListener(this));
        function onMediaUpdate(e){
            tabUI.videos = e.memo.data.videos;
            tabUI.day_id = e.memo.data.day_id;
            var startIndex = 0;
            if (e.memo.options && e.memo.options[tabUI.type])
                startIndex = e.memo.options[tabUI.type].startIndex || 0;
            tabUI.displayVideo(startIndex);
            tabUI.updateThumbs();
            //tabUI.toggleDisplay();
        }
        
        //Element.observe(document, options.updateEvent, onVideoUpdate.bindAsEventListener(this));
        function onVideoUpdate(e) {
            var index = e.memo.data.index
            tabUI.displayVideo(index);
        }

    },
    getDayID: function(){
        return this.selection.value;
    },
    pauseFlash: function(){
        //alert('overlayFlashContainer'+this.type);
        var flashPlayer = $('player'+this.type);
        if (flashPlayer && flashPlayer.sendEvent){
            flashPlayer.sendEvent("PLAY", false);
        }        
    },
    createFlash: function(video){
        //$(this.containerID).update("");
        if (!$('overlayFlashContainer-'+this.type)) return;
        $('overlayFlashContainer-'+this.type).update("");
        
        var flashvars = {};
        flashvars.file = video.URL;
        flashvars.id = 'player' + this.type;
        flashvars.autostart = 'false';
        flashvars.dock = 'true';
        //flashvars.plugins = 'captions';
        //flashvars['captions.file'] = 'testplayer/captions.xml';
        flashvars.skin = 'testplayer/rbcskin.swf';


        var params = {};
        params.allowfullscreen = 'true';
        params.allowscriptaccess = 'always';
        params.enablejavascript="true";


        var attributes = {};
        attributes.id = 'player' + this.type;
        attributes.name = 'player' + this.type;
        attributes.styleclass = 'player';
        
        
        swfobject.embedSWF('testplayer/player-licensed.swf', 'overlayFlashContainer-'+this.type, Data.Constants.OverlayMaxVideoWidth, Data.Constants.OverlayMaxVideoHeight, '9.0.124', 'testplayer/expressInstall.swf', flashvars, params, attributes);
        //swfobject.embedSWF('http://rbcotren.cment.net/testplayer/webf.flv', 'overlayFlashContainer-'+this.type, Data.Constants.OverlayMaxVideoWidth, Data.Constants.OverlayMaxVideoHeight, '9.0.124', 'testplayer/expressInstall.swf', flashvars, params, attributes);
        
    },
    updateThumbs: function(){
        var thumbContainer = $('overlayThumbs-'+this.type);        
        thumbContainer.update('');
        var tabUI = this;

        if (this.videos[this.type].length < 2) return;

        var imgWidth = Data.Constants.MaxThumbWidth;
        var imgHeight = Data.Constants.MaxPhotoHeight;
        var imgMargin = Data.Constants.ThumbMargin;
        var borderWidth = Data.Constants.ThumbBorderWidth;
        var paddingWidth = Data.Constants.ThumbPaddingWidth;
        var borderAndPadding = borderWidth + paddingWidth;

        this.videos[this.type].each(function(video, index){
            var dim = Data.Utils.getThumbDimensions(video.width, video.height, Data.Constants.MaxThumbWidth, Data.Constants.MaxThumbHeight);
            var photoImg = new Element("img", { src: video.thumbURL, width: dim.width, height: dim.height });
            UI.Elements.setStyle(photoImg, { "float": "left" });
            UI.Elements.setStyle(photoImg, { paddingLeft: Math.ceil((Data.Constants.MaxThumbWidth + paddingWidth * 2 - dim.width) / 2) + "px", paddingRight: Math.floor((Data.Constants.MaxThumbWidth + paddingWidth * 2 - dim.width) / 2) + "px" });
            UI.Elements.setStyle(photoImg, { paddingTop: Math.ceil((Data.Constants.MaxThumbHeight + paddingWidth * 2 - dim.height) / 2) + "px", paddingBottom: Math.floor((Data.Constants.MaxThumbHeight + paddingWidth * 2 - dim.height) / 2) + "px" });

            photoImg.addClassName('photo');
            
            var link = new Element("a", { href: '#', id: 'overlayThumbs-link-' + index });
            link.observe('click', function() {
                tabUI.displayVideo(index);
                return false;
            });
            
            link.update(photoImg);

            UI.Utils.addToContainer(link, thumbContainer);
        });

    },
    getVideo: function(index){
        return this.videos[this.type][index];        
    },
    display: function(day_id, index) {
        //alert(this.videos.day_id + " " + day_id  + " " +  index);
        if (!day_id) return;
        
        if (this.day_id != day_id) {
            this.selectDay(day_id, { startIndex: index });
        }
        else {
            this.displayVideo(index);
        }
        UI.Elements.selectValue(this.selection, day_id);
        this.updateViewBlogLink();
        //overlayViewTitle
    },
    getTitle: function(){
        var titleType = "";
        if (this.type == "dayVideos") titleType = "Videos";
        if (this.type == "weekVideos") titleType = "Weekly Videos";
        return titleType;
    },
    updateViewBlogLink: function(){
        $('viewBlogLink').href = Data.URL.Blog + "?day=" + this.selection.value;        
    },
    displayVideo: function(index) {    
        index = index || 0;
        var tabUI = this;
        var video = this.getVideo(index);
        //alert(this.day_id);
        //alert(index); //
        if (!video) return;
        if (this.currentVideo == video) return;

        var flashPlayer = $('player' + this.type);        
        //if (flashPlayer)flashPlayer.sendEvent("STOP");
        if (flashPlayer && flashPlayer.sendEvent){
            flashPlayer.sendEvent("STOP");
            flashPlayer.sendEvent("LOAD", { file: video.URL });
        }
        
        if ($('overlayFlashContainer-'+this.type) && !flashPlayer){
            $('overlayFlashContainer-'+this.type).update("");
            setTimeout(function() { tabUI.createFlash(video); }, 200);
        }

        if (!$('overlayTitle-'+this.type)) return;
        //alert(index + " " + video.width);
        //var dim = Data.Utils.getThumbDimensions(video.width, video.height, Data.Constants.OverlayMaxVideoWidth, Data.Constants.OverlayMaxVideoHeight);
        //var photoImg = new Element("img", { src: video.URL, width: dim.width, height: dim.height });
        //photoImg.addClassName('photomain2');
        //this.photoContainer.update(photoImg);

        

        this.currentVideo = video;
        $('overlayTitle-'+this.type).update(video.title);        
    },
    selectDay: function(day_id, options) {
        if (day_id && this.selection.value != day_id)
            UI.Elements.selectValue(this.selection, day_id);
        options = options || {};
        Data.Media.getDay(this.selection.value, options);
    },
    hide: function(){
        $('ExampleI').childElements()[this.tabIndex].hide();
        $($('ExampleI').childElements()[this.tabIndex].readAttribute('rel')).hide();
    },
    show: function(){    
        $('ExampleI').childElements()[this.tabIndex].show();
        //$($('ExampleI').childElements()[this.tabIndex].readAttribute('rel')).show();
    },
    toggleDisplay: function(){    
        if (this.videos[this.type].length > 0)
            this.show();
        else 
            this.hide();
    },
    hasContent: function(){
        return this.videos[this.type].length > 0;
    },
    isVisible: function(){
        if (this.alwaysVisible) 
            return true;
        else
            return $($('ExampleI').childElements()[this.tabIndex].readAttribute('rel')).visible();
    }
});



var PhotoTabUI = Class.create({
    initialize: function(selectBox, options) {
        this.selection = $(selectBox) || $('daySelectO1');
        options = options || {};
        if (options.sliderID) {
            this.PhotoSlider = new SliderUI(options.sliderID, null, options.tabIndex);
        }
        this.alwaysVisible = options.alwaysVisible;
        this.tabIndex = options.tabIndex;
        this.mediaContainer = $(options.mediaContainerID);
        this.tab = $(options.tabID);

        var photoTabUI = this;

        Element.observe(document, 'photo:update', onPhotoUpdate.bindAsEventListener(this));
        function onPhotoUpdate(e) {
            var photoIndex = e.memo.data.photoIndex;
            photoTabUI.displayPhoto(photoIndex);
            //photoTabUI.toggleDisplay();
        }
    },
    display: function(day_id, photoIndex) {
        if (!day_id) return;

        if (this.PhotoSlider.day_id != day_id) {
            //alert("Select day: " + day_id + " photoIndex: " + photoIndex);
            this.selectDay(day_id, { startIndex: photoIndex });
        }
        else {
            //alert("Display day: " + day_id + " photoIndex: " + photoIndex);
            if (!this.PhotoSlider.isInView(photoIndex))
                this.PhotoSlider.scrollToIndex(photoIndex);
            this.displayPhoto(photoIndex);
        }
        UI.Elements.selectValue(this.selection, day_id);
        this.updateViewBlogLink();        
    },
    getDayID: function(){
        return this.selection.value;
    },    
    getTitle: function(){
        return "Photos";
    },    
    updateViewBlogLink: function(){
        $('viewBlogLink').href = Data.URL.Blog + "?day=" + this.selection.value;        
    },
    displayPhoto: function(photoIndex) {
        var photo = this.PhotoSlider.getPhoto(photoIndex);
        var tabUI = this;
    
        if (!photo) return;

        var dim = Data.Utils.getThumbDimensions(photo.width, photo.height, Data.Constants.OverlayMaxPhotoWidth, Data.Constants.OverlayMaxPhotoHeight);
        var photoImg = new Element("img", { src: photo.fullURL, width: dim.width, height: dim.height });
        photoImg.addClassName('photomain2');
        $('bigOverlayPhoto').src = photo.fullURL;
        initBigPhoto(photoIndex)        

        photoImg.observe('mouseover', function(){ 
            $('bigOverlayPhoto').src = photo.fullURL;
            if (tabUI.bigImageTimer)
                clearTimeout(tabUI.bigImageTimer);
            showBigImage(photoIndex);    
            //tabUI.bigImageTimer = setTimeout(function(){ showBigImage(photoIndex);}, 100);
        });

        //var div = new Element('div');
        
        var link = new Element('a', { href: '#' });
        link.onclick = function() { return false; }
        link.update(photoImg);
        //div.update(link);
        this.mediaContainer.update(link);
        
        $('overlayPhotoTitle').update(photo.title);
    },
    getMainTitle: function(){
        
    },
    selectDay: function(day_id, options) {
        if (day_id && this.selection.value != day_id)
            UI.Elements.selectValue(this.selection, day_id);
        options = options || {};
        Data.Media.getDay(this.selection.value, options);
    },
    hide: function(){
        $('ExampleI').childElements()[this.tabIndex].hide();
        $($('ExampleI').childElements()[this.tabIndex].readAttribute('rel')).hide();
    },
    show: function(){    
        $('ExampleI').childElements()[this.tabIndex].show();
        //$($('ExampleI').childElements()[this.tabIndex].readAttribute('rel')).show();
    },
    toggleDisplay: function(){
        if (this.PhotoSlider && this.PhotoSlider.hasPhotos())
            this.show();
        else 
            this.hide();
    },
    hasContent: function(){
        return this.PhotoSlider && this.PhotoSlider.hasPhotos();
    },
    isVisible: function(){
        if (this.alwaysVisible) 
            return true;
        else
            return $($('ExampleI').childElements()[this.tabIndex].readAttribute('rel')).visible();
    }
});


var OverlayUI = Class.create({
    initialize: function(tabs, params) {
        this.tabs = tabs;
        this.dynamicTabs = params.dynamicTabs;
        this.TabManager = params.tabManager;
        this.isVisible = false;
        var overlayUI = this;
        
        /*
        Element.observe($('ExampleI').childElements()[this.tabIndex], 'click', onTabClick.bindAsEventListener(this));
        function onTabClick(e){
            // keep last index
        }
        */

        function onTabClick(e, index) {
            // This section stops flash / closes calendar when there is a tab change
            tabs.each(function(tabUI){
                if (tabUI.hasFlash)
                    tabUI.pauseFlash();
                overlayUI.updateOverlayTitle(index);
                if (UI.Calendar) UI.Calendar.close();
            }); 

            // This section changes the selected day on tab change.
            // If day does not exist, it chooses the latest day
            var prevDayID = tabs[overlayUI.lastTabIndex].selection.value;                
            if (overlayUI.lastTabIndex != index && tabs[index].selection.value != prevDayID){
                var day_id;

                // select day
                if (UI.Elements.hasSelectionValue(tabs[index].selection, prevDayID)){
                    day_id = prevDayID;
                    overlayUI.display(day_id, 0, index);
                    //UI.Elements.selectValue(tabs[index].selection, day_id);
                }
                else {
                    tabs[index].selection.selectedIndex = tabs[index].selection.options.length - 1;
                    day_id = tabs[index].selection.value;
                    document.fire("media:updateRequired", { day_id: day_id }); 
                }
                
                overlayUI.lastTabIndex = index;
            }                               
        }
        $('ExampleI').childElements().each(function(tabElement, index){
            tabElement.observe('click', onTabClick.bindAsEventListener(overlayUI, index));
        });

        
    },
    display: function(day_id, itemIndex, startTabIndex) {
        if (!this.isVisible)
            this.showOverlay();
        var tabs = this.tabs;
        var dynamicTabs = this.dynamicTabs;
        var overlay = this;
        
        if (!day_id){
            itemIndex = 0;
            startTabIndex = 0;
            day_id = tabs[0].selection.options[tabs[0].selection.options.length - 1].value;
        }
    
        this.lastTabIndex = startTabIndex || 0;
        
        //alert("display");
        
        this.tabs.each(function(tab, index) {
            if (index == startTabIndex) {
                tabs[index].display(day_id, itemIndex);
                // and show tab
                dynamicTabs.expandit(index);
                overlay.updateOverlayTitle(index);
            }
            else {
                //tabs[index].display(day_id, 0);
            }
        });

        //alert(day_id + " " + this.PhotoSlider.day_id + " " + photoIndex);
    },
    updateOverlayTitle: function(index){        
        var title = this.tabs[index].getTitle();        
        if (this.tabs[index].getDayID() == 0){
            $('overlayViewTitle').update("Ancient Olympia, Greece: " + title);
        }
        else
            $('overlayViewTitle').update("Day "+this.tabs[index].selection.value+": " + title);
    },/*
    displayPhoto: function(photoIndex) {
        var photo = this.PhotoSlider.getPhoto(photoIndex);
        var dim = Data.Utils.getThumbDimensions(photo.width, photo.height, Data.Constants.OverlayMaxPhotoWidth, Data.Constants.OverlayMaxPhotoHeight);
        var photoImg = new Element("img", { src: photo.thumbURL, width: dim.width, height: dim.height });
        photoImg.addClassName('photomain2');
        $('overlayPhotoContainer').update(photoImg);
    },*/
    showOverlay: function() {
        if ($('daySelect')) 
            UI.Elements.setStyle($('daySelect'), { visibility: "hidden"});// necessary for ie6
        document.fire("mediaUpdateListener:disable");
        UI.Calendar.close();
        //UI.PhotoSlider.disablePhotoListener(); // disable event for main photo slider
        var height = Element.getHeight(document.getElementsByTagName("body")[0]);
        UI.Elements.setStyle($('one'), { height: height + 60 + 'px' });
        MM_showHideLayers('one', '', 'show', 'two', '', 'show');
        this.isVisible = true;
    },
    hideOverlay: function() {
        if ($('daySelect')) 
            UI.Elements.setStyle($('daySelect'), { visibility: "visible"})
        UI.Calendar.close();
        MM_showHideLayers('one', '', 'hide', 'two', '', 'hide');
        document.fire("mediaUpdateListener:enable");

        if (this.tabs[1]) this.tabs[1].pauseFlash();
        if (this.tabs[2]) this.tabs[2].pauseFlash();
        //UI.PhotoSlider.enablePhotoListener();
        this.isVisible = false;
    },
    hide: function() {
        this.hideOverlay();
    },
    viewBlog: function(){
        
        //UI.Blog.selectDay(this.tabs[0].selection.value);  // should fire event to decouple overlay from blog
    }
});

function writeLog(msg) {
    UI.Utils.addToContainer((new Element("div")).update(msg), $('errorLog'));
}


var IntroBlogUI = Class.create({
    initialize: function(container) {

        var blogUI = this;

        Element.observe(document, 'blogContent:update', display.bindAsEventListener(this));
        function display(e) {
            blogUI.display(e.memo.data);
        }

        /*
        Element.observe(document, 'media:update', displayVideoLink.bindAsEventListener(this));
        Element.observe(document, 'photo:update', onPhotoUpdate.bindAsEventListener(this));

        
        function onPhotoUpdate(e){
            blogUI.displayPhoto(0)
        }        
                
        function displayVideoLink(e){
            blogUI.displayVideoLink(e.memo.data);
        }
        */
        
        
        Element.observe(document, "mediaUpdateListener:disable", this.disableEventListener.bindAsEventListener(this));
        Element.observe(document, "mediaUpdateListener:enable", this.enableEventListener.bindAsEventListener(this));
        
        this.enableEventListener();
    },
    disableEventListener: function(){
        Event.stopObserving(document, "media:update", this.boundOnMediaUpdate);
        Event.stopObserving(document, "photo:update", this.boundOnPhotoUpdate);
    },
    enableEventListener: function(){
        this.boundOnMediaUpdate = onMediaUpdate.bindAsEventListener(this);
        Element.observe(document, "media:update", this.boundOnMediaUpdate);

        this.boundOnPhotoUpdate = onPhotoUpdate.bindAsEventListener(this);
        Element.observe(document, "photo:update", this.boundOnPhotoUpdate);

        var blogUI = this;

        function onPhotoUpdate(e){
            blogUI.displayPhoto(0)
        }        
        function onMediaUpdate(e){
            blogUI.displayVideoLink(e.memo.data);
        }
    },
    displayVideoLink: function(data){        
        $('viewVideosLink').observe('click', function(){ 
            if (data.videos.dayVideos.length > 0){
                UI.Overlay.display(data.day_id,0,1); 
            }
            else if (data.videos.weekVideos.length > 0){
                UI.Overlay.display(data.day_id,0,2); 
            }
        });
        if (data.videos.dayVideos.length > 0 || data.videos.weekVideos.length > 0)
            $('viewVideosLinkContainer').show();    
    },
    display: function(data) {
        this.day_id = data.day_id;
        var blog = data.dayBlog;
        var points = data.points;
        blog.date = new Date(blog.date);

        if (data.day_id == 0){
            $('highlightsDay').update("<strong>Thursday, October 22, 2009</strong>");
            $("highlightsLocation").update("<strong>Ancient Olympia, Greece</strong>");

            $('dayTitle').update("Highlights from Olympic Flame Lighting");
        
        }
        else {
            $('highlightsDay').update("<strong>Day " + data.day_id + " - " + Data.Utils.getFormattedDate(blog.date) + "</strong>");
            $("highlightsLocation").update("<strong>" + blog.title_en + "</strong>");

        var link = '<a href="'+Data.URL.Blog+'">Highlights for Day ' + data.day_id + '</a>';
        $('dayTitle').update(link);
            //$('dayTitle').update("Highlights for Day "+ data.day_id);
        }

        //latestMedia link
        var latestMediaLink = new Element('a', { href: '#' });                
        latestMediaLink.addClassName('linkedtextandicon');
        latestMediaLink.update((new Element('span')).update("View Photos & Videos"));        
        latestMediaLink.onclick = function() { UI.Overlay.display(); return false; }
        $('latestMedia').update(latestMediaLink);

        $$('.dayNum').each(function(dayNum) { dayNum.update(data.day_id); });

        if (blog.content) {
            var content = blog.content;

            // remove tags
            content = content.replace(/\<([/]?)([^\>\s]+)([^>]*)(>)/gi, function(match, $1, $2, $3){
                return "";
            });
            
            var html;
            //html  = '&nbsp;&nbsp;<nobr><img src="uos/_assets/images/layout/bullet-link.gif" alt="" border="0" class="bullet" /> <a id="readMore" href="'+Data.URL.Blog+'">Read more</a></nobr>';
            //html += '<span>&nbsp;<!--img src="images/divider-dash-vertical.gif" width="1" height="15" align="absbottom" /-->&nbsp;<img src="uos/_assets/images/layout/bullet-link.gif" alt="" border="0" class="bullet" /> <a href="#" onclick="UI.Overlay.display('+data.day_id+',0,1);" style="font-size:11px">View Videos</a></span>';
            //+Data.URL.Blog+'?day='+data.day_id+'
            $('readMore').href = Data.URL.Blog;  //+'?day='+data.day_id;
            $('readMore').show();
            $('blogContent').update(content);
        }
    },
    displayPhoto: function(index) {
        var blog = this;
        var photo = UI.PhotoSlider.getPhoto(index) || Data.Media.DefaultBlogImage;
        var link = new Element('a', { href: '#' });
        link.onclick = function() { return false; }
        
        var photoImg = new Element("img", { src: photo.URL, width: Data.Constants.MaxPhotoWidth, height: Math.ceil(photo.height / (photo.width / Data.Constants.MaxPhotoWidth)) });
        photoImg.addClassName('photomain');

        if (photo.URL != Data.Media.DefaultBlogImage.URL){
            photoImg.observe('click', function(){
                UI.Overlay.display(blog.day_id, index, 0); 
            });        
            link.update(photoImg);
            $('mainPhotoContainer').update(link);
        }
        else
            $('mainPhotoContainer').update(photoImg);

    }
});

var MainBlogUI = Class.create({
    initialize: function(container) {
        this.selection = $('daySelect');
        
        Element.observe(document, 'blogContent:update', display.bindAsEventListener(this));
        Element.observe(document, 'communities:update', displayCommunities.bindAsEventListener(this));
        
        var blogUI = this;
        function display(e){
            blogUI.display(e.memo.data);
        }
        
        function displayCommunities(e){
            blogUI.displayCommunities(e.memo.data);
        }
    },
    displayCommunities: function(data){

        var html = "";
        data.communities.each(function(community, index){            
            html += "<a href='disclaimer.asp?link="+ community.link +"' onclick='return popupNewbrowser(this.href)' title='(opens external website in new window)' target='_blank' class='linkedtextandicon'><span>" + community.location + ", " + community.province + "</span> <img src='uos/_assets/images/icons/externallink.gif' alt='(opens external website in new window)' class='icon' /></a>";
            if (index != data.communities.length - 1)
                html += "<br />";
        });
        $('communityContent').update(html);
        if (data.communities.length > 0){
            $('communityContainer').show();
        }
        else 
            $('communityContainer').hide();
        
    },
    display: function(data) {
        this.day_id = data.day_id;
        var blog = data.dayBlog;
        var points = data.points;
        blog.date = new Date(blog.date);
        
        if (data.day_id == 0){
            $('highlightsDay').update("Thursday, October 22, 2009");
            $('highlightsDayTitle').update("Highlights from Olympic Flame Lighting");
            $("highlightsLocation").update("Ancient Olympia, Greece");
            $("homepagetitle").update("2010 Olympic Torch Relay");

        }
        else {        
            $('highlightsDay').update("Day " + data.day_id + " - " + Data.Utils.getFormattedDate(blog.date));
            $("highlightsLocation").update(points[0].title_en);
            $('highlightsDayTitle').update("Highlights of the Day");

            $$('.dayNum').each(function(dayNum){ dayNum.update(data.day_id); });
            $('homepagetitle').update("Day " + data.day_id + " - 2010 Olympic Torch Relay");
        }

        //alert(blog.date);
        //$('dateContainer').update(Data.Utils.getFormattedDate(blog.date));
        //this.preview.update(blog.content);
        if (blog.content) {
            $('blogContent').update(blog.content);
            $('blogContainer').show();
        }
        else {
            $('blogContainer').hide();
        }
        
        if (blog.teamContent){
            $('teamContainer').show();        
            $('teamContent').update(blog.teamContent);
        }
        else {
            $('teamContainer').hide();
        }        
    },
    selectDayMap: function() {
        Data.Blog.getDay(this.selection.value, { map: true });
        Data.Communities.getDay(this.selection.value);
        Data.Media.getDay(this.selection.value);
    },
    selectDay: function(day_id, options){
        options = options || {};
        if (this.selection.value != day_id || options.init){
            Data.Blog.getDay(day_id, { map: true });
            Data.Media.getDay(day_id);
            Data.Communities.getDay(day_id);
            UI.Elements.selectValue(this.selection, day_id);
        }
    },
    selectPrevDayMap: function() {
        if (this.selection.selectedIndex > 0) {
            this.selection.selectedIndex--;
            this.selectDayMap();
        }
        return false;
    },
    selectNextDayMap: function() {
        if (this.selection.selectedIndex < this.selection.options.length - 1) {
            this.selection.selectedIndex++;
            this.selectDayMap();
        }
        return false;
        //if (this.selection.selectedIndex < this.selection.
    }

});


var SliderUI = Class.create({
    initialize: function(containerID, options, tabIndex) {
        options = options || {};
        this.tabIndex = tabIndex;
        this.scrollDirection = "right";
        
        this.containerID = containerID;
        this.photoIndexLeft = options.startIndex || 0;
        this.numPhotoVisible = options.numPhotoVisible || 5;

        this.loadFirstVideo = options.loadFirstVideo || false;

        this.enablePhotoListener();

        this.slidePhotos = new Array();
        this.toggleSliderButtons();
    },
    hasPhotos: function(){
        return this.slidePhotos.length > 0;
    },
    toggleSliderButtons: function(){
        var btnRight = $(this.containerID).next();
        var btnLeft = $(this.containerID).previous();
        //alert(this.photoIndexLeft);
        if (this.photoIndexLeft < this.numPhotoVisible)
            UI.Elements.setStyle(btnLeft, {visibility: "hidden"});
        else 
            UI.Elements.setStyle(btnLeft, {visibility: "visible"});
        if (this.photoIndexLeft + this.numPhotoVisible >= this.slidePhotos.length)
            UI.Elements.setStyle(btnRight, {visibility: "hidden"});
         else
            UI.Elements.setStyle(btnRight, {visibility: "visible"});
    },
    hideRightButton: function(){
        var btnRight = $(this.containerID).next();
        btn.hide();
    },
    hideLeftButton: function(){
        var btnLeft = $(this.containerID).previous();
        btn.hide();
    },
    getPhoto: function(index) {
        return this.slidePhotos[index];
    },
    setStart: function(index) {
        this.photoIndexLeft = index;
    },
    isInView: function(index) {
        return (index >= this.photoIndexLeft && index < this.photoIndexLeft + this.numPhotoVisible) || // photo in range
               (this.slidePhotos.length - index <= this.numPhotoVisible && this.photoIndexLeft >= this.slidePhotos.length - this.numPhotoVisible); // check if photo is in last scroll range
    },
    enablePhotoListener: function() {
        var sliderUI = this;
        this.boundOnPhotosUpdate = onPhotosUpdate.bindAsEventListener(this);
        Element.observe(document, "media:update", this.boundOnPhotosUpdate);
        function onPhotosUpdate(e) {
            var data = e.memo.data;
            sliderUI.slidePhotos = data.photos.clone();
            
            if (sliderUI.loadFirstVideo && data.videos.dayVideos.length > 0){
                sliderUI.slidePhotos.push(data.videos.dayVideos[0]);  // add first video to slider
            }

            sliderUI.day_id = e.memo.data.day_id;
            
            var photoIndexLeft = e.memo.options.startIndex || 0;
            sliderUI.photoIndexLeft = photoIndexLeft;
            //alert("Before create photoIndexLeft: " + sliderUI.photoIndexLeft);
            //sliderUI.photoIndexLeft = 0;
            //alert("day: " + sliderUI.day_id + " photoIndexLeft: " + sliderUI.photoIndexLeft);
            sliderUI.createSlider();            
            sliderUI.toggleSliderButtons();
            
            document.fire('photo:update', { data: { photoIndex: sliderUI.photoIndexLeft } });
            //setTimeout(function() { sliderUI.scrollToIndex(photoIndexLeft); }, 300);

        }
    },
    disablePhotoListener: function() {
        Event.stopObserving(document, "media:update", this.boundOnPhotosUpdate);
    },
    leftScroll: function() {
        this.scrollDirection = "left";
        var maxLength = this.slidePhotos.length;
        if (this.photoIndexLeft == 0) this.scrollToIndex(maxLength - this.numPhotoVisible);
        else this.scrollToIndex(Math.max(this.photoIndexLeft - this.numPhotoVisible, 0));
    },
    rightScroll: function() {
        this.scrollDirection = "right";
        //$('#mainContainer').stop().scrollTo('#testAnchor', 800);

        var maxLength = this.slidePhotos.length;
        if (this.photoIndexLeft >= maxLength - maxLength % this.numPhotoVisible) this.scrollToIndex(0);
        else this.scrollToIndex(Math.min(this.photoIndexLeft + this.numPhotoVisible, maxLength - maxLength % this.numPhotoVisible));
    },
    scrollToIndex: function(index) {        
        var maxLength = this.slidePhotos.length;
        var upperInd = maxLength + (this.numPhotoVisible - maxLength % this.numPhotoVisible);  
        var lowerInd = upperInd;  // init lower as max
        //alert("current: " + this.photoIndexLeft + " target: " + index);
        if (this.photoIndexLeft >= index){ // target index is to the left of current position
            while (lowerInd > index && lowerInd > 0){
                lowerInd -= this.numPhotoVisible;
            }
            //lowerInd = Math.min(lowerInd, 0);
            lowerInd -= (lowerInd % this.numPhotoVisible);
            this.photoIndexLeft = lowerInd;            
        }        
        else { // target index is to the right of the current position
            lowerInd = 0;
            upperInd = lowerInd;
            while (upperInd < index && upperInd < maxLength - this.numPhotoVisible){  
                upperInd += this.numPhotoVisible;
            }
            upperInd -= (upperInd % this.numPhotoVisible); 
            this.photoIndexLeft = upperInd;
        }
        //alert(index);
        //alert(this.photoIndexLeft);
        this.toggleSliderButtons();
        var links = $j('#' + this.containerID).children()[0];
        var link = $j(links).children().get(this.photoIndexLeft);
        // note must scroll to img here (scrolling to anchor does not work)
        var img = $j(link).children().get(0);

        $j('#' + this.containerID).stop().scrollTo(img, 800);
    },
    createSlider: function() {
        var sliderUI = this;
                
        if (this.slidePhotos.length < this.numPhotoVisible) {
            //$$('.sliderButtons').each(function(btn) { btn.hide(); });  // need to review this, it affects multiple slider instances. get relative to container?
        }

        var linksContainer = new Element("div");
        var imgWidth = Data.Constants.MaxThumbWidth;
        var imgHeight = Data.Constants.MaxPhotoHeight;
        var numPhotos = this.slidePhotos.length;
        var imgMargin = Data.Constants.ThumbMargin;
        var borderWidth = Data.Constants.ThumbBorderWidth;
        var paddingWidth = Data.Constants.ThumbPaddingWidth;
        var borderAndPadding = borderWidth + paddingWidth;

        var containerWidth = (numPhotos - 1) * imgMargin + (numPhotos * imgWidth) + borderAndPadding * 2 * numPhotos;
        //var divExtraWidth = imgMargin * 2

        UI.Elements.setStyle(linksContainer, { width: containerWidth + "px", margin: 0, padding: 0 });
        $(this.containerID).update(linksContainer);
        this.slidePhotos.each(function(photo, index) {
            //var photoImg = new Element("img", { src: photo });

            /*
            var photoDiv = new Element("div");

            var divPadding = "2px";
            var divWidth = Data.Constants.MaxThumbWidth + imgMargin * 2 + borderAndPadding * 2;

            if (index == 0) {
            divPadding = "2px 2px 2px 0";
            divWidth = Data.Constants.MaxThumbWidth + imgMargin + borderAndPadding * 2;
            }
            if (index == numPhotos - 1) {
            divPadding = "2px 0 2px 2px";
            divWidth = Data.Constants.MaxThumbWidth + imgMargin + borderAndPadding * 2;
            }           
            */

            //photoDiv.setStyle({ "padding": divPadding, "float": "left", "textAlign": "center" });
            //photoDiv.setStyle({ "height": Data.Constants.MaxThumbHeight + "px", "width": divWidth + "px" });

            var dim = Data.Utils.getThumbDimensions(photo.width, photo.height, Data.Constants.MaxThumbWidth, Data.Constants.MaxThumbHeight);
            var photoImg = new Element("img", { src: photo.thumbURL, width: dim.width, height: dim.height });
            UI.Elements.setStyle(photoImg, { "float": "left" });
            UI.Elements.setStyle(photoImg, { paddingLeft: Math.ceil((Data.Constants.MaxThumbWidth + paddingWidth * 2 - dim.width) / 2) + "px", paddingRight: Math.floor((Data.Constants.MaxThumbWidth + paddingWidth * 2 - dim.width) / 2) + "px" });
            UI.Elements.setStyle(photoImg, { paddingTop: Math.ceil((Data.Constants.MaxThumbHeight + paddingWidth * 2 - dim.height) / 2) + "px", paddingBottom: Math.floor((Data.Constants.MaxThumbHeight + paddingWidth * 2 - dim.height) / 2) + "px" });

            //photoImg.setStyle({ margin: "0 10px 0 10px" });
            //var photoImg = new Element("img", { src: photo.thumbURL, width: Data.Constants.MaxThumbWidth, height: Math.ceil(photo.height / (photo.width / Data.Constants.MaxThumbWidth)) });

            if (index == 0) {
                //photoImg.addClassName('sliderfirst');
                UI.Elements.setStyle(photoImg, { margin: 0 });
            }
            else {
                UI.Elements.setStyle(photoImg, { margin: "0 0 0 " + imgMargin + "px" });
            }
            if (index == numPhotos - 1) {
                //photoImg.addClassName('last');
            }

            //else
            //    photoImg.setStyle({ "margin-left": imgMargin+"px" });
            photoImg.addClassName('photo');
            var link = new Element("a", { href: '#', id: sliderUI.containerID + '-link-' + index });

            link.observe('click', function() {
                //alert(sliderUI.day_id + " " + index + " " + sliderUI.tabIndex);
                if (sliderUI.loadFirstVideo && !photo.isPhoto)
                    UI.Overlay.display(sliderUI.day_id, 0, 1); // load first day video                   
                else
                    UI.Overlay.display(sliderUI.day_id, index, sliderUI.tabIndex);

                return false;
            });

            link.update(photoImg);

            UI.Utils.addToContainer(link, linksContainer);
        });
    }


});


var CalendarManagerUI = Class.create({
    initialize: function() {
        this.openCalendars = {};
        this.links = {};
    },
    toggleCalendar: function(calContentID, calLinkID) {
        this.links[calContentID] = calLinkID;
        if (this.openCalendars[calContentID])
            this.openCalendars[calContentID] = false;
        else
            this.openCalendars[calContentID] = true;
        toggleHelpAbsolute(calContentID, calLinkID);
        $(calContentID).style.zIndex = 510;
        return false;
    },
    close: function() {
        var calManager = this;
        $H(this.openCalendars).each(function(cal) {
        if (cal.value == true) {                
                calManager.toggleCalendar(cal.key, calManager.links[cal.key]);
            }
        });
    }
});

// initialization
Data.Media.init();