var About = {
    initialize: function() {
        Element.observe(window, "load", function(event){
            About.enable();
        });
    },
    
    enable: function() {
        About.enableAnchorHighlighter();
    },
    
    enableAnchorHighlighter: function() {
        var anchors=$$('a[href]');
        anchors.each(function(anchor){
            if(anchor.hash)
                anchor.observe("click", About.clickAnchor);
        });
    },
    
    clickAnchor: function(event) {
        var linkedDiv = $$("a[name='" + this.hash.substring(1) + "']")[0].up('div');
        if (linkedDiv.viewportOffset()[1] > document.viewport.getHeight() || linkedDiv.viewportOffset()[1] < 0) {
            // Not in the viewport
            About.centerDivInViewport(linkedDiv);
            About.highlightLinkedAnchor.delay(0.5, this.hash);
            event.stop();
        } else if (document.viewport.getHeight() / 2 > linkedDiv.viewportOffset()[1]) {
            // In top half of viewport
            About.highlightLinkedAnchor(this.hash);
            event.stop();
        } else {
            About.centerDivInViewport(linkedDiv);
            About.highlightLinkedAnchor(this.hash);
            event.stop();
        }
    },
    
    centerDivInViewport: function(div) {
        var div=$(div);
        var center = document.viewport.getHeight() / 2 - div.getHeight() / 2;
        center = center >= 0 ? -1 * center : 0;
        Effect.ScrollTo(div, {offset: center, duration: 0.5});        
    },
    
    highlightLinkedAnchor: function(hash) {
        var anchor=$$("a[name='"+hash.substring(1)+"']")[0];
        anchor.highlight({ startcolor: anchor.getStyle("color").parseColor(), endcolor: '#ffffff', restorecolor: '#ffffff' });
    }
};