#= depend_on_asset qbrick/cms/ck-config
#
#= require jquery
#= require jquery_ujs
#= require jquery.remotipart
#= require jquery-ui
#= require bootstrap
#= require bootstrap-modal-v2
#= require bootstrap-modalmanager
#= require ckeditor-jquery
#= require jquery.nestable
#= require_tree .
#
# Disable timestamp for ckeditor internal asset loading. This prevents issues with Asset Pipeline on production.
root = exports ? this
root.CKEDITOR.timestamp = null

CKEDITOR.config.customConfig = "<%= asset_path('qbrick/cms/ck-config.js') %>"

loadTextEditor = ->
  CKEDITOR.replaceAll('ckeditor')

reloadTextEditor = (ui) ->
  editor_ids = ui.item.find('.ckeditor').map ->
    @id

  for editor in editor_ids
    CKEDITOR.replace editor

destroyTextEditor = (ui)->
  editor_ids = ui.item.find('.ckeditor').map ->
    @id

  for editor in editor_ids
    CKEDITOR.instances[editor].destroy(true)

pageType = ->
  $('#page_page_type option:selected').val()

checkPageType = ->
  redirect_url = $('#page_redirect_url')
  keywords = $('#page_keywords')
  description = $('#page_description')
  if (pageType() == 'redirect')
    redirect_url.removeAttr('disabled')
    keywords.attr('disabled', 'disabled')
    description.attr('disabled', 'disabled')
  else if (pageType() == 'custom')
    redirect_url.removeAttr('disabled')
    keywords.removeAttr('disabled')
    description.removeAttr('disabled')
  else
    redirect_url.attr('disabled', 'disabled')
    keywords.removeAttr('disabled')
    description.removeAttr('disabled')


sortableBrick = ->
  $(".brick-list").each (idx, elem) ->
    $(elem).sortable(
      handle: '.brick-item-header',
      axis: "y",
      update: (event, ui) ->
        idList = $(this).find("> .brick-item")
          .each (idx, elem) ->
            $(this).find("input.position-field").val(idx+1)
          .map ->
            $(this).data('id')

        sortForm = $('#bricks-sort-form form')
        sortForm.find('input[name="bricks[ids]"]').val(idList.toArray().join(','))
        sortForm.trigger('submit')
      stop: (event, ui) ->
        reloadTextEditor(ui)
      start: (event, ui) ->
        destroyTextEditor(ui)
    ).disableSelection()

window.initSubmitLinks = (selector = null)->
  selector ||= $('body')

  selector.find('a.submit')
    .click (e)->
      $('textarea.ckeditor').each (index, elem) ->
        CKEDITOR.instances[elem.id].updateElement()

      form = $(this).closest('form')
      form.submit()
      e.preventDefault()

window.initSavePopover = (selector) ->
  link = selector.find('a.submit')
  link.popover(placement: 'top', trigger: 'manual')

  # initial delay
  setTimeout ->
    link.popover('show')
    # fade out delay
    setTimeout ->
      link.popover('hide')
    , 1500
  , 50

window.initCKEditor = (selector) ->
  CKEDITOR.replace(selector)

window.toggleCollapseBricksNav = (bool = false) ->
  if bool
    $('#collapse-bricks-nav').removeClass('hidden')
  else
    $('#collapse-bricks-nav').addClass('hidden')

# Stop propagation for display styles dropdown
window.stopPropagationOfDisplayStyles = (selector) ->
  selector.click (e) ->
    e.stopPropagation()

$(document).ajaxSuccess ->
  sortableBrick()

  $('a.has-spinner').click ->
    $(this).toggleClass('active')

$(document).ready ->
  loadTextEditor()
  checkPageType()
  sortableBrick()
  initSubmitLinks()
  stopPropagationOfDisplayStyles($('#display-styles ul'))

  $('#page_page_type').change ->
    checkPageType()

  $('.dd').nestable(
    collapseBtnHTML: '<button data-action="collapse"><i class="icon-minus-sign"></i></button>'
    expandBtnHTML: '<button data-action="expand"><i class="icon-plus-sign"></i></button>'
  )

  $('.dd').on('change', ->
    pageTree = $('.dd').nestable('serialize')
    url = '/cms/pages/sort'
    $.post(url, { page_tree: pageTree }, "json")
  )

  # collapse / expand all
  $('#expand-all').click ->
    $('.brick-item-content').each (index, elem) ->
      $(elem).collapse('show')
    $('.resize-toggler').each (index, elem) ->
      $(elem).removeClass('collapsed')

  $('#collapse-all').click ->
    $('.brick-item-content').each (index, elem) ->
      $(elem).collapse('hide')
    $('.resize-toggler').each (index, elem) ->
      $(elem).addClass('collapsed')

  $("[data-toggle=tooltip]").tooltip(placement: 'top')
  $("[data-toggle=popover]").popover(placement: 'left', html: true, container: 'body')