cybermagic.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">

    <!--

        EVERYTHING IS PHYSICAL 
        EVERYTHING IS FRACTAL
        EVERYTHING IS RECURSIVE
        NO MONEY 
        MO MINING 
        NO PROPERTY
        LOOK AT THE INSECTS
        LOOK AT THE FUNGI
        LANGUAGE IS HOW THE MIND PARSES REALITY 

    -->
    <title>GEOMETRON CYBER MAGIC</title>
    <link href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAP//AP///wANAP8A5Dz6ABueRwAAt/8A6BonABo86AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAREREREREREREREAAAEREREREQCIgREREd3dwAAB3d3d3d3d3d3d3d3d3d3d3d3d3VVVVVVVQAFVVAAVVVQIiBRAiIBEQIAIBECAAERAgAgFgIABmYCIiBmAiIGZgIiIGYCIgZmYCIAaIAAMzMzAAiIiIiIiIiIiIiIiIiIiIiIgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" rel="icon" type="image/x-icon" />

    <!--Stop Google:-->
    <META NAME="robots" CONTENT="noindex,nofollow">
    <script src="jscode/geometron.js"></script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>    
<!--
currentjson for sigil constructions:
currentJSON = {
    "glyph": "0210,0210,0336,0337,0321,0337,0306,0334,0201,0335,0201,0335,0201,0335,0201,0335,0201,0335,0201,0334,0335,0335,0330,0334,0334,0201,0334,0201,0334,0201,0334,0201,0331,0335,0331,0335,0335,0342,0331,0342,0335,0342,0334,0334,0342,0335,0335,0335,0335,0201,0342,0335,0342,0335,0342,0335,0342,0335,0342,0335,0342,0330,0335,0335,0350,0335,0312,0337,0342,0335,0335,0336,0333,0334,0337,0334,0342,0335,0335,0336,0333,0334,0334,0337,0342,0334,0336,0330,0334,0334,0334,0337,0342,0335,0335,0342,0330,0334,0336,0306,0336,0336,0347,0332,0332,0332,0347,0335,0331,0331,0331,0347,0334,0331,0331,0331,0347,0331,0331,0331,0347,0335,0330,0330,0330,0347,0330,0330,0330,0347,0334,0331,0331,0331,0347,0335,0331,0331,0331,0347,0334,0331,0331,0331,0347,0320,0330,0330,0330,0330,0330,0330,0330,0330,0330,0330,0330,0330,0304,0320,0220,0306,0335,0333,0333,0333,0334,0304,0221,0306,0332,0332,0332,0335,0331,0331,0331,0334,0304,0222,0306,0333,0333,0333,0335,0333,0333,0333,0334,0331,0331,0331,0304,0223,0306,0335,0331,0331,0331,0335,0331,0331,0331,0334,0334,0304,0224,0306,0334,0331,0331,0331,0335,0304,0225,0306,0335,0334,0334,0331,0331,0331,0335,0304,0226,0306,0332,0332,0332,0335,0331,0331,0331,0334,0304,0227,0306,0334,0331,0331,0331,0335,0304,0230,0331,0331,0331,0231,",
    "x0": 200,
    "y0": 200,
    "unit": 50.00000000000001,
    "width": 400,
    "height": 400,
    "style": {
        "color0": "#00ff00",
        "fill0": "#00ff00",
        "line0": 1,
        "color1": "#00ff00",
        "fill1": "black",
        "line1": 8,
        "color2": "red",
        "fill2": "red",
        "line2": 1,
        "color3": "#FF7900",
        "fill3": "#FF7900",
        "line3": 1,
        "color4": "yellow",
        "fill4": "yellow",
        "line4": 1,
        "color5": "#00ff00",
        "fill5": "black",
        "line5": 6,
        "color6": "blue",
        "fill6": "blue",
        "line6": 1,
        "color7": "purple",
        "fill7": "purple",
        "line7": 1
    },
    "shapes": [
        "0220:0336,0332,0337,061,0365,0336,0333,0337,",
        "0221:0336,0332,0337,062,0365,0336,0333,0337,",
        "0222:0336,0332,0337,063,0365,0336,0333,0337,",
        "0223:0336,0332,0337,064,0365,0336,0333,0337,",
        "0224:0336,0332,0337,065,0365,0336,0333,0337,",
        "0225:0336,0332,0337,066,0365,0336,0333,0337,",
        "0226:0336,0332,0337,067,0365,0336,0333,0337,",
        "0227:0336,0332,0337,070,0365,0336,0333,0337,",
        "0230:0336,0332,0337,071,0365,0336,0333,0337,",
        "0231:0336,0332,0337,061,060,0365,0336,0333,0337,",
        "0232:0336,0332,0337,061,061,0365,0336,0333,0337,",
        "0233:0336,0332,0337,061,062,0365,0336,0333,0337,",
        "0234:0336,0332,0337,061,063,0365,0336,0333,0337,",
        "0235:0336,0332,0337,061,064,0365,0336,0333,0337,",
        "0236:0336,0332,0337,061,065,0365,0336,",
        "0237:0332,0337,061,066,0365,0336,0333,",
        "01220:0333,0200,0336,0330,0332,0220,0331,0333,0337,",
        "01221:0333,0200,0336,0330,0332,0221,0331,0333,0337,",
        "01222:0333,0200,0336,0330,0332,0222,0331,0333,0337,",
        "01223:0333,0200,0336,0330,0332,0223,0331,0333,0337,",
        "01224:0333,0200,0336,0330,0332,0224,0331,0333,0337,",
        "01225:0333,0200,0336,0330,0332,0225,0331,0333,0337,",
        "01226:0333,0200,0336,0330,0332,0226,0331,0333,0337,",
        "01227:0333,0200,0336,0330,0332,0227,0331,0333,0337,",
        "01230:0333,0200,0336,0330,0332,0230,0331,0333,0337,",
        "01231:0333,0200,0336,0330,0332,0231,0331,0333,0337,",
        "01232:0333,0200,0336,0330,0332,0232,0331,0333,0337,",
        "01233:0333,0200,0336,0330,0332,0233,0331,0333,0337,",
        "01234:0333,0200,0336,0330,0332,0234,0331,0333,0337,",
        "01235:0333,0200,0336,0330,0332,0235,0331,0333,0337,",
        "01236:0333,0200,0336,0330,0332,0236,0333,0337,0331,0333,0337,",
        "01237:0333,0200,0336,0330,0332,0336,0237,0337,0331,0333,0337,"
    ]
}-->    
    
