Impress DSL using jQuery/Zepto.js

index.jade

!!! 5
html(lang="en")
  head
    meta(charset="utf-8")
    title Unicode
    link(rel="stylesheet", href="styles.css")
  body
    #impress
      .s(data-impress="million 0 0 4")
        h1 1 000 000
      .s(data-impress="overview 0 0 4")
      .s(data-impress="-1000 -1000")
      .s(data-impress="0 1000")

    //- .overlay overlay!
    script(src="impress.js")
    script(src="zepto.js")
    :coffeescript
      defaultSpec = [
        ['id', undefined]
        ['x', 0]
        ['y', 0]
        ['scale', 1]
      ]
      $('.s').addClass('step').removeClass('s').each ->
        specArray = $(this).data('impress').replace(/^\s+|\s+$/g, '').split(/\s+/)
        spec = {}
        i = 0
        for defaultSpecItem in defaultSpec
          [key, defaultValue] = defaultSpecItem
          val = specArray[i]
          if val?
            if key == 'id'
              continue unless isNaN(parseFloat(val))  # skip id if first part is number
          else
            val = defaultValue
          spec[key] = val
          i += 1
        for key of spec
          val = spec[key]
          if key == 'id'
            $(this).attr('id', val)
          else
            $(this).data(key, val)
        console.log $(this)[0].outerHTML
      impress().init()