// =============
// = Example =
// =============
// <link type="text/css" href="css/flyout.css" rel="stylesheet" />
// <script type="text/javascript" src='js/flyout.js'></script>
// 
// <ul class='flyout'>
//   <li>
//     <a>Item 1</a>
//     <ul>
//       <li>
//         <a>Depth 1 Item 1</a>
//         <ul><li>etc...</li></ul>
//       </li>
//       <li>
//         <a>Depth 1 Item 2</a>
//       </li>
//     </ul>
//   </li>
//   <li><a>Item 2</a></li>
// </ul>

function reset_nav(){
	$('.main_options_nav ul, ul.flyout ul').hide();
	$('.main_options_nav *, ul.flyout *').removeClass('active');
}


// =================================
// = Fly Out Nav Controls =
// =================================
reset_nav();

$('.main_options_nav li a, ul.flyout li a').live('click', function(){
	
	var li = $(this).parents('li:first');
	
	if(li.hasClass('active')){
		li.find('ul').fadeOut();
		li.removeClass('active');
		li.find('.active').removeClass('active');
		$.mask.close();
	}else{
		li.addClass('active');
		li.siblings('.active').each(function(){
			$(this).removeClass('active');
			$(this).find('.active').removeClass('active');
			$(this).find('ul').fadeOut();
		});
		$(this).siblings('ul').fadeIn(function(){li.find('input[type=text]:first').focus();});
	}
	
});