var OKAdmin = function(){

  // initialize our multi-image uploader with an element and a template
  $(".group.image-list").each(function(){
    var parent = this
    var uploader = new OKUpload ()
    uploader.bind( this )
    uploader.add = function(url){
      var imageTemplate = $(".image-template", parent).html()
      var $el = $(imageTemplate)
      $el.find(".uri").val(url)
      $el.find("img").attr("src", url)
      $("ol", parent).prepend($el)
    }
  })
  // delete image from gallery
  $(document).on("mousedown", ".image-list .remove", function(){
    if (confirm("Remove this image?")) {
      $(this).parent().remove()
    }
  })

  // Add default date
  $('.date input').each(function(i, el){
    var value = el.getAttribute('value')
    if (!value) {
      el.setAttribute('value', toDateInputValue(new Date))
    }

    function toDateInputValue (date) {
        var local = new Date(date);
        local.setMinutes(date.getMinutes() - date.getTimezoneOffset());
        return local.toJSON().slice(0,10);
    }
  })

  // initialize our multimedia uploader with an element and a template
  $(".group.media-list").each(function(){
    var parent = this
    var uploader = new OKUpload ()
    uploader.bind( this )
    uploader.add = function(url){
      var imageTemplate = $(".image-template", parent).html()
      var $el = $(imageTemplate)
      $el.find(".uri").val(url)
      $el.find("img").attr("src", url)
      $("ol", parent).prepend($el)
    }
    uploader.addVideo = function(media){
      console.log(media)
      var videoTemplate = $(".video-template", parent).html()
      var $el = $(videoTemplate)
      $el.addClass("loaded")
      $el.find(".video-type").val( media.type )
      $el.find(".video-token").val( media.token )
      $el.find(".video-title").val( media.title )
      $el.find(".video-thumb").val( media.thumbnail )
      $el.find("img").attr("src", media.thumbnail )
      $("ol", parent).prepend($el)
   }
  })
  // delete image from gallery
  $(document).on("mousedown", ".media-list .remove", function(){
    if (confirm("Remove this media?")) {
      $(this).parent().remove()
    }
  })

  // initialize our single image uploader with existing DOM
  $(".group.image").each(function(){
    var $el = $(this)
    var uploader = new OKUpload ()
    uploader.bind( this )
    uploader.add = function(url){
      console.log(url)
      $el.find(".uri").val(url)
      $el.find(".caption").val("")
      $el.find("img").attr("src", url).show()
      $el.addClass("loaded")
    }
  })
  // delete image from single image entry
  $(document).on("mousedown", ".image .remove", function(){
    if (confirm("Remove this image?")) {
      var $el = $(this).closest(".image")
      $el.removeClass('loaded')
      $el.find(".uri").val("")
      $el.find(".caption").val("")
      $el.find("img").attr("src", "")
    }
  })

  // make the region sortable with drag-and-drop
  $(".media-list ol, .image-list ol").sortable()
  $(".media-list ol, .image-list ol").disableSelection()

  // populate a video field with info from our url parser
  var last_url
  $(".video .url").on("focus", function(){
    var $el = $(this)
    last_url = $el.val()
  })
  $(".video .url").on("keydown blur", pressEnter(function(){
    var $el = $(this)
    var url = $el.val()
    if (url == last_url) { return }
    Parser.parse( url, function(media){
      console.log(url,media)
      $el.parent().addClass("loaded")
      $el.parent().find(".video-type").val( media.type )
      $el.parent().find(".video-token").val( media.token )
      $el.parent().find(".video-title").val( media.title )
      $el.parent().find(".video-thumb").val( media.thumbnail )
    })
  }))

  // Add a new link to the list
  $('.link-list').on('click', '.add-link-btn', function(e) {
    e.preventDefault()
    e.stopPropagation()
    var $delegate = $(e.delegateTarget)
    var $list = $delegate.find('.links')
    var length = $list.find('input').length
    var name = $delegate.parent('.property').data('name')
    var $new = $delegate.find('.link-input-new')
    var input = document.createElement('input')
    var delBtn = document.createElement('button')
    var inputName = name + '[' + length + ']'
    $(input).attr({
      name: inputName,
      type: 'text',
      value: $new.val()
    })
    $list.append(input)
    $(delBtn).addClass('remove-link-btn')
    $(delBtn).data('for', inputName)
    delBtn.innerHTML = '-'
    $list.append(delBtn)
    $new.val('')
  })

  // Remove a link from the list
  $('.link-list').on('click', '.remove-link-btn', function(e) {
    e.preventDefault()
    e.stopPropagation()
    var $delegate = $(e.delegateTarget)
    var $target = $(e.target)
    var inputName = $target.data('for')
    var $input = $delegate.find('[name="' + inputName + '"]')
    $input.remove()
    $target.remove()
  })

  // fix post indexing in list-driven inputs
  $(".main.resource form").submit(function(e){
    var $id = $("[name=id]"), $title = $("[name=title]"), $menu = $("[name=menu]"), $section = $(".resource.main")
    var id = $section.data("id"), type = $section.data("type")

    if ($title.length && ! $title.val()) {
      $title.focus()
      alert("Please enter a title")
      e.preventDefault()
      return
    }

    if ($menu.length && ! $menu.val()) {
      $menu.val( $title.val() )
    }

    // TODO: pass through whether this page is static
    if (type === "page" && (id == "contact" || id == "about")) {
      ;
    }
    else {
      var slug = slugify( $title.val() )
      $id.val( slug )
    }

    // Parse date input
    $('.property .date').each(function(i, el) {
      var name = $(el).parent('.property').data('name')
      var $input = $(el).find('input')
      var date = new Date($input.val())
      // Set to middle of day so it is the same date
      // for all locales
      date.setUTCHours(12)
      var dateString = date.toUTCString()
      var normalizedInput = document.createElement('input')
      $(normalizedInput).attr({
        name: name,
        type: 'text',
        value: dateString
      })
      $input.remove()
      $(el).append(normalizedInput)
    })

    // Modify flags checkboxes such that unchecked ones return "false"
    // instead of nothing
    $('.property .flag').each(function(i, el) {
      var input = el.querySelector('input')
      var checked = !!input.checked
      if (!checked) {
        $(input).attr('value', 'false')
        input.checked = true
      }
    })

    $("ol").each(function(){
      $("li", this).each(function(index){
        $(this).find("input,textarea").each(function(){
          var field = $(this).attr("name").replace(/\[[0-9]*\]/, "[" + index + "]")
          $(this).attr("name", field)
        })
      })
    })
  })

  // delete individual records
  $("#delete_form").submit(function(e){
  	if (confirm("Are you sure you want to delete this record?")) {
  		return
  	}
  	else {
  		e.preventDefault()
  	}
  })

  // reorder items in categories
  $(".resource-category:not(.grouped)").on("click", ".edit-btn", function(e) {
    e.preventDefault();
    var $parent = $(e.delegateTarget)
    var $editBtn = $parent.find(".edit-btn");
    var $cancelBtn = $parent.find(".cancel-btn");
    var $saveBtn = $parent.find(".save-btn");
    var $ol = $parent.find("ol");
    var toggles = [$parent, $cancelBtn, $saveBtn, $editBtn];

    $ol.sortable();
    $ol.disableSelection();
    toggle();

    $cancelBtn.one("click", function(e) {
      $ol.sortable("cancel");
      $ol.enableSelection();
      toggle();
    });

    $saveBtn.one("click", function(e) {
      $ol.sortable();
      toggle();
    });

    function toggle() {
      toggles.forEach(function($el) {
        $el.toggleClass('active');
      })
    }
  });

  // save new category order
  $(".resource-category.root").on("submit", "form", function(e) {
    var $parent = $(e.delegateTarget);
    var $resources = $parent.find(".resource-input")
    $resources.each(function(index) {
      var $input = $(this);
      var parsed = JSON.parse($input.val());
      parsed.__index = index;
      $input.val(JSON.stringify(parsed));
    })
  });
}

$(function(){
  window.app = new OKAdmin ()
})


function slugify (s){ return (s || "").toLowerCase().replace(/\s/g,"-").replace(/[^-_a-zA-Z0-9]/g, '-').replace(/-+/g, "-") }