var FancyMenu = Class.create({
    initialize: function(parents, color) {
        this.elem = parents.down();
        this.pos = parents.cumulativeScrollOffset();
        this.dim = parents.getDimensions();
        this.bg = new Element('div');
        this.width = 0;
        this.bg.setStyle({
            position: 'absolute',
            height: this.dim.height + 'px',
            backgroundColor: color
        });
        parents.insert({top: this.bg});
        this.cacheMove = this.move.bindAsEventListener(this);
        this.cacheMoveRelease = this.moveRelease.bindAsEventListener(this);
        this.elem.observe('mouseover', this.cacheMove);
        this.elem.observe('mouseout', function(event) {this.captured = false;}.bind(this));
    },
    move: function(event) {
        this.captured = true;
        if (this.timeId2) clearInterval(this.timeId2);
        var that = this;
        this.timeId = setInterval(function() {
            that.width += 5;
            that.bg.setStyle({width: that.width + 'px'});
            if (!that.captured) {
                that.cacheMoveRelease();
            } else if (that.width >= that.dim.width) {
                clearInterval(that.timeId);
                that.bg.setStyle({width: that.dim.width + 'px'});
                that.elem.observe('mouseout', that.cacheMoveRelease);
            }
        }, 15);
    },
    moveRelease: function(event) {
        if (this.timeId) clearInterval(this.timeId);
        this.elem.stopObserving('mouseout', this.cacheMoveRelease);
        var that = this;
        this.timeId2 = setInterval(function() {
            that.width -= 5;
            that.bg.setStyle({width: that.width + 'px'});
            if (that.width <= 0) {
                clearInterval(that.timeId2);
                that.bg.setStyle({width: '0px'});
            }
        }, 15);
    }
});

/* document.observe("dom:loaded", function(event) { */
Event.observe(window, "load", function(event) {

    $$('#header li').each(function(elem) {
        new FancyMenu(elem, '#FF9');
    });

    $$('#main-nav li a').invoke('observe', 'mouseover', function(event) {
        var colors = [255, 255, 0];
        setTimeout(function() {
            var color = "#" + colors.invoke('toColorPart').join('');
            event.target.setStyle({backgroundColor: color});
            colors[2] += 10;
            if (colors[2] < 255) setTimeout(arguments.callee, 30);
        }, 30);
    });

    $$('.bannar').invoke('observe', 'mousedown', function(event) {
        event.stop();
        var ele = event.target;
        while (ele.nodeName != 'DIV') {
            ele = ele.parentNode;
        }
        ele.setStyle({
            position: 'relative',
            top: '1px',
            left: '1px'
        });
        ele.observe('mouseup', function(event) {
            event.stop();
            ele.setStyle({top: '0px', left: '0px'});
            while (ele.nodeName != 'A') {
                ele = ele.down();
            }
        });
    });
});