class Tawork.Views.CompareView extends Backbone.View
  events: 
    "click .change-item": "scroll_to_change"

  initialize: (options = {}) ->
    $('.nav.nav-pills li a').click (e) ->
      e.preventDefault()
      $(this).tab('show')
    @setup_change_list()
    @$("[data-toggle=tooltip]").tooltip()

  setup_change_list: ->
    $changes = $("[changeid][id]")
    console.log $changes
    change_ids = []
    $changes.each (index, change) ->
      $change = $(change)

      $li = $("<li/>", class: "page-list-item")
      id = $change.attr("id")
      if id.indexOf("added") != -1
        name = "Added"
      else if id.indexOf("changed") != -1
        name = "Changed"
      else
        name = "Removed"

      $link = $("<a/>", href: "#", class: "change-item").html(name).attr("data-id", $change.attr("id"))
      $li.append $link
      $(".compare-change-list").append($li)

  scroll_to_change: (event) ->
    $diff_link = @$("a[href='#version-diff']")

    if !$diff_link.closest("li").hasClass("active")
      $diff_link.click()

    $link = $(event.target).closest("a")
    $change = $("#" + $link.attr("data-id"))
    $changes = $("[changeid=" + $link.attr("data-id") + "], [changeid=" + $link.attr("data-id") + "] img")
    $(document).scrollTo $change, 150, offset: -100, onAfter: -> 
      if $change.find("img[changetype]").length > 0 
        $tooltip = $change.find("img[changetype]")
      else
        $tooltip = $change

      $tooltip.tooltip("show")
      setTimeout( (-> $tooltip.tooltip('hide')), 300)
      $changes.effect("highlight", {}, 500)
    false