var length = 100,
    a = window.innerWidth*0.1,
    at = -a/2;

mobile();
function mobile(){

    const mql = window.matchMedia('screen and (max-width: 575px)');

    checkMedia(mql);
    mql.addListener(checkMedia);

    function checkMedia(mql){

        if(mql.matches){

            console.log('mobile');
            a = 130
            at = -a/2
            length = 60;
        }
    }
}

tablet();
function tablet(){

    const mql = window.matchMedia('screen and (min-width: 576px) and (max-width: 991px)');

    checkMedia(mql);
    mql.addListener(checkMedia);

    function checkMedia(mql){

        if(mql.matches){

            console.log('tablet');
            a = 160
            at = -a/2
            length = 110;
        }
    }
}


desktop();
function desktop(){

    const mql = window.matchMedia('screen and (min-width: 992px) and (max-width: 1280px)');

    checkMedia(mql);
    mql.addListener(checkMedia);
window.onresize = function(){ location.reload(); }
    function checkMedia(mql){

        if(mql.matches){

            console.log('desktop');
            a = 180
            at = -a/2;
            length = 220;
        }
    }
  
  largeDesktop();
function largeDesktop(){

    const mql = window.matchMedia('screen and (min-width: 1281px)');
window.onresize = function(){ location.reload(); }
    checkMedia(mql);
    mql.addListener(checkMedia);

    function checkMedia(mql){

        if(mql.matches){

            console.log('desktop');
            a = 220;
            at = -a/2;
            length = 275;
            }
        }
    }
}

var graph = {
  "nodes": [
    
    {"atom": "",
     "group": 1,
     "ename" : "Thursday 24 November :: 7pm",
     "meta": "I Opening Concert<br><h6> Double-click to expand event</h6>",
     "size": 0,
     "image": "https://uploads-ssl.webflow.com/630f55e665fd9eb01d0169d1/634eff81b91288815a790b70_Frame%2084.png",
      "width": a,
     "height": a,
     "translatex": at,
     "translatey": at,
     "url":"https://softcentre.com.au/event-program/opening-concert",
      },
    
    {"atom": "",
     "group": 1,
     "ename": "UNFURL is a four day cross-city festival, which sees SOFT CENTRE expand into an interlinked program of concerts, raves, workshops and discussions. Traversing contemporary club music, live A/V performance, new media and radical performance art, UNFURL inhabits 6 unique sites across Eora Nation. Sydney, including churches, empty office space, abandoned sites of industry and the serene surrounds of the Royal Botanic Gardens.<br><br>We can’t wait to welcome you to SOFT CENTRE next evolutionary phase from 24 - 27 November. Enter our newly imagined website, built by Joan Shin, to scope the full program and secure your tickets.",
     "size": 0,
     "width": a*1.5,
     "height": a*1.5,
     "translatex": at*1.5,
     "translatey": at*1.5,
     "image": "https://uploads-ssl.webflow.com/630f55e665fd9eb01d0169d1/634a05c00007a1110e129753_UNFURL%2BSoftCentre_white.png"
    },
    
    {"atom": "",
     "group": 1,
     "ename" : "Friday 25 November :: 9pm",
     "meta": "II Late Night Program (I)<br><h6> Double-click to expand event</h6>",
     "size": 0,
     "image": "https://uploads-ssl.webflow.com/630f55e665fd9eb01d0169d1/634f2878061ab75d13b43f35_Frame%2081.png",
      "width": a,
     "height": a,
     "translatex": at,
     "translatey": at,
     "url":"https://softcentre.com.au/event-program/late-night-program-i"},
    
    {"atom": "",
     "group": 1,
     "ename" : "Saturday 26 November :: 10am",
     "meta": "III Discourse Program<br><h6> Double-click to expand event</h6>",
     "size": 0,
     "size": 0,
     "image": "https://uploads-ssl.webflow.com/630f55e665fd9eb01d0169d1/634eff816e672a24b0fe1995_Frame%2083.png",
      "width": a,
     "height": a,
     "translatex": at,
     "translatey": at,
     "url":"https://softcentre.com.au/event-program/discourse-program"},
    
    {"atom": "◣",
     "group": 2,
     "size": "10"},
    
    {"atom": "", 
     "group": 1,
    	"ename" : "Saturday 26 November :: 10pm",
     "meta": "IV Late Night Program (II)<br><h6> Double-click to expand event</h6>",
     "image": "https://uploads-ssl.webflow.com/630f55e665fd9eb01d0169d1/634fdba54ba9489c86b97761_Frame%2088.png",
     "width": a,
     "height": a,
     "translatex": at,
     "translatey": at,
     "size": 0,
     "url":"https://softcentre.com.au/event-program/late-night-program-ii"},
    
    {"atom": "", 
     "group": 1,
    "ename" : "Sunday 27 November :: 3pm",
     "meta": "V Closing Concert<br><h6> Double-click to expand event</h6>",
     "image": "https://uploads-ssl.webflow.com/630f55e665fd9eb01d0169d1/6349ff4dbca0d244667cdeae_sigil-v2-DIR%20DIFF-transparent.png",
     "width": a,
     "height": a,
     "translatex": at,
     "translatey": at,
     "size": 0,
     "url":"https://softcentre.com.au/event-program/closing-concert"
    },
    
 		{"atom": "◤",
     "group": 2,
     "size": "" },
    
    {"atom": "◤",
     "group": 2,
     "size": 10},
    
    {"atom": "",
     "group": 1,
     "meta": "Soft Centre Discord<br><h6> Double-click to join server</h6>",
     "image": "https://uploads-ssl.webflow.com/630f55e665fd9eb01d0169d1/637a7860a69b5092b8fce884_portal-sigil2.png",
     "width": a,
     "height": a,
     "translatex": at,
     "translatey": at,
     "size": 0,
     "url":"https://discord.gg/dTAF5jk7r3"
     },
    
    {"atom": "◢",
     "group": 2,
     "size": 10},
    
    {"atom": "", 
     "group": 1,
    "ename" : "Saturday 26 November :: 5pm",
     "meta": "Social Hub @ Poor Tom's<br><h6> Double-click to expand event</h6>",
     "image": "https://uploads-ssl.webflow.com/630f55e665fd9eb01d0169d1/636cf7d049397e546e710f7e_social-hub-sigil.png",
     "width": a,
     "height": a,
     "translatex": at,
     "translatey": at,
     "size": 0,
     "url":"https://www.softcentre.com.au/event-program/social-hub-poor-toms-gin-hall"},
    
    {"atom": "◥",
     "group": 2,
     "size": 10},

 ],
  
  
  "links": [
    {"source": 1, "target": 0,  "bond": 1},
    {"source": 1, "target": 2,  "bond": 1},
    {"source": 1, "target": 3,  "bond": 1},
    {"source": 1, "target": 5,  "bond": 1},
    {"source": 1, "target": 6,  "bond": 1},
    {"source": 3, "target": 10, "bond": 1},
    {"source": 9, "target": 10, "bond": 1},
    {"source": 11, "target": 10, "bond": 1},
    {"source": 3, "target": 11, "bond": 1},
    {"source": 11, "target": 5, "bond": 1},
    {"source": 0, "target": 2,  "bond": 1},
    {"source": 6, "target": 8,  "bond": 1},
    {"source": 2, "target": 9,  "bond": 1},
    {"source": 3, "target": 9,  "bond": 1},
    {"source": 2, "target": 3,  "bond": 1},
    {"source": 2, "target": 4,  "bond": 1},
    {"source": 3, "target": 5,  "bond": 1},
   	{"source": 5, "target": 6,  "bond": 1},
    {"source": 6, "target": 0,  "bond": 1},
    {"source": 5, "target": 12, "bond": 1},
    {"source": 7, "target": 0, "bond": 1},
  ]
}
;

