<?php
session_start();
?>

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="icon" href="logo.png">
  <title>InterMap</title>
  <meta name="description" content="InterMap">
  <meta name="author" content="AD">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:700,400&amp;subset=cyrillic,latin,greek,vietnamese">
</head>

<body>
<script src="snap/dist/snap.svg.js"></script>
<script src="jszip/dist/jszip.js"></script>
<script src="FileSaver/FileSaver.js"></script>
<script src="jscolor/jscolor.js"></script>

<div id="paper">
    <svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>
</div>

<div id="leftPanel">
	<div id="dNoElementSelected">
		<p id="pNoElementSelected">Click on an element to modify its properties</p>
		<div class="bar"></div>
	</div>
	<div id="dElementSelected" style="display: none;">
	</div>
</div>

<div id="interface">
    <button class="niceButton orangeButton" onclick="changeTemplate()">CHANGE TEMPLATE</button>
	<button class="niceButton orangeButton" onclick="showPopUpImportMap()">IMPORT MAP</button>
    <button class="niceButton orangeButton" onclick="exportMap()">EXPORT MAP</button>
	
    <div class="bar"></div>
	<button class="niceButton orangeButton">GLOBAL OPTIONS</button>
    <button class="niceButton orangeButton" onclick="showPopUpTimelineOptions()">TIMELINE</button>
</div>

<div id="bgpopup" onClick="hidePopup()">
</div>

<script>
var zoomSpeed = 1.1;
var currentZoom = 1;

var s = Snap("#svg");

var paper = document.getElementById("svg");
if (paper.addEventListener) {
	paper.addEventListener("mousewheel", mouseWheelHandler, false);
	paper.addEventListener("DOMMouseScroll", mouseWheelHandler, false);
}
else {
	paper.attachEvent("onmousewheel", mouseWheelHandler);
}

var svgX = paper.getBoundingClientRect().left;
var svgY = paper.getBoundingClientRect().top;

var superGroup, mapGroup, legendGroup, timelineGroup, tempGroup;
var layerNullMap, layerNullLegend;
var svgFileContent = null;
var id = 0;

var layers = {};

loadLocalSvgFile("testCalque.svg");

//------------------------------------------------------------------------
//Utils
//------------------------------------------------------------------------

function isElementFinal(element) {
	return element.children().length == 0 || (element.type == "g" && !(element.attr("id") && (element.attr("id").startsWith("layer") || element.attr("id") == "tempGroup" || element.attr("id") == "mapGroup")));
}

function isLayer(element) {
	return element.type == "g" && element.attr("id") && element.attr("id").startsWith("layer");
}

//------------------------------------------------------------------------
// Change svg file
//------------------------------------------------------------------------

function loadLocalSvgFile(fileName) {
	initLoad();
	Snap.load(fileName, function (f) {
		loadSvgFragment(f, true);
	});
}

/*
function loadCustomSvgFile() {
	initLoad();
	var file = document.getElementById("fileCustomTemplate").files[0];
	if (file) {
		var reader = new FileReader();
		reader.readAsText(file, "UTF-8");
		reader.onload = function (evt) {
			loadFragment(Snap.parse(evt.target.result), true);
		}
		reader.onerror = function (evt) {
			console.log("error reading file");
		}
	}
	else {
		hidePopup();
	}
}

function loadImportedSvgFile() {
	initLoad();
	loadFragment(Snap.parse(newData.map), false);
}*/

function initLoad() {
	
	superGroup = s.g();
	superGroup.attr({
		id: "superGroup"
	});

	mapGroup = s.g();
	mapGroup.attr({
		id: "mapGroup"
	});
	superGroup.append(mapGroup);

	legendGroup = s.g();
	legendGroup.attr({
		id: "legendGroup"
	});
	superGroup.append(legendGroup);

	timelineGroup = s.g();
	timelineGroup.attr({
		id: "timelineGroup"
	});
	superGroup.append(timelineGroup);
	
	tempGroup = s.g();
	tempGroup.attr({
		id: "tempGroup"
	});
	
	layers = {};
	
	layerNullMap = s.g();
	layerNullMap.attr({
		id: "layerNullMap"
	});
	mapGroup.append(layerNullMap);
	
	layerNullLegend = s.g();
	layerNullLegend.attr({
		id: "layerNullLegend"
	});
	legendGroup.append(layerNullLegend);
	
	layers["layerNull"] = {
		map : layerNullMap,
		legend : layerNullLegend
	};
}

function loadSvgFragment(f, shouldInitID) {
	tempGroup.append(f);
	
	if (shouldInitID) {
		initializeID(tempGroup);
	}
	
	svgFileContent = tempGroup.innerSVG();
	
	initializeLayers(tempGroup);
	tempGroup.remove();
	
	initializeElements(mapGroup);
}

function initializeID(element) {
	if (isElementFinal(element)) {
		element.data("id", "elem" + (id++));
		element.attr({
			id: "" + element.data("id")
		});
		
	}
	else {
		element.children().forEach(function(child) {
			initializeID(child);
		});
	}
}

function initializeLayers(element) {
	if (isElementFinal(element)) {
		layerNullMap.append(element);
	}
	else if (isLayer(element)) {
		var layerLegend = s.g();
		layerLegend.attr({
			id: element.attr("id") + "Legend"
		});
		legendGroup.append(layerLegend);
		
		element.attr({
			id: "" + element.attr("id") + "Map"
		});
		mapGroup.append(element);
		
		layers["layerNull"] = {
			map : element,
			legend : layerLegend
		};
	}
	else {
		element.children().forEach(function(child) {
			initializeLayers(child);
		});
	}
}

function initializeElements(element) {
	if (isElementFinal(element)) {
		
			
		if (element.attr("id")) {
			var elementParent = s.g();
			elementParent.attr({
				id: element.attr("id") + "Parent"
			});
			element.parent().append(elementParent);
			elementParent.append(element);
			
			element.data("parent", elementParent);
			
			/*element.click(clickCallback);
			element.mouseover(hoverCallback);
			element.mouseout(outCallback);*/
		}
	}
	else {
		element.children().forEach(function(child) {
			initializeElements(child);
		});
	}
}

//------------------------------------------------------------------------
//Wheel
//------------------------------------------------------------------------

function mouseWheelHandler(event) {
	var delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)));
	
	if ((event.wheelDelta || -event.detail) > 0) {
        var t = new Snap.Matrix();
        t.scale(zoomSpeed, zoomSpeed, event.pageX-svgX, event.pageY-svgY);
        t.add(mapGroup.transform().localMatrix);
        mapGroup.transform(t);
		
		currentZoom *= zoomSpeed;
	}
	else {
		var t = new Snap.Matrix();
        t.scale(1/zoomSpeed, 1/zoomSpeed, event.pageX-svgX, event.pageY-svgY);
        t.add(mapGroup.transform().localMatrix);
        mapGroup.transform(t);
		
		currentZoom /= zoomSpeed;
	}
}

</script>
</body>
</html>