// This is an example Chiasm plugin based on HTML5 Canvas.
// This displays a wave simulation.
// Clicking on the canvas interacts with the simulation.
// Note that D3.js is not used at all here.
function Wave (){

  function backgroundRect(my, svg){
    my.addPublicProperty("backgroundRectColor", "white");
    var rect = svg.append("rect");

    my.when("box", function (box){
      rect.attr("width", box.width).attr("height", box.height);
    });

    my.when("backgroundRectColor", function (color){
      rect.attr("fill", color);
    });

    rect.on("click", function (){
      var r = function (){ return Math.floor(Math.random() * 256); };
      my.backgroundRectColor = "rgb(" + r() + "," + r() + "," + r() + ")";
    });
    console.log("ll")
  }

  function marginConvention(my, svg){
    var g = svg.append("g");

    my.addPublicProperty("margin", {top: 20, right: 20, bottom: 30, left: 20});

    my.when(["box", "margin"], function (box, margin){
      my.width = box.width - margin.left - margin.right;
      my.height = box.height - margin.top - margin.bottom;
      g.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    });

    return g;
  }

  function marginRect(my, g){
    my.addPublicProperty("marginRectColor", "lightgray");
    var rect = g.append("rect");

    my.when(["width", "height"], function (width, height){
      rect.attr("width", width).attr("height", height);
    });

    my.when("marginRectColor", function (color){
      rect.attr("fill", color);
    });

    rect.on("click", function (){
      var r = function (){ return Math.floor(Math.random() * 256); };
      my.marginRectColor = "rgb(" + r() + "," + r() + "," + r() + ")";
    });
  }

  function xScaleLinear(my){
    var scale = d3.scale.linear();
    my.addPublicProperty("xScaleDomain", [0, 1000]);
    my.when(["xScaleDomain", "width"], function (xScaleDomain, width){

      my.xScale = scale
        .domain(xScaleDomain)
        .range([0, width]);

    });
  }

  function xAxis(my, g){
    var axisG = g.append("g").attr("class", "x axis");
    var axis = d3.svg.axis();

    my.when("xScale", function (xScale){
      axis.scale(xScale);
      axisG.call(axis);
    });

    my.when("height", function (height){
      axisG.attr("transform", "translate(0," + height + ")");
    });
  }

  var my = new ChiasmComponent();
  my.el = document.createElement("div");
  // Construct the SVG DOM.
  var svg = d3.select(my.el).append("svg");
  backgroundRect(my, svg);
  var g = marginConvention(my, svg);
  marginRect(my, g);

  xScaleLinear(my);
  xAxis(my, g);

  return my;
}