map.GUI = {};

map.GUI.layerMainId = 'layerMain';

map.GUI.layerMapId = 'layerMap';

map.GUI.layerMenuId = 'layerMenu';

map.GUI.layerMenuLayersId = 'layerMenuAreas';

//--- init

map.GUI.init = function(){
	map.GUI.createMenuLayers();
};

//--- main container

map.GUI.getMainContainer = function(){
	return map.Support.getElement(map.GUI.layerMainId);
};

map.GUI.getMainContainerWidth = function(){
	return parseInt(map.GUI.getMainContainer().style['width']); //map.Config.containerWidth;
};

map.GUI.getMainContainerHeight = function(){
	return parseInt(map.GUI.getMainContainer().style['height']); //map.Config.containerHeight;
};

//--- container

map.GUI.getContainer = function(){
	return map.Support.getElement(map.GUI.layerMapId);
};

map.GUI.getContainerWidth = function(){
	return parseInt(map.GUI.getContainer().style['width']); //map.Config.containerWidth;
};

map.GUI.getContainerHeight = function(){
	return parseInt(map.GUI.getContainer().style['height']); //map.Config.containerHeight;
};

map.GUI.clearContainer = function(){
	map.GUI.getContainer().innerHTML = '';
};

map.GUI.changeContainerDimensions = function(){
	var level = map.Params.getLevel();
	var dimensions = map.Levels.items[level][map.Levels.itemsKeys.MAP];
	var div = map.GUI.getContainer();
	div['style']['width']	= dimensions[map.Levels.scale.HORIZONTAL] + 'px';
	div['style']['height']	= dimensions[map.Levels.scale.VERTICAL] + 'px';
	//alert(div['style']['width'] + '-' + div['style']['height']);
	//AREA	: 1
};

//--- menu

map.GUI.getMenuContainer = function(){
	return map.Support.getElement(map.GUI.layerMenuId);
};

map.GUI.getMenuLayersContainer = function(){
	return map.Support.getElement(map.GUI.layerMenuLayersId);
};

//--- menu layers

map.GUI.createMenuLayers = function(){
	var layer = map.GUI.getMenuLayersContainer();

	if(layer != null){
		var form = document.createElement('form');
		form.style['margin'] = '0px';
		layer.appendChild(form);

		for(var i = 0; i < map.Layers.items.length; i++){
			var layerId = map.Layers.items[i][map.Layers.itemKeys.ID];

			var div = document.createElement('div');
			//div.style['width'] = '180px';
			div.style['margin'] = '5px 0px 5px 0px';

			//--- div1

			var div1 = document.createElement('div');
			typeof(div1.style.styleFloat) != 'undefined' ? div1.style.styleFloat = 'left' : div1.style.cssFloat = 'left';
			div1.style['width'] = '50px';
			//div1.style['background'] = 'red';

			var checkbox = document.createElement('input');
			checkbox.type = 'checkbox';
			checkbox.value = layerId;
			checkbox.style['verticalAlign'] = 'middle';
			div1.appendChild(checkbox);
			checkbox.checked = map.Layers.isVisibleById(layerId);
			checkbox.onclick = function(ev){
				var checkbox = map.Support.getSourceElement(ev);
				map.GUI.changeLayersVisibility(checkbox.getAttribute('value'), checkbox.checked);
			};

			var img = document.createElement('img');
			//span.style['color'] = map.Layers.getColorByIndex(i); //map.Layers.items[i][map.Layers.itemKeys.COLOR];
			img.src = map.Layers.getIconByIndex(i);
			img.style['verticalAlign'] = 'middle';
			img.style['border']	= map.Config.pointsBorder;
			img.style['margin'] = '0 5px 1px 3px';
			div1.appendChild(img);

			div.appendChild(div1);

			//--- div2

			var div2 = document.createElement('div');
			typeof(div2.style.styleFloat) != 'undefined' ? div2.style.styleFloat = 'left' : div2.style.cssFloat = 'left';
			div2.style['width'] = '130px';
			//div2.style['background'] = 'green';
			div2.style['color'] = map.Layers.getColorByIndex(i);
			div2.innerHTML = map.Layers.items[i][map.Layers.itemKeys.NAME];

			div.appendChild(div2);

			form.appendChild(div);
		}
	}
};

//--- areas

map.GUI.createAreas = function(){
	var container = map.GUI.getContainer();
	var level = map.Params.getLevel();

	for(var i = 0; i < map.Areas.items.length; i++){
		if(map.Areas.items[i][map.Areas.itemsKeys.LEVEL] == level){
			var div = document.createElement('div');
			div.style['position'] 	= 'absolute';
			div.style['left'] 		= map.Areas.items[i][map.Areas.itemsKeys.POSITION][map.Engine.position.X] + 'px';
			div.style['top'] 		= map.Areas.items[i][map.Areas.itemsKeys.POSITION][map.Engine.position.Y] + 'px';
			div.style['width'] 	= map.Levels.items[level][map.Levels.itemsKeys.AREA][map.Engine.dimension.WIDTH] + 'px';
			div.style['height'] = map.Levels.items[level][map.Levels.itemsKeys.AREA][map.Engine.dimension.HEIGHT] + 'px';
			//div.style['overflow'] = 'visible';

			var image = document.createElement('img');
			image.src = map.Config.dataPath + map.Config.areasImagePath + map.Areas.items[i][map.Areas.itemsKeys.IMAGE];
			image.onclick = map.GUI.areasClickInArea;

			div.appendChild(image);

			container.appendChild(div);
		}
	}
};

