 
 clearCompletedTodos = ->
   valid = true
+
   i = todos.length-1
   while i>=0
     if todos[i].completed
-      todos.splice(i)
+      todos.splice i
       valid = false
     i--
+
   if !valid
-    save(todos)
+    save todos
     view.update()
 
 setView = (locationHash) ->
   viewStatusHash =  locationHash.split('/')[1] || ''
   view.update()
 
+#######################################################################################################################
 # view
-todoHeader = header({id:"header"}
-  h1("todos")
-  form({id:"todo-form"},
-    text({
-      id: "new-todo",
+
+todoHeader = header id: "header",
+
+  h1 "todos"
+  form id: "todo-form",
+    text {
+      id: "new-todo"
       placeholder: "What needs to be done?"
       disable: -> saving
       onchange: ->
-        if (!@value) then return
-        todos.push({title:@value, completed:false})
-        save(todos)
+        if !@value then return
+        todos.push title: @value, completed: false
+        save todos
         view.update()
-      autofocus:true})
-  )
-)
+      autofocus:true }
 
-todoItems = each(getTodos, (todo, index) ->
-  window.todoItemComp = li({className:{ completed: (-> todo.completed), editing: -> todo==editingTodo}},
-    div({class:"view"},
+todoItems = each getTodos, (todo, index) ->
+
+  li className: { completed: (-> todo.completed), editing: -> todo==editingTodo},
+
+    div class: "view",
       checkbox({className:"toggle", checked: (-> todo and todo.completed), onchange:(-> toggleCompleted(todo))})
       label({ondblclick:(-> editTodo(todo))}, (-> todo and todo.title))
       button({className:"destroy", onclick:(-> removeTodo(todo))})
-    )
-    form({submit:->save(todos)}
-      text({
-        className:"edit", trim:"false", value:bind(todo, "title"),
-        onblur:(-> todo.title = @value; save(todos); editingTodo = null; view.update()),
-        onfocus:(-> todo == editingTodo)
-        onkeyup: onEscapeFn(-> revertEdits(todo))
-      })
-    )
-  )
-)
 
-todoEditArea = section({id:"main"}
-  checkbox({
+    form {submit: -> save todos }
+      text {
+        className: "edit"
+        trim: "false"
+        value: bind todo, "title"
+        onblur: -> todo.title = @value; save(todos); editingTodo = null; view.update()
+        onfocus: -> todo == editingTodo
+        onkeyup: onEscapeFn( -> revertEdits(todo) ) }
+
+todoEditArea = section id: "main",
+
+  checkbox {
     id: "toggle-all",
-    className:"toggle",
+    className: "toggle",
     checked: -> !!allChecked()
-    onclick: markAll
-  })
-  label({"for":"toggle-all"}, "Mark all as complete")
-  ul({id:"todo-list"}, todoItems)
-  footer({id:"footer", $show:(-> todos.length)},
-    span({id:"todo-count"}, strong(remainingCount), pluralize(remainingCount, ' item'), ' left')
-    ul({id:"filters"}
-      li(a({className:{selected: -> viewStatusHash == ''}, href:"#/all"}, "All"))
-      li(a({className:{selected: -> viewStatusHash == 'active'}, href:"#/active"}, "Active"))
-      li(a({className:{selected: -> viewStatusHash == 'completed'}, href:"#/completed"}, "Completed"))
-    )
-    button({id:"clear-completed", onclick:clearCompletedTodos, $show:completedCount }, txt(-> "Clear completed: "+completedCount()))
-  )
-)
+    onclick: markAll }
 
-todoFooter = footer(id:"info",
-  p("Double-click to edit a todo")
-  p('Created by ', a({href:"http://github.com/taijiweb/domcom"}, ' Caoxingming(Tiijizhenren, simeon.chaos@gmail.com)'))
-  p("Part of ", a({href:"http://todomvc.com"}, " TodoMVC"))
-)
+  label "for": "toggle-all",  "Mark all as complete"
+  ul id: "todo-list", todoItems
 
-view = section({id:"todoapp"},
+  footer { id: "footer", $show:(-> todos.length) },
+    span { id:"todo-count" },  strong(remainingCount),   pluralize(remainingCount, ' item'),  ' left'
+    ul id:"filters",
+      li a {className: {selected: -> viewStatusHash == ''}, href: "#/all"}, "All"
+      li a {className: {selected: -> viewStatusHash == 'active'}, href: "#/active"}, "Active"
+      li a {className: {selected: -> viewStatusHash == 'completed'}, href: "#/completed"}, "Completed"
+    button {id: "clear-completed", onclick: clearCompletedTodos, $show: completedCount },
+      txt -> "Clear completed: "+completedCount()
+
+todoFooter = footer id:"info",
+
+  p "Double-click to edit a todo"
+  p 'Created by ',
+    a href:"http://github.com/taijiweb/domcom",
+      'Caoxingming(Tiijizhenren, simeon.chaos@gmail.com)'
+  p "Part of ",
+    a {href:"http://todomvc.com"},
+      " TodoMVC"
+
+view = section id:"todoapp",
   todoHeader
   todoEditArea
   todoFooter
-)
 
+#######################################################################################################################
 # run the app
-module.exports = window.runTodoMvc = ->
+
+window.runTodoMvc = ->
   todos = fetch()
-  view.mount('#todo-app')
-  setView(document.location.hash)
+
+  view.mount '#todo-app'
+
+  setView document.location.hash
+
   window.addEventListener 'hashchange',  ->
-    setView(document.location.hash)
-    view.update()
+    setView document.location.hash


toggleCompleted = (todo) ->
  todo.completed = !todo.completed
  save(todos)
  view.update()

markAll = ->
  if allChecked() then completed = false
  else completed = true
  valid = true
  for todo in todos
    if todo.completed!=completed
      todo.completed = completed
      valid = false
  if !valid
    save(todos)
    view.update()

editTodo = (todo) ->
  editingTodo = todo
  originalTodo = extend({}, todo)
  view.update()

removeTodo = (todo) ->
  index = todos.indexOf(todo)
  todos.splice(index, 1)
  save(todos)
  view.update()

revertEdits = (todo) ->

{bind,
section, h1, header, form, text, checkbox, div, ul, li, p, a, label, button, footer, strong, span
each, txt
extend} = dc

################################################
# store

fetch = -> JSON.parse localStorage.getItem('dc') || '[]'
save = (todos) -> localStorage.setItem 'dc', JSON.stringify(todos)

#######################################################################################################################
# model
# [ { title: string, completed: boolean } ... ]
todos = []

#######################################################################################################################
# controller

viewStatusHash = null
editingTodo = null
originalTodo = null