<script>


</script>
</head>
<body>
    
<input id = "jsonio"/>


<div id = "mainbox">
    <canvas id = "maincanvas"></canvas>
    <img id = "mainimage" src = "https://upload.wikimedia.org/wikipedia/commons/6/62/Starsinthesky.jpg"/>
    <div id = "hammerxy"></div>
</div>


<a href = "index.html" class = "button" id = "homebutton">
    <canvas id = "homecanvas"></canvas>
</a>    


<div id = "spreadscroll">
    <table id = "spreadtable">
    </table>
</div>

<div id = "iconscroll">
    <table id = "maintable"></table>    
</div>


<div id ="sigilscroll">
</div>

<div id = "imagescroll">
</div>
<input id = "imageurlinput"/>

<div id = "zoombox">
    <canvas id = "zoomcanvas"></canvas>
</div>
<div id = "rotatebox">
    <canvas id = "rotatecanvas"></canvas>
</div>

<script>

cybermagic = {
    "spread":[0,1,2,3,4,5,6,7,8,9,10,11],
    "sigilindex":6,
    "image":{
        "src":"https://upload.wikimedia.org/wikipedia/commons/6/62/Starsinthesky.jpg",
        "x":0,
        "y":0,
        "w":1.5,
        "angle":0
    }
};


spread = [0,1,2,3,4,5,6,7,8,9,10,11];

zero = "0211,0214,0214,0214,0321,0332,0337,0341,0333,0341,";

one= "0321,0341,0330,0330,0332,0332,0347,0320,0220,";

two = "0332,0332,0335,0337,0337,0321,0342,0334,0336,0336,0347,0333,0333,0333,0333,0347,0320,0332,0332,0332,0332,0220,0333,0333,0333,0333,0221,";

three = "0211,0211,0321,0334,0337,0342,0335,0335,0342,0334,0336,0333,0333,0336,0347,0332,0332,0332,0332,0347,0332,0332,0332,0332,0347,0320,0220,0333,0333,0333,0333,0221,0333,0333,0333,0333,0222,";

four = "0336,0331,0337,0337,0211,0211,0211,0306,0321,0342,0335,0335,0342,0335,0335,0342,0335,0335,0330,0334,0334,0350,0334,0312,0337,0201,0334,0334,0334,0334,0201,0334,0334,0334,0334,0201,0335,0336,0313,0306,0336,0336,0347,0331,0331,0331,0331,0347,0335,0331,0331,0331,0331,0347,0334,0333,0333,0333,0333,0334,0331,0331,0331,0331,0335,0347,0320,0332,0332,0332,0332,0304,0220,0330,0330,0330,0330,0221,0331,0331,0331,0331,0306,0334,0331,0331,0331,0331,0335,0304,0222,0306,0332,0332,0332,0332,0335,0331,0331,0331,0331,0334,0304,0223,";

five = "0330,0210,0321,0337,0330,0335,0331,0337,0305,0201,0335,0201,0335,0201,0335,0201,0335,0201,0335,0335,0311,0337,0201,0334,0334,0201,0334,0334,0201,0334,0334,0201,0334,0334,0201,0336,0335,0335,0304,0334,0313,0336,0336,0347,0333,0333,0333,0333,0347,0334,0305,0335,0331,0331,0331,0331,0347,0334,0350,0332,0332,0332,0332,0347,0335,0330,0330,0330,0330,0347,0334,0304,0320,0335,0224,0335,0305,0350,0333,0333,0333,0333,0304,0334,0223,0335,0305,0350,0334,0330,0330,0330,0330,0335,0304,0334,0222,0334,0305,0333,0333,0333,0333,0304,0335,0221,0332,0332,0332,0332,0220,";

