var bg = 500;
window.addEvent('domready', function() {
    var c1 = $('c1');
    var b2 = $('b2');
    var c3 = $('c3');

    
    var original1 = c1.getStyle('background-color');
    var morph1 = new Fx.Morph(c1, {
        'duration': bg,
        'link': 'cancel'
    });
    var original2 = b2.getStyle('background-color');
    var morph2 = new Fx.Morph(b2, {
        'duration': bg,
        'link': 'cancel'
    });
    var original3 = c3.getStyle('background-color');
    var morph3 = new Fx.Morph(c3, {
        'duration': bg,
        'link': 'cancel'
    });
    
    $each($$('#c1'), function(el) {
        el.addEvents({
            'mouseenter': function() {
                morph1.start({
                    'background-color': '#acc43c'
                });
                morph2.start({
                    'background-color': '#f98737'
                });
                morph3.start({
                    'background-color': '#f8cf41'
                }); 
            },
            'mouseleave': function() {
                morph1.start({
                    'background-color': original1
                });
                morph2.start({
                    'background-color': original2
                });
                morph3.start({
                    'background-color': original3
                });
            }
        });
    });

    $each($$('#b2'), function(el) {
        el.addEvents({
            'mouseenter': function() {
                morph1.start({
                    'background-color': '#f8cf41'
                });
                morph2.start({
                    'background-color': '#acc43c'
                });
                morph3.start({
                    'background-color': '#f98737'
                });
            },
            'mouseleave': function() {
                morph1.start({
                    'background-color': original1
                });
                morph2.start({
                    'background-color': original2
                });
                morph3.start({
                    'background-color': original3
                });
            }
        });
    });
    
    $each($$('#c3'), function(el) {
        el.addEvents({
            'mouseenter': function() {
                morph1.start({
                    'background-color': '#acc43c'
                });
                morph2.start({
                    'background-color': '#f98737'
                });
                morph3.start({
                    'background-color': '#f8cf41'
                });
            },
            'mouseleave': function() {
                morph1.start({
                    'background-color': original1
                });
                morph2.start({
                    'background-color': original2
                });
                morph3.start({
                    'background-color': original3
                });
            }
        });
    });
});