window.addEvent('domready', function() {
    $ES('.external').each(function(link) {
        link.setProperty('target', '_blank');
    });
});

Popup = new Class({
    initialize: function(link, target, options) {
        this.link = link;
        this.target = target;
        this.options = options;
        this.widget = null;
        window.addEvent('domready', this.prepare.bind(this));
    },
    
    prepare: function() {
        if (!$(this.link) || !$(this.target)) {
            return false;
        }
        this.options.content = $E('.popupcontent', this.target);
        this.options.content.setStyles({width: this.options.width,
                                        height: this.options.height});
        this.link = $(this.link);
        this.target = $(this.target);
        this.link.addEvent('click', this.show.bind(this));
        this.target.setStyles({width: this.options.width,
                               height: this.options.height,
                               top: 50});
        this.widget = new Element('div').injectInside(this.target)
                                        .setProperty('id', 'widgetclose')
                                        .setStyle('visibility', 'hidden');
        this.widget.addEvent('click', this.hide.bind(this));
    },

    show: function(event) {
        event = new Event(event).stop();
            this.widget.setStyle('visibility', 'visible');
            this._sendEvent('playpause');
        this.target.setStyle('left', 878 / 2 - this.options.width / 2);
        $ES('select').each(function(item) {
            item.setOpacity(0);
        });
    },
    
    hide: function(event) {
        event = new Event(event).stop();
            this.target.setStyle('left', '-9999px');
        this._sendEvent('stop');
        this.widget.setStyle('visibility', 'hidden');
    },
    
    trap: function(evt) {
        event = new Event(evt);
        event.stopPropagation();
    },

    _sendEvent: function(type, param) {
        var mv = $(this.options.movie);
        if (mv) {
            mv.sendEvent(type, param);
        }
    }
});

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 + 5).chain(function() {
            this.scroll.toTop();
        }.bind(this));
        this.menu[0].fx.start(1);
    }
});