class Todo extends Backbone.Model
    defaults:
        title: ''
        priority: 0
        done: false

    validate: (attrs) ->
        errs = {}
        hasErrors = false

        if (attrs.title is "")
            hasErrors = true
            errs.title = "Please specify a todo"

        if hasErrors
            console.log "Model is invalid!"
            return errs

class Todos extends Backbone.Collection
    model: Todo
    localStorage: new Backbone.LocalStorage("Todos")


class TodoView extends Backbone.View
    tagName: 'li'

    events:
        "change input[type=checkbox]": "toggleDone"
        "click .edit": "startEdit"
        "dblclick": "startEdit"
        "click .del": "delete"
        "click .editing .save": "saveTodo"
        "keypress .editing input[name=todo]": "saveTodo"
        "keyup .editing input[name=todo]": "closeEdit"
        "click .editing .cancel": "closeEdit"
        "blur input[name=todo]": "clearErrors"

    initialize: ->
        _.bindAll(@, "render",
                     "toggleDone",
                     "startEdit",
                     "delete",
                     "saveTodo",
                     "closeEdit"
                     "handleError",
                     "clearErrors")
        @model.bind("change", @render)
        @model.bind("error", @handleError)
        @template = _.template($("#tmplTodoView").html())

    render: ->
        @$el.html(@template(this.model.toJSON()))
        if @model.get("done")
            @$el.addClass("done")
            @$("input[type=checkbox]").prop("checked", true)
        else
            @$el.removeClass("done")
        return this

    toggleDone: ->
        if @$el.hasClass("editing") then return false
        if @model.get("done") is true
            @model.set("done", false)
        else
            @model.set("done", true)
        @model.save()

    startEdit: ->
        if @$el.hasClass("editing") then return
        @$el.addClass("editing")
        @$(".editView input[name=todo]").val(@model.get("title"))

    delete: ->
        @model.destroy()
        @$el.remove()

    saveTodo: (e) ->
        if e.type is "keypress" and e.charCode isnt 13
            return
        @model.set("title", @$("input[name=todo]").val())
        if @model.isValid()
            @model.save()
            @closeEdit()

    closeEdit: (e) ->
        if (e)
            if e.type is "keyup" and e.keyCode isnt 27 then return
        @$el.removeClass("editing")

    handleError: (model, errs) ->
        @clearErrors()
        @$el.find("input[name=todo]").after($("<span />", {
            class: "error",
            html: errs.title
        }))

    clearErrors: ->
        @$el.remove(".error")

class TodosAppView extends Backbone.View
    tagName: "section"
    id: "todosApp"

    events:
        "keypress #frmTodo input[name=todo]": "addTodo"
        "change #frmTodo input[name=todo]": "clearErrors"
        "blur #frmTodo input[name=todo]": "clearErrors"

    initialize: ->
        _.bindAll(@, "render",
                     "addTodo",
                     "handleAddTodoError",
                     "clearErrors")
        @collection.bind("add", @render)
        @template = _.template($("#tmplTodosAppView").html())

    render: ->
        @$el.html(@template({}))
        for todo in @collection.models
            view = new TodoView({ model: todo })
            @$el.find("ul.todos").append(view.render().el)
        return @

    addTodo: (e) ->
        if e.charCode isnt 13 then return
        e.preventDefault()
        todo = new Todo()
        todo.bind("error", @handleAddTodoError)
        todo.set({ title: @$("#frmTodo input[name=todo]").val() })
        if todo.isValid()
            @collection.add(todo)
            todo.save()
            todo.unbind("error")

    handleAddTodoError: (model, errs) ->
        @clearErrors()
        @$("#frmTodo").append($("<span />", {
            class: "error",
            html: errs.title
        }))

    clearErrors: ->
        @$("#frmTodo .error").remove()

jQuery ->
    todos = new Todos()
    todos.fetch()
    appview = new TodosAppView({ collection: todos })
    $("#main").append(appview.render().el);