six = "0321,0337,0211,0211,0211,0306,0330,0335,0335,0350,0335,0334,0201,0335,0335,0201,0335,0335,0201,0335,0335,0201,0335,0335,0201,0335,0335,0201,0335,0335,0335,0335,0337,0342,0335,0335,0336,0330,0334,0334,0334,0334,0337,0342,0330,0335,0335,0336,0331,0335,0335,0337,0342,0335,0336,0312,0337,0201,0334,0334,0334,0334,0201,0334,0334,0334,0334,0201,0334,0334,0334,0336,0330,0334,0334,0334,0337,0201,0334,0334,0334,0334,0201,0334,0334,0334,0334,0201,0335,0336,0313,0304,0336,0336,0347,0331,0331,0331,0331,0331,0331,0331,0331,0347,0306,0332,0332,0332,0332,0347,0330,0330,0330,0330,0347,0333,0333,0333,0333,0334,0331,0331,0331,0331,0335,0347,0331,0331,0331,0331,0347,0330,0330,0330,0330,0332,0332,0332,0332,0320,0304,0220,0331,0331,0331,0331,0331,0331,0331,0331,0223,0306,0333,0333,0333,0333,0304,0222,0330,0330,0330,0330,0221,0306,0332,0332,0332,0332,0335,0331,0331,0331,0331,0334,0304,0225,0331,0331,0331,0331,0224,";


seven = "0321,0337,0211,0211,0211,0306,0330,0335,0335,0350,0335,0312,0337,0201,0335,0335,0335,0335,0335,0336,0201,0201,0334,0334,0334,0334,0334,0337,0201,0334,0334,0334,0334,0201,0334,0334,0334,0334,0334,0336,0201,0201,0335,0335,0335,0335,0335,0337,0201,0334,0336,0306,0313,0336,0336,0347,0331,0331,0331,0331,0347,0332,0332,0332,0332,0347,0331,0331,0331,0331,0347,0333,0333,0333,0333,0333,0333,0333,0333,0347,0331,0331,0331,0331,0347,0332,0332,0332,0332,0331,0331,0331,0331,0347,0320,0304,0330,0330,0330,0330,0220,0330,0330,0330,0330,0221,0331,0331,0331,0331,0331,0331,0331,0331,0224,0330,0330,0330,0330,0306,0333,0333,0333,0333,0304,0222,0222,0331,0331,0331,0331,0223,0306,0332,0332,0332,0332,0335,0331,0331,0331,0331,0334,0304,0225,0330,0330,0330,0330,0226,";


eight = "0337,0321,0331,0333,0337,0200,0336,0336,0336,0347,0337,0337,0337,0332,0336,0336,0336,0347,0337,0337,0337,0330,0336,0336,0336,0347,0337,0337,0337,0333,0336,0336,0336,0347,0337,0337,0332,0331,0350,0334,0304,0333,0331,0337,0200,0330,0336,0336,0336,0347,0337,0337,0337,0332,0336,0336,0336,0347,0337,0337,0337,0331,0336,0336,0336,0347,0337,0337,0337,0333,0336,0336,0336,0347,0320,0350,0335,0304,0222,0350,0334,0330,0330,0330,0330,0330,0330,0330,0330,0335,0304,0220,0350,0335,0331,0331,0331,0331,0331,0331,0331,0331,0334,0304,0226,0350,0334,0331,0331,0331,0331,0331,0331,0331,0331,0335,0304,0224,0350,0334,0304,0337,0337,0330,0333,0350,0335,0304,0330,0333,0336,0336,0221,0337,0337,0331,0331,0336,0336,0223,0337,0337,0337,0332,0336,0336,0336,0225,0337,0337,0337,0330,0336,0336,0336,0227,";

nine = "0321,0337,0333,0331,0337,0200,0336,0330,0332,0310,0350,0334,0337,0342,0335,0335,0342,0335,0335,0342,0335,0335,0342,0335,0342,0335,0335,0342,0335,0335,0342,0335,0335,0342,0335,0335,0335,0335,0336,0334,0304,0331,0333,0337,0337,0200,0313,0336,0336,0336,0347,0337,0337,0337,0330,0336,0336,0336,0347,0337,0337,0337,0332,0336,0336,0336,0347,0337,0337,0337,0331,0336,0336,0336,0347,0333,0333,0333,0333,0330,0330,0330,0330,0347,0350,0335,0304,0330,0330,0330,0330,0332,0332,0332,0332,0347,0331,0331,0331,0331,0331,0331,0331,0331,0347,0333,0333,0333,0333,0333,0333,0333,0333,0347,0330,0330,0330,0330,0330,0330,0330,0330,0347,0320,0331,0331,0331,0331,0332,0332,0332,0332,0220,0330,0330,0330,0330,0333,0333,0333,0333,0222,0331,0331,0331,0331,0331,0331,0331,0331,0224,0332,0332,0332,0332,0332,0332,0332,0332,0226,0330,0330,0330,0330,0330,0330,0330,0330,0230,0333,0333,0331,0331,0331,0333,0331,0333,0350,0334,0304,0333,0333,0333,0333,0330,0330,0330,0330,0350,0335,0304,0221,0350,0334,0304,0331,0331,0331,0331,0331,0331,0331,0331,0350,0335,0304,0223,0350,0334,0304,0332,0332,0332,0332,0332,0332,0332,0332,0350,0335,0304,0225,0350,0334,0304,0330,0330,0330,0330,0330,0330,0330,0330,0350,0335,0304,0227,";

