 $blab.sheet['q'].colHeaders = ['i','ii','iii','iv','v','vi']
 
 
+
+
 # slider
 
 slid = (id) -> new Slider
     id:id
-    width: 500
-    value: 1
-    min: 0
-    max: 10
-    step: 1
-    compute: true
+    value: 3
 
 $blab.slider =
     z: slid "z"
 
 # tables
 
-tab = (id) -> new Table {id:id, compute:true}
+tab = (id) -> new Table {id:id, compute:true, table: {rowHeaders: false}}
 $blab.table =
     A: tab "A"
     x: tab "x"
     b: tab "b"
     y: tab "y"
 
+
+
 # figures
 
 fig1 =  -> new PlotXY
     id: "fig1"
+    sheetIds: ["q"]
     data:
-        sheets: [$blab.sheet["q"]]
         x: ""
         types: 
             one: 'area'

        c = JSON.stringify(@colHeaders)
        "{spec:#{s}, data:#{d}, rowHeaders:#{r}, colHeaders:#{c}}"

class PlotXY

    constructor: (@spec) ->
        
        @spec.data["columns"] = @getCols() # c3-style data

        @chart = c3.generate(
            bindto: $("##{@spec.id}")[0]
            data: @spec.data
        )

    getCols: ->
        cols = []
        cols.push c for c in sheet.labelRows() for sheet in @spec.data.sheets
        columns: cols

    update: ->
        @chart.load(@getCols())

    stringify: ->
        JSON.stringify($blab.figure[@spec.id]["spec"])

class Table

    constructor: (@spec) ->

        sheet = $blab.sheet[@spec.id]

        data = sheet.data
        numRows = data.length
        numCols = data[0].length
        container = $("[data-sym=#{@spec.id}][data-type='table']")[0]

        @table = new Handsontable container,
            data: data
            startRows: numRows
            startCols: numCols
            rowHeaders: sheet.rowHeaders
            colHeaders: sheet.colHeaders 
            contextMenu: true
            columns: ({type: 'numeric'} for k in [1..numCols])
            afterChange: (change, source) =>
                compute() if source is "edit" and @spec.compute

    update: ->
        @table.loadData $blab.sheet[@spec.id].data
        @table.render()
        
    stringify: ->
        JSON.stringify($blab.table[@spec.id]["spec"])


class Slider

    constructor: (@spec) ->

        @spec.width ?= 500
        @spec.value ?= 1
        @spec.min ?= 0
        @spec.max ?= 10
        @spec.step ?= 1

        sheet = $blab.sheet[@spec.id]
        
        container = $("[data-sym=#{@spec.id}][data-type='slider']")
        container.css("width", @spec.width)
        container.append("<div class='slider'></div>")
        container.append("<div class='label'></div>")
        container.append("<input type='text' readonly class='report'>")

        label = container.find('.label')
        label.html(sheet.rowHeaders[0])

        report = container.find('.report')

        @slider = container.find('.slider')
        @slider.slider
            value: @spec.value
            min: @spec.min
            max: @spec.max
            step: @spec.step
            change: (event, ui) =>
                report.val ui.value
                compute() if @spec.compute
                
        report.val @slider.slider("value")

    update: ->
        $blab.sheet[@spec.id].data[0][0] =  @slider.slider("value")

    stringify: ->
        JSON.stringify($blab.slider[@spec.id]["spec"])
   
## From GUI



fig2 =  -> new PlotXY
    id: "fig2"
    sheetIds: ["x1", "q"]
    data:
        x: "r0"
        types: 
            one: 'spline'
