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

var colors = ["#00fdff", "#ff0083"];

var position = [[.25, .25],[.75, .75]];

d3.select("body").append("div")
    .attr("class","controls");

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

svg.append("rect")
    .attr("class", "gradient-rectangle")
    .attr("x", "0")
    .attr("y", "0")
    .attr("width", width)
    .attr("height", height);

var defs = svg.append("defs");

var gradient = defs.append("linearGradient")
    .attr("id", "linear-gradient");

// change orientation
changeOrientation(position);

var radius = 20;

position.forEach(function(d, i){

  var offset = [];
  i == 0 ? offset = [radius,-radius/2] : offset = [-radius,-radius/2];

  svg.append("circle")
      .attr("class", "position-circle")
      .attr("data-which", i)
      .attr("cx", width * position[i][0] + offset[0])
      .attr("cy", height * position[i][1] + offset[1])
      .attr("r", radius)
      .call(d3.drag(d)
          .on("drag", function(){

            var x = d3.event.x, y = d3.event.y;
            d3.select(this).attr("cx", x);
            d3.select(this).attr("cy", y);

            if (d3.select(this).attr("data-which") == 0) {
              position[0][0] = x / width;
              position[0][1] = y / height;
            } else {
              position[1][0] = x / width;
              position[1][1] = y / height;
            }

            changeOrientation(position);

          }));

});

//change colors

colors.forEach(function(d, i){
  gradient.append("stop")
      .attr("class", "stop-" + i);

  $(".controls").append("<div class='spectrum' id='spectrum-" + i + "'></div>");
  $("#spectrum-" + i).spectrum({
    flat: true,
    color: colors[i],
    preferredFormat: "hex",
    showInitial: true,
    showInput: true,
    move: function(color){
      colors[i] = color;
      changeColors(colors);
    }
  });

});

changeColors(colors);

$(".controls").css("left", width / 2 - $(".sp-container").width());
$(".sp-container").hide();
$(".controls").append("<div class='hide-show'><i class='fa fa-caret-down' aria-hidden='true'></i></div>");
$(".hide-show").css({
  "top": $(".controls").height(),
  "left": $(".sp-container").width() - ( $(".hide-show").width() / 2 )
});
$(".hide-show").click(function(){
  if ($(".sp-container").hasClass("show")){
    $(".sp-container").hide().removeClass("show");
    $(this).html("<i class='fa fa-caret-down' aria-hidden='true'></i>").css("top", 0);
  } else {
    $(".sp-container").show().addClass("show");
    $(this).html("<i class='fa fa-caret-up' aria-hidden='true'></i>").css("top", $(".controls").height());
  }
});

// functions
function changeOrientation(position){
  gradient
      .attr("x1", position[0][0] * 100 + "%")
      .attr("y1", position[0][1] * 100 + "%")
      .attr("x2", position[1][0] * 100 + "%")
      .attr("y2", position[1][1] * 100 + "%");
}

function changeColors(colors){

  colors.forEach(function(d, i){

    d3.select(".stop-" + i)
        .attr("offset", i * 100 + "%")
        .attr("stop-color", colors[i]);

  });

  d3.select(".gradient-rectangle")
      .style("fill", "url(#linear-gradient)");
}