ten = "0210,0210,0336,0337,0321,0337,0306,0334,0201,0335,0201,0335,0201,0335,0201,0335,0201,0335,0201,0334,0335,0335,0330,0334,0334,0201,0334,0201,0334,0201,0334,0201,0331,0335,0331,0335,0335,0342,0331,0342,0335,0342,0334,0334,0342,0335,0335,0335,0335,0201,0342,0335,0342,0335,0342,0335,0342,0335,0342,0335,0342,0330,0335,0335,0350,0335,0312,0337,0342,0335,0335,0336,0333,0334,0337,0334,0342,0335,0335,0336,0333,0334,0334,0337,0342,0334,0336,0330,0334,0334,0334,0337,0342,0335,0335,0342,0330,0334,0336,0306,0336,0336,0347,0332,0332,0332,0347,0335,0331,0331,0331,0347,0334,0331,0331,0331,0347,0331,0331,0331,0347,0335,0330,0330,0330,0347,0330,0330,0330,0347,0334,0331,0331,0331,0347,0335,0331,0331,0331,0347,0334,0331,0331,0331,0347,0320,0330,0330,0330,0330,0330,0330,0330,0330,0330,0330,0330,0330,0313,0304,0320,0220,0306,0335,0333,0333,0333,0334,0304,0221,0306,0332,0332,0332,0335,0331,0331,0331,0334,0304,0222,0306,0333,0333,0333,0335,0333,0333,0333,0334,0331,0331,0331,0304,0223,0306,0335,0331,0331,0331,0335,0331,0331,0331,0334,0334,0304,0224,0306,0334,0331,0331,0331,0335,0304,0225,0306,0335,0334,0334,0331,0331,0331,0335,0304,0226,0306,0332,0332,0332,0335,0331,0331,0331,0334,0304,0227,0306,0334,0331,0331,0331,0335,0304,0230,0331,0331,0331,0231,";

eleven = "0330,0321,0330,0330,0330,0335,0331,0337,0305,0201,0335,0201,0335,0201,0335,0201,0335,0201,0331,0334,0331,0350,0334,0304,0335,0336,0331,0306,0335,0335,0337,0201,0335,0201,0335,0201,0335,0201,0335,0201,0335,0201,0334,0336,0336,0336,0347,0337,0337,0337,0336,0330,0336,0336,0347,0337,0337,0331,0335,0331,0331,0334,0336,0336,0347,0337,0337,0337,0331,0336,0336,0336,0347,0337,0337,0334,0337,0331,0335,0336,0336,0336,0347,0337,0337,0337,0333,0336,0336,0336,0347,0337,0337,0337,0330,0336,0336,0336,0347,0337,0337,0337,0332,0336,0330,0304,0335,0305,0350,0337,0334,0330,0336,0336,0336,0347,0337,0337,0337,0334,0334,0330,0336,0336,0336,0347,0337,0337,0337,0334,0332,0336,0336,0336,0347,0337,0335,0335,0337,0337,0331,0336,0336,0336,0347,0337,0337,0337,0320,0334,0334,0331,0335,0350,0335,0304,0336,0336,0336,0223,0335,0305,0350,0332,0332,0332,0332,0332,0332,0332,0332,0304,0334,0222,0335,0305,0334,0350,0337,0337,0337,0332,0335,0335,0304,0334,0336,0336,0336,0221,0337,0337,0337,0332,0336,0336,0336,0220,0335,0337,0337,0337,0305,0335,0350,0335,0330,0335,0335,0304,0335,0336,0336,0336,0225,0335,0305,0350,0337,0337,0337,0333,0304,0334,0336,0331,0336,0336,0225,0306,0337,0337,0337,0334,0331,0336,0336,0336,0335,0304,0226,0337,0337,0337,0331,0336,0336,0336,0227,0337,0337,0337,0306,0335,0331,0334,0304,0336,0336,0336,0230,0337,0337,0337,0306,0332,0304,0336,0336,0336,0231,0337,0337,0337,0330,0336,0336,0336,0232,";

twelve = "0211,0211,0320,0337,0336,0336,0336,0336,0347,0337,0337,0337,0337,0211,0306,0350,0342,0335,0342,0335,0342,0335,0342,0335,0342,0335,0342,0335,0342,0335,0342,0335,0342,0335,0342,0335,0342,0335,0342,0335,0304,0321,0341,0330,0336,0336,0336,0347,0337,0337,0337,0337,0331,0336,0336,0336,0336,0347,0337,0337,0337,0330,0332,0336,0336,0336,0347,0337,0337,0337,0337,0333,0336,0336,0336,0336,0347,0337,0337,0337,0332,0306,0350,0335,0304,0330,0336,0336,0336,0347,0337,0337,0337,0331,0331,0336,0336,0336,0347,0337,0337,0337,0330,0332,0336,0336,0336,0347,0337,0337,0337,0337,0333,0336,0336,0336,0336,0347,0337,0337,0337,0332,0306,0350,0335,0304,0330,0336,0336,0336,0347,0337,0337,0337,0337,0331,0336,0336,0336,0336,0347,0337,0337,0337,0330,0332,0336,0336,0336,0347,0337,0337,0337,0337,0333,0336,0336,0336,0336,0347,0337,0337,0337,0332,0306,0350,0335,0304,0334,0320,0330,0336,0336,0336,0220,0337,0337,0337,0331,0306,0350,0335,0330,0334,0336,0304,0336,0336,0221,0337,0337,0337,0306,0350,0335,0331,0335,0330,0334,0334,0304,0336,0336,0336,0222,0337,0337,0337,0306,0350,0335,0335,0331,0334,0334,0304,0333,0336,0336,0336,0223,0337,0337,0337,0332,0332,0336,0336,0336,0230,0337,0337,0337,0333,0331,0336,0336,0336,0225,0337,0337,0337,0330,0306,0350,0334,0330,0335,0304,0336,0336,0336,0232,0337,0337,0337,0306,0350,0334,0331,0332,0335,0304,0336,0336,0336,0231,0337,0337,0337,0306,0334,0331,0331,0335,0304,0336,0336,0336,0224,0337,0337,0337,0306,0332,0335,0331,0334,0304,0336,0336,0336,0227,0337,0337,0306,0337,0333,0350,0335,0331,0334,0304,0336,0336,0336,0226,0337,0337,0337,0306,0350,0333,0334,0331,0335,0304,0336,0336,0336,0226,";


