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(media){
      var url = media.url
      var imageTemplate = $(".image-template", parent).html()
      var $el = $(imageTemplate)
      $el.find(".uri").val(media.url)
      $el.find(".image-width").val(media.width)
      $el.find(".image-height").val(media.height)
      $el.find("img").attr("src", media.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(media){
      var url = media.url
      var imageTemplate = $(".image-template", parent).html()
      var $el = $(imageTemplate)
      $el.find(".uri").val(media.url)
      $el.find(".image-width").val(media.width)
      $el.find(".image-height").val(media.height)
      $el.find("img").attr("src", media.url)
      $("ol", parent).prepend($el)
    }
    uploader.addMedia = function(media){
      switch (media.type) {
        case 'youtube':
        case 'vimeo':
        case 'video':
          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-uri").val( media.uri )
          $el.find(".video-title").val( media.title )
          $el.find(".video-thumb").val( media.thumbnail )
          $el.find(".video-width").val( media.width )
          $el.find(".video-height").val( media.height )
          $el.find("img").attr("src", media.thumbnail )
          $("ol", parent).prepend($el)
          break
        case 'audio':
          var audioTemplate = $(".audio-template", parent).html()
          var $el = $(audioTemplate)
          $el.addClass("loaded")
          $el.find(".audio-type").val( media.type )
          $el.find(".audio-token").val( media.token )
          $el.find(".audio-uri").val( media.uri )
          $el.find(".audio-title").val( media.title )
          $el.find(".audio-thumb").val( media.thumbnail )
          $el.find(".audio-duration").val( media.duration )
          $el.find("img").attr("src", media.thumbnail )
          $("ol", parent).prepend($el)
          break
        case 'link':
          var linkTemplate = $(".link-template", parent).html()
          var $el = $(linkTemplate)
          $el.addClass("loaded")
          $el.find(".uri").val( media.url )
          $("ol", parent).prepend($el)
          break
        default:
          alert("Unsupported link type!")
      }
    }
  })
  // 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(media){
      console.log(media)
      $el.find(".uri").val(media.url)
      $el.find(".caption").val("")
      $el.find(".image-width").val(media.width)
      $el.find(".image-height").val(media.height)
      $el.find("img").attr("src", media.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(".image-width").val("")
      $el.find(".image-height").val("")
      $el.find(".caption").val("")
      $el.find("img").attr("src", "")
    }
  })

  // make the region sortable with drag-and-drop
  $(".media-list ol, .image-list ol, .link-list .links").sortable()
  $(".media-list ol, .image-list ol").disableSelection()
  $(document).on("click", ".main.index .resource-category.active ol a", function(e){
    e.preventDefault()
  })

  // 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-uri").val( media.url )
      $el.parent().find(".video-title").val( media.title )
      $el.parent().find(".video-thumb").val( media.thumbnail )
      $el.parent().find(".video-width").val( media.width )
      $el.parent().find(".video-height").val( media.height )
    })
  }))

  // Add a new link to the list
  $('.link-list').on('click', '.add-link-btn', function addNewLink (e) {
    e.preventDefault && e.preventDefault()
    e.stopPropagation && e.stopPropagation()
    var $delegate = $(e.delegateTarget)
    var $list = $delegate.find('.links')
    var linkCount = $list.find("li").length
    
    var $linkText = $delegate.find(".link-input-new.link-text")
    var $linkURI = $delegate.find(".link-input-new.link-uri")
    
    var linkText = $linkText.val() || 'Link Text'
    var linkURI = $linkURI.val()
    
    if (! linkURI) {
      alert('Please enter a link')
      return
    }

    var template = $delegate.find(".link-template").html()
    template = template.replace(/\[\]/g, "[" + linkCount + "]")
    var $el = $(template)
    $el.find(".link-text").val( linkText )
    $el.find(".link-uri").val( linkURI )
    $list.append($el)
    $linkText.val("")
    $linkURI.val("")
  })

  // Remove a link from the list
  $('.link-list').on('mousedown touchstart', '.remove-link-btn', function(e) {
    e.preventDefault()
    e.stopPropagation()
    var $target = $(e.target)
    $target.closest("li").remove()
  })

  $('.link-list input').on('keydown', function(e){
    if ( e.keyCode == 13 ) {
      e.preventDefault()
      e.stopPropagation()
      if ($(this).hasClass('link-input-new')) {
        $(this).next('.add-link-btn').trigger('click')
      }
    }
  })

  // 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 input[type=checkbox]').each(function(i, el) {
      var checked = !! el.checked
      if (! checked) {
        el.setAttribute('value', 'false')
      }
      el.checked = true
    })
    
    $(".link-list").each(function(){
      var $inputs = $(this).find(".link-input-new")
      if ($inputs.eq(0).val() && $inputs.eq(1).val()) {
        $(this).find(".add-link-btn").trigger("click")
      }
    })

    $("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")
    var isDescending = $parent.hasClass("descending")
    $resources.each(function(index) {
      var $input = $(this);
      var parsed = JSON.parse($input.val());
      if (isDescending) {
        parsed.__index = $resources.length - index;
      }
      else {
        parsed.__index = index;
      }
      $input.val(JSON.stringify(parsed));
    })
  });
  
  $(window).on('keydown', function(e){
    if ( (e.ctrlKey || e.altKey || e.metaKey) && e.keyCode == 83 ) {
      e.preventDefault()
      $("#resource_form").submit()
    }
  })
}

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


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