function TopPopupMenu( triggerId, elements) {
	// filename which will return the xml file with categories
	this.elements = elements;
	this.container = null;
	
	// element id who have generated the event. In our case it's a tab button
	// we need this to be able to align the container with the right tab button
	this.triggerId = triggerId;

	function TopPopupMenu() {
		container = document.getElementById("topPopupMenu");
		
		// set up popup menu container so it's aligned with tab button
		$('#topPopupMenu').css("left", $(triggerId).offset().left);
		$('#topPopupMenu').css("top", $(triggerId).offset().top + $(triggerId).height() + 5);

		try {
			$('#topPopupMenu').html("");
		} catch(e) { }
				
		// we create an unordered list to put it inside the container
		// it's elements will be categories name
		var ul = document.createElement("ul");
		container.appendChild(ul);
				
		for(i = 0; i < elements.length; i++) {
			// create a line for the list <li>
			var li = document.createElement("li");
			// create a link to be put inside <li> tag
			var a = document.createElement("a");
			// category name we got from XML element attribute
			var name = elements[i][0];
			
			// if name is to big, it wont fit the container, so we trim it from the left 
			// and add ...
			if (name.length > 32) {
				name = name.substring(0, 29) + "...";
			}
			
			// DOM element for category name
			var label = document.createTextNode(name);
			a.href = elements[i][1];
			
			a.appendChild(label);
			li.appendChild(a);
			
			$(li).hover(function() {
				$(this).css("background-color", "#012006");
			}, function() {
				$(this).css("background-color", "");
			});
							
			ul.appendChild(li);
		}
		
		// we deactivate the split line between menu items for last element
		$(ul).find(':last-child').css("border", "none");	
		
		// we do this so the user can touch the menu container
		$('#topPopupMenu').hover(
			function() {
				$('#topPopupMenu').show();
			},
			function() {
				$('#topPopupMenu').hide();		
			}
		); 
	}
	
	TopPopupMenu();
	
	this.show = function() {
		$('#topPopupMenu').show();
	};
	
	this.hide = function() {
		$('#topPopupMenu').hide();
	}

}

getCurrentLanguage = function() {
	var requestURI = window.location + "";
	
	if (requestURI.indexOf("/en/", 0) > 0) {
		return 'en';
	}
	
	return 'ro';
}

$(document).ready(function() {
	var lang = getCurrentLanguage();
	var produseTabMenu = null;
	var serviciiTabMenu = null;
	
	$('#tabMenu li').hover(function() {
		$(this).css("border-bottom", "5px #ab0800 solid");
	}, function() {
		$(this).css("border-bottom", "");
	});
	
	$('#produseTab').hover(function() {
		produseTabMenu = new TopPopupMenu( $(this), Array(Array("Automate cafea", "Automate-Cafea"), Array("Automate cafea Second Hand", "Automate-Second-Hand"), Array("Consumabile", "Consumabile")));
		
		if (lang == "en") {
			produseTabMenu = new TopPopupMenu( $(this), Array(Array("Automatic coffee machines", "Automatic-Coffee-Machines"),  Array("SH Automatic coffee machines", "Second-Hand-Automatic-Coffee-Machines"), Array("Vending Consumables", "Vending-Consumables")));
		}
		
		produseTabMenu.show();
	},
	function() {
		// If we didnt popuped the menu, then we dont have to hide it
		if (produseTabMenu != null) {
			produseTabMenu.hide();
		}
	});
	
	$('#serviciiTab').hover(function() {	
		serviciiTabMenu = new TopPopupMenu( $(this), Array(Array("Vanzare automate cafea", "Vanzare-Automate-Cafea"), Array("Inchirieri expresoare", "Inchirieri-Expresoare"), Array("Service expresoare", "Service-Expresoare")));
		
		if (lang == "en") {
			serviciiTabMenu = new TopPopupMenu( $(this), Array(Array("Sales", "Sales"), Array("Rentals", "Rentals"), Array("Service and maintenance", "Service-And-Maintenance")));
		}
		
		serviciiTabMenu.show();
	},
	function() {
		// If we didnt popuped the menu, then we dont have to hide it
		if (serviciiTabMenu != null) {
			serviciiTabMenu.hide();
		}
	});	
});