class arcMeterDisplayMedium {

    constructor(div_id, min, max, level, colour, label, unit) {
        this.div_id = div_id;
        this.label = label; 
        this.unit = unit; 

        //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*0.9;
        this.offset = this.svg.node().getBoundingClientRect().height*0.1;
        this.size_limit = Math.min(this.width, this.height);

        this.r = this.size_limit/2;
        this.p = Math.PI * 2;
        this.innerRadius = 0.8;

        this.min = min;
        this.max = max;
        this.level = level;

        this.start_point = 0.5;
        this.stop_point = 1.2;
        this.mark_point = 0.9;
        this.updateMarkPoint();

        //groups
        this.groups = [];
        for (var i = 0; i < 2; i++) {
            this.groups[i] = this.svg.append("g")
            .attr("transform","translate(" + this.size_limit/2 + ", " + (this.size_limit/2 + this.offset + 5) + ")");
        }
        for (var i = 2; i < 4; i++) {
            this.groups[i] = this.svg.append("g")
            .attr("transform","translate(" + this.size_limit/2 + ", " + (this.size_limit/2 + this.offset) + ")");
        }
        for (var i = 4; i < 5; i++) {
            this.groups[i] = this.svg.append("g")
            .attr("transform","translate(" + 5 + ", " + this.offset + ")");
        }

        //Colour
        if (colour == 'info') {
            this.colour = "#008cff80";
        } else if (colour == 'warning') {
            this.colour = "#ffbb0080";
        } else if (colour == 'danger') {
            this.colour = "#ff260080";
        } else {
            this.colour = "#008cff80";
        }

        this.buildObject();
    };
  
    buildObject() {
        this.buildPathBottom();
        this.buildPathTop();
        this.buildPathTextLarge();
        this.buildPathTextSmall();
        this.buildPathTextLabel();
    };
  
    buildPathBottom() {
        this.groups[0].selectAll("path")
        .data([0])
        .enter()
            .append("path")
            .attr("d", d3.arc()
                .innerRadius(this.innerRadius*this.r)
                .outerRadius(this.r)
                .startAngle(this.start_point*this.p)
                .endAngle(this.mark_point*this.p))
            .attr("fill", this.colour);

        this.groups[0].selectAll("path")
        .data([0])
        .transition()
            .duration(200)
        .attr("d", d3.arc()
            .innerRadius(this.innerRadius*this.r)
            .outerRadius(this.r)
            .startAngle(this.start_point*this.p)
            .endAngle(this.mark_point*this.p));
    };
  
    buildPathTop() {
        this.groups[1].selectAll("path")
        .data([0])
        .enter()
            .append("path")
            .attr("d", d3.arc()
                .innerRadius(this.innerRadius*this.r)
                .outerRadius(this.r)
                .startAngle(this.mark_point*this.p)
                .endAngle(this.stop_point*this.p))
            .attr("fill", "#a8a8a820");

        this.groups[1].selectAll("path")
        .data([0])
        .transition()
            .duration(200)
        .attr("d", d3.arc()
            .innerRadius(this.innerRadius*this.r)
            .outerRadius(this.r)
            .startAngle(this.mark_point*this.p)
            .endAngle(this.stop_point*this.p));
    };
  
    buildPathTextLarge() {
        this.groups[2].selectAll("text")
        .data([0])
        .text(this.level)
        .enter()
            .append("text")
            .text(this.level)
            .attr("x", -this.size_limit*0.1 )
            .attr("y", this.size_limit*0.1 )
            //.attr("height", this.size_limit*0.2 )
            .attr("font-family", "carbonFont")
            .attr("text-anchor", "middle")
            .attr("font-size", this.size_limit*0.4 + "px")
            .attr("fill", "#ffffff")
        .exit()
            .remove();
    };
  
    buildPathTextSmall() {
        this.groups[3].selectAll("text")
        .data([0])
        .enter()
            .append("text")
            .text(this.unit)
            .attr("x", 0 )
            .attr("y", this.size_limit*0.25 )
            .attr("width", this.size_limit*0.6 )
            .attr("font-family", "carbonFont" )
            .attr("text-anchor", "middle")
            .attr("font-size", this.size_limit*0.2 + "px")
            .attr("fill", "#ffffff")
        .exit()
            .remove();
    };
  
    buildPathTextLabel() {
        this.groups[4].selectAll("text")
        .data([0])
        .enter()
            .append("text")
            .text(this.label)
            .attr("x", 0 )
            .attr("y", 0 )
            .attr("font-family", "carbonFont")
            .attr("font-size", this.size_limit*0.2 + "px")
            .attr("fill", "#ffffff")
        .exit()
            .remove();
    };

    updateLevel(new_level) {
        if (this.level != new_level) {
            this.level = new_level;
            this.updateMarkPoint();
            this.buildObject();
        }
    };

    updateLimits(min, max) {
        if (this.min != min || this.max != max) {
            this.min = min;
            this.max = max;
            this.updateMarkPoint();
            this.buildObject();
        }
    };

    updateMarkPoint() {
        this.mark_point = (this.level - this.min)/(this.max - this.min)*(this.stop_point - this.start_point) + this.start_point;
    };
}
  
//Usage
var meterBars = [];
meterBars[0] = new arcMeterDisplayMedium("speed-section-gps", 0, 60, speed_t, "info", "GPS", "km/h");
meterBars[1] = new arcMeterDisplayMedium("speed-section-gps-knots", 0, 40, speed_t, "danger", "GPS Knots", "knots");
meterBars[2] = new arcMeterDisplayMedium("speed-section-pick", 0, 60, speed_t, "warning", "Pickup", "km/h");
meterBars[3] = new arcMeterDisplayMedium("speed-section-sim", 0, 60, speed_t, "danger", "Simulated", "km/h");
meterBars[4] = new arcMeterDisplayMedium("speed-section-radial", -60, 60, speed_t, "danger", "Radial", "krad/h");
meterBars[5] = new arcMeterDisplayMedium("speed-section-real", 0, 60, speed_t, "info", "Speed", "km/h");
meterBars[6] = new arcMeterDisplayMedium("tank-section-tank", 0, 5000, 1000, "info", "Tank Level", "L");
meterBars[7] = new arcMeterDisplayMedium("tank-section-pressure-t", 0, 5, 1, "info", "Tank Pressure Target", "Bar");
meterBars[8] = new arcMeterDisplayMedium("tank-section-pressure-1", 0, 5, 1, "info", "Tank Pressure 1", "Bar");
meterBars[9] = new arcMeterDisplayMedium("tank-section-pressure-2", 0, 5, 1, "info", "Tank Pressure 2", "Bar");