sigilindex = 5;

sigils = [zero,one,two,three,four,five,six,seven,eight,nine,ten,eleven,twelve];

imageurl = "https://upload.wikimedia.org/wikipedia/commons/6/62/Starsinthesky.jpg";

spreadindex = 0;

document.getElementById("jsonio").value = JSON.stringify(spread);

homeglyph = "0336,0330,0337,0310,0336,0313,0330,0332,0335,0335,0330,0362,0203,0203,0334,0203,0203,0334,0203,0203,0364,0310,0350,0334,0337,0330,0335,0335,0335,0335,0313,0337,0330,0335,0335,0335,0335,0362,0203,0334,0334,0203,0364,";

zoomglyph = "0336,0332,0335,0337,0362,0203,0334,0336,0336,0336,0203,0363,0334,0337,0337,0337,0201,0334,0336,0336,0336,0342,0335,0335,";

rotateglyph = "0321,0337,0337,0337,0337,0331,0341,0330,0336,0336,0336,0336,0336,0331,0337,0337,0337,0332,0335,0336,0336,0336,0306,0350,0342,0334,0342,0335,0337,0337,0337,0337,0330,0335,0335,0335,0335,0335,0335,0336,0336,0336,0336,0342,0335,0342,";


if(innerWidth > innerHeight){
    square = innerHeight;
    margin = Math.round(0.5*(innerWidth - square));
    document.getElementById("mainbox").style.left = (margin+100).toString() + "px";
    document.getElementById("mainbox").style.top = (100).toString() + "px";
}
else{
    square = innerWidth;
    margin = Math.round(0.5*(innerHeight - square));
    document.getElementById("mainbox").style.top = margin.toString() + "px";
}

mainsize = 0.8*square;
iconsize = 50;
sigilsize = 150;
spreadsize = 50;
homeiconsize = 30;


document.getElementById("mainbox").style.left = (0.5*(innerWidth - 0.8*square)).toString() + "px";
document.getElementById("mainbox").style.top = (0.5*(innerHeight - 0.8*square)).toString() + "px";


document.getElementById("rotatebox").style.bottom = (innerHeight - 0.5*(innerHeight - 0.8*square)).toString() + "px";

document.getElementById("rotatebox").style.left = (0.5*(innerWidth - mainsize)).toString() + "px";

document.getElementById("zoombox").style.top = (innerHeight - 0.5*(innerHeight - 0.8*square)).toString() + "px";

document.getElementById("zoombox").style.left = (0.5*(innerWidth - 0.8*square)).toString() + "px";

if(innerWidth > innerHeight){//landscape(laptop)
    document.getElementById("imagescroll").style.width = (margin).toString() + "px";
    document.getElementById("imageurlinput").style.width = (margin).toString() + "px";
    document.getElementById("jsonio").style.width = (margin).toString() + "px";    
    
    document.getElementById("sigilscroll").style.width = (margin).toString() + "px";
    document.getElementById("sigilscroll").style.right = "0px";
    document.getElementById("sigilscroll").style.bottom = "0px";
    document.getElementById("sigilscroll").style.height = "50%";
    
    document.getElementById("iconscroll").style.width = (0.6*margin).toString() + "px";
    document.getElementById("spreadscroll").style.width = (0.3*margin).toString() + "px";    
    document.getElementById("spreadscroll").style.right = (0.7*margin).toString() + "px";        

}
else{//portrait(mobile)
    
    document.getElementById("imagescroll").style.top = (margin + 1.*square + 3).toString() + "px";
    document.getElementById("iconscroll").style.bottom = (margin + 1.*square + 3).toString() + "px";    
    document.getElementById("spreadscroll").style.bottom = (margin + 1.*square + 3).toString() + "px";        
    document.getElementById("sigilscroll").style.bottom = (margin + 1.*square + 3).toString() + "px";        
}

mainGVM = new GVM(document.getElementById("maincanvas"),mainsize,mainsize);

mainGVM.unit *= 0.9;

mainGVM.importbytecode(hypercube);