map.GUI.areasClickInArea = function(){
	map.GUI.hidePointsDescriptionLayers();
};

//--- layers

map.GUI.changeLayersVisibility = function(layerId, isVisibility){
	for(var i = 0; i < map.Layers.items.length; i++){
		if(map.Layers.items[i][map.Layers.itemKeys.ID] == layerId){
			map.Layers.items[i][map.Layers.itemKeys.IS_VISIBLE] = isVisibility;
		}
	}
	map.GUI.changePointsVisibility(layerId, isVisibility);
};

//--- points

map.GUI.createPoints = function(){
	var container 	= map.GUI.getContainer();
	var level 		= map.Params.getLevel();
	var size 		= map.Config.pointsIsResize ? map.Config.pointsIconSize * (level + 1) : map.Config.pointsIconSize;

	for(var i = 0; i < map.Points.items.length; i++){
		var layerId = map.Points.items[i][map.Points.itemKeys.LAYER_ID];

		//--- div
		var div = document.createElement('div');
		div.id					= map.Points.items[i][map.Points.itemKeys.ID];
		div.style['position'] 	= 'absolute';
		div.style['left'] 		= (map.Points.items[i][map.Points.itemKeys.POSITION][level][map.Engine.position.X] - (size / 2)) + 'px';
		div.style['top'] 		= (map.Points.items[i][map.Points.itemKeys.POSITION][level][map.Engine.position.Y] - (size / 2)) + 'px';
		div.style['width'] 		= size + 'px';
		div.style['height'] 	= size + 'px';
		div.style['background'] = map.Layers.getColorById(layerId);
		div.style['border']		= map.Config.pointsBorder;
		//div.style['cursor'] 	= 'hand';
		div.style['visibility'] = map.Layers.isVisibleById(layerId) ? 'visible' : 'hidden';

		//---
		var a = document.createElement('a');
		//a.pointIndex = i;
		a.href = 'javascript:void(0)';
		a.onclick = map.GUI.pointsClickInPoint;
		div.appendChild(a);

		//--- img
		var img = document.createElement('img');
		img.pointIndex = i;
		img.src = map.Layers.getIconById(layerId);
		img.style['width'] 	= size + 'px';
		img.style['height'] = size + 'px';
		img.style['border'] = '0px';
		a.appendChild(img);

		container.appendChild(div);

		//--- divDescription
		var divDescription = document.createElement('div');
		divDescription.id = map.GUI.getPointsDescriptionLayerId(i);
		divDescription.className = 'mapPoint'; //map.Points.mapPointClassName;
		divDescription.style['position'] 	= 'absolute';
		divDescription.style['left'] 		= '0px';
		divDescription.style['top'] 		= '0px';
		divDescription.style['width'] 		= map.Config.pointsDescriptionLayerWidth + 'px';
		divDescription.style['height'] 		= map.Config.pointsDescriptionLayerHeight + 'px';
		/*
		divDescription.style['border'] 		= 'black 1px solid';
		divDescription.style['background'] 	= 'white';
		divDescription.style['padding'] 	= '10px';
		*/
		map.Support.visibility(divDescription, false);

		var content = '<div class="mapPointName">' +
			'<div style="float: left; width: ' + (map.Config.pointsDescriptionLayerWidth - 30) + 'px;">' + map.Points.items[i][map.Points.itemKeys.NAME] + '</div>' +
			'<div style="float: right; margin-left: 5px;"><a href="javascript:void(0)" onclick="map.GUI.hidePointsDescriptionLayers();"><img src="' +
			map.Config.dataPath + map.Config.mainPath + map.Config.layersDescriptionCloseIcon + '" alt="" style="border:0 ;" /></a></div>' +
		'</div>';
		if(typeof(map.Points.items[i][map.Points.itemKeys.CONTENT]) == 'string'){
			content += '<div class="mapPointContent">' + map.Points.items[i][map.Points.itemKeys.CONTENT] + '</div>';
		}
		else if(typeof(map.Points.items[i][map.Points.itemKeys.CONTENT]) == 'object'){
			var c = map.Points.items[i][map.Points.itemKeys.CONTENT];
			content += '<div class="mapPointContent"><table cellspacing="0" cellpadding="0">';
			if(c['adres'] != ''){
				content += '<tr><td>' + map.Labels.getLabel(map.Labels.itemKeys.ADDRESS) + ':&nbsp;</td><td>' + c['adres'] + '</td></tr>';
			}
			if(c['telefon'] != ''){
				content += '<tr><td>' + map.Labels.getLabel(map.Labels.itemKeys.PHONE) + ':&nbsp;</td><td>' + c['telefon'] + '</td></tr>';
			}
			if(c['fax'] != ''){
				content += '<tr><td>' + map.Labels.getLabel(map.Labels.itemKeys.FAX) + ':&nbsp;</td><td>' + c['fax'] + '</td></tr>';
			}
			if(c['email'] != ''){
				content += '<tr><td>' + map.Labels.getLabel(map.Labels.itemKeys.EMAIL) + ':&nbsp;</td><td><a href="mailto:' + c['email'] + '">' + c['email_label'] + '</a></td></tr>';
			}
			if(c['www'] != ''){
				content += '<tr><td>' + map.Labels.getLabel(map.Labels.itemKeys.WWW) + ':&nbsp;</td><td><a href="' + c['www'] + '" target="_blank">' + c['www_label'] + '</a></td></tr>';
			}
			if(c['dyrektor'] != ''){
				content += '<tr><td>' + map.Labels.getLabel(map.Labels.itemKeys.MANAGER) + ':&nbsp;</td><td>' + c['dyrektor'] + '</td></tr>';
			}
			content += '</table></div>'
		}
		if(map.Points.items[i][map.Points.itemKeys.LINK]){
			content += '<div class="mapPointLink"><a href="' + map.Points.items[i][map.Points.itemKeys.LINK]
			+ '" target="main">' + map.Labels.getLabel(map.Labels.itemKeys.MORE) + '</a></div>';
		}
		divDescription.innerHTML = content;

		/*
		divDescription.onclick = function(event){
			var element = map.Support.getSourceElement(event);
			map.Support.visibility(element, false);
		};
		*/

		map.Support.getBody().appendChild(divDescription);
	}
};

