const svg = d3.select('svg');
let activeFacet = 'domain';
const colourRangeMax = 8000;

const colorScale = d3.scaleLinear().domain([1,colourRangeMax])
  .interpolate(d3.interpolateHcl)
  .range([d3.rgb("#f00"), d3.rgb('#0f0')]);

function changeFacet(facet) {
  activeFacet = facet;
  updateData(data);
  $('#facet-menu .item').removeClass('active');
  $('#facet-menu .item.' + facet).addClass('active');
}

function colourByFilter(d) {
  if (activeFacet == 'original') {
    $('.ad-grid').addClass('coloured');
    return 'rgba(0,0,0,0)'

  } else if (activeFacet == 'cost') {
    $('.ad-grid').removeClass('coloured');
    width = d.coords.split(",")[2] - d.coords.split(",")[0];
    height = d.coords.split(",")[3] - d.coords.split(",")[1];
    size = width * height;
    return colorScale(size);
  
  } else if (activeFacet == 'registration') {
    $('.ad-grid').removeClass('coloured');
    if (d.title.toLowerCase().startsWith('reserved for')) {
      return colorScale(colourRangeMax - 2000);
    }
    if (d.title == 'Pending Order') {
      return colorScale(colourRangeMax - 5000);
    } else if (d.title == 'Link Suspended') {
      return colorScale(0);
    } else {
      return colorScale(colourRangeMax); 
    }

  } else if (activeFacet == 'domain') {
    $('.ad-grid').removeClass('coloured');
    if (d.response.squatter == true) {
      return colorScale(colourRangeMax - 5000);
    } else if (d.response.redirected) {
      return colorScale(colourRangeMax - 3000);
    } else if (d.response.status == 200) {
      return colorScale(colourRangeMax);
    } else if (d.response.status >= 400) {
      return colorScale(1000);
    } else if (d.response.error) {
      return colorScale(0);
    } else {
      return colorScale(0); 
    }

  } else {
    return '#000'
  }
}

function updateData(data) {

  rect = svg.selectAll("rect")
    .data(data, function(d, i ) { return i; });

  rect.exit()
    .remove();

  rect.enter()
    .append('rect')
    .merge(rect)
      .on('dblclick', function(d) {
        document.location = d.href;
      })
      .on('mouseover', function(d) {
        width = d.coords.split(",")[2] - d.coords.split(",")[0];
        height = d.coords.split(",")[3] - d.coords.split(",")[1];
        size = width * height;
        $('.tooltip').attr('style', "left: " + d.coords.split(",")[0] + "; top:" + d.coords.split(",")[1]);
        $('.tooltip .header').html(d.title);
        $('.tooltip .meta').text("$" + size);
        $('.tooltip .description a').text(d.href);
        $('.tooltip .description a').attr('href', d.href);
      })
      .attr('x', function(d) { return d.coords.split(",")[0]; })
      .attr('x', function(d) { return d.coords.split(",")[0]; })
      .attr('width', function(d) { return d.coords.split(",")[2] - d.coords.split(",")[0]; })
      .attr('y', function(d) { return d.coords.split(",")[1]; })
      .attr('height', function(d) { return d.coords.split(",")[3] - d.coords.split(",")[1]; })
      .attr('stroke-width', 1)
      .attr('stroke', 'rgba(0,0,0,0.3')
      .transition()
      .duration(1000)
      .attr('fill', colourByFilter);
}

d3.json("data/data.json", function(d) {
  data = d;
  updateData(d);
});

$('document').ready(function(){
  $('.ad-grid').on('mouseover', function() {
    $('.tooltip').addClass('active');
  })
  $('.ad-grid').on('mouseout', function() {
    $('.tooltip').removeClass('active');
  })
});

@@ -2086,32 +2086,83 @@
 , function(d) %7B%0A
+        if (!$('.tooltip').hasClass('sticky')) %7B%0A  
         width = 
@@ -2214,24 +2214,26 @@
 0%5D;%0A        
+  
 height = d.c
@@ -2282,24 +2282,26 @@
 1%5D;%0A        
+  
 size = width
@@ -2311,32 +2311,34 @@
 height;%0A        
+ 
+ 
 $('.tooltip').at
@@ -2421,32 +2421,34 @@
 %22)%5B1%5D);%0A        
+  
 $('.tooltip .hea
@@ -2464,24 +2464,26 @@
 l(d.title);%0A
+  
         $('.
@@ -2516,32 +2516,34 @@
  size);%0A        
+  
 $('.tooltip .des
@@ -2565,24 +2565,26 @@
 xt(d.href);%0A
+  
         $('.
@@ -2626,24 +2626,121 @@
 ', d.href);%0A
+        %7D%0A      %7D)%0A      .on('click', function(d) %7B%0A        $('.tooltip').toggleClass('sticky');%0A
       %7D)%0A   
@@ -3268,17 +3268,50 @@
 yFilter)
-;
+%0A      .style(%22cursor%22, %22pointer%22)
 %0A%7D%0A%0Ad3.j
@@ -3536,32 +3536,79 @@
 ', function() %7B%0A
+    if (!$('.tooltip').hasClass('sticky')) %7B%0A  
     $('.tooltip'
@@ -3628,21 +3628,27 @@
 ('active');%0A
+    %7D%0A
   %7D)%0A%7D);%0A

Make ads sticky if clicked