mainGVM.style.color0 = "#00ff00";
mainGVM.style.fill0 = "#00ff00";
mainGVM.style.line0 = 1;
mainGVM.style.color1 = "#00ff00";
mainGVM.style.fill1 = "black";
mainGVM.style.line1 = 8;


homeGVM = new GVM(document.getElementById("homecanvas"),homeiconsize,homeiconsize);
homeGVM.style.color0 = "#00ff00";
homeGVM.style.fill0 = "#00ff00";
homeGVM.style.line0 = 5;
homeGVM.y0 -= 8;
homeGVM.importbytecode(hypercube);
homeGVM.drawGlyph(homeglyph);


zoomGVM = new GVM(document.getElementById("zoomcanvas"),mainsize,0.11*mainsize);
zoomGVM.style.color0 = "#00ff0080";
zoomGVM.style.fill0 = "#00ff0080";
zoomGVM.style.line0 = 5;
zoomGVM.importbytecode(hypercube);
zoomGVM.y0 = 0.125*mainsize;
zoomGVM.unit = mainsize;
zoomGVM.drawGlyph(zoomglyph);

rotateGVM = new GVM(document.getElementById("rotatecanvas"),mainsize,0.11*mainsize);

rotateGVM.style.color1 = "#00ff0080";
rotateGVM.style.fill1 = "#00ff0080";
rotateGVM.style.line1 = 5;
rotateGVM.importbytecode(hypercube);
rotateGVM.y0 = 0.03*mainsize;
rotateGVM.drawGlyph(rotateglyph);

document.getElementById("jsonio").onchange = function(){

    spread = JSON.parse(this.value);
    cybermagic.spread = spread;
    savecybermagic();
    drawspread();

}


var httpc = new XMLHttpRequest();
httpc.onreadystatechange = function(){
    if (this.readyState == 4 && this.status == 200) {
        symbolicons = JSON.parse(this.responseText);
        drawtable();//this is the table of icons

        var httpccyber = new XMLHttpRequest();
        httpccyber.onreadystatechange = function(){
            if (this.readyState == 4 && this.status == 200) {

                cybermagic = JSON.parse(this.responseText);
                sigilindex = cybermagic.sigilindex;
                spread = cybermagic.spread;

                drawspread();//this draws the sigil and also creates a table of the elements of the spread, depends on sigil index and spread
                document.getElementById("mainimage").src = cybermagic.image.src;
                document.getElementById("mainimage").style.width = (cybermagic.image.w*mainGVM.width).toString() + "px";
                document.getElementById("mainimage").style.left = (cybermagic.image.x*mainGVM.width).toString() + "px";
                document.getElementById("mainimage").style.top = (cybermagic.image.y*mainGVM.width).toString() + "px";
                document.getElementById("mainimage").style.transform = "rotate(" + (cybermagic.image.angle).toString() + "deg)";
                document.getElementById("jsonio").value = JSON.stringify(spread);
                
                
            }
        };
        httpccyber.open("GET", "fileloader.php?filename=data/cybermagic.txt", true);
        httpccyber.send();

//        drawspread();//this draws the sigil and also creates a table of the elements of the spread, depends on sigil index and spread
        

    }
    
};
httpc.open("GET", "fileloader.php?filename=data/robotfeed.txt", true);
httpc.send();


function drawspread(){

    for(var index = 0;index < spread.length;index++){
        if(spread[index] < symbolicons.length){
            mainGVM.hypercube[0220 + index] = "0320,0336,0336," + symbolicons[spread[index]] + "0337,0337,";    
        }
    }

    mainGVM.drawGlyph(sigils[sigilindex]);
    
    document.getElementById("spreadtable").innerHTML = "";
    
    for(var index = 0;index < spread.length;index++){
        var newtr = document.createElement("TR");
        document.getElementById("spreadtable").appendChild(newtr);
        var newtd = document.createElement("TD");
        newtr.appendChild(newtd);
        newtd.id = "e" + index.toString();
        var newcan = document.createElement("CANVAS");
        newtd.appendChild(newcan);
        var elementGVM = new GVM(newcan,iconsize,iconsize);
        elementGVM.importbytecode(hypercube);
        elementGVM.style.color0 = "#00ff00";
        elementGVM.style.fill0 = "#00ff00";
        elementGVM.style.line0 = 1;
        if(spread[index] < symbolicons.length){
            elementGVM.drawGlyph(symbolicons[spread[index]]);         
        }
        else{
            elementGVM.drawGlyph(symbolicons[0]);
        }

        
        newtd.onclick = function(){
            
            elementicons[spreadindex].style.backgroundColor = "black";
            elementicons[spreadindex].style.borderColor = "#00ff00";
            spreadindex = parseInt(this.id.substring(1));
    
            elementicons[spreadindex].style.backgroundColor = "#0000ff80";
            elementicons[spreadindex].style.borderColor = "#0000ff80";
    
        }
    }
    elementicons =  document.getElementById("spreadtable").getElementsByTagName("TD");
    elementicons[spreadindex].style.backgroundColor = "#0000ff80";
    elementicons[spreadindex].style.borderColor = "#0000ff80";    
}

