Scroller = new Class({
    imgSel:null,
    initialize: function(el, menu, tgt) {
        this.el = $(el);
        this.scroll = new Fx.Scroll(this.el, {
            wait: false,
            duration: 750,
            transition: Fx.Transitions.Cubic.easeOut
        });
        this.img = new $A();
        this.tgt = $(tgt);
        if (this.tgt) {
            this.tgt.addEvent('load', function() {
                this.tgt.effect('opacity').start(1);
            }.bind(this));
        }
        window.addEvent('domready', this.setup.bind(this));
    },
    
    setup: function() {
        this.menu = $ES('.menu a');
        this.menu.each(function(link) {
            tgt = link.href.replace(/^.*?#/, '');
            if (link.getProperty('rel')) {
                this.img[tgt] = link.getProperty('rel');
            }
            link.tgt = tgt;
            link.flag = false;
            link.fx = new Fx.Style(link, 'opacity', {duration:500, wait: false});
            link.setOpacity(0.4);
            link.addEvent('click', function(event) {
                event = new Event(event).stop();
                this.el.effect('height', {duration:150, wait: false}).start($(link.tgt).getCoordinates().height).chain(function() {
                    this.scroll.toElement(link.tgt);
                }.bind(this));
                this.menu.each(function(off) {
                    off.flag = false;
                    off.fx.start(0.4);
                });
                link.flag = true;
                link.fx.start(1);
                if (this.tgt && this.img[link.tgt]) {
                    var img = new Element('img');
                    img.src = this.img[link.tgt];
                    if (img.src != this.tgt.src) {
                        this.tgt.effect('opacity').start(0).chain(function() {
                            this.tgt.src = img.src;
                        }.bind(this));
                    }
                }
            }.bind(this));
            link.addEvent('mouseover', function(event) {
                event = new Event(event).stop();
                link.fx.start(1);
            }.bind(this));
            link.addEvent('mouseout', function(event) {
                event = new Event(event).stop();
                tgt = (link.flag) ? 1 : 0.4;
                link.fx.start(tgt);
            }.bind(this));
        }.bind(this));
        this.el.effect('height').start($(this.menu[0].tgt).getCoordinates().height).chain(function() {
            this.scroll.toTop();
        }.bind(this));
        this.menu[0].fx.start(1);
    }
});