$(document).ready(function() {
	$('.subbable').mouseenter(
		function(){
			$('.submenu').stop(true, true).animate({ marginTop: '3px' }, 200);
			$('.subbable').removeClass("toggleColor");
			
			var target = '.' + $(this).attr("ref");
			var origToggle = '.' + $(this).attr("class");
			$(this).addClass("toggleColor");
			
			$(target).show().animate({ marginTop: '3px' }, 200);
			$(target).mouseleave(
				function(){
					$(target).animate({ marginTop: '30px' }, 200, function(){$(this).hide();});
					$('.subbable').removeClass("toggleColor");
				});
		}
	);
	$('.nosub').mouseenter(
		function(){
			$('.submenu').animate({ marginTop: '30px' }, 200, function(){$(this).hide();});
			$('.toggleColor').addClass("originalColor");
			$("originalColor").removeClass("toggleColor");
		}
	);
	
	$('#menu td, .reactive_btn').mouseover(
	function(){
		var target = $(this).find('img');
		var posLastPoint = target.attr('src').lastIndexOf('_');
		var extension = target.attr('src').substring(target.attr('src').lastIndexOf('.'), target.attr('src').lastIndexOf('.') + 4);
		var on_state = target.attr('src').substring(0, posLastPoint) + '_on' + extension;
		target.attr('src', on_state);
	}).mouseleave(
	function(){
		var target = $(this).find('img');
		var posLastPoint = target.attr('src').lastIndexOf('_');
		var extension = target.attr('src').substring(target.attr('src').lastIndexOf('.'), target.attr('src').lastIndexOf('.') + 4);
		var off_state = target.attr('src').substring(0, posLastPoint) + '_off' + extension;
		target.attr('src', off_state);
	});
	
});