var liHeight;

function slide(li) {
	var ul = $(li).children('ul');
	if (ul.size()) {
		var height = ul.find('li').size() * 30;
		if ($(li).hasClass('menu-item-open')) {
			$(li).animate({height: liHeight}).removeClass('menu-item-open');
			$(ul).animate({height: 0});
		} else {
			$(li).animate({height: liHeight + height - 10}).addClass('menu-item-open');
			$(ul).animate({height: height});
		}
	}
}

// What is $(document).ready ? See: http://flowplayer.org/tools/using.html#document_ready
$(document).ready(function() {
 $('#menu-main .menu-item > a').before('<img class="menu-img" src="http://www.affordableleisure.co.uk/wp-content/themes/Arion/images/hover.png" />')
						.css({background: function() {
							if ($(this).parent().children('ul').size()) return "url('http://www.affordableleisure.co.uk/wp-content/themes/Arion/images/arrow_black_right.png')  no-repeat 45px center ";
						}})
						.hover(
							function() {
								$(this).prev().stop().animate({opacity: 1});
							},
							function() {
								$(this).prev().stop().animate({opacity: 0});
							}
						)
						.click(function() {
							var li = $(this).parent();
							if ($('.menu-item-open').size() == 0 || $('.menu-item-open').attr('id') == $(li).attr('id')) {
								slide(li);
							} else {
								$('.menu-item-open').animate({height: liHeight}).removeClass('menu-item-open')
													.children('ul').animate({height: 0}, function() {
														slide(li);
													});
							}
							if ($(this).parent().children('ul').size()) return false;
							else return true;
						});
						
	 $('#menu-main .sub-menu > li > img').attr('src', 'http://www.affordableleisure.co.uk/wp-content/themes/Arion/images/bullet.png');
	 $('#menu-main .sub-menu > li > a').before('<img class="menu-img" src="http://www.affordableleisure.co.uk/wp-content/themes/Arion/images/sub.png" />')
							.hover(
								function() {
									$(this).prev().prev().stop().animate({opacity: 1});
									$(this).prev().stop().animate({opacity: 1, left: 40});
								},
								function() {
									$(this).prev().prev().stop().animate({opacity: 0});
									$(this).prev().stop().animate({opacity: 0, left: 0});
								}
							);

              liHeight = $('#menu-main li').height();

// initialize scrollable together with the circular plugin
$("#infinite").scrollable({circular: true});//.circular();
});
