coffeescript + jquery UI widget example

HTML

<script src="https://raw.github.com/jashkenas/coffee-script/master/extras/coffee-script.js"></script>
<script type="text/coffeescript">
    App = {}
    # example widget from: http://bililite.nfshost.com/blog/understanding-jquery-ui-widgets-a-tutorial/
    App.Test_Widget = $.widget "ui.custom",        
        _init: -> @.setLevel(15)
        greenlevels: ['#000','#010','#020','#030','#040','#050','#060','#070','#080','#090','#0a0','#0b0','#0c0','#0d0','#0e0','#0f0', '#fff']
        level: 0
        getLevel: -> @.level
        setLevel: (x) ->
            @.level = Math.floor(Math.min(@.greenlevels.length-1, Math.max(0,x)))
            @.element.css({background: @.greenlevels[@.level]})
        darker: -> @.setLevel(@.getLevel()-1)
        lighter: -> @.setLevel(@.getLevel()+1)
        off: ->
            @.element.css({background: 'none'})
            @.destroy() # use the predefined function
    $(document).ready ->
        $('#widget').custom()
        $('#widgetdarker').click -> $('#widget').custom('darker')
</script>
<div id="widget">test content</div>
<input type="button" value="darker" id="widgetdarker">