// positions relative to left top corner of the map
var country_arr = [];
country_arr['de'] = [ 268, 105 ];
country_arr['pl'] = [ 376, 106 ];
country_arr['cz'] = [ 354, 190 ];
country_arr['sk'] = [ 419, 213 ];
country_arr['at'] = [ 314, 231 ];
country_arr['hu'] = [ 413, 233 ];
country_arr['sl'] = [ 374, 278 ];
country_arr['it'] = [ 271, 273 ];
country_arr['es'] = [ 21, 309 ];
country_arr['be'] = [ 227, 178 ];
country_arr['nl'] = [ 246, 136 ];
country_arr['lu'] = [ 263, 184 ];

// Zoom factors for hoverstate
var mapZoomFactor = 0.8;
var hoverZoomFactor = 0.82;
var clickZoomFactor = 0.805;

var assetPath = 'fileadmin/templates/global/gfx/mapselector_new/';

var isIE = false;
if (self.navigator.userAgent.indexOf('MSIE') != -1) {
	isIE = true;
}

function prepareDOM() {
	var map = $('map');
	map.parent().attr('id', 'countryparent');
	map.children().each(
			function() {
				$(this).addClass('country');
				var country = $(this).attr('id');
				$("#countryparent").append(
						'<img src="' 
								+ assetPath
								+ country + '.png" id="img_' + country
								+ '" class="country_img" />');
				
				if ($(this).attr('href').indexOf('services') > 0) {
					$('#country_' + country + ' h1').after('<h2>Credit Life International Services</h2>');
				} else {
					$('#country_' + country + ' h1').after('<h2>Credit Life International N.V.</h2>');
				}

				// workaround for webkit browsers, which sets image dimensions
				// after loading the image
				$("#img_" + country).load( function() {
					country_arr[country].push($(this).width());
					$(this).css( {
						left : country_arr[country][0],
						top : country_arr[country][1],
						width : country_arr[country][2] * mapZoomFactor
						//,
						//opacity : 0,
						//display : 'none'
					});
					
					/*$(this).draggable({ 
						drag: function(event, ui) { 
							var	Startpos = $(this).position();
							$("div#debug").text("Position: \nLeft: "+ Startpos.left + "\nTop: " + (Startpos.top)); 
						} 
					});*/
					 
				});
			});
	var countrymap = map.prev('img');
	countrymap.removeAttr('usemap');
	countrymap.after('<img src="clear.gif" id="cleargif" width="' + countrymap.width() + '" height="' + countrymap.height() + '"/>');
	$('#cleargif').attr('usemap', '#' + map.attr('id')).after($('<div/>').attr('id', 'country_context'));
	countrymap.attr('id', 'countrymap');

	$('#country_context').append('<div id="countryDetails"></div>');
	$('#countryDetails').append($('.countryContact'));
	$("#country_default a:first").addClass("firstAnchor");
	$("#country_default a:last").addClass("lastAnchor");
	$('#country_default').show();
}

$(document).ready( function() {
	prepareDOM();
	var countrymap = $("#countrymap");
	var mapoverlay = $("#cleargif");
	var mapImagePos = countrymap.offset();
	var imageBorderWidth = countrymap.css("border-top-width");
	var context = $("#country_context");
	
	//top 9px to make up for border top
	mapoverlay.css( {
		left : 0,
		top : '9px',
		display : 'inline'
	});

	// make country markers appear
		$(".country").mouseover( function() {
			var country = $(this).attr("id");

			$("#label").html($(this).attr("alt"));
			
			var positionDelta = (country_arr[country][2] * hoverZoomFactor - country_arr[country][2] * mapZoomFactor) / 2;
			
			
			if (isIE) {
				$("#img_" + country).css('opacity', 'none');
				$("#img_" + country).show().stop().animate( {
					width : country_arr[country][2] * hoverZoomFactor,
					left: country_arr[country][0] - positionDelta,
					top: country_arr[country][1] - positionDelta
				}, 400);
			} else {
				$("#img_" + country).show().stop().animate( {
					width : country_arr[country][2] * hoverZoomFactor,
					left: country_arr[country][0] - positionDelta,
					top: country_arr[country][1] - positionDelta,
					opacity : 1
				}, 400);
			}
			$('#country_default').hide();
			$('#country_' + country).show();
		});

		// mousebutton pressed
		$(".country").mousedown(
				function() {
					var country = $(this).attr("id");	
					var positionDelta = (country_arr[country][2] * hoverZoomFactor - country_arr[country][2] * clickZoomFactor) / 2;
					$("#img_" + country).css({
						width: country_arr[country][2] * clickZoomFactor,
						left: country_arr[country][0] - positionDelta,
						top: country_arr[country][1] - positionDelta
					});
				});

		// mousebutton released
		$(".country").mouseup(
				function() {
					var country = $(this).attr("id");	
					var positionDelta = (country_arr[country][2] * hoverZoomFactor - country_arr[country][2] * mapZoomFactor) / 2;
					$("#img_" + country).css({
						width: country_arr[country][2] * hoverZoomFactor,
						left: country_arr[country][0] - positionDelta,
						top: country_arr[country][1] - positionDelta
					});
				});

		// make country markers disappear
		$(".country").mouseout( function() {
			var country = $(this).attr("id");
			$("#label").html("&nbsp;");
			if (isIE) {
				$("#img_" + $(this).attr("id")).stop().animate( {
					width : country_arr[country][2] * mapZoomFactor,
					left: country_arr[country][0],
					top: country_arr[country][1]
				}, 50, function() {
					$(this).hide()
				});

			} else {
				$("#img_" + $(this).attr("id")).stop().animate( {
					width : country_arr[country][2] * mapZoomFactor,
					left: country_arr[country][0],
					top: country_arr[country][1],
					opacity : 0
				}, 250, function() {
					$(this).hide();
				});
			}
			$('#country_' + country).hide();
			$('#country_default').show();
			//context.children().detach();
			//context.append($('#defaultInfo'));
		});
	});