Hey guys,

I'm completely new to Mootools, but after a lot of hours I finally was able to get my horizontal sliding menu the way I wanted. Basically there's a button on the left that can either be clicked or hovered, then the menu slides out from left to right. Then on mouseleave or click, the menu slides back in.

The behavior is perfect except for one small thing. No matter what I've tried, the "expand" image doesn't show when the menu slides back and disappears. The "collapse" image is always showing no matter what state the menu is in.

Granted I was able to get the images working right when I enabled the "complete" event at the bottom along with a few other changes, but then the menu behavior didn't work properly.

So can anyone identify why the var status images aren't switching properly?

Thanks a lot for any input.


Code:
window.addEvent('domready', function() {
	var status = {
		'true': '<img src="images/collapse.png" width="55" height="16" style="float:left; position:absolute; margin:5px 4px 0 11px" />',
		'false': '<img src="images/expand.png" width="55" height="16" style="float:left; position:absolute; margin:5px 4px 0 11px" />'
	};

	//--horizontal
	var myHorizontalSlide = new Fx.Slide('horizontal_slide', {mode: 'horizontal'}).hide();


moo('horizontal_status').addEvent('mouseenter', function(e){
		e.stop(); myHorizontalSlide.slideIn() });

moo('horizontal_status').addEvent('mouseleave', function(e){
		e.stop(); myHorizontalSlide.slideOut(); });

moo('horizontal_status').addEvent('click', function(e){
		e.stop(); myHorizontalSlide.toggle(); });

	
	// When Horizontal Slide ends its transition, we check for its status
	// note that complete will not affect 'hide' and 'show' methods
//	myHorizontalSlide.addEvent('complete', function() {
//		moo('horizontal_status').set('html', status[myHorizontalSlide.open]);
//	});
});