Всплывающее окно со ссылками при наведении на область svg изображения (JavaScript)

Question

plumkin @plumkin

JavaScript

Всплывающее окно со ссылками при наведении на область svg изображения (JavaScript)

Добрый вечер.
Так как до JavaScript руки пока не дошли, а своих знаний не хватает прошу помощи у Вас.
Необходимо создать интерактивную карту. При нажатии на каждый из регионов должно появляться окно со списком ссылок (каждый элемент списка - ссылка на материал).
Реализовал карту (при помощи SVG), обращаясь к каждому региону svg изображения при событии .hover меняет цвет а при нажатии показывает окошко с названием области .
А вот как вывести в это окошко массив ссылок у меня и возникли трудности. Буду благодарен если кто-нибудь растолкует.
Сделал бы через CSS но не знаю как получить id региона на карте для обработки события нажатия.

Карта:

var paths = {
	lenin: {
		name: 'Ленинский',
		path: 'm ... z'
	},
	dzerg: {
		name: 'Дзержинский',
		path: 'm ... z'
                        }
               ...
}

Вывод на экран:

$(function(){     
    var r = Raphael('map', 721, 700),
    // Cоздаем новый объект canvas, в котором будет происходить рисование контуров 
    attributes = {
            fill: '#ddd',
            stroke: '#333',
            'stroke-width': 1.2,
            'stroke-linejoin': 'round'
        },
    // Создаем объект 'attributes' с параметрами
    arr = new Array();
    for (var country in paths) {
        var obj = r.path(paths[country].path); 
        obj.attr(attributes);
        arr[obj.id] = country;
	// Oбработчик события hover
		obj.hover(function(){
			this.animate({
				fill: '#1669AD'
			},300);
		},function(){
			this.animate({
				fill: attributes.fill
			}, 300);
		});
		// Oбработкa события click
		obj.click(function(){
		    document.location.hash = arr[this.id];// Изменяем хэш документа (#)
			var point = this.getBBox(0);// возвращаем размеры элемента
			$('#map').next('.point').remove();
		    $('#map').after($('<div />').addClass('point')); // Удаляем существующий div 'point' и создаем другой 
			$('.point')
		    .html($('<a />').attr('href', '#').text(paths[arr[this.id]].name))
		    .prepend($('<a />').attr('href', '#').addClass('close').text('Закрыть'))
		    .css({
		        left: point.x+(point.width/2)-80,
		        top: point.y+(point.height/2)-20
		    })// где всплывает окно
		    .fadeIn();// Добавим контент html(название страны, изображение флага и кнопку закрытия), устанавливаем положение и выводим элемент
		});
		// Oбработкa события click для кнопки закрытия
		$('.point').find('.close').live('click', function(){
		    var t = $(this),
		        parent = t.parent('.point');
		     
		    parent.fadeOut(function(){
		        parent.remove();
		    });
		    return false;
		}); 
    }// Проходим циклом все контуры (которые включены в объект paths), выводим их и устанавливаем атрибуты для них 
});

Пример как необходимо :
novaposhta.ua/map/index/ua