<?php
session_start();
?>

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="icon" href="logo.png">
  <title>Space's Ambitions</title>
  <meta name="description" content="Space's Ambitions">
  <meta name="author" content="Space's Ambitions">
  <link rel="stylesheet" href="style.css">
</head>

<body>
<script src="snap/dist/snap.js"></script>
<div id="paper">
    <svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" style="background: #96acdc"><desc></desc><defs></defs>
    </svg>
</div>
<script>
var windowShare = 0.9;
var regionImageSize = 10;
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);
}
paper.setAttribute("width", window.innerWidth * windowShare + 'px');
paper.setAttribute("height", window.innerHeight * windowShare + 'px');

var group = s.g();
s.append(group);
group.drag();

window.requestAnimationFrame(draw);

var images = [];

<?

for ($x = 0; $x < 10; $x++) {
    for ($y = 0; $y < 10; $y++) {
        ?>
        var x = <? echo $x; ?>;
        var y = <? echo $y; ?>;
        
        loadRegion(x, y);
        <?
    }
}


?>
var imga = s.image('resources/global.png', 500, 0, 300, 300);

function loadRegion(x, y) {
    var img = s.image('resources/regions/' + x + "-" + y + ".png", x*regionImageSize, y*regionImageSize, regionImageSize, regionImageSize);
    img.isBeingHovered = false;
    img.currentScale = 1;
    img.centerX = x*regionImageSize + regionImageSize/2;
    img.centerY = y*regionImageSize + regionImageSize/2;
    
    var rect = s.rect(x*regionImageSize, y*regionImageSize, regionImageSize, regionImageSize);
    rect.attr({ stroke: 'red', 'strokeWidth': 1, 'fillOpacity' : 0, "strokeOpacity" : 0, "pointerEvents": "none"});
    
    img.rect = rect;
    images.push(img);
    
    img.hover(function(){
        img.isBeingHovered = true;
    }, function() {
        img.isBeingHovered = false;
    });
}

function draw() {
    window.requestAnimationFrame(draw);
    
    for (var i = 0; i < images.length; i++) {
        if (images[i].isBeingHovered && images[i].currentScale < 1.5) {
            s.append(images[i]);
            s.append(images[i].rect);
            
            images[i].currentScale *= 1.1;
            var t = new Snap.Matrix();
            t.scale(1.1, 1.1, images[i].centerX, images[i].centerY);
            t.add(images[i].transform().localMatrix);
            images[i].transform(t);
            
            t = new Snap.Matrix();
            t.scale(1.1, 1.1, images[i].centerX, images[i].centerY);
            t.add(images[i].rect.transform().localMatrix);
            images[i].rect.transform(t);
            
            images[i].rect.attr({"strokeOpacity" : 1});
        }
        else if (!images[i].isBeingHovered && images[i].currentScale > 1){
            images[i].currentScale /= 1.1;
            var t = new Snap.Matrix();
            t.scale(1/1.1, 1/1.1, images[i].centerX, images[i].centerY);
            t.add(images[i].transform().localMatrix);
            images[i].transform(t);
            
            t = new Snap.Matrix();
            t.scale(1/1.1, 1/1.1, images[i].centerX, images[i].centerY);
            t.add(images[i].rect.transform().localMatrix);
            images[i].rect.transform(t);
            
            images[i].rect.attr({"strokeOpacity" : 0});
        }
    }
}
/*Snap.load("ressources/square.svg", function (f) {
    f.selectAll("rect").attr({style : "fill:#edae7f;fill-opacity:1;stroke:#ffffff;stroke-width:1.5"});
    
    var newGroup = s.g();
    newGroup.append(f.selectAll("rect").clone());
    newGroup.attr({ visibility: "hidden"});
    
    var width = newGroup.getBBox().w;
    var height = newGroup.getBBox().h;
    
    addSquare(f.selectAll("rect").clone(), 0, 0, width, height, 1);
    addSquare(f.selectAll("rect").clone(), 1, 0, width, height, 1);
});*/

function addSquare(f, x, y, width, height, type) {
    var newGroup = s.g();
    
    newGroup.append(f);
    group.append(newGroup);
    
    var t = new Snap.Matrix();
    t.translate(x*width, y*height);
    newGroup.transform(t);
    
    newGroup.hover(function(){
        setTimeout(function() {

            Snap.animate(0, 1, function(value) { 
                var t = new Snap.Matrix();
                t.scale(1.1);
                t.add(newGroup.transform().localMatrix);
                newGroup.transform(t);
            }, 
            100, 
            Math.sqrt, 
            function() {
            } );
        }
    ,0)
    }, function() {
        console.log('unhover');
    });
}

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