class Tawork.Views.PageView extends Backbone.View
  events: 
    'click a.star': 'starred'

  initialize: (options = {}) ->
    @page_id = page_id = @$el.data("page-id")
    @initialize_sortable_tree()
    @setup_uploader()
    @$("[data-toggle=tooltip]").tooltip()
    @$("#tag_list").tokenfield().on 'tokenfield:createtoken', (e) ->
      $.ajax
        method: "POST"
        url: "/wiki/pages/#{page_id}/add_tag"
        data:
          tag: e.token.value

    @$("#tag_list").on 'tokenfield:removetoken', (e) ->
      $.ajax
        method: "POST"
        url: "/wiki/pages/#{page_id}/remove_tag"
        data:
          tag: e.token.value


  initialize_sortable_tree: ->
    $self = @
    $( "#sortable_#{@page_id}" ).nestedSortable
      handle: ".node-handle"
      items: "li"
      start: (e, ui) ->
        ui.placeholder.height ui.item.height()
      placeholder: 'page-placeholder'
      isTree: true
      startCollapsed: false
      update: (e, ui) ->
        page_id = ui.item.data("page-id")
        $parent = ui.item.parent()
        parent_id = $parent.closest(".page").data("page-id")
        position = $parent.find("> li").index(ui.item.get(0))
        $.ajax
          method: "POST"
          url: "/wiki/pages/#{page_id}/reorder"
          data:
            parent_id: parent_id
            position: position


  setup_uploader: ->
    uploader = new plupload.Uploader(
      runtimes: "html5"
      browse_button: "pickfiles" # you can pass in id...
      container: document.getElementById("attachments") # ... or DOM Element itself
      url: "/wiki/pages/#{@page_id}/attach"
      filters:
        max_file_size: "100mb"
      multipart_params:
        authenticity_token: $("meta[name=csrf-token]").attr('content')

      init:
        PostInit: ->
          $("#filelist").html("")
          # document.getElementById("uploadfiles").onclick = ->
          #   uploader.start()
          #   false

        FilesAdded: (up, files) ->
          for file in files
            $template = $($("#upload_template").clone().html()).addClass("file-#{file.id}")
            $template.attr("id", file.id).find(".filename").text(file.name + "(#{plupload.formatSize(file.size)})").end().find(".bar").css(width: "0%")
            $("#filelist").append $template

          uploader.start()


        UploadProgress: (up, file) ->
          $("##{file.id}").find(".bar").css(width: "#{file.percent}%")

        FileUploaded: (up, file, response) ->
          try
            $("##{file.id}").fadeOut complete: ->
              eval response.response
          catch err
            console.log err

        Error: (up, err) ->
          document.getElementById("console").innerHTML += "\nError #" + err.code + ": " + err.message
    )

    uploader.init()

  starred: (event) ->
    $star = $(event.target).closest("a.star")
    $icon = $star.find("i.fa")
    $.blockUI(message: "")

    if $icon.hasClass("fa-star-o")
      star = true
    else
      star = false

    $.ajax
      type: $star.data("type")
      url: $star.data("url")
      data:
        to_star: star
      success: (data) ->
        if $icon.hasClass("fa-star-o")
          $icon.removeClass("fa-star-o")
          $icon.addClass("fa-star")
        else
          $icon.removeClass("fa-star")
          $icon.addClass("fa-star-o")
      complete: ->
        $.unblockUI()


    false