function drawtable(){

    table = document.getElementById("maintable");
    table.innerHTML = "";
    iconsize = 50;
    for(var index = 0;index < symbolicons.length;index++){
    
    
        var row = document.createElement("TR");
        table.appendChild(row);
    
    //indices:
        var indextd = document.createElement("TD");
        indextd.innerHTML = index.toString();
        row.appendChild(indextd);
    
    //symbol icons:
        var symbolicontd = document.createElement("TD");
        row.appendChild(symbolicontd);
        var symbolcan = document.createElement("CANVAS");
        symbolicontd.appendChild(symbolcan);
        var symbolGVM = new GVM(symbolcan,iconsize,iconsize);
        symbolGVM.importbytecode(hypercube);
        symbolGVM.style.color0 = "#00ff00";
        symbolGVM.style.fill0 = "#00ff00";
        symbolGVM.style.line0 = 1;
        symbolGVM.drawGlyph(symbolicons[index]);
        symbolicontd.onclick = function(){
            spread[spreadindex] = parseInt(this.parentElement.getElementsByTagName("TD")[0].innerHTML);
            document.getElementById("jsonio").value = JSON.stringify(spread);
            drawspread();
            cybermagic.spread = spread;
            savecybermagic();
        }
        
    }    
}


mc = new Hammer(document.getElementById("hammerxy"));
mc.get('pan').set({ direction: Hammer.DIRECTION_ALL });
mc.on("panleft panright panup pandown tap press rotate", function(ev) {

    document.getElementById("mainimage").style.left = (mainGVM.width*cybermagic.image.x + ev.deltaX).toString() +  "px";
    document.getElementById("mainimage").style.top = (mainGVM.width*cybermagic.image.y + ev.deltaY).toString() +  "px";

}); 


mczoom = new Hammer(document.getElementById("zoombox"));
mczoom.get('pan').set({ direction: Hammer.DIRECTION_ALL });
mczoom.on("panleft panright panup pandown tap press", function(ev) {

        document.getElementById("mainimage").style.width = (mainGVM.width*cybermagic.image.w + 2*ev.deltaX).toString() +  "px";


});  


mcrotate = new Hammer(document.getElementById("rotatebox"));
mcrotate.get('pan').set({ direction: Hammer.DIRECTION_ALL });
mcrotate.on("panleft panright panup pandown tap press", function(ev) {

    document.getElementById("mainimage").style.transform = "rotate(" + (cybermagic.image.angle + ev.deltaX*Math.PI/5).toString() + "deg)";

//mainmap.linkArray[linkindex].style.transform = "rotate(" + (mainmap.array[linkindex].angle + ev.deltaX*Math.PI/5).toString() + "deg)";

}); 

document.getElementById("mainimage").src = imageurl;
document.getElementById("imageurlinput").value = imageurl;

document.getElementById("imageurlinput").onchange = function(){
    document.getElementById("mainimage").src = this.value;
    cybermagic.image.src = this.value;
    resetimagejson();
    savecybermagic();
}


uploadImages = [];
var httpc = new XMLHttpRequest();
    httpc.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        uploadImages = JSON.parse(this.responseText);
        for(var index = uploadImages.length - 1;index >= 0;index--) {

            var newimg = document.createElement("IMG");
            newimg.src = "uploadimages/" + uploadImages[index];
            newimg.classList.add("uploadimage");

            document.getElementById("imagescroll").appendChild(newimg);
            newimg.onclick = function() {
                imageurl = "uploadimages" + this.src.split("uploadimages")[1];
                document.getElementById("mainimage").src = imageurl;
                cybermagic.image.src = imageurl;
                document.getElementById("imageurlinput").value = imageurl;
                resetimagejson();                
                savecybermagic();
            }

        }
    }
};

httpc.open("GET", "dir.php?filename=uploadimages", true);
httpc.send();

textfeed = {};
var httpc10 = new XMLHttpRequest();
    httpc10.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {

        textfeed = JSON.parse(this.responseText);

        for(var index = textfeed.src.length - 1;index >= 0;index--) {
            var newimg = document.createElement("IMG");
            newimg.src = textfeed.src[index];
            document.getElementById("imagescroll").appendChild(newimg);
            newimg.onclick = function() {
                imageurl = this.src;
                cybermagic.image.src = imageurl;
                document.getElementById("mainimage").src = imageurl;
                document.getElementById("imageurlinput").value = imageurl;
                resetimagejson();
                savecybermagic();

            }
            
        }

    }
};
httpc10.open("GET", "fileloader.php?filename=data/textfeed.txt", true);
httpc10.send();

imagefeed = [];
var httpcimagefeed = new XMLHttpRequest();
    httpcimagefeed.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        imagefeed = JSON.parse(this.responseText);
        for(var index = imagefeed.length - 1;index >= 0;index--) {
            var newimg = document.createElement("IMG");
            newimg.src = imagefeed[index];
            document.getElementById("imagescroll").appendChild(newimg);
            newimg.onclick = function() {
                imageurl = this.src;
                cybermagic.image.src = imageurl;
                document.getElementById("mainimage").src = imageurl;
                document.getElementById("imageurlinput").value = imageurl;
                resetimagejson();
                savecybermagic();
            }
            
        }

    }
};
httpcimagefeed.open("GET", "fileloader.php?filename=data/imagefeed.txt", true);
httpcimagefeed.send();


