var level2t, level3t, level4t;
$(document).ready(function() {
	$(".level1 ul > li").click(
	  function (e) {
                e.preventDefault();
		clearTimeout(level2t);
		var menu =  ".level2 ." + $(this).attr("class") + "-sub";
		$(".level2 ul").fadeOut(200);
		$(menu).fadeIn(200);
		level2t = setTimeout("destroy_lvl2_menus()",2000);
	  }
	);

	$(".level2 ul > li").click(
	  function () {
                destroy_lvl3_arrows();
		clearTimeout(level3t);
                var n = $(this).parent().attr("class").replace("-sub", "");
		var menu =  ".level3 ." + n + "-" + $(this).attr("class") + "-sub";
		$(".level3 .wrapper").fadeOut(200);
		$(menu).parent().fadeIn(200);
		add_arrows(3, $(menu).parent());
		level3t = setTimeout("destroy_lvl3_menus()",2000);

	  }
	);
	
	$(".level3 ul > li").click(
	  function () {
                destroy_lvl4_arrows();
		clearTimeout(level4t);
                var n = $(this).parent().attr("class").replace("-sub", "");
		var menu =  ".level4 ." + n + "-" + $(this).attr("class") + "-sub";
		$(".level4 .wrapper").fadeOut(200);
		$(menu).parent().fadeIn(200);
		add_arrows(4, $(menu).parent());
		level4t = setTimeout("destroy_lvl4_menus()",2000);

	  }
	);

	$(".level2 ul").hover(
	  function () {
		clearTimeout(level2t);
	  },
	  function () {
		  if(!level3t)
		level2t = setTimeout("destroy_lvl2_menus()",2000);
	  }
	);
	
	$(".level3 .wrapper").hover(
	  function () {
		clearTimeout(level2t);
		clearTimeout(level3t);
	  },
	  function () {
		level2t = setTimeout("destroy_lvl2_menus()",2000);
		level3t = setTimeout("destroy_lvl3_menus()",2000);
	  }
	);
	
	$(".level4 .wrapper").hover(
	  function () {
		clearTimeout(level2t);
		clearTimeout(level3t);
		clearTimeout(level4t);

	  },
	  function () {
		level2t = setTimeout("destroy_lvl2_menus()",2000);
		level3t = setTimeout("destroy_lvl3_menus()",2000);
		level4t = setTimeout("destroy_lvl4_menus()",2000);

	  }
	);

});


function destroy_lvl2_menus() {
	$(".level2 ul").fadeOut(200);
}

function destroy_lvl3_menus() {
        destroy_lvl3_arrows();
	$(".level3 .wrapper").fadeOut(200);
	level3t = null;
}

function destroy_lvl3_arrows() {
	$(".level3 .arrow-up").fadeOut(200);
	$(".level3 .arrow-down").fadeOut(200);
}

function destroy_lvl4_menus() {
    destroy_lvl4_arrows();
    $(".level4 .wrapper").fadeOut(200);
    level4t = null;
}

function destroy_lvl4_arrows() {
	$(".level4 .arrow-up").fadeOut(200);
	$(".level4 .arrow-down").fadeOut(200); 
}

function add_arrows(level, parent) {
	level = ".level" + level;
	top = parent.position().top - 20;
	left = parent.position().left;
	$(level + " .arrow-up").css("top", top);
	$(level + " .arrow-up").css("left", left);
	$(level + " .arrow-up").fadeIn(200);
	top = parent.offset().top + parent.height() - 10;
	$(level + " .arrow-down").css("top", top);
	$(level + " .arrow-down").css("left", left);
	$(level + " .arrow-down").fadeIn(200);
}
	
$(document).ready(function() {
		$('.wrapper').each(function(index) {
                        $(this).css({display: "block"});
                        $(this).children("ul").css({display: "block"});
	  		makeScrollable($(this), $(this).children("ul"));
                        $(this).css({display: "none"});
		  });
	});
	
	function makeScrollable(wrapper, scrollable){
	  var wrapper = $(wrapper), scrollable = $(scrollable);

		wrapper.css({overflow: "hidden"});
	
		scrollable.slideDown("slow", function(){
		enable(); 
		});            
		
	function enable(){

	  // height of area at the top at bottom, that don't respond to mousemove
	  var inactiveMargin = 100;         
	  // Cache for performance

	  var wrapperWidth = wrapper.width();
	  var wrapperHeight = wrapper.height();
	  // Using outer height to include padding too
	  var scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin;
	  // Do not cache wrapperOffset, because it can change when user resizes window
	  // We could use onresize event, but it's just not worth doing that 
	  // var wrapperOffset = wrapper.offset();
	
	  //When user move mouse over menu          
	  wrapper.mousemove(function(e){
		var wrapperOffset = wrapper.offset();
		// Scroll menu
		if((wrapperOffset.left + 248) > e.pageX ) {
		var top = (e.pageY -  wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight  - inactiveMargin;
		if (top < 0){
		  top = 0;
		}
	
		wrapper.scrollTop(top);
		}
	  });    
	}
	$(".sub1").css({display: "none"});
	}