/*-----------------------------------------------------------------------
Basic JavaScript File

version: 	4.1
author:		sebastian kupke
email:		sebastian.kupke@baral-geohaus.de
website:	http://www.baral.de
-----------------------------------------------------------------------*/

/* =namespace graphic
-----------------------------------------------------------------------*/
ws.g = {
	
	
	svg: {
		
		// namespace
		ns: 'http://www.w3.org/2000/svg',
		
		/* =create image
		-----------------------------------------------------------------------*/
		createImage: function(obj, mapDivWidth, mapDivHeight, scale, path) {
			
			var i = ws.m.objects.shapeToImage(obj);
			var pos = ws.map.coords2Px(i.point, mapDivWidth, mapDivHeight);
			
			var top, left, width, height;
			
			if (ws.m.objects.imgAutosize) {
				var size = ws.m.objects.getImageSize(scale);
				top = pos.y - (size / 2);
				left = pos.x - (size / 2);
				width = size;
				height = size;
			} else {
				top = pos.y - (i.height / 2);
				left = pos.x - (i.width / 2);
				width = i.width;
				height = i.height;
			}
			
			// m_print
			if (!path) {
				path = '';
			}
			
			/* =image
			-----------------------------------------------------------------------*/
			var image = document.createElementNS(ws.g.svg.ns, 'image');
			image.setAttribute('id', 'm_objects_object_' + obj.id);
			image.setAttribute('obj_id', obj.id);
			image.setAttribute('show_tooltip', obj.groupObjectTooltip);
			image.setAttribute('hover', obj.groupObjectHover);
			image.setAttribute('shape_type', 'image');
			image.setAttribute('x', left);
			image.setAttribute('y', top);
			image.setAttribute('width', width);
			image.setAttribute('height', height);
			image.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', path + 'data/' + ws.m.objects.datasource + '/img/object/' + obj.groupObjectImgDir + '/' + i.src);
			
			/* =click event
			-----------------------------------------------------------------------*/
			if (obj.url) {
				
				image.onmouseover = function(e) {
					this.style.cursor = 'pointer';
				};
				
				image.onmousedown = function(e) {
					
					// cancel bubbling
					e.stopPropagation();
					
					ws.m.objects.clickStart = {
						x: e.pageX,
						y: e.pageY
					}
				};
				
				image.onmouseup = function(e) {
					if (ws.m.objects.clickStart.x == e.pageX && ws.m.objects.clickStart.y == e.pageY) {
						window.open(obj.url, '_blank');
					}
				};
			}
			
			return image;
		},
		
		/* =create point
		-----------------------------------------------------------------------*/
		createPoint: function(obj, mapDivWidth, mapDivHeight) {
			
			var p = ws.m.objects.shapeToPoint(obj);
			var pos = ws.map.coords2Px(p.point, mapDivWidth, mapDivHeight);
			
			/* =point
			-----------------------------------------------------------------------*/
			var point = document.createElementNS(ws.g.svg.ns, 'circle');
			point.setAttribute('id', 'm_objects_object_' + obj.id);
			point.setAttribute('obj_id', obj.id);
			point.setAttribute('show_tooltip', obj.groupObjectTooltip);
			point.setAttribute('hover', obj.groupObjectHover);
			point.setAttribute('shape_type', 'point');
			point.setAttribute('r', p.r);
			point.setAttribute('cx', pos.x);
			point.setAttribute('cy', pos.y);
			point.setAttribute('stroke', p.strokeColor);
			point.setAttribute('stroke-width', p.strokeWidth);
			point.setAttribute('stroke-opacity', p.strokeOpacity);
			point.setAttribute('fill', p.fillColor);
			point.setAttribute('fill-opacity', p.fillOpacity);
			
			/* =click event
			-----------------------------------------------------------------------*/
			if (obj.url) {
				
				point.onmouseover = function(e) {
					this.style.cursor = 'pointer';
				};
				
				point.onmousedown = function(e) {
					
					// cancel bubbling
					e.stopPropagation();
					
					ws.m.objects.clickStart = {
						x: e.pageX,
						y: e.pageY
					}
				};
				
				point.onmouseup = function(e) {
					if (ws.m.objects.clickStart.x == e.pageX && ws.m.objects.clickStart.y == e.pageY) {
						window.open(obj.url, '_blank');
					}
				};
			}
			
			return point;
		},
		
		/* =create line
		-----------------------------------------------------------------------*/
		createLine: function(obj, mapDivWidth, mapDivHeight) {
			
			var l = ws.m.objects.shapeToLine(obj);
			
			/* =line
			-----------------------------------------------------------------------*/
			var line = document.createElementNS(ws.g.svg.ns, 'polyline');
			line.setAttribute('id', 'm_objects_object_' + obj.id);
			line.setAttribute('obj_id', obj.id);
			line.setAttribute('show_tooltip', obj.groupObjectTooltip);
			line.setAttribute('hover', obj.groupObjectHover);
			line.setAttribute('shape_type', 'line');
			
			var coords = '';
			for (i = 0; i < l.points.length; i++) {
				coords += i > 0 ? ' ' : '';
				var pos = ws.map.coords2Px(l.points[i], mapDivWidth, mapDivHeight);
				coords += pos.x + ',' + pos.y;
			}
			
			line.setAttribute('points', coords);
			line.setAttribute('fill', 'none');
			line.setAttribute('stroke', l.strokeColor);
			line.setAttribute('stroke-width', l.strokeWidth);
			line.setAttribute('opacity', l.strokeOpacity);
			
			/* =click event
			-----------------------------------------------------------------------*/
			if (obj.url) {
				
				line.onmouseover = function(e) {
					this.style.cursor = 'pointer';
				};
				
				line.onmousedown = function(e) {
					
					// cancel bubbling
					e.stopPropagation();
					
					ws.m.objects.clickStart = {
						x: e.pageX,
						y: e.pageY
					}
				};
				
				line.onmouseup = function(e) {
					if (ws.m.objects.clickStart.x == e.pageX && ws.m.objects.clickStart.y == e.pageY) {
						window.open(obj.url, '_blank');
					}
				};
			}
			
			return line;
		},
		
		/* =create polygon
		-----------------------------------------------------------------------*/
		createPolygon: function(obj, mapDivWidth, mapDivHeight) {
			
			var p = ws.m.objects.shapeToPolygon(obj);
			
			/* =polygon
			-----------------------------------------------------------------------*/
			var polygon = document.createElementNS(ws.g.svg.ns, 'polygon');
			polygon.setAttribute('id', 'm_objects_object_' + obj.id);
			polygon.setAttribute('obj_id', obj.id);
			polygon.setAttribute('show_tooltip', obj.groupObjectTooltip);
			polygon.setAttribute('hover', obj.groupObjectHover);
			polygon.setAttribute('shape_type', 'polygon');
			
			var coords = '';
			for (i = 0; i < p.points.length; i++) {
				coords += i > 0 ? ' ' : '';
				var pos = ws.map.coords2Px(p.points[i], mapDivWidth, mapDivHeight);
				coords += pos.x + ',' + pos.y;
			}
			
			polygon.setAttribute('points', coords);
			polygon.setAttribute('fill', p.fillColor);
			polygon.setAttribute('fill-opacity', p.fillOpacity);
			polygon.setAttribute('stroke', p.strokeColor);
			polygon.setAttribute('stroke-width', p.strokeWidth);
			polygon.setAttribute('stroke-opacity', p.strokeOpacity);
			
			/* =click event
			-----------------------------------------------------------------------*/
			if (obj.url) {
				
				polygon.onmouseover = function(e) {
					this.style.cursor = 'pointer';
				};
				
				polygon.onmousedown = function(e) {
					
					// cancel bubbling
					e.stopPropagation();
					
					ws.m.objects.clickStart = {
						x: e.pageX,
						y: e.pageY
					}
				};
				
				polygon.onmouseup = function(e) {
					if (ws.m.objects.clickStart.x == e.pageX && ws.m.objects.clickStart.y == e.pageY) {
						window.open(obj.url, '_blank');
					}
				};
			}
			
			return polygon;
		}
	},
	
	vml: {
		
		/* =create image
		-----------------------------------------------------------------------*/
		createImage: function(obj, mapDivWidth, mapDivHeight, scale, path) {
		
			var i = ws.m.objects.shapeToImage(obj);
			var pos = ws.map.coords2Px(i.point, mapDivWidth, mapDivHeight);
			
			var top, left, width, height;
			
			if (ws.m.objects.imgAutosize) {
				var size = ws.m.objects.getImageSize(scale);
				top = pos.y - (size / 2);
				left = pos.x - (size / 2);
				width = size;
				height = size;
			} else {
				top = pos.y - (i.height / 2);
				left = pos.x - (i.width / 2);
				width = i.width;
				height = i.height;
			}
			
			// m_print
			if (!path) {
				path = '';
			}
		
			/* =image
			-----------------------------------------------------------------------*/
			var image = $(document.createElement('v:image')).attr({
				id: 'm_objects_object_' + obj.id,
				obj_id: obj.id,
				shape_type: 'image',
				show_tooltip: obj.groupObjectTooltip,
				hover: obj.groupObjectHover,
				src: 'data/' + ws.m.objects.datasource + '/img/object/' + obj.groupObjectImgDir + '/' + i.src
			}).css({
				width: width + 'px',
				height: height + 'px',
				position: 'absolute',
				top: top + 'px',
				left: left + 'px'
			});
			
			/* =click event
			-----------------------------------------------------------------------*/
			if (obj.url) {
				
				image.css('cursor', 'pointer');
				
				image.mousedown(function(e) {
					
					// cancel bubbling
					e.stopPropagation();
					
					ws.m.objects.clickStart = {
						x: e.pageX,
						y: e.pageY
					}
				});
				
				image.mouseup(function(e) {
					if (ws.m.objects.clickStart.x == e.pageX && ws.m.objects.clickStart.y == e.pageY) {
						window.open(obj.url, '_blank');
					}
				});
			}
			
			return image;
		},
		
		/* =create point
		-----------------------------------------------------------------------*/
		createPoint: function(obj, mapDivWidth, mapDivHeight) {
			
			var p = ws.m.objects.shapeToPoint(obj);
			var pos = ws.map.coords2Px(p.point, mapDivWidth, mapDivHeight);
			
			var diameter = p.r * 2;
			var top = pos.y - p.r;
			var left = pos.x - p.r;

			/* =point
			-----------------------------------------------------------------------*/
			var point = $(document.createElement('v:oval')).attr({
				id: 'm_objects_object_' + obj.id,
				obj_id: obj.id,
				shape_type: 'point',
				show_tooltip: obj.groupObjectTooltip,
				hover: obj.groupObjectHover
			}).css({
				width: diameter + 'px',
				height: diameter + 'px',
				position: 'absolute',
				top: top + 'px',
				left: left + 'px'
			});
			
			/* =click event
			-----------------------------------------------------------------------*/
			if (obj.url) {
				
				point.css('cursor', 'pointer');
				
				point.mousedown(function(e) {
					
					// cancel bubbling
					e.stopPropagation();
					
					ws.m.objects.clickStart = {
						x: e.pageX,
						y: e.pageY
					}
				});
				
				point.mouseup(function(e) {
					if (ws.m.objects.clickStart.x == e.pageX && ws.m.objects.clickStart.y == e.pageY) {
						window.open(obj.url, '_blank');
					}
				});
			}
			
			/* =fill
			-----------------------------------------------------------------------*/
			var fill = $(document.createElement('v:fill')).attr({
				color: p.fillColor,
				opacity: p.fillOpacity
			});
			
			/* =stroke
			-----------------------------------------------------------------------*/
			var stroke = $(document.createElement('v:stroke')).attr({
				color: p.strokeColor,
				weight: p.strokeWidth,
				opacity: p.strokeOpacity
			});
			
			/* =append fill and stroke
			-----------------------------------------------------------------------*/
			point.append(fill);
			point.append(stroke);
			
			return point;
		},
		
		/* =create line
		-----------------------------------------------------------------------*/
		createLine: function(obj, mapDivWidth, mapDivHeight) {
			
			var l = ws.m.objects.shapeToLine(obj);
			
			var coords = '';
			
			for (i = 0; i < l.points.length; i++) {
				var pos = ws.map.coords2Px(l.points[i], mapDivWidth, mapDivHeight);
				if (i == 0) {
					coords += 'm' + pos.x + ',' + pos.y + ' ';
				} else if (i == 1) {
					coords += 'l' + pos.x + ',' + pos.y + ' ';
				} else {
					coords += pos.x + ',' + pos.y + ' ';
				}
			}
			
			/* =line
			-----------------------------------------------------------------------*/
			var line = $(document.createElement('v:shape')).attr({
				path: coords + ' e',
				coordsize: mapDivWidth + ' ' + mapDivHeight,
				id: 'm_objects_object_' + obj.id,
				obj_id: obj.id,
				shape_type: 'line',
				show_tooltip: obj.groupObjectTooltip,
				hover: obj.groupObjectHover,
				filled: false
			}).css({
				position: 'absolute',
				top: '0px',
				left: '0px',
				width: mapDivWidth + 'px',
				height: mapDivHeight + 'px'
			});
			
			/* =click event
			-----------------------------------------------------------------------*/
			if (obj.url) {
				
				line.css('cursor', 'pointer');
				
				line.mousedown(function(e) {
					
					// cancel bubbling
					e.stopPropagation();
					
					ws.m.objects.clickStart = {
						x: e.pageX,
						y: e.pageY
					}
				});
				
				line.mouseup(function(e) {
					if (ws.m.objects.clickStart.x == e.pageX && ws.m.objects.clickStart.y == e.pageY) {
						window.open(obj.url, '_blank');
					}
				});
			}
			
			/* =stroke
			-----------------------------------------------------------------------*/
			var stroke = $(document.createElement('v:stroke')).attr({
				weight: l.strokeWidth,
				color: l.strokeColor,
				opacity: l.strokeOpacity
			});
			
			/* =append stroke
			-----------------------------------------------------------------------*/
			line.append(stroke);
			
			return line;
		},
		
		/* =create polygon
		-----------------------------------------------------------------------*/
		createPolygon: function(obj, mapDivWidth, mapDivHeight) {
			
			var p = ws.m.objects.shapeToPolygon(obj);
			
			var coords = '';
			
			for (i = 0; i < p.points.length; i++) {
				var pos = ws.map.coords2Px(p.points[i], mapDivWidth, mapDivHeight);
				if (i == 0) {
					coords += 'm' + pos.x + ',' + pos.y + ' ';
				} else if (i == 1) {
					coords += 'l' + pos.x + ',' + pos.y + ' ';
				} else {
					coords += pos.x + ',' + pos.y + ' ';
				}
			}
			
			/* =polygon
			-----------------------------------------------------------------------*/
			var polygon = $(document.createElement('v:shape')).attr({
				path: coords + ' x e',
				coordsize: mapDivWidth + ' ' + mapDivHeight,
				id: 'm_objects_object_' + obj.id,
				obj_id: obj.id,
				shape_type: 'polygon',
				show_tooltip: obj.groupObjectTooltip,
				hover: obj.groupObjectHover
			}).css({
				position: 'absolute',
				top: '0px',
				left: '0px',
				width: mapDivWidth + 'px',
				height: mapDivHeight + 'px'
			});
			
			/* =click event
			-----------------------------------------------------------------------*/
			if (obj.url) {
				
				polygon.css('cursor', 'pointer');
				
				polygon.mousedown(function(e) {
					
					// cancel bubbling
					e.stopPropagation();
					
					ws.m.objects.clickStart = {
						x: e.pageX,
						y: e.pageY
					}
				});
				
				polygon.mouseup(function(e) {
					if (ws.m.objects.clickStart.x == e.pageX && ws.m.objects.clickStart.y == e.pageY) {
						window.open(obj.url, '_blank');
					}
				});
			}
			
			/* =fill
			-----------------------------------------------------------------------*/
			var fill = $(document.createElement('v:fill')).attr({
				color: p.fillColor,
				opacity: p.fillOpacity
			});
			
			/* =stroke
			-----------------------------------------------------------------------*/
			var stroke = $(document.createElement('v:stroke')).attr({
				color: p.strokeColor,
				weight: p.strokeWidth,
				opacity: p.strokeOpacity
			});
			
			/* =append fill and stroke
			-----------------------------------------------------------------------*/
			polygon.append(fill);
			polygon.append(stroke);
			
			return polygon;
		}
	}
};