!function () {
	// the main navbar elements
	var navbar_elements = $('.navbar .elem');
	
	// the submenu elements
	var subnavbar_elements = $('.subnavbar .elem');
	
	// add the mouseover handler to the navbar elements
	navbar_elements.mouseover ( function () {
		var myelement = this;
		
		// counter to fint the menu item we clicked on
		var menucounter = 0;
		navbar_elements.each ( function () {
			
			if(this == myelement) {
				foldinsubmenus (foldoutsubmenus, menucounter);
				
			}
			menucounter++;
		})

	});
	
	// add click handler to prevent propagation
	navbar_elements.click ( function (event) {
		event.stopPropagation();

	});
	
	// add click handler to prevent propagation
	subnavbar_elements.click ( function (event) {
		event.stopPropagation();

	});
	
	// adde vent handler on body to fold in the submenus
	$('body').click (function (){
		 foldinsubmenus ();
	})
	
	// fold in all sub menu
	function foldinsubmenus (callback, counter) {
		subnavbar_elements.each ( function () {
			this.style.display = 'none';
		});
		if (typeof callback == 'function') {
			callback(counter);
		}
	};
	
	// fold out the clicked sub menu
	function foldoutsubmenus (counter) {
		var int_c = 0;
		subnavbar_elements.each ( function () {
			if (int_c == counter) {
				this.style.display = 'block';
				this.style.marginLeft = (int_c * 137) + 'px' ;
			}
			int_c++;
		});
		
	};
	
	
} ()