$("document").ready(function() {
// Connect to XML document
	$.ajax({
		type: "GET",
		url: "../code/xml/store_locator.xml",
		dataType: "xml",
		success: parseXml
	});
	
// Create HTML
	$("#breadcrums").after('<ul id="sub_menu"></ul>');
	$("#shops").html("");
	
// Creating menu from xml
	function parseXml(xml) {
		$(xml).find("country").each(function() {
			var country = $(this).attr("id");
			countryTitle = country.replace("_", " ");
				$("#sub_menu").append("<li><a class='country_" + country + "' href='javascript:;'>" + countryTitle + "</a><ul id='country_" + country + "'><ul></ul></ul></li>");
			
			$(xml).find("[id=" + country + "] state").each(function() {
				var state = $(this).attr("id");
					stateTitle = state.replace("_", " ");
					$("#country_" + country + " ul").append("<li><a id='state_" + state + "' href='javascript:;'>" + stateTitle + "</a></li>");
			});
		});
		
		// Hide menu items
		$("#sub_menu ul").css("display", "none");
		
		// OnClick Country
		$("#sub_menu [class^=country_]").click(function(evt){
		var targetId = $(this).attr("class");
			$("#sub_menu ul").css("display", "none");
			$("#" + targetId).css("display", "block");
			$("#" + targetId + " ul").css("display", "block");
		});
		
		// OnClick State
		$("#sub_menu [id^=state_]").click(function(evt){
			var thisId = evt.target.id.replace("state_", "");
			var parentId = $(this).parents("ul [id^=country_]").attr("id").replace("country_", "");

			$("#store_locator h3").html(parentId + " " + thisId);
			$("#shops").html("");
			
			// Display Oline stores xml
			if(thisId == "online" ){
				$(xml).find("[id=" + parentId + "]").find("[id=" + thisId + "] shop").each(function() {
					$("#shops").append("<li>" + $(this).find("name").text()  + "<br /><a href='http://" + $(this).find("site").text()  + "' target='_blank'>" + $(this).find("site").text()  + "</a></li>");
				});
			}
			// Display State stores xml
			else
			{
				$(xml).find("[id=" + parentId + "]").find("[id=" + thisId + "] shop").each(function() {
					$("#shops").append("<li>" + $(this).find("name").text()  + "<br />" + $(this).find("city").text()  + "<br /><a href='http://" + $(this).find("site").text()  + "' target='_blank'>" + $(this).find("site").text()  + "</a></li>");
				});
			}
		});
	}
	
});