/* ================================================================================
 * 网格选择器API
 * ================================================================================
 * 初始化：$.fn.cellselector.init(wrap,array);
 * 输出：  $.fn.cellselector.output(wrap);
 *
 * 说明: wrap是jQuery对象，array是表示表格状态的二维数组，1代表选中，0代表未选中。
 * ============================================================================= */

(function($) {
  'use strict';
  var setting = {
      xAxis  : 24,
      xLabel : ['0','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23'],
      yAxis  : 7,
      yLabel : ['周一','周二','周三','周四','周五','周六','周日']
    };

  var CS = {
    init: function(wrap,array) {
      var isUpdate = wrap.find('table').hasClass('cell-selector');
      if (!isUpdate) {
        creatTable(wrap);
        bindEvents(wrap);
      }
      fillCell(wrap,array);
    },

    output: function(wrap) {
      var result = getCellState(wrap);
      return result;
    }
  }

  $.fn.cellselector = CS;

  function creatTable(wrap) {

    var html = ['<table class="cell-selector"><thead><tr><th></th>'];
    for (var i = 0; i < setting.xAxis; i++) {
      html.push('<th>',setting.xLabel[i],'</th>');
    }
    html.push('</tr></thead><tbody>');
    for (var i = 0; i < setting.yAxis; i++) {
      html.push('<tr><th>',setting.yLabel[i],'</th>');
      for (var j = 0; j < setting.xAxis; j++) {
        html.push('<td></td>');
      }
      html.push('</tr>');
    }
    html.push('</tbody></table>');
    html.push('<div class="caption"><div class="caption-item"><span class="checked"></span>允许</div>');
    html.push('<div class="caption-item"><span class="normal"></span>禁止</div></div>');

    wrap.eq(0).append(html.join(''));
  }

  function fillCell(wrap,data) {

    var isArray = $.isArray(data);

    if (!isArray) {
      wrap.find('td').addClass('on');
      return;
    }

    var tr = wrap.eq(0).find('tr').has('td');

    if (tr.length != setting.yAxis) {
      return;
    }

    for (var i = 0; i < setting.yAxis; i++) {
      var td = tr.eq(i).find('td');

      if (td.length != setting.xAxis || data[i].length != setting.xAxis) {
        return;
      }

      for (var j = 0; j < setting.xAxis; j++) {

        var cell = td.eq(j);

        if (data[i][j]) {
          cell.addClass('on');
        }
        else {
          cell.removeClass('on');
        }
      }
    }
  }

  function getCellState(wrap) {
    var wrap = wrap.eq(0),
        row = wrap.find('tr').has('td'),
        result = [];

    for (var i = 0; i < row.length; i++) {
      result[i] = [];
      var cell = row.eq(i).find('td');
      for (var j = 0; j < cell.length; j++) {
        if (cell.eq(j).hasClass('on')) {
          result[i][j] = 1;
        }
        else {
          result[i][j] = 0;
        }
      }
    }
    return result;
  }

  function bindEvents(wrap) {
    var isMouseDown = false,
        wrap = wrap.eq(0),
        base = null;

    wrap.on('mousedown.cs','td',function() {
      isMouseDown = true;
      base = getAttrs($(this));
      base.toggleClass('on');
    });

    wrap.on('mouseenter.cs','td',function() {

      if (!isMouseDown || base == null) {
        return;
      }

      var target = getAttrs($(this));
      changeStatus(base,target);

    });

    $(document).on('mouseup.cs', function(event) {
      isMouseDown = false;
    });
  }

  function changeStatus (start, end) {
    var x_min = Math.min(start.rowNum, end.rowNum);
    var x_max = Math.max(start.rowNum, end.rowNum);
    var y_min = Math.min(start.colNum, end.colNum);
    var y_max = Math.max(start.colNum, end.colNum);
    var cells = start.parentsUntil('table').find('td');
    var status = start.isOn;

    cells.each(function() {
      var c = getAttrs($(this));
      if ((x_min <=  c.rowNum && c.rowNum <= x_max) && (y_min <= c.colNum && c.colNum <= y_max)) {
        if (status) {
          c.removeClass('on')
        }
        else {
          c.addClass('on');
        }
      }
    });
  }

  function getAttrs (elem) {
    elem.rowNum = elem.parent('tr').index();
    elem.colNum = elem.index();
    elem.isOn = elem.hasClass('on');
    return elem;
  }


})(jQuery);



/* ================================================================================
 * EXBANDER
 * ================================================================================ */

(function ($) {

  $(document).on('click.ui.exbander', '.exbander-trigger-open', function(event) {
    event.preventDefault();
    $(this).parents('.exbander').eq(0).addClass('open');
  });

  $(document).on('click.ui.exbander', '.exbander-trigger-collapse', function(event) {
    event.preventDefault();
    $(this).parents('.exbander').eq(0).removeClass('open');
  });

})(jQuery);