for(var index = 0;index < sigils.length;index++){
    var newdiv  = document.createElement("DIV");
    document.getElementById("sigilscroll").appendChild(newdiv);
    var newcan = document.createElement("CANVAS");
    newdiv.appendChild(newcan);
    newdiv.id = "s" + index.toString();


    var sigilGVM = new GVM(newcan,sigilsize,sigilsize);
    sigilGVM.importbytecode(hypercube);
    sigilGVM.style.color1 = "#00ff00";
    sigilGVM.style.fill1 = "#00ff00";
    sigilGVM.style.line1 = 1;
    sigilGVM.drawGlyph(sigils[index]);

    newdiv.onclick = function(){
        sigilindex = parseInt(this.id.substring(1));
        cybermagic.sigilindex = sigilindex;
        savecybermagic();
        drawspread();
        drawtable();
    }
}


function savecybermagic(){
    
    cybermagic.image.w = parseInt(document.getElementById("mainimage").style.width.substring(0,document.getElementById("mainimage").style.width.length-2))/mainGVM.width;
    cybermagic.image.x = parseInt(document.getElementById("mainimage").style.left.substring(0,document.getElementById("mainimage").style.left.length-2))/mainGVM.width;    
    cybermagic.image.y = parseInt(document.getElementById("mainimage").style.top.substring(0,document.getElementById("mainimage").style.top.length-2))/mainGVM.width;        
    
    cybermagic.image.angle = parseInt(document.getElementById("mainimage").style.transform.substring(7,document.getElementById("mainimage").style.transform.length - 4));
    
    
    var httpc = new XMLHttpRequest();
    httpc.open("POST", "filesaver.php", true);
    httpc.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    httpc.send("data="+encodeURIComponent(JSON.stringify(cybermagic,null,"  "))+"&filename=data/cybermagic.txt");//send text to filesaver.php

}


function resetimagejson(){
    cybermagic.image.x = 0;
    cybermagic.image.y = 0;
    cybermagic.image.w = 1;
    cybermagic.image.angle = 0;
    document.getElementById("mainimage").style.width = (cybermagic.image.w*mainGVM.width).toString() + "px";
    document.getElementById("mainimage").style.left = (cybermagic.image.x*mainGVM.width).toString() + "px";
    document.getElementById("mainimage").style.top = (cybermagic.image.y*mainGVM.width).toString() + "px";
    document.getElementById("mainimage").style.transform = "rotate(" + (cybermagic.image.angle).toString() + "deg)";    
    
}


</script>
<style>
body{
    background-color:black;
    color:#00ff00;
    overflow:hidden;
    font-family:courier;
    font-size:3em;
}
a{
    color:#ff2cb4;
}
td{
    border:solid;
}
td canvas{
    cursor:pointer;
}
input{
    border:solid;
    border-color:#00ff00;
    background-color:black;
    color:#00ff00;
    font-family:courier;
    font-size:24px;
}
.button{
    position:absolute;
    cursor:pointer;
    border:solid;
    border-color:#00ff00;
    
}
.button:hover{
    background-color:#00ff0080;
}
.button:active{
    background-color:yellow;
}

#imageurlinput{
    position:absolute;
    left:0px;
    bottom:0px;
    font-size:24px;
}
#jsonio{
    position:absolute;
    top:0px;
    right:0px;
    font-size:24px;
}
#mainbox{
    position:absolute;
    border:solid;
    border-color:#00ff00;
    overflow:hidden;
}
#imagescroll{
    position:absolute;
    left:0px;
    bottom:40px;   
    overflow:scroll;
    border:solid;
    border-color:#00ff00;
}
#imagescroll img{
    display:block;
    margin-top:0.5em;
    margin:auto;
    border:solid;
    border-color:#00ff00;
}
#iconscroll{
    position:absolute;
    overflow:scroll;
    right:0px;
    top:40px;
    background-color:black;
    font-size:40px;
    border:solid;
    border-color:#00ff00;
}

#spreadscroll{
    position:absolute;
    overflow:scroll;
    right:150px;
    top:40px;
}
#sigilscroll{
    position:absolute;
    overflow:scroll;
    background-color:black;
    border:solid;
    border-color:#00ff00;
}
#sigilscroll div{
    margin:auto;
    margin-bottom:0.5em;
    margin-top:0.5em;
    border:solid;
    border-color:#00ff00;
}
#homebutton{
    left:0px;
    top:0px;
}
#mainimage{
    position:absolute;
    left:0px;
    right:0px;
    z-index:-3;
}
#hammerxy{
    position:absolute;
    left:0px;
    right:0px;
    top:0px;
    bottom:0px;
    z-index:3;
}
#zoombox{
    position:absolute;
    border:solid;
    z-index:4;
}
#rotatebox{
    position:absolute;
    border:solid;
    z-index:4;
}

@media only screen and (orientation: portrait) {
    #jsonio{
        left:100px;
    }   
    #imagescroll{
        width:100%;
    }
    #imagescroll img{
        max-width:40%;
    }
    #sigilscroll{
        top:40px;
    }
}
@media only screen and (orientation: landscape) {
    #jsonio{
        
    }    
    #imagescroll{
        top:60px;
    }
    #iconscroll{
        bottom:50%;
    }
    #spreadscroll{
        bottom:50%;
    }
    #imagescroll img{
        max-width:80%;
    }
}
</style>
</body>
</html>