var base_href;

$(document).ready(function(){
	
	base_href = $('base').attr('href');
	
	//buildLocations();
	
	locationshover();
	
	function locationshover(){
		
		var holder = $('.worldwidelocations');
		var infopane = $('#infoholder',holder);
		var officelegenda = $('#officelegenda',holder);
		
		$('a',officelegenda)
		.mouseover(function(){
			
			hoverLoc( $(this).attr('id') );
			
		});
		
		$('img.tag',holder)
		.mouseover(function(){
			
			hoverLoc( $(this).attr('alt') );
			
		});
		
		function hoverLoc(id){
			
			$('a',officelegenda).removeClass('active');
			$('a#'+id).addClass('active');
			
			$('img.tag',holder).removeClass('active');
			$('img#icon_'+id,holder).addClass('active');
			
			infopane.addClass('active');
			
			$('div.address',infopane)
			.slideUp('fast');
			
			$('div#'+id+'html',infopane)
			.slideDown('fast',function(){
			
				$('div.address.active',infopane)
				.removeClass('active');
				
				$(this).addClass('active');
			});
		}
	}
	
	function buildLocations(){
		
		var holder = $('div.datarecord.html:first');
		var image = $('img:first',holder);
		
		// als er een image is; build HTML
		if(image.length){
		
			var infopane =  $('<div/>').prependTo(holder);		// spawn info panel
			var officelegenda = $('<ul/>').prependTo(holder);	// spawn legenda
			
			var nclass = '';
			var id = 0;
			
			// holder
			holder
			.addClass('worldwidelocations');
			
			// info panel
			infopane
			.attr('id','info')
			.wrap(
				$('<div/>')
				.attr('id','infoholder')
				.hide()
			);
			
			// legenda
			officelegenda
			.attr('id','officelegenda');
		
		
			$.ajax({
				type: "GET",
				url: base_href + "js/dockwiselocations/dockwiselocations.xml",
				dataType: "xml",
				success: function(xml) {
				
					// groepen
					$(xml).find('group').each(function(){
						
						nclass = $(this).attr('class') ? $(this).attr('class') : nclass;
						var title = $(this).attr('title');
						var group =	$('<li/>');
						
						// li groep
						group
						.html('<span>'+title+'</span>')
						.addClass(nclass)
						.prepend(
							$('<img/>')
							.attr('src',base_href + 'gui/dockwiselocations/icon_'+nclass+'.png')
						);
						
						// landen
						$(this).find('country').each(function(){
							
							nclass = $(this).attr('class') ? $(this).attr('class') : nclass;
							var title = $(this).attr('title');
							
							// ul + li land
							var country = $('<li/>');
							var theul = $('<ul/>');
							
							// offices
							$(this).find('office').each(function(){
								
								oclass = $(this).attr('class') ? $(this).attr('class') : nclass;
								
								var coord = $(this).find('imgcoordinates');
								var x = coord.attr('x');
								var y = coord.attr('y');
								
								var node = id;
								var title = $(this).attr('title');
								var office = $('<li/>');
								
								office
								.html('<span>'+title+'</span>')
								.attr('id','office'+id)
								.addClass('office')
								.addClass(oclass)
								.mouseover(function(){
									showOfficedata(node,title);
								});
								
								// li office voeg toe aan ul land
								theul.append(office);
								
								// draw office icon op kaart
								drawOffice(x,y,oclass,title,id);
								
								id++;
							});
							
							// li land
							country
							.html('<span>'+title+'</span>')
							.addClass(nclass)
							// land ul append
							.append(theul);
							
							// li groep
							group
							.append( 
								// land li append
								$('<ul/>').append(country)
							);
							
						});
						
						// li groep append aan holder ul
						officelegenda.append(group)
					
					});
					
				}
			});
		}
		
		function showOfficedata(id,title)
		{
			var tclass= $(officelegenda).find('.office:eq('+id+')').attr('class');
			
			// kan ook 1x als var worden ingeladen, maar dan lopen de tijden niet meer...
			$.ajax({
				type: "GET",
				url: base_href + "js/dockwiselocations/dockwiselocations.php",
				dataType: "html",
				success: function(html) {
					
					var officeHtml = $(html).find('office:eq('+id+') > p').html();
					var officeTime = $(html).find('office:eq('+id+') > time').html();
					
					infopane.html( 
						
						'<h3 class="'+tclass+'">'+title +
						'<span class="time">'+ officeTime + '</span>' + 
						'</h3>' + 
						'<p>'+officeHtml+'</p>'
					)
					.parent()
					.show();
				}
			});
			
			$('img.tag').removeClass('active');
			$('.office').removeClass('active');
			$('img#office'+id).addClass('active');
			$(officelegenda).find('.office:eq('+id+')').addClass('active');
			
			
		}
		
		function drawOffice(x,y,oclass,title,id)
		{
			var icon = $('<img/>');
			var x = x-11;
			var y = y-11;
			
			icon
			.addClass('tag')
			.attr('id','office'+id)
			.attr('src',base_href + 'gui/dockwiselocations/icon_'+oclass+'.png')
			.css({
				position:'absolute',
				left:x+'px',
				top:y+'px'
			})
			.mouseover(function(){
				showOfficedata(id,title);
			});
			
			icon.prependTo(holder);
			
		}
	}

});