var countries = [
	{ id: 'spain', pos: {x: 86, y: 31 }, img: 'spain.png', cajas: [ {x:86, y:31, w:41, h:9}, {x:98, y:40, w:31, h:30}, {x:127, y:35, w:17, h:16}] },
	{ id: 'libya', pos: {x: 170, y: 82 }, img: 'libya.png', cajas: [ {x:172, y:87, w:29, h:49}, {x:201, y:96, w:18, h:42}, {x:219,y:90,w:25,h:60}] },
	{ id: 'sudan', pos: {x: 229, y: 133 }, img: 'sudan.png', cajas: [ {x:240, y:138, w:62, h:29}, {x:231, y:167, w:66, h:23}, {x:238, y:190, w:51, h:17}, {x:252, y:207, w:44, h:14}] },
	{ id: 'saudiarabia', pos: {x: 288, y: 91 }, img: 'arabia.png', cajas: [ {x:301, y:94, w:29, h:13}, {x:291, y:107, w:63, h:11}, {x:299, y:118, w:63, h:11}, {x:307, y:129, w:60, h:11}, {x:311, y:140, w:75, h:12}, {x:318, y:148, w:57, h:7}, {x:320, y:155, w:31, h:7} ] },
	{ id: 'oman', pos: {x: 368, y: 127 }, img: 'oman.png', cajas: [ {x:372, y:152, w:13, h:12}, {x:385, y:130, w:10, h:29}, {x:394, y:130, w:11, h:18 } ] },
	{ id: 'yemen', pos: {x: 324, y: 152 }, img: 'yemen.png', cajas: [ {x:327, y:162, w:24, h:20}, {x:351, y:156, w:21, h:20} ] },
	{ id: 'caspiansea', pos: {x: 344, y: 31 }, img: 'caspiansea.png', cajas: [{x:348, y:31, w:31, h:38}] },
	{ id: 'persiangulf', pos: {x:351, y:101}, img: 'persiangulf.png', cajas: [ {x:351, y:101, w:14, h:12}, {x:358, y:113, w:14, h:12}, {x:371, y:118, w:14, h:10} ] },
	{ id: 'uae', pos: {x:368, y:124}, img: 'uae.png', cajas: [ {x:368, y:129, w:19, h:9}, {x:381, y:124, w:9, h:5}] },
	{ id: 'kuwait', pos: {x:345, y:101}, img: 'kuwait.png', cajas: [ {x:345, y:101, w:10, h:10} ] },
	{ id: 'qatar', pos: {x:362, y:122}, img: 'qatar.png', cajas: [ {x:362, y:122, w:10, h:7} ] }
];

$(function() {
	var contenido = $('#contenido');
	for(var i = 0, max = countries.length; i < max; i++) {
		var country = countries[i];

		var imagen = $('<img src="img/countries/' + country.img + '" class="foto" id="foto' + country.id  + '" />');
		imagen.css('position', 'absolute').css('left', country.pos.x + 'px').css('top', country.pos.y + 'px').hide();
		contenido.append(imagen);

		$('#' + country.id + ' h2').hover(function() {
			muestraPais($(this).parent().attr('id'));
		}, function() {
			ocultaPais($(this).parent().attr('id'));
		}).click(function() {
			muestraDatosPais($(this).parent().attr('id'));
		});
		
		creaCajas(country);
	}

	var info = $('<div id="info"></div>').hide();
	contenido.append(info);
});

function creaCajas(country) {
	for(var i = 0, max = country.cajas.length; i < max; i++) {
		var caja = country.cajas[i];

		var div = $('<div class="' + country.id + '"></div>').css( {
			'position': 'absolute',
			'left': caja.x + 'px',
			'top': caja.y + 'px',
			'width': caja.w + 'px',
			'height': caja.h + 'px',
			'opacity': '0',
			'cursor': 'pointer',
			'background': 'red'
		} ).hover(function(e) {
			muestraPais($(this).attr('className'));
			e.stopPropagation();
		}, function(e) {
			ocultaPais($(this).attr('className'))
			e.stopPropagation();
		}).click(function(e) {
			muestraDatosPais($(this).attr('className'));
			e.stopPropagation();
		});

		$('#contenido').append(div);
	}
}

function muestraPais(nombre) {
	$('#foto' + nombre).show();
	$('#' + nombre + ' h2').addClass('activo');
}

function ocultaPais(nombre) {
	$('#foto' + nombre).hide();
	$('#' + nombre + ' h2').removeClass('activo');
}

function muestraDatosPais(nombre) {
	var info = $('#info');
	info.fadeOut(function() {
		var div = $('#' + nombre);
		info.html(div.html());
		$('div:not(:visible)', info).show();

		var pos = div.position();
		var posLista = div.offsetParent().position();

		var alto = pos.top + posLista.top;

		var altoContenido = $('#contenido').outerHeight();
		if(alto + info.outerHeight() > altoContenido) {
			alto = altoContenido - info.outerHeight();
		}
		
		info.css('top', alto + 'px').fadeIn(function() {
			var a = $('<a href="javascript:void(0)" class="cerrar">Close</a>').click(function() {
				$(this).parent().fadeOut().end().remove();
			});
			$(this).prepend(a);
		});
	});
}