var h = require('html')
var Panel = require('panel')

function Editor() {
  this.layersPanel = new Panel(215, h('.layers panel', [
    h('.panel-header')
  ]))

  this.el = h('.editor', [
    this.layersPanel.el,
    h('.canvas'),
    h('.inspector panel', [
      h('.panel-header'),
      h('.panel-content', [
        h('section.matrix', [
          h('.row', [
            h('label', ['Position']),
            h('.field', [
              h('input', {type: 'number', readOnly: true}),
              h('label', ['X'])
            ]),
            h('.mid'),
            h('.field', [
              h('input', {type: 'number', readOnly: true}),
              h('label', ['Y'])
            ])
          ]),
          h('.row', [
            h('label', ['Size']),
            h('.field', [
              h('input', {type: 'number', readOnly: true}),
              h('label', ['Width'])
            ]),
            h('.mid'),
            h('.field', [
              h('input', {type: 'number', readOnly: true}),
              h('label', ['Height'])
            ])
          ]),
          h('.row', [
            h('label', ['Transform']),
            h('.field', [
              h('input', {type: 'number', readOnly: true}),
              h('label', ['Rotate'])
            ]),
            h('.mid'),
            h('.field', [
              h('.input', [
                h('.segmented', [
                  h('button.icon16', {disabled: true}),
                  h('button.icon16', {disabled: true})
                ])
              ]),
              h('label', ['Flip'])
            ])
          ])
        ])
      ])
    ])
  ])
}

Editor.prototype.start = function() {
  document.body.appendChild(this.el)
  return this
}

Editor.prototype.getData = function(type) {
  throw new Error("Unimplemented")
}

Editor.prototype.loadData = function(type, data) {
  throw new Error("Unimplemented")
}

exports = Editor

@@ -1583,32 +1583,1337 @@
 %5D)%0A          %5D)%0A
+        %5D),%0A        h('section.matrix', %5B%0A          h('.row', %5B%0A            h('label', %5B'Opacity'%5D),%0A            h('.slider', %5B%0A              h('input', %7Btype: 'range', disabled: true%7D)%0A            %5D),%0A            h('.field', %5B%0A              h('input', %7Btype: 'number', readOnly: true%7D)%0A            %5D)%0A          %5D),%0A          h('.row', %5B%0A            h('label', %5B'Blending'%5D),%0A            h('.field', %5B%0A              h('select', %7Bdisabled: true%7D, %5B%0A                h('option', %5B'Normal'%5D),%0A                h('hr'),%0A                h('option', %5B'Darken'%5D),%0A                h('option', %5B'Multiply'%5D),%0A                h('option', %5B'Color Burn'%5D),%0A                h('hr'),%0A                h('option', %5B'Lighten'%5D),%0A                h('option', %5B'Screen'%5D),%0A                h('option', %5B'Color Dodge'%5D),%0A                h('hr'),%0A                h('option', %5B'Overlay'%5D),%0A                h('option', %5B'Soft Light'%5D),%0A                h('option', %5B'Hard Light'%5D),%0A                h('hr'),%0A                h('option', %5B'Difference'%5D),%0A                h('option', %5B'Exclusion'%5D),%0A                h('hr'),%0A                h('option', %5B'Hue'%5D),%0A                h('option', %5B'Saturation'%5D),%0A                h('option', %5B'Color'%5D),%0A                h('option', %5B'Luminosity'%5D)%0A              %5D)%0A            %5D)%0A          %5D)%0A
         %5D)%0A     

Add another mock inspector section