$(document).ready(function() {
	initMenu();
});

function initMenu() {
	var menu = $('ul.menu');
	var entry = menu.children('li').children('a');
	menu.children('li.expand').children('ul').hide();
	entry.click(function() {
		var li = $(this).parent();
		if (li.hasClass('expand')) {
			return expandMenu(li);
		} else if (li.hasClass('collapse')) {
			return collapseMenu(li);
		}
		return true;
	});
}

function expandMenu(entry) {
	entry.removeClass('expand');
	entry.addClass('collapse');
	var sub = entry.children('ul');
	sub.slideDown(200);
	appear(sub.children('li'), 1);
	return false;
}

function collapseMenu(entry) {
	entry.removeClass('collapse');
	entry.addClass('expand');
	var sub = entry.children('ul');
	sub.slideUp(300);
	appear(sub.children('li'), 0);
	return false;
}

function appear(li, d) {
	if (d) {
		var c = 0;
		var stp = 1;
		var fac = 50;
	} else {
		var c = li.size();
		var stp = -1;
		var fac = 20;
	}
	li.each(function() {
		c += stp;
		$(this).css('position', 'relative');
		if (d) {
			$(this).css("left", '100px');
			$(this).css("opacity", '0');
		}
		var obj = $(this);
		setTimeout(function() {
			realAppear(obj, d);
		}, c * fac);
	});
}

function realAppear(obj, d) {
	var dx = (d)? '0px' : '100px';
	obj.animate({
		'left': dx,
		'opacity': d
	}, 250);
}