<?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="InterMap">
  <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.js"></script>
<script src="jscolor.js"></script>

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

<div id="customization">
    <p id="pNoElementSelected">Click on an element to modify its properties</p>
	<p id="pCurrentlyModifying" style="display: none;">Currently modifying : </p>
	<p id="pElementName" style="display: none;"></p>
	<div class="bar"></div>
	<p id="pDefaultProperties" style="display: none;">Default Properties : </p>
	<p id="pColorFill" style="display: none;"> Fill : <input id="colorFill" class="jscolor {onFineChange:'updateColorFill(this)'}" value="ffffff"></p>
	<p id="pColorStroke" style="display: none;"> Stroke : <input id="colorStroke" class="jscolor {onFineChange:'updateColorStroke(this)'}" value="ffffff"></p>
	<div id="bar1" class="bar" style="display: none;"></div>
	<p id="pInfoText" style="display: none;">Info displayed : </p>
	<textarea rows="10" cols="50" placeholder="No info will be displayed"></textarea>
</div>



<div id="interface">
    <button class="niceButton orangeButton">UPLOAD MAP</button>
    <button class="niceButton orangeButton">SAVE INTERACTIVE MAP</button>
    <button class="niceButton orangeButton">GLOBAL OPTIONS</button>
    <button class="niceButton orangeButton" onclick="exportMap()">EXPORT MAP</button>
    <div class="bar"></div>
    <button class="niceButton blueButton">ACTION 1</button>
    <button class="niceButton blueButton">ACTION 2</button>
    <button class="niceButton blueButton">ACTION 3</button>
    <button class="niceButton greenButton">+ ADD ACTION</button>
</div>

<script>
var zoomSpeed = 1.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 group = s.g();
s.append(group);
group.drag();

var id = 0;
var selectedElement;

var customization = document.getElementById("customization");
var pNoElementSelected = document.getElementById("pNoElementSelected");
var pCurrentlyModifying = document.getElementById("pCurrentlyModifying");
var pElementName = document.getElementById("pElementName");
var pDefaultProperties = document.getElementById("pDefaultProperties");
var pColorFill = document.getElementById("pColorFill");
var colorFill = document.getElementById("colorFill");
var pColorStroke = document.getElementById("pColorStroke");
var colorStroke = document.getElementById("colorStroke");
var bar1 = document.getElementById("bar1");
var pInfoText = document.getElementById("pInfoText");

Snap.load("test2.svg", function (f) {
    group.append(f);
	initializeChild(group);
});

var clickCallback = function(event) {
	selectedElement = this;
	
	pNoElementSelected.style.display = 'none';
	pCurrentlyModifying.style.display = 'block';
	pElementName.style.display = 'block';
	pDefaultProperties.style.display = 'block';
	pColorFill.style.display = 'block';
	pColorStroke.style.display = 'block';
	bar1.style.display = 'block';
	pInfoText.style.display = 'block';
	
	pElementName.innerHTML = this.id;
	colorFill.jscolor.fromString(Snap.color(this.attr("fill")).hex.substring(1));
	colorStroke.jscolor.fromString(Snap.color(this.attr("stroke")).hex.substring(1));
};

function initializeChild(element) {
	if (element.children().length == 0) {
		element.data("ID", id++);
		element.click(clickCallback);
	}
	else {
		element.children().forEach(function(child) {
			initializeChild(child);
		});
	}
}

//------------------------------------------------------------------------
//Updates
//------------------------------------------------------------------------

function updateColorFill(color) {
	selectedElement.attr({
		fill: "#" + color
	});
	
	selectedElement.attr({ 
		style: selectedElement.attr('style') + ';fill: #' + color
	});
}

function updateColorStroke(color) {
	selectedElement.attr({
		stroke: "#" + color
	});
	
	selectedElement.attr({ 
		style: selectedElement.attr('style') + ';stroke: #' + color
	});
}

//------------------------------------------------------------------------
//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(group.transform().localMatrix);
        group.transform(t);
	}
	else {
		var t = new Snap.Matrix();
        t.scale(1/zoomSpeed, 1/zoomSpeed, event.pageX-svgX, event.pageY-svgY);
        t.add(group.transform().localMatrix);
        group.transform(t);
	}
}

//------------------------------------------------------------------------
// Download data
//------------------------------------------------------------------------

function downloadFile(data, filename, type) {
    var file = new Blob([data], {type: type});
    if (window.navigator.msSaveOrOpenBlob) // IE10+
        window.navigator.msSaveOrOpenBlob(file, filename);
    else { // Others
        var a = document.createElement("a"),
                url = URL.createObjectURL(file);
        a.href = url;
        a.download = filename;
        document.body.appendChild(a);
        a.click();
        setTimeout(function() {
            document.body.removeChild(a);
            window.URL.revokeObjectURL(url);  
        }, 0); 
    }
}

//------------------------------------------------------------------------
// Export map
//------------------------------------------------------------------------

function exportMap() {
	
	var scriptData = '<?
		$baseScriptFile = fopen("baseAutoScript.js", "r") or die("Unable to open file!");
		echo trim(preg_replace('/\s+/', ' ', fread($baseScriptFile,filesize("baseAutoScript.js"))));
		fclose($baseScriptFile);
	?>';
	
	//scriptData = scriptData.replace(/;/g, ";\n");
	
	downloadFile(scriptData, 'autoScript.js', 'text/plain');
	downloadFile(group.innerSVG(), 'autoMap.svg', 'text/plain');
}


</script>

</body>
</html>