$(document).ready(function(){
	var nav = $('#nav');
	var navItem = $('#nav li a');
	var navMenu = $('#nav > ul');
	
	navItem.click(function(){
		thisItem = $(this);
		thisParent = $(this).parent('li');
		if($(nav).css('width') == '36px'){
			if((thisItem).parent('li').hasClass('dropdown')){
				if((thisItem).parent('li').hasClass('dropdown-active')){
					//back to main menu
					menuMove('main', thisParent);
				}else{
					//go to sub menu
					menuMove('sub', thisParent);
				}
			return false;
			}
		}
	});
	
	menuMove = function(area, current){
		if(area == 'main'){
			$(navMenu).animate({'right' : '-20px', 'opacity' : 0},100,function(){
				$(current).removeClass('dropdown-active');
				$(nav).removeClass('subview');
				$(navMenu).css('right', '20px').animate({'right' : 0, 'opacity' : 1},100);
			});
		}
		if(area == 'sub'){
			$(navMenu).animate({'right' : '20px', 'opacity' : 0},100,function(){
				//remove all other active dropdowns
				$(navItem).not(current).each(function(){
					if($(this).hasClass('dropdown-active')){$(this).removeClass('dropdown-active');}
				});
				$(current).addClass('dropdown-active');
				$(nav).addClass('subview');
				$(navMenu).css('right', '-20px').animate({'right' : 0, 'opacity' : 1},100);
			});
		}
	}
});