var selectedMarkers = new Array();
var markers = new Array();
var popupBlack;
var popupContainer;
var ulElements = new Array();

var infoElements = {	'category' : 0, 
						'x' : 1,
						'y' : 2,
						'city' : 3,
						'industry' : 4,
						'visit-zip-area' : 5,
						'visit-adress' : 6,
						'tel-order' : 9,
						'tel-operator' : 10,
						'fax' : 11,
						'email' : 12,
						'hours-mon-fri' : 13,
						'hours-sat' : 14,
						'hours-sun' : 15,
						'adress' : 17,
						'zip-area' : 18,
						'map' : 19,
						'other-open' : 20,
						'other-open-1' : 21,
						'other-open-2' : 22,
						'other-open-3' : 23
						};

function loadMap(image, popupcontainer, popupblack, catColumns, values)
{
	popupContainer = popupcontainer;
	popupBlack = popupblack;
	
	var hq = document.getElementById("categories_hq");
	
	for (var i = 0; i < catColumns.length; i++)  {
		
		var children = catColumns[i].getElementsByTagName('UL');
	
		for (var j = 0; j < children.length; j++)  {
			var cat = children[j].getElementsByTagName('LI');
			
			if (cat.length > 0) {
				var str = cat[0].innerHTML;
				var catNumber = str.substring(0, str.indexOf('.'));

				ulElements[catNumber] = children[j];
			}
		}	
	}

	var lines = values.split(/\n/g); 
	
	for (var i = 1; i < lines.length; i++) {
	
		//var line = lines[i].split(/;/g);
		var line = lines[i].split(";");
		
		if (line.length < 3)
		{
			continue;
		}
		
		var origId = null;
		
		//check if there already is a point on that pixel
		for (var j = 1; j < i; j++) {
		
			if (markers[j] && markers[j].info[0][infoElements['x']] == line[infoElements['x']] && markers[j].info[0][infoElements['y']] == line[infoElements['y']]) {
				origId = j;
				break;
			}
		}
		
		/*
		if (origId == null) {
			markers[i] = document.createElement('img');
			markers[i].src = '/images/dot_black.gif';
			markers[i].title = line[3];
			markers[i].alt = markers[i].title;
			markers[i].style.position='absolute';
			markers[i].style.left=(parseInt(line[1] ? line[1] : 0) - 4) + 'px';
			markers[i].style.top=(parseInt(line[2] ? line[2] : 0) - 4) + 'px';
			markers[i].style.cursor='pointer';
			markers[i].info = new Array(line);

			if (line[0]) {
				image.appendChild(markers[i]);
			} else {
				hq.info = new Array(line);
				hq.link = new Array(hq);
				hq.style.cursor='pointer';
				addHQEvents(hq);
			}
			
			point = markers[i];
		} else {
			markers[origId].info[markers[origId].info.length] = line;
			//markers[i] = markers[j];
		}
		*/
		
		

		markers[i] = document.createElement('img');
		markers[i].src = '/images/dot_black.gif';
		markers[i].title = line[infoElements['city']];
		markers[i].alt = markers[i].title;
		markers[i].style.position='absolute';
		markers[i].style.left=(parseInt(line[infoElements['x']] ? line[infoElements['x']] : 0) - 4) + 'px';
		markers[i].style.top=(parseInt(line[infoElements['y']] ? line[infoElements['y']] : 0) - 4) + 'px';
		markers[i].style.cursor='pointer';
		markers[i].info = new Array(line);

		if (origId == null && line[infoElements['category']]) {
			image.appendChild(markers[i]);
		} else if (origId == null) {
			hq.info = new Array(line);
			hq.link = new Array(hq);
			hq.style.cursor='pointer';
			addHQEvents(hq);
		}

		point = markers[i];
		
		
		
		var listPost = document.createElement('li');
		var link = document.createElement('a');
		link.href= 'javascript: void(0)';
		link.innerHTML = line[infoElements['city']];
		listPost.appendChild(link);
		
		if (line[infoElements['category']]) {
			ulElements[line[infoElements['category']]].appendChild(listPost);
		}
		

		addLinkEvents(markers, i, link);
		
		if (origId != null) {
			markers[i].origId = origId;
		}
		
		markers[i].link = new Array(link);
		
		
		if (origId != null) {
			markers[origId].link[markers[origId].link.length] = link;
		}
		
		/*
		if (origId == null) {
			markers[i].link = new Array(link);
		}
		*/
	
	/*
		if (origId == null) {
			addLinkEvents(markers, i, link);
			markers[i].link = new Array(link);
		} else {
			addLinkEvents(markers, origId, link);
			markers[origId].link[markers[origId].link.length] = link;
		}
	*/
		
	
		if (origId == null) {
			addEvents(markers, i);
		}
	
		//alert(line[1] + " - " + line[2]);
	}
	
	select(hq);
	
	//alert('done');
}


function addHQEvents(hq)
{
	try
	{
		hq.addEventListener('click', function () {
				return select(hq);
			}, true);
	} catch (err) {	
		hq.attachEvent('onclick', function () {
				return select(hq);
			});
	}
}


function addLinkEvents(markers, index, link)
{
	try
	{
		link.addEventListener('click', function () {
				return select(markers[index]);
			}, true);
		
		link.addEventListener('mouseover', function () {
				return activate(markers[index]);
			}, true);

		
		link.addEventListener('mouseout', function () {
				return deactivate(markers[index]);
			}, true);
	} catch (err) {	
		link.attachEvent('onclick', function () {
				return select(markers[index]);
			});

		link.attachEvent('onmouseover', function () {
				return activate(markers[index]);
			});

		link.attachEvent('onmouseout', function () {
				return deactivate(markers[index]);
			});
	}
}

