offY = 15;
offX = 45;
tdelay = 2500;
var tm0, tm1, tm2, tm3;

function hide_layer($item){
    $item.style.visibility="hidden";
}

function Close_item($item){
    // Resets the tween and changes the element back to its original size
    $item.set('tween', {}).tween('height', '1px');
    tm0 = $clear(tm0);
    tm0=(function(){ 
        $item.style.visibility="hidden";
    }).delay(400);
}
 
window.addEvent('domready', function(){
	//First Example
    // The same as before: adding events
    $('mm1').addEvents({
        'mouseenter': function(){
            // Always sets the duration of the tween to 1000 ms and a bouncing transition
            // And then tweens the height of the element
            this.style.position = "relative";
            x = this.offsetTop;
            y = this.offsetLeft;

            $('m1').style.left = y+offY;
            $('m1').style.top = x+offX;
            $('m1').style.visibility="visible";
            Close_item($('m2'));
            Close_item($('m3'));
            $('m1').set('tween', {
                duration: 1000,
                transition: Fx.Transitions.Bounce.easeOut // This could have been also 'bounce:out'
            }).tween('height', '80px');
            tm1 = $clear(tm1);
            tm1=(function(){ 
                Close_item($('m1'));
            }).delay(tdelay);
        }
    });
    
    $('m1').addEvents({
        'mouseenter': function(){
            tm1 = $clear(tm1)
        },
        'mouseleave': function(){
            Close_item(this);
        }
    });
	// Second Example
	
    $('mm2').addEvents({
        'mouseenter': function(){
            // Always sets the duration of the tween to 1000 ms and a bouncing transition
            // And then tweens the height of the element
            this.style.position = "relative";
            x = this.offsetTop;
            y = this.offsetLeft;

            $('m2').style.left = y+offY;
            $('m2').style.top = x+offX;
            $('m2').style.visibility="visible";
            Close_item($('m1'));
            Close_item($('m3'));
            $('m2').set('tween', {
                duration: 1000,
                transition: Fx.Transitions.Bounce.easeOut // This could have been also 'bounce:out'
            }).tween('height', '80px');
            tm2 = $clear(tm2);
            tm2=(function(){ 
                Close_item($('m2'));
            }).delay(tdelay);
        }
    });
    
    $('m2').addEvents({
        'mouseenter': function(){
            tm2 = $clear(tm2)
        },
        'mouseleave': function(){
            Close_item(this);
    }
    });
    
    $('mm3').addEvents({
        'mouseenter': function(){
            // Always sets the duration of the tween to 1000 ms and a bouncing transition
            // And then tweens the height of the element
            this.style.position = "relative";
            x = this.offsetTop;
            y = this.offsetLeft;

            $('m3').style.left = y+offY;
            $('m3').style.top = x+offX;
            $('m3').style.visibility="visible";
            Close_item($('m1'));
            Close_item($('m2'));
            $('m3').set('tween', {
                duration: 1000,
                transition: Fx.Transitions.Bounce.easeOut // This could have been also 'bounce:out'
            }).tween('height', '80px');
            tm3 = $clear(tm3);
            tm3=(function(){ 
                Close_item($('m3'));
            }).delay(tdelay);
        }
    });
    
    $('m3').addEvents({
        'mouseenter': function(){
            tm3 = $clear(tm3)
        },
        'mouseleave': function(){
            Close_item(this);
    }
    });
});