jQuery(function($) {
  "use strict";

  var TEMPLATES = new LuigiTemplate.Cache({
    panel: [DATA.panel_template],
  });

  function set_panel_editing(editing) {
    // update panel headers
    $('#home .home-editing').toggleClass('hidden', !editing);
    $('#home .home-not-editing').toggleClass('hidden', editing);

    // flag panels as draggable
    $('#home .panel').attr('draggable', editing);
  }

  $('#admin-tab-home').on('show.bs.tab', function() {
    // console.log('asdf');
  });

  $('#home-edit-toggle').click(function() {
    $(this).toggleClass('btn-default btn-primary');
    var editing = $(this).hasClass('btn-primary'),
        panel = $(this).parents('.panel-heading');

    // update buttons
    panel.find('.btn-group.home-editing').toggleClass('hidden', !editing);
    panel.find('.btn-group.home-not-editing').toggleClass('hidden', editing);

    set_panel_editing(editing);

    // stop event
    return false;
  });

  $('#home-add').on('click', 'a', function() {
    var data = $(this).data();

    // hide dropdown
    $('body').trigger('click');

    // prepend new panel to first column
    $('#home .home-col:first').prepend(TEMPLATES.run('panel', {
      id:           $.now(),
      panel_class:  'panel-default',
      config:       '{}',
      type:         'test',
      name:         data.name,
      body:         '<p>Sample body.</p>',
    }));

    // flag panels as editable
    set_panel_editing(true);

    // stop event
    return false;
  });

  // cache column classes
  var COL_CLASSES = $.map($('#home-cols a'), function(el) {
    return $(el).data('col');
  }).join(' ');

  $('#home-cols').on('click', 'a', function() {
    var data = $(this).data(),
        ul = $(this).parents('.dropdown-menu');

    // hide dropdown
    $('body').trigger('click');

    // update ui
    ul.find('.active').removeClass('active');
    $(this).parent('li').addClass('active');
    ul.prev('a').find('span').text(data.name);

    var src_cols = $('#home .row .home-col'),
        dst_num_cols = +data.id,
        update_css = false;

    if (dst_num_cols > src_cols.length) {
      for (var i = 0, l = dst_num_cols - src_cols.length; i < l; i++)
        $('#home .row').append("<div class='home-col'></div>");

      update_css = true;
    } else if (dst_num_cols < src_cols.length) {
      for (var i = 0, l = src_cols.length - dst_num_cols; i < l; i++) {
        // append panels from deleted columns to last valid column
        $.each($(src_cols[dst_num_cols + i]).find('.panel'), function(i, el) {
          $(src_cols[dst_num_cols - 1]).append(el);
        });

        // remove old columns
        $(src_cols.slice(dst_num_cols, src_cols.length)).remove();
      }

      update_css = true;
    } else {
      // do nothing, column count is fine
      update_css = false;
    }

    // update column classes, if necessary
    if (update_css)
      $('#home .row .home-col').removeClass(COL_CLASSES).addClass(data.col);

    // stop event
    return false;
  });

  $('#home').on('dragstart', '.panel[draggable="true"]', function(ev) {
    var oe = ev.originalEvent;
    oe.dataTransfer.setData('text', oe.target.id);

    $('#home').addClass('dragging');
  }).on('dragend', '.panel[draggable="true"]', function(ev) {
    $('#home').removeClass('dragging');
  }).on('dragover', '.home-col', function(ev) {
    ev.preventDefault();
  }).on('drop', '.home-col', function(ev) {
    ev.preventDefault();

    var id = ev.originalEvent.dataTransfer.getData('text');
    $(this).append(document.getElementById(id));
  }).on('click', '.home-panel-edit a', function() {
    var id = $(this).data('id');

    // hide dropdown
    $('body').trigger('click');

    if (id == 'remove') {
      if (confirm("Remove this panel?")) {
        $($(this).parents('.panel')[0]).remove();
      }
    } else if (id == 'edit') {
      alert('TODO: ' + id + ' panel');
    } else {
      // ignore unknown menu type
    }

    // stop event
    return false;
  });
});