class blockDisplayBinarySmall {

    constructor(div_id, level, label) {
        this.div_id = div_id;
        this.level = level;
        this.label = label;

        //svg
        this.svg = d3.select("#" + div_id).append('svg')
        .attr("width","100%")
        .attr("height","100%");

        //Size
        this.width = this.svg.node().getBoundingClientRect().width;
        this.height = this.svg.node().getBoundingClientRect().height;
        this.size_limit = Math.min(this.width, this.height);

        //groups
        this.groups = [];
        this.groups[0] = this.svg.append("g");
        this.groups[1] = this.svg.append("g");
        this.groups[2] = this.svg.append("g")
        .attr("transform","translate(" + this.width/2 + ", " + 0 + ")");
        this.groups[3] = this.svg.append("g")
        .attr("transform","translate(" + this.width/2 + ", " + 0 + ")");

        this.buildObject();
    };
  
    buildObject() {
        this.buildBorder(this.level);
        this.buildBlockSignal(this.level);
        this.buildTextValue(this.level);
        this.buildTextLabel(this.level);
    };
  
    buildBorder(level) {
        this.groups[0].selectAll("rect")
        .data([0])
        .enter()
            .append("rect")
            .attr("x", 0)
            .attr("y", 0)
            .attr("width", this.width)
            .attr("height", this.height)
            .attr("stroke", "#888b")
            .attr("fill", "#0000");
    };
  
    buildBlockSignal(level) {
        this.groups[1].selectAll("rect")
        .data([0])
        .attr("fill", function(d) { if (level == 1) return "#008cff80"; else return "#ff260080";})
        .enter()
            .append("rect")
            .attr("x", this.width/3)
            .attr("y", this.height*0.7)
            .attr("width", this.width/3)
            .attr("height", this.height*0.05)
            .attr("fill", function(d) { if (level == 1) return "#008cff80"; else return "#ff260080";});
    };
  
    buildTextValue(level) {
        this.groups[2].selectAll("text")
        .data([0])
        .text(function(d) {if (level == 1) return "ON"; else return "OFF";})
        .enter()
            .append("text")
            .text(function(d) {if (level == 1) return "ON"; else return "OFF";})
            .attr("x", 0)
            .attr("y", this.height*0.4 + this.height*0.2)
            .attr("width", this.width)
            .attr("font-family", "carbonFont")
            .attr("font-size", this.height*0.4 + "px")
            .attr("text-anchor", "middle")
            .attr("fill", "#ffffff")
        .exit()
            .remove();
    };
  
    buildTextLabel(level) {
        this.groups[3].selectAll("text")
        .data([0])
        .text(this.label)
        .enter()
            .append("text")
            .text(this.label)
            .attr("x", 0)
            .attr("y", this.height*0.35)
            .attr("font-family", "carbonFont")
            .attr("font-size", this.height*0.25 + "px")
            .attr("text-anchor", "middle")
            .attr("fill", "#ffffff")
        .exit()
            .remove();
    };

    updateLevel(new_level) {
        if (this.level != new_level) {
            this.level = new_level;
            this.buildObject();
        }
    };
}
  
//Usage
var deviceFlags = [];
deviceFlags[0] = new blockDisplayBinarySmall("device-1-engage", 0, "GPS");
deviceFlags[1] = new blockDisplayBinarySmall("device-1-engage", 0, "Pickup");
deviceFlags[2] = new blockDisplayBinarySmall("speed-source-sim", 0, "Simulated");
deviceFlags[3] = new blockDisplayBinarySmall("speed-source-ranked", 1, "Automatic");



