isc.defineClass("ImageElement", "Img");

isc.ImageElement.addProperties({
    zoomFactor: 1,

    showHiliteCanvas: false,
    hiliteCanvasProperties: null,

    imageElement: null,
    imagePath: null,
    publicationPath: null,

    showOverlays: false,

    // Override initWidget to populate the button content
    initWidget: function () {
        var zoomFactor = this.zoomFactor;
        var imageElement = this.imageElement;
        var rightX = imageElement.rightX * zoomFactor;
        var rightY = imageElement.rightY * zoomFactor;
        var frameWidth = imageElement.elementWidth * zoomFactor;
        var frameHeight = imageElement.elementHeight * zoomFactor;

        this.setLeft(Math.floor(rightX));
        this.setTop(Math.floor(rightY));
        this.setWidth(Math.floor(frameWidth));
        this.setHeight(Math.floor(frameHeight));

        this.mouseOver = function () {
            if (this.showHiliteCanvas) {
                this.hiliteCanvas.show();
            }
            if (isc.isA.Function(this.hiliteCallback)) {
                this.hiliteCallback();
            }
        };

        this.mouseOut = function () {
            if (isc.isA.Function(this.revertHilite)) {
                this.revertHilite();
            }
        };

        var imageEntry = imageElement.imageEntry;
        var imageBounds = imageElement.imageBounds;
        var imageFilename = ""; // TODO: Use path to dummy image file?
        var editType = imageElement.editType;
        var imageLeft = 0;
        var imageTop = 0;
        var imageWidth = this.width;
        var imageHeight = this.height;
        if (isc.isAn.Object(imageEntry)) {
            imageLeft = imageBounds.x * zoomFactor;
            imageTop = imageBounds.y * zoomFactor;
            imageWidth = imageBounds.width * zoomFactor;
            imageHeight = imageBounds.height * zoomFactor;
            if ((editType == "CUT") || (editType == "CROP_AND_SCALE")) {
                imageFilename = this.publicationPath + imageElement.lowResCutImage;
            } else {
                imageFilename = this.imagePath + imageEntry.lowResImageFile.systemFilename;
            }
        }

        this.imageType = ((editType == "PROPORTIONAL") ? "center" : "stretch");
        this.imageWidth = Math.floor(imageWidth);
        this.imageHeight = Math.floor(imageHeight);
        this.src = imageFilename;
//        isc.logWarn("FRAME " + Math.floor(frameWidth) + "x" + Math.floor(frameHeight) + "  IMAGE " + Math.floor(imageWidth) + "x" + Math.floor(imageHeight));
        //this.Super("initWidget", arguments);

        var backgroundColor = imageElement.backgroundColor;
        if (backgroundColor != undefined) {
            var hexColor = rgbToHex(backgroundColor.r, backgroundColor.g, backgroundColor.b);
            this.backgroundColor = '#' + hexColor;
        }

        var defaultHiliteCanvasProperties = {
            width: this.getWidth(),
            height: this.getHeight(),
            backgroundColor: "#C1CAE5",
            visibility: "hidden",
            opacity: 50,
            zIndex: 2 + (this.showOverlays && imageElement.overlays != undefined ? imageElement.overlays.getLength() : 0),
            prompt: ge.message("bild.bearbeiten"),
            hoverStyle: "toolTip"
        };

        defaultHiliteCanvasProperties.mouseOut = function () {
            this.parentElement.hiliteCanvas.hide();
        };

        var hiliteCanvasProperties = isc.addProperties({}, defaultHiliteCanvasProperties, this.hiliteCanvasProperties);
        this.hiliteCanvas = isc.Canvas.create(hiliteCanvasProperties);
        // this.zIndex = 1; // Verhindert den Click-Event auf das Element, daher wurde es auskommentiert

        if (this.showOverlays && imageElement.overlays != undefined) {
            for (var i = 0; i < imageElement.overlays.getLength(); i++) {
                var overlay = imageElement.overlays.get(i);
                var overlayWidth = overlay.imageFrameOverlay.maxWidth;
                var overlayHeight = overlay.imageFrameOverlay.maxHeight;
                var overlayType = overlay.imageFrameOverlay.type;
                if (overlayType == "STEMPEL") {
                    overlayWidth = ge.overlay.size * overlay.imageFrameOverlay.relativeSize;
                    overlayHeight = overlayWidth;
                }
                overlayWidth = overlayWidth * this.zoomFactor;
                overlayHeight = overlayHeight * this.zoomFactor;

                var overlayCanvas = isc.Canvas.create({
                    left: Math.floor(overlay.x * this.zoomFactor),
                    top: Math.floor(overlay.y * this.zoomFactor),
                    width: Math.floor(overlayWidth),
                    height: Math.floor(overlayHeight)
                });
                var textColor = "white";
                var backgroundColor = "black";
                if (overlayType == "STEMPEL") {
                    if (overlay.backgroundColor == "WHITE") {
                        backgroundColor = "white";
                        textColor = "black";
                    }
                    overlayCanvas.setOpacity(overlay.transparency * 100);
                    overlayCanvas.setBorder("1px solid white");
                }
                if (overlayType == "STOERER") {
                    backgroundColor = "red";
                    overlayCanvas.setBorder("1px solid white");
                }
                if (overlayType == "INSERATTEXT") {
                    backgroundColor = null;
                    if (overlay.textColor == "BLACK") {
                        textColor = "black";
                    }
                }
                if (overlayType == "NEBENBOTSCHAFT") {
                    if (overlay.backgroundColor == "WHITE") {
                        backgroundColor = "white";
                        textColor = "black";
                    }
                    overlayCanvas.setOpacity(overlay.transparency * 100);
                }
                if (overlayType == "LEGALLINE") {
                    if (overlay.backgroundColor == "WHITE") {
                        backgroundColor = "white";
                        textColor = "black";
                    }
                    overlayCanvas.setOpacity(overlay.transparency * 100);
                }
                if (backgroundColor != null) {
                    overlayCanvas.setBackgroundColor(backgroundColor);
                }
                overlayCanvas.zIndex = 1 + i;
                this.addChild(overlayCanvas);
                var layout = isc.VLayout.create({
                    width: overlayWidth,
                    height: overlayHeight,
                    members: [
                        isc.Label.create({
                            padding: 4,
                            height: "50%",
                            align: "left",
                            valign: (overlayType == "STEMPEL") ? "center" : "top",
                            wrap: true,
                            contents: '<span style="color: ' + textColor + '">' + overlay.text + '</span>',
                            overflow: "hidden"
                        })
                    ]
                });
                if (isc.isA.String(overlay.amountType)) {
                    var amountText;
                    if (overlay.amountType == "PRICE") {
                        amountText = "FÜR CHF " + overlay.amountValue;
                    } else if (overlay.amountType == "PRICE_FROM") {
                        amountText = "AB CHF " + overlay.amountValue;
                    } else {
                        amountText = "BIS ZU ";
                        if (overlay.amountType == "DISCOUNT_WITH") {
                            amountText = "MIT ";
                        } else if (overlay.amountType == "DISCOUNT_MIN") {
                            amountText = "MIND. ";
                        }
                        amountText += overlay.amountValue + "%" + (overlay.amountNote ? "*" : "") + "<br>RABATT";
                    }
                    layout.addMember(isc.Label.create({
                        padding: 4,
                        height: "50%",
                        align: "left",
                        valign: "center",
                        wrap: true,
                        contents: '<span style="color: ' + textColor + '">' + amountText + '</span>'
                    }));
                }
                overlayCanvas.addChild(layout);
            }
        }
        this.addChild(this.hiliteCanvas);
    }
});