"use strict";
CanvasRenderingContext2D.prototype.roundRect = function(left, top, width, height, radius) {
    if (width < 2 * radius)
        radius = width / 2;
    if (height < 2 * radius)
        radius = height / 2;
    this.beginPath();
    this.moveTo(left + radius, top);
    this.arcTo(left + width, top, left + width, top + height, radius);
    this.arcTo(left + width, top + height, left, top + height, radius);
    this.arcTo(left, top + height, left, top, radius);
    this.arcTo(left, top, left + width, top, radius);
    this.closePath();
    return this;
};

var UrsElectricMeter = function(canvas, parameters) {
    parameters = parameters || {};

    var ctx, // 2D-Context zum Zeichnen
        odo, // Odemeter zur Verbrauchsanzeige
        slc, // Slidingscale für aktuelle Leistungsaufnahme
        lcd; // LCD zur Anzeige der Dauer

    // parameters
    var context  = (undefined === parameters.context ? null : parameters.context),
        duration = (undefined === parameters.duration ? 2 : parameters.duration);

    // Get the canvas context
    if (context) {
        ctx = context;
    } else {
        ctx = getCanvasContext(canvas);
    }

    // Canvas-Context ermitteln
    function getCanvasContext(elementOrId) {
        var element = (typeof elementOrId === 'string' || elementOrId instanceof String) ? document.getElementById(elementOrId) : elementOrId;
        return element.getContext('2d');
   } // getCanvasContext

    // Verbrauchszähler zeichnen
    this.repaint = function () {
        ctx.fillStyle = "rgb(190, 190, 190)"; ctx.roundRect(42, 6, 586, 386, 60).fill(); // grauer Schatten rechts unten
        var border = 0; // Abstand vom äußeren Rand
        ctx.fillStyle = "rgb(70, 70, 70)"; ctx.roundRect(36 + border, 0 + border, 580 - 2 * border, 380 - 2 * border, 60 - border / 2).fill(); // dunkler äußerer Rand
        border = 40; ctx.fillStyle = "rgb(170, 170, 170)"; ctx.roundRect(36 + border, 0 + border, 580 - 2 * border, 380 - 2 * border, 60 - border / 2).fill();
        border = 45; ctx.lineWidth = 3; ctx.roundRect(36 + border, 0 + border, 580 - 2 * border, 380 - 2 * border, 60 - border / 2).stroke(); // dunkle Linie
        border = 50; ctx.lineWidth = 2; ctx.strokeStyle = "rgb(224, 224, 224)"; ctx.roundRect(36 + border, 0 + border, 580 - 2 * border, 380 - 2 * border, 60 - border / 2).stroke(); // helle Linie
        // Innenteil chanchierend (Gradiend)
        border = 52;
        var grd = ctx.createLinearGradient(0, 0, 580, 580);
        grd.addColorStop(0, "rgba(191, 191, 191, 1.000)");
        grd.addColorStop(.5, "rgba(210, 210, 210, 1.000)");
        grd.addColorStop(1, "rgba(191, 191, 191, 1.000)");
        ctx.fillStyle = grd;
        ctx.roundRect(36 + border, 0 + border, 580 - 2 * border, 380 - 2 * border, 60 - border / 2).fill();

        // rechte Öse
        var rightHandle = new Image;
        rightHandle.src = "rightHandle.png";
        rightHandle.onload = function () {
           ctx.drawImage(rightHandle, 616, 0 + (380 - rightHandle.height) / 2);
        };

        // linke Öse
        var leftHandle = new Image;
        leftHandle.src = "leftHandle.png";
        leftHandle.onload = function () {
            ctx.drawImage(leftHandle, 0, 0 + (380 - leftHandle.height) / 2);
        };

        // Verbindungsabbruch-Symbol
        var brokenSym = new Image;
        brokenSym.src = "broken.png";
        brokenSym.onload = function () {
            ctx.drawImage(brokenSym, 110, 264);
        };
		
        // Einheiten-Anzeige
        ctx.fillStyle = "rgb(0, 0, 0)";
        ctx.font = "bold 60px sans-serif";
        ctx.fillText("kWh", 423, 128);
        ctx.fillText("W", 423, 235);

        // Anzeige-Elemente
        odo = new UrsOdometerEx("cv", { height: 60, decimals: 3, digits: 4, wobbleFactor: 0, top: 70, left: 120 });
        slc = new UrsSlidingScaleEx("cv", { height: 60, width: 300, left: 110, top: 180 });
        lcd = new UrsLCDDisplay("cv", { height: 40, width: 155, left: 254, top: 271, align: "center" });

        // schwarz-roter Rahmen um das Odometer
        border = 11;
        var d = 15,
            f = odo.getWidth() + 2 * border,
            h = 60 + 2 * border,
            u = 4 * odo.getDigitWidth() + border + 1,
            g = 120 - border,
            T = 70 - border;
        // schwarzer Teil
        ctx.beginPath();
        ctx.moveTo(g + d, T);
        ctx.lineTo(g + u, T);
        ctx.lineTo(g + u, T + h);
        ctx.arcTo(g, T + h, g, T, d);
        ctx.arcTo(g, T, g + d, T, d);
        ctx.closePath();
        ctx.fillStyle = "#333";
        ctx.fill();
        // roter Teil
        ctx.beginPath();
        ctx.moveTo(g + u, T);
        ctx.arcTo(g + f, T, g + f, T + h, d);
        ctx.arcTo(g + f, T + h, g + u, T + h, d);
        ctx.lineTo(g + u, T + h);
        ctx.lineTo(g + u, T);
        ctx.closePath();
        ctx.fillStyle = "#F00";
        ctx.fill();
        // Komma (weiß)
        ctx.fillStyle = "#FFF";
        ctx.font = "46px sans-serif";
        ctx.fillText(",", g + u - 7, T + h - 6);
        odo.repaint(); // Odometer über den Rahmen
    }; // repaint

    this.setConsumtionValueAnimated = function (newValue) {
      odo.setValueAnimated(newValue, duration);
    };
   this.setConsumtionValue = function (newValue) {
       odo.setValue(newValue);
    };
    this.setPowerValue = function (newValue) {
       slc.setValue(newValue);
    };
    this.setPowerValueAnimated = function (newValue) {
       slc.setValueAnimated(newValue, duration);
    };
    this.setLCDValue = function (newValue) {
       lcd.setValue(newValue);
    };

    this.repaint();
};