var matdim = 800; // set this to be the same width as the container

// set the dimensions and margins of the graph
var margin = {
  top: 50,
  right: 50,
  bottom: 50,
  left: 50
},
    width = matdim - margin.left - margin.right,
    height = matdim - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#my_IPM")
.append("div")
// Container class to make it responsive.
.classed("svg-container", true)
.append("svg")
// Responsive SVG needs these 2 attributes and no width and height attr.
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 "+matdim+" "+matdim)
// Class to make it responsive.
.classed("svg-content-responsive", true)
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
      "translate(" + margin.left + "," + margin.top + ")");

// generate data 
// I generate random numebrs for this but you could give values 

// survival probability intercept and slop
survint = Math.random() - 3;
survz = Math.random();

// growth kernel intercept, slope and sd
growint = Math.random() + 1;
growz = 1 - growint / 2;
growsd = Math.random() / 3 + 0.1;

// probability of reproducing intercept and slop
reprint = Math.random() - 3;
reprz = Math.random();

// number of offspring intercept and slope
noffint = Math.random();
noffz = Math.random();

// recruit size intercept and slop
rcszint = 0.75 + Math.random() / 2;
rcszsd = Math.random() / 3 + 0.1;

// dnorm function
var pi = 3.1415926;
var e = 2.71828;

function dnorm(x, mean, sd) {
  return 1 / Math.sqrt(2 * pi * Math.pow(sd, 2)) * Math.pow(e, -(Math.pow(x - mean, 2) / (2 * Math.pow(sd,
                                                                                                       2))))
}


// survival function (logit transformation)
function survFunction(z) {
  linear = survint + survz * z
  return 1 / (1 + Math.pow(e, -linear))
};

// growth function
function growthFunction(z, z1) {
  mu = growint + growz * z; // mean size next year
  sig = growsd; // sd about mean
  pdengrow = dnorm(z1, mean = mu, sd = sig); // pdf that you are size z1 given you were size z
  return pdengrow; // The function returns the product of p1 and p2
};

// probability of reproduction function (logit transformation)
function reprFunction(z) {
  linear = reprint + reprz * z
  return 1 / (1 + Math.pow(e, -linear))
};

// number of offspring function (exponential)
function noffFunction(z) {
  linear = noffint + noffz * z
  return Math.pow(e, linear) * 0.1
};

// size at birth function
function rcszFunction(z1) {
  mu = rcszint; // mean size next year
  sig = rcszsd; // sd about mean
  pdengrow = dnorm(z1, mean = mu, sd = sig); // pdf that you are size z1 given you were size z
  return pdengrow;
}

// survival and fecundity kernels
function Pkern(z, z1) {
  return survFunction(z) * growthFunction(z, z1)
}

function Fkern(z, z1) {
  return reprFunction(z) * noffFunction(z) * rcszFunction(z1)
}

let numbers = [];
let numbers2 = [];
let result = [];

var csvfile = "group,variable,value\n"

// the kernel resolution
kerndim = 100;

// maximum and minimum suze range (L and U)
maxsize = 3;
minsize = 0;

// loop through 
for (let i = 0; i < (kerndim * kerndim); i++) {
  numbers.push(((i % kerndim) + 1) / kerndim * maxsize);
  numbers2.push((Math.floor((i / kerndim) + 1)) / kerndim * maxsize);
  
  // calculate the kernel value (P+F)
  result.push(Pkern(numbers[i], numbers2[i]) + Fkern(numbers[i], numbers2[i]));
  csvfile = csvfile.concat("X", numbers[i], ",Y", numbers2[i], ",", result[i], "\n");
}

// make it into a csv
var data = d3.csvParse(csvfile);

// check it out
// it's an array with dimension= kerndim * kerndim (eg. long format with columns: x,y,value)
console.log(data);

// Labels of row and columns -> unique identifier of the column called 'group' and 'variable'
var myGroups = d3.map(data, function (d) {
  return d.group;
}).keys()

var myVars = d3.map(data, function (d) {
  return d.variable;
}).keys()

// Build X scales and axis:
var x = d3.scaleBand()
.range([0, width])
.domain(myGroups)
.padding(0);

// Build Y scales and axis:
var y = d3.scaleBand()
.range([height, 0])
.domain(myVars)
.padding(0);

// Build color scale
var myColor = d3.scaleSequential()
.interpolator(d3.interpolateViridis)
.domain([0, Math.max(...result)])

// add the squares
svg.selectAll()
  .data(data, function (d) {
  return d.group + ':' + d.variable;
})
  .enter()
  .append("rect")
  .attr("x", function (d) {
  return x(d.group)
})
  .attr("y", function (d) {
  return y(d.variable)
})
  .attr("rx", 0)
  .attr("ry", 0)
  .attr("width", x.bandwidth() + 1)
  .attr("height", y.bandwidth() + 1)
  .style("fill", function (d) {
  return myColor(d.value)
})
  .style("stroke-width", 4)
  .style("stroke", "none")
  .style("opacity", 1)



// x axis
var x = d3.scaleLinear()
    .domain([minsize, maxsize])         // This is what is written on the Axis: from 0 to 100
    .range([0, width]);
svg
  .append("g")
  .attr("transform", "translate(0,"+height+")")      // This controls the vertical position of the Axis
  .call(d3.axisBottom(x));

// yaxis
var y = d3.scaleLinear()
    .domain([maxsize, minsize])         // This is what is written on the Axis: from 0 to 100
    .range([0, width]);
svg
  .append("g")
  .attr("transform", "translate(0,0)")      // This controls the vertical position of the Axis
  .call(d3.axisLeft(y));

// add the x axis label
svg.append("text")             
      .attr("transform",
            "translate(" + (width/2) + " ," + 
                           (height + margin.top) + ")")
      .style("text-anchor", "middle")
      .style("font-style","italic")
      .style("font-size", "35px")
      .text("z");

// y axis label
svg.append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 0 - margin.left-15)
      .attr("x",0 - (height / 2))
      .attr("dy", "1em")
      .style("text-anchor", "middle")
      .style("font-style","italic")
      .style("font-size", "35px")
      .text("z'");