function addEvents(markers, index)
{
	try
	{
		markers[index].addEventListener('click', function () {
				return select(this);
			}, true);

		markers[index].addEventListener('mouseover', function () {
				return activate(this);
			}, true);

		markers[index].addEventListener('mouseout', function () {
				return deactivate(this);
			}, true);
	} catch (err) {	
		markers[index].attachEvent('onclick', function () {
				return select(markers[index]);
			});

		markers[index].attachEvent('onmouseover', function () {
				return activate(markers[index]);
			});

		markers[index].attachEvent('onmouseout', function () {
				return deactivate(markers[index]);
			});
	}
}


function select(marker)
{
	var point = getMarker(marker);

	deselect();
	selectedMarkers = new Array(point);
	
	for (var i = 0; i < marker.link.length && i < 1; i++) {
		marker.link[i].className = 'active';
	}
	
	activate(marker);

	//remove old
	var children = popupContainer.getElementsByTagName('DIV');
	
	/*for (var i = children.length - 1; i >= 0; i--) {
	
		if (children[i].className != popupBlack.className && children[i].className != "corner") {
			popupContainer.removeChild(children[i]);
		}
	}*/
	
	
	var yellowBox = document.getElementById("yellowbox_container");
	
	for (var i = 0; i < marker.info.length; i++) {

		var info = marker.info[i];
		//((
		
		//var infoBox = document.createElement('DIV');

		//infoBox.className="popup yellow";

		yellowBox.innerHTML = 
			'<p><strong>' + info[infoElements['city']] + '</strong></p>'
			
			//industry
			
			+ '<p><strong>Besöksadress:</strong><br />'
			+ info[infoElements['visit-adress']] + '<br />'
			+ (info[infoElements['industry']] == '' ? '' : info[infoElements['industry']] + '<br />')
			+ (info[infoElements['visit-zip-area']] == '' ? (info[infoElements['industry']] != '' ? info[infoElements['industry']] : '') : info[infoElements['visit-zip-area']])
			+ (info[infoElements['map']] ? '<br /><a href="' + info[infoElements['map']] + '" rel="external" onclick=\'this.target="_blank";\'>Vägbeskrivning</a>' : '')
			+ '</p>'
			
			+ '<p>'
			+ (info[infoElements['tel-order']] ? '<strong>Tel order/sälj:</strong><br />' + info[infoElements['tel-order']] + '<br />' : '')
			+ (info[infoElements['tel-operator']] ? '<strong>Tel vxl:</strong><br />' + info[infoElements['tel-operator']] + '<br />' : '')
			+ (info[infoElements['fax']] ? '<strong>Fax:</strong><br />' + info[infoElements['fax']] + '<br />' : '')
			+ '</p>'

			+ '<p><strong>E-post:</strong><br /><a href="mailto:' + info[infoElements['email']].replace(/\s+/, '') + '">' + info[infoElements['email']] + '</a></p>'
			
			+ ((info[infoElements['adress']] != '' && info[infoElements['adress']] != '') ? 
				('<p><strong>Postadress:</strong><br />Beijer Byggmaterial AB<br/>'
				+ info[infoElements['adress']] + '<br />'
				+ info[infoElements['zip-area']]
				+ '</p>') : '')
			
			+ ((info[infoElements['hours-mon-fri']] != '' && info[infoElements['hours-sat']] != '') ? 
				('<p><strong>Öppettider:</strong>'
				+ ((info[infoElements['hours-mon-fri']] != '') ? ('<br />Måndag - Fredag:<br />' + info[infoElements['hours-mon-fri']]) : '')
				+ ((info[infoElements['hours-sat']] != '') ? ('<br />Lördag:<br />' + info[infoElements['hours-sat']]) : '')
				+ ((info[infoElements['hours-sun']] != '') ? ('<br />Söndag:<br />' + info[infoElements['hours-sun']]) : '')
				+ '</p>')
				: ''
				)
				
			+ (info[infoElements['other-open']] && info[infoElements['other-open']].replace(/^\s+|\s+$/, '') ? 	'<p><strong>' + info[infoElements['other-open']] + '</strong><br />' + (info[infoElements['other-open-1']] && info[infoElements['other-open-1']].replace(/^\s+|\s+$/, '') ? info[infoElements['other-open-1']] + '<br />' : '') + (info[infoElements['other-open-2']] && info[infoElements['other-open-2']].replace(/^\s+|\s+$/, '') ? info[infoElements['other-open-2']] + '<br />' : '') + (info[infoElements['other-open-3']] && info[infoElements['other-open-3']].replace(/^\s+|\s+$/, '') ? info[infoElements['other-open-3']] + '<br />' : '') + '</p>' : '')
	
			;
				
		//popupContainer.insertBefore(infoBox, popupBlack);
	}

	return false;
}

function deselect()
{

	for (var i = 0; i < selectedMarkers.length; i++) {
		selectedMarkers[i].src='/images/dot_black.gif';
		
		for (var j = 0; j < selectedMarkers[i].link.length; j++) {
			selectedMarkers[i].link[j].className = '';
		}
		
		selectedMarkers[i] = null;
	}
	
	return false;
}


function activate(marker)
{
	marker = getMarker(marker);

	marker.src='/images/dot_yellow.gif';
	
	return false;
}

function deactivate(marker)
{
	marker = getMarker(marker);

	var selected = false;
	
	for (var i = 0; i < selectedMarkers.length; i++) {
		if (marker == selectedMarkers[i]) {
			selected = true;
			break;
		}
	}
	
	if (!selected) {
		marker.src='/images/dot_black.gif';
	}
	
	return false;
}


function getMarker(marker) {
	if (marker.origId) {
		return getMarker(markers[marker.origId]);
	} else {
		return marker;
	}
}