var ProgramFormJS = function() {
  var new_template
  return {
    prepare_comments: function() {
      // Comments to text
      $$('input.comment').each(function(comment){
        this.prepare_comment(comment)
      }.bind(this))

      // Auto Completion 
      Sortable.create("items")
    },

    set_template: function(t) {
      new_template = t
    },

    add_activity: function(activity_name, activity_id, id, comment) {
      $$('#items')[0].insert(unescape(new_template.evaluate({ activity_name: activity_name, activity_id: activity_id, id: id, comment: comment })), { position: 'bottom' })
      this.prepare_comment($$('input.comment').last())
      Effect.Appear($$('.program_item').last())
      Sortable.create('items')
    },

    auto_complete: function(url) {
      new AutoComplete('activity_selector', {
        script: url,
        varname: 'q',
        json:true,
        shownoresults:true,
        maxresults:10,
        callback: function (obj) {  
          this.add_activity( obj.value, obj.id )
          $$('#activity_selector').first().value = ""
        }.bind(this)
      })
    },

    initial_data: function(url) {
      new Ajax.Request(url, {
        method: 'get', 
        onSuccess: function(response) {
          var jsondata = eval('(' + response.responseText + ')');
          console.log(response.responseText)
          jsondata.result.each(function(i) {
            this.add_activity(i.value, i.id, i.item_id, i.item_comment)
          }.bind(this))
        }.bind(this)
      })
    },

    prepare_comment: function(comment) {
      comment.hide()
      comment.observe('blur', function(event) { this.blur_comment(event.element(), true) }.bind(this))
      comment.observe('keypress', function(event) { 
        if(event.keyCode == 13) {
          this.blur_comment(event.element(), true) 
          event.stop()
        }
        if(event.keyCode == 27) this.blur_comment(event.element(), false) 
      }.bind(this));
      comment.up().insert('<div class="comment">' + comment.value + '</div>', { position: 'after' })
      comment.up().insert('<a class="edit-comment" href="#" onclick="js.edit_comment(this); return false">(ret)</a>', { position: 'after' })
    },

    edit_comment: function(element) {
      element.hide()
      element.up().down('input.comment').show()
      element.up().down('input.comment').focus()
      element.up().down('div.comment').hide()
    },

    blur_comment: function(element, use_value) {
      var value = element.value
      element.up().down('input.comment').hide()
      if(use_value)
        element.up().down('div.comment').innerHTML = value
      else
        element.value = element.up().down('div.comment').innerHTML
      element.up().down('div.comment').show()
      element.up().down('a.edit-comment').show()
    },
  }
}

function mark_for_destroy(element) {
  $(element).up().down('.should_destroy').value = 1
  $(element).up('.program_item').fade()
}