[plumkin]

Добрый день.
Задача:
1. сделать на странице интерактивную карту, с регионами сложной формы; (готово)
2. при наведении на регион он подсвечивается; (готово)
3. при нажатии на регион всплывает список (для каждого региона свой) со ссылками (в дальнейшем ссылки на материалы сайта). (прошу помощи с этим пунктом)

Вот как примерно я хочу это реализовать: http://novaposhta.ua/map/

Рассматривал рещения и через чистый CSS и с множеством изображений с разным состояние карты сделанными в Addobe Fireworks. Но эти решения не радовали. А так как сайт делается для себя, то хочется сделать все максимально удобно и функционально, без полумер и постоянной подгрузки кучи изображений.

Решение:
1. карту я нарисовал в inkscape, и засунул в файл.js. Для обработки использую raphael.js (библиотека JavaScript, которая упрощает работу с векторной графикой в веб проектах. Raphael использует SVG W3C и VML как основу для создания графики. Каждый графический объект создается как объект DOM и, таким образом, к нему можно присоединить обработчик события или модифицировать в процессе обработки страницы).

Вот его сокращенный код:

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

по логике вещей я понимаю что в переменные lenin и dzerg мне нужно вставить массивы с соответствующими значениями.

2. подсветку при наведении на регион я реализовал.

3. при нажатии на конкретный регион карты я вывожу окошко с именем области и кнопкой закрыть (а нужно вывести все эл-ты массива).

$(function(){
     
    var r = Raphael('map', 721, 700),
    attributes = {
            fill: '#ddd', stroke: '#333', 'stroke-width': 1.2, 'stroke-linejoin': 'round'
        },
    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(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();
		});
		// Oбработкa события click для кнопки закрытия
		$('.point').find('.close').live('click', function(){
		    var t = $(this),
		        parent = t.parent('.point');
		     
		    parent.fadeOut(function(){
		        parent.remove();
		    });
		    return false;
		}); 
    }
});

Вопрос. Как мне вывести в это всплывающее окно не одно значение, а задыный зарание список наименований оформленных как ссылка.
Как я понимаю вывод будет выполняться в этом блоке:

$('.point')
   .html(paths[arr[this.id]].name)
   .prepend($('<a />').attr('href', '#').addClass('close').text('Закрыть'))

Вобщем у меня банально не хватает знаний на реализацию этой идеи и я обратился к Вам. Все что я мог почерпнул из уроков, примеров, рабочих сайтов. Зарание благодарю за помощь. Спасибо.