var width = window.innerWidth,
    height = window.innerHeight;

var color = d3.scale.category20();

var radius = d3.scale.sqrt()
    .range([0, 6]);

var svg = d3.select("body").append("svg")
    .attr("width", window.innerWidth)
    .attr("height", window.innerHeight);

var force = d3.layout.force()
      .size([width, height])
      .charge(-3000)
      .linkDistance(function(d) { return radius(d.source.size) + radius(d.target.size) + length });

window.onload = function() {
  
  force
      .nodes(graph.nodes)
      .links(graph.links)
      .on("tick", tick)
      .start();

  var link = svg.selectAll(".link")
      .data(graph.links)
      .enter().append("g")
      .attr("class", "link");
  
var path = svg.append('svg:g').selectAll('path'),
    circle = svg.append('svg:g').selectAll('g');
  
  link.append("line")
      .style("stroke-width", function(d) { return (d.bond * 2 - 1) * 1 + "px"; })
      .style("box-shadow", function(d) { return color(d.atom); })
  ;

  link.filter(function(d) { return d.bond > 1; }).append("line")
      .attr("class", "separator");

  var node = svg.selectAll(".node")
      .data(graph.nodes)
      .enter().append("g")
      .attr("class", "node", "id")
      .on("mouseover", mouseover)
      .on("mouseout", mouseout)
      .call(force.drag)
      .on("dblclick", function(d) { window.open(d.url, "_self"); });

  node.filter(function(d) { return d.group == 1; }).append("circle")
      .attr("r", function(d) { return radius(d.size); })
      .style("background-color", function(d) { return color(d.atom); })

  node.append("text")
      .attr("dy", ".35em")
      .style("fill", "white")
      .attr("text-anchor", "middle")
      .text(function(d) { return d.atom; });
  
  node.append("image")
      .attr("width", function(d) {return d.width})
      .attr("height", function(d) {return d.height})
      .attr("x", function(d) {return d.translatex})
      .attr("y", function(d) {return d.translatey})
      .attr("xlink:href", function(d) {return d.image})
      .style("text-align", function(d) {return color(d.atom); });

    function tick() {
    link.selectAll("line")
        .attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });

    node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
  }
  
    function mouseover() {
  d3.select("svg").transition()
      .attr("filter", "drop-shadow(0px 0px 15px rgb(0 0 0 / 1))")
      }
    
   node.filter(function(d) { return d.group == 1; }).on("mouseover", function(d) {
	
  var pl = Math.max(0, d3.event.pageX + 10) + "px";
   var pt = (d3.event.pageY) + "px";
   var pb = "auto";

     mobileTip();
function mobileTip(){

    const mql = window.matchMedia('screen and (max-width: 1280px)');

    checkMedia(mql);
    mql.addListener(checkMedia);

    function checkMedia(mql){

        if(mql.matches){

            console.log('mobile');
             pl = 0;
             pt = "auto";
             pb = 0;
        }
    }
}
     
   d3.select('.tooltip')
      .style("left", pl)
      .style("top", pt)
      .style("bottom", pb)
      .style("opacity", 1);
   
   d3.select(".ename")
       .html(d.ename);
       
    d3.select('.meta')
       .html(d.meta);
  });
  
function mouseout() {
  d3.select(this).select("circle").transition()
      .duration(200)
      .attr("r", function(d) { return radius(d.size); });
      
  d3.select('.tooltip')
            .style('opacity', 0);
		}
};