function FrameNview(canvas, data) {
    this.ctx = canvas.getContext('2d');
    canvas.width = 200;
    canvas.height = 200;
    this.width = canvas.width;
    this.height = canvas.height;

    this.dms = {};
    this.dms.padding = data && data.hasOwnProperty('padding') ? data.padding * 1 : 0;
    this.dms.size = Math.min(this.width, this.height) - 2 * this.dms.padding;
    this.dms.x0 = (this.width - this.dms.size)/2;
    this.dms.y0 = (this.height - this.dms.size)/2;

    this.project = {
        width: 12,
        height: 5,
        faceColor: '#000000',
        bevelColor: '0xffffff',
        bevelSize: 3,
        bevelColorOffset: 30,
        bevelForm: 'inside',
        strokeColor: '0xc8c8c8',
        backgroundColor: '#a0a0a0',
        shadowColor: '#000',
        windows: []
    };

    this.addMat = function(data) {
        // validation

        // copy data
        this.project = {
            width: data.width * 1,
            height: data.height * 1,
            faceColor: '#' + data.faceColor.toString(16),
            bevelColor: '#' + data.bevelColor.toString(16),
            bevelSize: data.bevelSize * 1,
            bevelColorOffset: data.bevelColorOffset * 1,
            bevelForm: data.bevelForm,
            strokeColor: '#' + data.strokeColor.toString(16),
            backgroundColor: '#' + data.backgroundColor.toString(16),
            shadowColor: this.adjustColor(-50, '#' + data.backgroundColor.toString(16)),
            windows: []
        };

        // calculations
        this.project.pxpd = this.dms.size / Math.max(this.project.width, this.project.height);
        this.project.widthPx = this.project.width * this.project.pxpd;
        this.project.heightPx = this.project.height * this.project.pxpd;
        this.project.bevelSizePx = this.project.bevelSize * 1; //this.project.pxpd;
    };

    this.addWindow = function(data) {
        // validation

        // copy data
        this.project.windows.push({
            shape: data.shape,
            x: data.x,
            xPx: data.x * this.project.pxpd,
            y: data.y,
            yPx: data.y * this.project.pxpd,
            width: data.width,
            widthPx: data.width * this.project.pxpd,
            height: data.height,
            heightPx: data.height * this.project.pxpd
        });
    };

    this.drawMat = function() {
        // drawing

        // background
        this.ctx.fillStyle = this.project.backgroundColor;
        this.ctx.fillRect(0,0, this.width,this.height);
        /*this.ctx.fillRect(this.dms.x0 - this.dms.padding, this.dms.y0 - this.dms.padding,
            this.dms.size + 2 * this.dms.padding, this.dms.size + 2 * this.dms.padding);*/
        this.ctx.fill();

        // temp
        /*var c = '#ff88aa';
        c = this.project.backgroundColor;
        for (var index = 10; index > 0; index--) {
            this.ctx.fillStyle = this.adjustColor((index-10)*10, c, 1);
            //this.ctx.fillStyle = this.adjustColor((10-index)*10, c, 1);
            this.ctx.fillRect(0,(10-index)*25, 20,20);
        }*/

        //

        // project calculations
        x0 = this.dms.x0 + (this.dms.size - this.project.widthPx)/2;
        y0 = this.dms.y0 + (this.dms.size - this.project.heightPx)/2;
        x1 = x0 + this.project.widthPx;
        y1 = y0 + this.project.heightPx;
        pw = this.project.widthPx;
        ph = this.project.heightPx;

        if (this.project.windows.length == 0) {
            wx0 = 0;
            wy0 = 0;
            wx1 = 0;
            wy1 = 0;
            ww = 0;
            wh = 0;
        } else {
            wx0 = x0 + this.project.windows[0].xPx;
            wy0 = y0 + this.project.windows[0].yPx;
            wx1 = wx0 + this.project.windows[0].widthPx;
            wy1 = wy0 + this.project.windows[0].heightPx;
            ww = this.project.windows[0].widthPx;
            wh = this.project.windows[0].heightPx;
        }
        bevelSizePx = this.project.bevelSizePx;

        // debug
        /*this.ctx.beginPath();
        this.ctx.strokeStyle = '#0e0';
        this.ctx.lineWidth = '2';

        this.ctx.beginPath();
        this.ctx.lineWidth = 1;
        this.ctx.moveTo(x0, y0);
        this.ctx.lineTo(x1, y0);
        this.ctx.lineTo(x1, y1);
        this.ctx.lineTo(x0, y1);
        this.ctx.lineTo(x0, y0);
        this.ctx.stroke();
        return;*/


        //

        // mat shadows
        this.ctx.fillStyle = this.project.backgroundColor;
        this.ctx.shadowColor = this.project.shadowColor;
        this.ctx.shadowBlur = 4;
        this.ctx.shadowOffsetX = 3;
        this.ctx.shadowOffsetY = 3;
        this.ctx.beginPath();
        this.ctx.moveTo(x1, y0);
        this.ctx.lineTo(x1, y1);
        this.ctx.lineTo(x0, y1);
        this.ctx.lineTo(x0, y0);
        this.ctx.lineTo(x1, y0);
        this.ctx.fill();

        if (ww && wh) {
            this.ctx.beginPath();
            this.ctx.moveTo(x0, y0);
            this.ctx.lineTo(wx1, y0);
            this.ctx.lineTo(wx1, wy0);
            this.ctx.lineTo(wx0, wy0);
            this.ctx.lineTo(wx0, wy1);
            this.ctx.lineTo(x0, wy1);
            this.ctx.lineTo(x0, y0);
            this.ctx.fill();
        }

        this.ctx.shadowColor = 'rgba(255,255,255,0)';


        // mat face
        this.ctx.fillStyle = this.project.faceColor == '#0' ? '#000' : this.project.faceColor;
        if (ww && wh) {
            this.ctx.fillRect(x0,y0, pw,wy0-y0-bevelSizePx+1);
            this.ctx.fillRect(x0,wy0 - bevelSizePx, wx0 - x0 - bevelSizePx,wy1-wy0 + 2*bevelSizePx);
            this.ctx.fillRect(wx1 + bevelSizePx,wy0 - bevelSizePx, x1 - wx1 - bevelSizePx,wy1-wy0 + 2*bevelSizePx);
            this.ctx.fillRect(x0,wy1 + bevelSizePx - 1, pw,y1 - wy1 - bevelSizePx + 1);
        } else {
            this.ctx.fillRect(x0,y0, pw,ph);
        }




        // mat edges
        this.ctx.strokeStyle = this.project.strokeColor;

        this.ctx.beginPath();
        this.ctx.lineWidth = 1;
        this.ctx.moveTo(x0, y0);
        this.ctx.lineTo(x1, y0);
        this.ctx.lineTo(x1, y1);
        this.ctx.lineTo(x0, y1);
        this.ctx.lineTo(x0, y0);
        this.ctx.stroke();


        // bevel
        if (ww && wh) {
            this.ctx.beginPath();
            this.ctx.fillStyle = this.project.bevelColor == '#0' ? '#000' : this.project.bevelColor;
            this.ctx.fillRect(wx0 - bevelSizePx, wy0 - bevelSizePx, bevelSizePx, wy1 - wy0 + 2 * bevelSizePx);
            this.ctx.fillRect(wx0 - bevelSizePx, wy0 - bevelSizePx, wx1 - wx0 + 2 * bevelSizePx, bevelSizePx);
            this.ctx.fillRect(wx1, wy0 - bevelSizePx, bevelSizePx, wy1 - wy0 + 2 * bevelSizePx);
            this.ctx.fillRect(wx0 - bevelSizePx, wy1, wx1 - wx0 + 2 * bevelSizePx, bevelSizePx);


            this.ctx.fillStyle = 'rgba(0,0,0,0.15)';
            this.ctx.fillStyle = this.adjustColor(-50, this.project.strokeColor, 0.15);
            this.ctx.beginPath();
            this.ctx.moveTo(wx0 - bevelSizePx, wy0 - bevelSizePx);
            this.ctx.lineTo(wx1 + bevelSizePx, wy0 - bevelSizePx);
            this.ctx.lineTo(wx1, wy0);
            this.ctx.lineTo(wx0, wy0);
            this.ctx.lineTo(wx0, wy1);
            this.ctx.lineTo(wx0 - bevelSizePx, wy1 + bevelSizePx);
            this.ctx.lineTo(wx0 - bevelSizePx, wy0 - bevelSizePx);
            this.ctx.fill();


            // window edges
            this.ctx.beginPath();
            this.ctx.lineWidth = 1;
            this.ctx.strokeStyle = this.project.strokeColor;
            this.ctx.moveTo(wx0 - bevelSizePx, wy0 - bevelSizePx);
            this.ctx.lineTo(wx1 + bevelSizePx, wy0 - bevelSizePx);
            this.ctx.lineTo(wx1 + bevelSizePx, wy1 + bevelSizePx);
            this.ctx.lineTo(wx0 - bevelSizePx, wy1 + bevelSizePx);
            this.ctx.lineTo(wx0 - bevelSizePx, wy0 - bevelSizePx);
            this.ctx.stroke();

            this.ctx.beginPath();
            this.ctx.lineWidth = 1;
            this.ctx.strokeStyle = this.adjustColor(8, this.project.strokeColor);
            this.ctx.moveTo(wx0, wy1);
            this.ctx.lineTo(wx1, wy1);
            this.ctx.stroke();

            this.ctx.beginPath();
            this.ctx.lineWidth = 1;
            this.ctx.strokeStyle = this.adjustColor(12, this.project.strokeColor);
            this.ctx.moveTo(wx1, wy1);
            this.ctx.lineTo(wx1, wy0);
            this.ctx.stroke();


            this.ctx.beginPath();
            this.ctx.lineWidth = 1;
            this.ctx.strokeStyle = this.project.strokeColor;
            this.ctx.moveTo(wx0 - bevelSizePx, wy0 - bevelSizePx);
            this.ctx.lineTo(wx0, wy0);
            this.ctx.moveTo(wx1 + bevelSizePx, wy0 - bevelSizePx);
            this.ctx.lineTo(wx1, wy0);
            this.ctx.moveTo(wx0 - bevelSizePx, wy1 + bevelSizePx);
            this.ctx.lineTo(wx0, wy1);
            //this.ctx.moveTo(wx1+bevelSizePx,wy1+bevelSizePx);
            //this.ctx.lineTo(wx1,wy1);
            this.ctx.stroke();
        }
    };

    this.printMe = function() {
        var form = document.forms["customConfigForm"];
        if (!form) {
            return;
        }

        var data = this.ctx.getImageData(0,0, this.width,this.height).data;
        var x, y, elm, index, px;
        var r, g, b;
        for(y = 0; y < this.height; y++) {
            px = '';
            for (x = 0; x < this.width; x++) {
                index = (y * this.width + x) * 4;
                r = data[index].toString(16);
                g = data[index + 1].toString(16);
                b = data[index + 2].toString(16);
                px += (r.length==1?'0'+r:r) + (g.length==1?'0'+g:g) + (b.length==1?'0'+b:b) + ',';
            }
            elm = document.createElement('input');
            elm.setAttribute('type', 'hidden');
            elm.setAttribute('name', 'px'+y);
            elm.setAttribute('value', px.substr(0, px.length-1));
            form.appendChild(elm);
        }

        var elms = document.forms["customConfigForm"].getElementsByTagName('input');
        for(index=0; index<elms.length; index++) {
            if (elms[index].name == 'width') {
                elms[index].setAttribute('value', this.width);
            } else if (elms[index].name == 'height') {
                elms[index].setAttribute('value', this.height);
            } else if (elms[index].name == 'bgColor') {
                elms[index].setAttribute('value', 16777215);
            } else if (elms[index].name == 'paction') {
                elms[index].setAttribute('value', 'finalizeCustomItem');
            }
        }
    }

    this.error = function(text) {
        this.ctx.font="10px monospace";
        this.ctx.textAlign = 'center';
        this.ctx.fillStyle = 'red';
        this.ctx.fillText(text,this.width/2,this.height/2, this.dms.size);
    }

    this.hexToRGBA = function(hex, alpha) {
        alpha = alpha ? alpha : 1;

        var r = parseInt(hex.slice(1, 3), 16),
            g = parseInt(hex.slice(3, 5), 16),
            b = parseInt(hex.slice(5, 7), 16);

        return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + alpha + ')';
    }

    this.adjustColor = function(pc, hex, alpha) {
        alpha = alpha ? alpha : 1;

        var dc = 255/100 * Math.abs(pc) * (pc == 0 ? 0 : (pc/Math.abs(pc)));
        var r = parseInt(hex.slice(1, 3), 16) + dc,
            g = parseInt(hex.slice(3, 5), 16) + dc ,
            b = parseInt(hex.slice(5, 7), 16) + dc;


        r = r > 255 ? 255 : (r < 0 ? 0 : r);
        g = g > 255 ? 255 : (g < 0 ? 0 : g);
        b = b > 255 ? 255 : (b < 0 ? 0 : b);

        return 'rgba(' + r.toFixed(0) + ', ' + g.toFixed(0) + ', ' + b.toFixed(0) + ', ' + alpha + ')';
    }
}

var matFnV = new Object();