map.GUI.pointsClickInPoint = function(event){
	map.GUI.showPointsDescriptionLayer(event);
};

map.GUI.showPointsDescriptionLayer = function(event){
	map.GUI.hidePointsDescriptionLayers();

	var body	= map.Support.getBody(); //(document.documentElement || document.body);
	var event	= map.Support.getSourceEvent(event);
	var a		= map.Support.getSourceElement(event);
	var id		= map.GUI.getPointsDescriptionLayerId(a.pointIndex);
	var div		= map.Support.getElement(id);

	//var level = map.Params.getLevel();

	if(map.Points.items[a.pointIndex][map.Points.itemKeys.NAME] != ''){
		div.style['left'] = map.GUI.getPointsDescriptionLayerPositionX(
			  event.clientX
			, map.Config.pointsIsResize ? map.Config.pointsDescriptionLayerOffset * map.Levels.calculateScale() : map.Config.pointsDescriptionLayerOffset
			, map.Config.pointsDescriptionLayerWidth
		) + 'px';
		div.style['top'] = map.GUI.getPointsDescriptionLayerPositionY(
			  event.clientY
			, map.Config.pointsIsResize ? map.Config.pointsDescriptionLayerOffset * map.Levels.calculateScale() : map.Config.pointsDescriptionLayerOffset
			, map.Config.pointsDescriptionLayerHeight
		) + 'px';

		map.Support.visibility(div, true);
	}
};

map.GUI.getPointsDescriptionLayerPositionX = function(cursorX, layerOffsetX, layerWidth){

	return map.GUI.getPointsDescriptionLayerPosition(map.Support.getBody().clientWidth, cursorX, layerOffsetX, layerWidth);
};

map.GUI.getPointsDescriptionLayerPositionY = function(cursorY, layerOffsetY, layerHeight){

	return map.GUI.getPointsDescriptionLayerPosition(map.Support.getBody().clientHeight, cursorY, layerOffsetY, layerHeight);
};

map.GUI.getPointsDescriptionLayerPosition = function(pageSize, cursorPosition, layerOffset, layerSize){

	var offset = 15;
	var size = cursorPosition + layerOffset + layerSize;
	if(size < pageSize - offset)
		return cursorPosition + layerOffset;
	else
		return cursorPosition - (layerOffset + layerSize);
};

map.GUI.changePointsVisibility = function(layerId, isVisible){
	for(var i = 0; i < map.Points.items.length; i++){
		if(map.Points.items[i][map.Points.itemKeys.LAYER_ID] == layerId){
			var point = map.Support.getElement(map.Points.items[i][map.Points.itemKeys.ID]);
			map.Support.visibility(point, isVisible);
		}
	};
};

map.GUI.getPointsDescriptionLayerId = function(index){
	return map.Support.replacePattern(map.Config.pointsDescriptionLayerPatternId, {'index': index});
};

map.GUI.hidePointsDescriptionLayers = function(){
	for(var i = 0; i < map.Points.items.length; i++){
		var id = map.GUI.getPointsDescriptionLayerId(i);
		map.Support.visibility(map.Support.getElement(id), false);
	};
};

//--- link to map

map.GUI.loadLinkToMap = function(){
	var element = document.getElementById(map.Config.fieldLinkToMapId);
	if(element != null){
		element.value = map.Params.createLinkToMap();
	}
};

map.GUI.resetFieldStreets = function(){
	var element = document.getElementById(map.Config.fieldStreetsId);
	if(element != null){
		element.selectedIndex = 0;
	}
};