// FLUBBER 0.2
var FluidBackground = new Class({

    options: $H({
        aciveSelector: '.current',
        cornerRadius: 4,
        fxDuration: 750,
        fxTransition: 'sine:out'
    }),
    
    buttonStyles: $H({
        // multiple colors as array
        background: '#e5e5e5',
        height: 0,
        padding: {
            x: 6,
            y: 4
        },
        width: 0
    }),

    initialize: function(container, options)
    {
        this.container = $(container);
        this.options.extend(options || {});

        this.lis = this.container.getElements('li');
        this.measures = [];
        this.timer = $empty;
        
        this.setMeasures();
        this.active = this.getActive();

        this.buttonStyles.set('height', this.measures[this.active].height + (this.buttonStyles.padding.y*2));
        this.buttonStyles.set('width', this.measures[this.active].width + (this.buttonStyles.padding.x*2));

        this.build();
        this.observe();
    },
    
    build: function()
    {
        this.container.setStyle('position', 'relative');
        
        this.lis.each(function(li, i){
            this.absolutize(li, i);
        }, this);

        this.createButton();

        this.fx = new Fx.Morph(this.canvas, {
            duration: this.options.fxDuration,
            transition: this.options.fxTransition
        });
        this.moveToActive();
    },
    
    observe: function()
    {
        this.lis.each(function(li, i){
            li.addEvents({
                'mouseover': function(){
                    $clear(this.timer);
                    this.moveTo(i);
                }.bind(this),
                'mouseout': function(){
                    if(!this.isActive(li))
                    {
                        this.timer = this.moveToActive.delay(250, this);
                    }
                }.bind(this)
            });
        }, this);
    },
    
    isActive: function(el)
    {
        $A(this.options.activeSelector.split('|')).each(function(s){
            if(el.hasClass(s.substr(1)))
            {
                return true;
            }
        }, this);
        return false;
    },
    
    moveToActive: function()
    {
        var el = false;
        
        $A(this.options.activeSelector.split('|')).each(function(s){
            if(this.container.getElement(s))
            {
                el = this.container.getElement(s).getParent();
            }
        }, this);

        //this.fx.pause();

        this.moveTo(el);
    },
    
    moveTo: function(el)
    {
        this.fx.pause();
        var m = this.getMeasures(el);

        if(!$defined(el) || !m)
        {
            return;
        }

        this.fx.start({
            height: this.buttonStyles.height,
            left: m.left - this.buttonStyles.padding.x,
            width: m.width + (this.buttonStyles.padding.x*2)
        })
    },
    
    getActive: function()
    {
        var t = 0;
        this.lis.each(function(li, i){
            $A(this.options.activeSelector.split('|')).each(function(s){
                if(li.getElement('a').hasClass(s.substr(1)))
                {
                    t = i;
                }
            }, this);            
        }, this);
        return t;
    },    
    
    setMeasures: function()
    {
        this.lis.each(function(li){
            this.measures.push(li.getCoordinates(this.container))
        }, this);
    },
    
    getMeasures: function(p)
    {
        if(!isNaN(p) || p === 0)
        {
            return this.measures[p];
        }
        else
        {
            var i = this.lis.indexOf(p);
            return this.measures[i];
        }
    },
    
    absolutize: function(el, i)
    {
        el.setStyles({
            left: this.measures[i].left,
            height: this.measures[i].height,
            position: 'absolute',
            top: this.measures[i].top,
            width: this.measures[i].width,
            zIndex: 2
        });
    },

    createButton: function(){

        var m = this.getMeasures(this.active);

        this.canvas = new Element('canvas', {
            height: this.buttonStyles.height,
            width: this.buttonStyles.width    
        }).addClass('rubbery').inject(this.container);

        this.canvas.setStyles({
            left: m.left - this.buttonStyles.padding.x,
            margin: this.lis[0].getStyle('margin'),
            position: 'absolute',
            top: m.top - this.buttonStyles.padding.y,
            zIndex: 1
        });    

        this.draw();
    },

    draw: function()
    {
        var styles = this.buttonStyles;
        
        var objCanvas = this.canvas;
        
        if(window.window.ActiveXObject)
        {
            objCanvas = G_vmlCanvasManager.initElement(this.canvas);
        }
        
        if(objCanvas.getContext){
            var objContext = objCanvas.getContext('2d');

            objContext.beginPath();

            objContext.moveTo(this.options.cornerRadius, 0);
            objContext.quadraticCurveTo(
                0, 0,
                0, this.options.cornerRadius
            );
            
            objContext.lineTo(0, styles.height - this.options.cornerRadius);
            objContext.quadraticCurveTo(
                0, styles.height,
                this.options.cornerRadius, styles.height
            );

            objContext.quadraticCurveTo(
                0, styles.height,
                styles.width-this.options.cornerRadius, styles.height
            );

            objContext.lineTo(styles.width-this.options.cornerRadius, styles.height);

            objContext.quadraticCurveTo(
                styles.width, styles.height,
                styles.width, styles.height-this.options.cornerRadius
            );
            objContext.lineTo(styles.width, this.options.cornerRadius);
            objContext.quadraticCurveTo(
                styles.width, 0,
                styles.width-this.options.cornerRadius, 0
            );

            objContext.closePath();
        
            objContext.fillStyle = this.buttonStyles.background;
            objContext.fill();
        }

    }   
    
});

window.addEvent('load', function(){

    new FluidBackground($$('ul')[0], {
        activeSelector: '.current|.section',
        fxDuration: 1000,
        fxTransition: 'elastic:out'
    });
    
});