JH = {};

JH.NavigationBar = {

    currentMenu: null,
    subMenuHideTimer: null,

    init : function ()
    {
        $$('#mainNav TD > A').each(function (link) {
            link.observe('mouseenter', JH.NavigationBar.navItemOnMouseEnter.bindAsEventListener(link));
            link.observe('mouseleave', JH.NavigationBar.navItemOnMouseLeave.bindAsEventListener(link));
        });
    },
    
    navItemOnMouseEnter : function (event)
    {
        JH.NavigationBar.hideSubMenu();
        JH.NavigationBar.showSubMenu(this);
    },
    
    navItemOnMouseLeave : function (event)
    {
        JH.NavigationBar.cancelHideSubMenuTimer();
        JH.NavigationBar.subMenuHideTimer = window.setTimeout(JH.NavigationBar.hideSubMenu, 200);
    },
    
    hideSubMenu : function ()
    {
        JH.NavigationBar.cancelHideSubMenuTimer();
        if (JH.NavigationBar.currentMenu) {
            JH.NavigationBar.currentMenu.addClassName('removed');
            JH.NavigationBar.currentMenu = null;
        }
    },
    
    cancelHideSubMenuTimer : function ()
    {
        if (JH.NavigationBar.subMenuHideTimer) {
            window.clearTimeout(JH.NavigationBar.subMenuHideTimer);
            JH.NavigationBar.subMenuHideTimer = null;
        }
    },

    showSubMenu : function (link)
    {
        link = $(link);
        
        var subMenu = link.up('TD').down('UL');
        if (! subMenu) {
            return;
        }

        JH.NavigationBar.currentMenu = subMenu;
        
        var offset = link.positionedOffset();
        var menuLeft  = offset.left;
        var menuTop   = offset.top + link.up('TD').getHeight();
        var menuWidth = link.getWidth();

        subMenu.setStyle({left: menuLeft + 'px', top: menuTop + 'px', width: menuWidth + 'px'});
        subMenu.removeClassName('removed');

        subMenu.observe('mouseenter', JH.NavigationBar.cancelHideSubMenuTimer);
        subMenu.observe('mouseleave', JH.NavigationBar.navItemOnMouseLeave);
    }

};
Event.observe(window, 'load', JH.NavigationBar.init);

JH.Slideshow = Class.create();
JH.Slideshow.prototype = {
    
    images: null,
    thumbs: null,
    imageIndex: 0,
    animationInterval: 5,  // in seconds
    animationTimer: null,
    
    initialize : function (slideshowName)
    {
        var slideshow = $(slideshowName);
        if (! slideshow) {
            return;
        }
        
        this.images = slideshow.select('IMG');
        if (this.images.length < 2) {
            return;
        }
        
        for (var i = 1; i < this.images.length; i++) {
            this.images[i].setStyle({opacity: 0, visibility: 'visible'});
        }
        
        this.animationTimer = window.setTimeout(this.animateNext.bind(this), this.animationInterval * 100);
        
        var thumbContainer = $(slideshowName + 'Thumbnails');
        if (thumbContainer) {
            this.thumbs = thumbContainer.select('IMG');
            for (var i = 0; i < this.thumbs.length; i++) {
                $(this.thumbs[i]).observe('click', this.thumbnailClicked.bind(this, this.thumbs[i]));
            }
        }
    },
    
    animateNext : function ()
    {
        this.showNextImage(this.imageIndex + 1);
        this.animationTimer = window.setTimeout(this.animateNext.bind(this), this.animationInterval * 2000);
    },
    
    thumbnailClicked : function (img)
    {
        window.clearTimeout(this.animationTimer);
        this.animationTimer = null;
        img.siblings().each(function (sibling) {
            sibling.removeClassName('current');
        });
        img.addClassName('current');
        var nextImageIndex;
        for (nextImageIndex = 0; nextImageIndex < this.thumbs.length; nextImageIndex++) {
            if (this.thumbs[nextImageIndex] == img) {
                break;
            }
        }
        this.showNextImage(nextImageIndex);
    },
    
    showNextImage : function (nextImageIndex)
    {
        new Effect.Opacity(this.images[this.imageIndex], {from: 1.0, to: 0.0, duration: 1.5});
        this.imageIndex = nextImageIndex;
        if (this.imageIndex >= this.images.length) {
            this.imageIndex = 0;
        }
        new Effect.Opacity(this.images[this.imageIndex], {from: 0.0, to: 1.0, duration: 1.5});
    }
    
};