/**
 * Created by Sander Wind © sanderwind.nl
 * 
 * Add an arrow to each .menu-item
 * When this arrow gets clicked show the submenu
 */


$(function() {
	var menuItems = $( '.menu-item' );
	
	for( var i = 0; i < menuItems.length; i++ ) {
		if( $( menuItems[i] ).children( '.sub-menu' ).text().length >= 1 )
			$( menuItems[i] ).append( '<span class="sub-arrow sub-arrow-right" title="Open submenu"></span>' );
		
		var itemColor = $( menuItems[i] ).attr( 'class' )
										 .split( ' ' );
			itemColor = itemColor[ itemColor.length - 1 ];
		
		$( menuItems[i] ).children( 'a' )
						 .css( { borderColor: itemColor } );
	}
	
	$( '.menu-item' ).hover(
		function() {
			var itemColor = $( this ).attr( 'class' )
									 .split( ' ' );
			itemColor = itemColor[ itemColor.length - 1 ];
			
			$( this ).animate( { backgroundColor: itemColor }, { queue: false, duration: 1000 } );
		},
		function() {
			if( ( $( this ).children( '.sub-arrow' ).hasClass( 'sub-arrow-down' ) || $( this ).hasClass( 'current-menu-item' ) ) == false )
				$( this ).animate( { backgroundColor: '#ffffff' }, { queue: false, duration: 1000 } );
		}
	);
	
	if( $( '.current-menu-item, .current-page-parent' ).attr( 'class' ) ) {
		var activeColor = $( '.current-menu-item, .current-page-parent' ).attr( 'class' )
																		 .split( ' ' );
			activeColor = activeColor[ activeColor.length - 1 ];
		
		$( '.current-menu-item, .current-page-parent' ).css( { backgroundColor: activeColor } )
													   .children( 'a' )
													   .css( { color: '#ffffff' } );
	}
	
	$( '.current-menu-item .sub-arrow, .current-page-parent .sub-arrow' ).toggleClass( 'sub-arrow-right' )
																		 .toggleClass( 'sub-arrow-down' )
																		 .attr( 'title', 'Sluit submenu' )
																		 .parent()
																		 .children( '.sub-menu' )
																		 .toggle( 'blind' );
	
	$( '.sub-arrow' ).click(
		function() {
			if( $( this ).hasClass( 'sub-arrow-right' ) ) {
				$( '.sub-arrow-down' ).toggleClass( 'sub-arrow-down' )
									  .toggleClass( 'sub-arrow-right' )
									  .attr( 'title', ( $( this ).hasClass( 'sub-arrow-right' ) ? 'Open submenu' : 'Sluit submenu' ) )
									  .parent()
									  .children( '.sub-menu' )
									  .toggle( 'blind' );
			}
			
			$( this ).toggleClass( 'sub-arrow-right' )
					 .toggleClass( 'sub-arrow-down' )
					 .attr( 'title', ( $( this ).hasClass( 'sub-arrow-right' ) ? 'Open submenu' : 'Sluit submenu' ) )
					 .parent()
					 .children( '.sub-menu' )
					 .toggle( 'blind' );
		}
	);
});