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 selectedElement = null;

Snap.load("autoMap.svg", function (f) {
    group.append(f);
	initializeChild(group);
	
	var box = group.getBBox();
	var m = new Snap.Matrix();
	m.translate(-box.cx + paper.getBoundingClientRect().width / 2,
				-box.cy + paper.getBoundingClientRect().height / 2);
	
	var scaleX = 0.9 * paper.getBoundingClientRect().width / box.w;
	var scaleY = 0.9 * paper.getBoundingClientRect().height / box.h;
	var scale = Math.min(scaleX, scaleY);
	m.scale(scale, scale, box.cx, box.cy);
	group.transform(m);
});

REPLACE2

function initializeChild(element) {
	if (element.children().length == 0) {
		var elementID = element.attr("id");
		
		REPLACE1
	}
	else {
		element.children().forEach(function(child) {
			initializeChild(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(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);
	}
}

/*------------------------------------------------------------------------
//Center camera
//----------------------------------------------------------------------*/

function centerCamera(element) {
	var selBox = element.getBBox();
	var infoBox = element.data("eInfoTextBBox");
	
	var mat = element.transform().globalMatrix;
	var m = new Snap.Matrix();
			
	var tX, tY;
	var scaleX = 0.9 * paper.getBoundingClientRect().width;
	var scaleY = 0.9 * paper.getBoundingClientRect().height;
	switch (element.data("positionInfoText")) {
		default :
			tX = (mat.a * selBox.x + mat.e  +  infoBox.x2) / 2;
			tY = mat.d * selBox.cy + mat.f;
			scaleX /= (infoBox.x2 - (mat.a * selBox.x + mat.e));
			scaleY /= Math.max(mat.d * selBox.h, infoBox.h);
		break;
		case 1 :
			tX = mat.a * selBox.cx + mat.e;
			tY = (mat.d * selBox.y2 + mat.f  +  infoBox.y) / 2;
			scaleX /= Math.max(mat.a * selBox.w, infoBox.w);
			scaleY /= (- infoBox.y + (mat.d * selBox.y2 + mat.f));
		break;
		case 2 :
			tX = (mat.a * selBox.x2 + mat.e  +  infoBox.x) / 2;
			tY = mat.d * selBox.cy + mat.f;
			scaleX /= (- infoBox.x + (mat.a * selBox.x2 + mat.e));
			scaleY /= Math.max(mat.d * selBox.h, infoBox.h);
		break;
		case 3 :
			tX = mat.a * selBox.cx + mat.e;
			tY = (mat.d * selBox.y + mat.f  +  infoBox.y2) / 2;
			scaleX /= Math.max(mat.a * selBox.w, infoBox.w);
			scaleY /= (infoBox.y2 - (mat.d * selBox.y + mat.f));
		break;
	}
	
	m.translate(-tX, -tY);
	m.translate(paper.getBoundingClientRect().width / 2,
				paper.getBoundingClientRect().height / 2);
	
	var scale = Math.min(scaleX, scaleY);
	m.scale(scale, scale, tX, tY);
	
	group.animate({ transform: m}, 1000);
}

/*------------------------------------------------------------------------
//Colors
//----------------------------------------------------------------------*/

function animateColor(colorFill, colorStroke, element) {
	var fromFill = Snap.color(Snap.color(element.attr("fill")).hex);
	var toFill = Snap.color(colorFill);
	
	var fromStroke = Snap.color(Snap.color(element.attr("stroke")).hex);
	var toStroke = Snap.color(colorStroke);
	
	Snap.animate([fromFill.r, fromFill.g, fromFill.b, fromStroke.r, fromStroke.g, fromStroke.b], [toFill.r, toFill.g, toFill.b, toStroke.r, toStroke.g, toStroke.b], function (val) {
		
		var fillColor = "rgb(" + Math.round(val[0]) + "," + Math.round(val[1]) + "," + Math.round(val[2]) + ")";
		var strokeColor = "rgb(" + Math.round(val[3]) + "," + Math.round(val[4]) + "," + Math.round(val[5]) + ")";
		
		element.attr({
			fill : fillColor,
			stroke : strokeColor
		});
		
		element.attr({
			style :  element.attr("style") + ";fill: " + fillColor + ";stroke: " + strokeColor
		});
	}, 200);
}