/**
 * @author codrops, customized by tanya
 */
$(function() {
	//all the menu items
	var $items 		= $('#cc-menu .cc-item');
	//number of menu items
	var cnt_items	= $items.length;
	//if menu is expanded then folded is true
	var folded		= false;
	//timeout to trigger the mouseenter event on the menu items
	var menu_time;
	/**
	en:
	bind the mouseenter, mouseleave to each item:
	- shows / hides image and submenu
	bind the click event to the list elements (submenu):
	- hides all items except the clicked one, 
	and shows the content for that item
	
	pt-br:
	vincular a mouseenter, mouseleave para cada item:
	- Imagem mostra/oculta e submenu
	vincular o evento clique para os elementos da lista (submenu):
	- Esconde todos os itens, exceto a clicado,
	e mostra o conteúdo para esse item
	*/
	$items.unbind('mouseenter')
		  .bind('mouseenter',m_enter)
		  .unbind('mouseleave')
		  .bind('mouseleave',m_leave)
		  .find('.cc-submenu > ul > li')
		  .bind('click',function(){
		var $li_e = $(this);
			  // en:
			  // if the menu is already folded,
			  // just replace the content
			  // pt-br:
			  // se o menu já está dobrado,
			  // basta substituir o conteúdo
		if(folded){
			hideContent();
			showContent($li_e.attr('class'));
		}	
		else //en: fold and show the content / pt-br: dobrar e mostrar conteudo
			fold($li_e);
	});

	/**
	en:
	mouseenter function for the items
	the timeout is used to prevent this event 
	to trigger if the user moves the mouse with 
	a considerable speed through the menu items

	pt-br:
	mouseenter função para os itens o tempo limite 
	é usado para prevenir este evento para disparar 
	se o usuário move o mouse com uma velocidade 
	considerável através dos itens de menu
	*/
	function m_enter(){
		var $this 	= $(this);
		clearTimeout(menu_time);
		menu_time 	= setTimeout(function(){
		//img
		$this.find('img').stop().animate({'top':'0px'},400);
		//cc_submenu ul
		$this.find('.cc-submenu > ul').stop().animate({'height':'100px'},400);
		},100);
	}

	//en: mouseleave function for the items / pt-br: mouseleave função para os itens
	function m_leave(){
		var $this = $(this);
		clearTimeout(menu_time);
		//img
		$this.find('img').stop().animate({'top':'-800px'},400);
		//cc-submenu ul
		$this.find('.cc-submenu > ul').stop().animate({'height':'0px'},400);
	}

	// en: back to menu button - unfolds the menu
	// pt-br: de volta ao botão de menu - o menu se desdobra
	$('#cc-back').bind('click',unfold);
	/**
	en: 
	hides all the menu items except the clicked one
	after that, the content is shown

	pt-br:
	esconde todos os itens de menu, 
	exceto a clicado depois disso, o conteúdo é mostrado
	*/

	function fold($li_e){
		var $item		= $li_e.closest('.cc-item');
		var d = 100;
		var step = 0;
		$items.unbind('mouseenter mouseleave');
		$items.not($item).each(function(){
			var $item = $(this);
			$item.stop().animate({
				'marginLeft':'-1200px'  // fecha menu
			},d += 200,function(){
				++step;
				if(step == cnt_items-1){
					folded = true;
					showContent($li_e.attr('class'));
				}
			});
		});
	}
	/**
	en: 
	shows all the menu items 
	also hides any item's image / submenu 
	that might be displayed
	
	pt-br:
	mostra todos os itens de menu também esconde 
	qualquer imagem do item/submenu que pode ser exibida
	*/
	function unfold(){
		$('#cc-content').stop().animate({'left':'-1200px'},620,function(){ // esconde o texto
			var d = 100;
			var step = 0;
		$items.each(function(){
				var $item = $(this);
				$item.find('img')
					 .stop()
					 .animate({'top':'-820px'},200)
					 .andSelf()
					 .find('.cc-submenu > ul')
					 .stop()
					 .animate({'height':'0px'},200);
				$item.stop().animate({
				'marginLeft':'0px' // abre menu
				},d += 200,function(){
					++step;
					if(step == cnt_items-1){
						folded = false;
						$items.unbind('mouseenter')
							  .bind('mouseenter',m_enter)
							  .unbind('mouseleave')
							  .bind('mouseleave',m_leave);
						hideContent();
					}		  
				});
			});
		});
	}
	
	//function to show the content
	function showContent(idx){
		$('#cc-content').stop().animate({'left':'250px'},300,function(){ // deslocamento do menu a partir da lateral
			$(this).find('.'+idx).fadeIn();
		});
	}
	
	//function to hide the content
	function hideContent(){
		$('#cc-content').find('div').hide();
	}
});