/*!
 * dragtable
 *
 * @Version 2.0.15
 *
 * Copyright (c) 2010-2013, Andres akottr@gmail.com
 * Dual licensed under the MIT (MIT-LICENSE.txt)
 * and GPL (GPL-LICENSE.txt) licenses.
 *
 * Inspired by the the dragtable from Dan Vanderkam (danvk.org/dragtable/)
 * Thanks to the jquery and jqueryui comitters
 *
 * Any comment, bug report, feature-request is welcome
 * Feel free to contact me.
 */

/* TOKNOW:
 * For IE7 you need this css rule:
 * table {
 *   border-collapse: collapse;
 * }
 * Or take a clean reset.css (see http://meyerweb.com/eric/tools/css/reset/)
 */

/* TODO: investigate
 * Does not work properly with css rule:
 * html {
 *      overflow: -moz-scrollbars-vertical;
 *  }
 * Workaround:
 * Fixing Firefox issues by scrolling down the page
 * http://stackoverflow.com/questions/2451528/jquery-ui-sortable-scroll-helper-element-offset-firefox-issue
 *
 * var start = $.noop;
 * var beforeStop = $.noop;
 * if($.browser.mozilla) {
 * var start = function (event, ui) {
 *               if( ui.helper !== undefined )
 *                 ui.helper.css('position','absolute').css('margin-top', $(window).scrollTop() );
 *               }
 * var beforeStop = function (event, ui) {
 *              if( ui.offset !== undefined )
 *                ui.helper.css('margin-top', 0);
 *              }
 * }
 *
 * and pass this as start and stop function to the sortable initialisation
 * start: start,
 * beforeStop: beforeStop
 */
/*
 * Special thx to all pull requests comitters
 */

(function($) {
	$.widget("akottr.dragtable", {
	  options: {
		revert: false,               // smooth revert
		dragHandle: '.table-handle', // handle for moving cols, if not exists the whole 'th' is the handle
		maxMovingRows: 40,           // 1 -> only header. 40 row should be enough, the rest is usually not in the viewport
		excludeFooter: false,        // excludes the footer row(s) while moving other columns. Make sense if there is a footer with a colspan. */
		onlyHeaderThreshold: 100,    // TODO:  not implemented yet, switch automatically between entire col moving / only header moving
		dragaccept: null,            // draggable cols -> default all
		persistState: null,          // url or function -> plug in your custom persistState function right here. function call is persistState(originalTable)
		restoreState: null,          // JSON-Object or function:  some kind of experimental aka Quick-Hack TODO: do it better
		exact: true,                 // removes pixels, so that the overlay table width fits exactly the original table width
		clickDelay: 10,              // ms to wait before rendering sortable list and delegating click event
		containment: null,           // @see http://api.jqueryui.com/sortable/#option-containment, use it if you want to move in 2 dimesnions (together with axis: null)
		cursor: 'move',              // @see http://api.jqueryui.com/sortable/#option-cursor
		cursorAt: false,             // @see http://api.jqueryui.com/sortable/#option-cursorAt
		distance: 0,                 // @see http://api.jqueryui.com/sortable/#option-distance, for immediate feedback use "0"
		tolerance: 'pointer',        // @see http://api.jqueryui.com/sortable/#option-tolerance
		axis: 'x',                   // @see http://api.jqueryui.com/sortable/#option-axis, Only vertical moving is allowed. Use 'x' or null. Use this in conjunction with the 'containment' setting
		beforeStart: $.noop,         // returning FALSE will stop the execution chain.
		beforeMoving: $.noop,
		beforeReorganize: $.noop,
		beforeStop: $.noop
	  },
	  originalTable: {
		el: null,
		selectedHandle: null,
		sortOrder: null,
		startIndex: 0,
		endIndex: 0
	  },
	  sortableTable: {
		el: $(),
		selectedHandle: $(),
		movingRow: $()
	  },
	  persistState: function() {
		var _this = this;
		this.originalTable.el.find('th').each(function(i) {
		  if (this.id !== '') {
			_this.originalTable.sortOrder[this.id] = i;
		  }
		});
		$.ajax({
		  url: this.options.persistState,
		  data: this.originalTable.sortOrder
		});
	  },
	  /*
	   * persistObj looks like
	   * {'id1':'2','id3':'3','id2':'1'}
	   * table looks like
	   * |   id2  |   id1   |   id3   |
	   */
	  _restoreState: function(persistObj) {
		for (var n in persistObj) {
		  this.originalTable.startIndex = $('[data-field=' + n +']', this.originalTable.el ).closest('th').prevAll().length + 1;
		  this.originalTable.endIndex = parseInt(persistObj[n], 10) + 1;
		  this._bubbleCols();
		}
	  },
	  // bubble the moved col left or right
	  _bubbleCols: function() {
		var i, j, col1, col2;
		var from = this.originalTable.startIndex;
		var to = this.originalTable.endIndex;
		/* Find children thead and tbody.
		 * Only to process the immediate tr-children. Bugfix for inner tables
		 */
		var thtb = this.originalTable.el.children();
		if (this.options.excludeFooter) {
		  thtb = thtb.not('tfoot');
		}
		if (from < to) {
		  for (i = from; i < to; i++) {
			col1 = thtb.find('> tr > td:nth-child(' + i + ')')
			  .add(thtb.find('> tr > th:nth-child(' + i + ')'));
			col2 = thtb.find('> tr > td:nth-child(' + (i + 1) + ')')
			  .add(thtb.find('> tr > th:nth-child(' + (i + 1) + ')'));
			for (j = 0; j < col1.length; j++) {
			  swapNodes(col1[j], col2[j]);
			}
		  }
		} else {
		  for (i = from; i > to; i--) {
			col1 = thtb.find('> tr > td:nth-child(' + i + ')')
			  .add(thtb.find('> tr > th:nth-child(' + i + ')'));
			col2 = thtb.find('> tr > td:nth-child(' + (i - 1) + ')')
			  .add(thtb.find('> tr > th:nth-child(' + (i - 1) + ')'));
			for (j = 0; j < col1.length; j++) {
			  swapNodes(col1[j], col2[j]);
			}
		  }
		}
	  },
	  _rearrangeTableBackroundProcessing: function() {
		var _this = this;
		return function() {
		  _this._bubbleCols();
		  _this.options.beforeStop(_this.originalTable);
		  _this.sortableTable.el.remove();
		  restoreTextSelection();
		  // persist state if necessary
		  if (_this.options.persistState !== null) {
			typeof _this.options.persistState === 'function' ? _this.options.persistState(_this.originalTable) : _this.persistState();
		  }
		};
	  },
	  _rearrangeTable: function() {
		var _this = this;
		return function() {
		  // remove handler-class -> handler is now finished
		  _this.originalTable.selectedHandle.removeClass('dragtable-handle-selected');
		  // add disabled class -> reorgorganisation starts soon
		  _this.sortableTable.el.sortable("disable");
		  _this.sortableTable.el.addClass('dragtable-disabled');
		  _this.options.beforeReorganize(_this.originalTable, _this.sortableTable);
		  // do reorganisation asynchronous
		  // for chrome a little bit more than 1 ms because we want to force a rerender
		  _this.originalTable.endIndex = _this.sortableTable.movingRow.prevAll().length + 1;
		  setTimeout(_this._rearrangeTableBackroundProcessing(), 50);
		};
	  },
	  /*
	   * Disrupts the table. The original table stays the same.
	   * But on a layer above the original table we are constructing a list (ul > li)
	   * each li with a separate table representig a single col of the original table.
	   */
	  _generateSortable: function(e) {
		!e.cancelBubble && (e.cancelBubble = true);
		var _this = this;
		// table attributes
		var attrs = this.originalTable.el[0].attributes;
		var attrsString = '';
		for (var i = 0; i < attrs.length; i++) {
		  if (attrs[i].nodeValue && attrs[i].nodeName != 'id' && attrs[i].nodeName != 'width') {
			attrsString += attrs[i].nodeName + '="' + attrs[i].nodeValue + '" ';
		  }
		}
  
		// row attributes
		var rowAttrsArr = [];
		//compute height, special handling for ie needed :-(
		var heightArr = [];
		this.originalTable.el.find('tr.r-gridrow').slice(0, this.options.maxMovingRows).each(function(i, v) {
		  // row attributes
		  var attrs = this.attributes;
		  var attrsString = "";
		  for (var j = 0; j < attrs.length; j++) {
			if (attrs[j].nodeValue && attrs[j].nodeName != 'id') {
			  attrsString += " " + attrs[j].nodeName + '="' + attrs[j].nodeValue + '"';
			}
		  }
		  rowAttrsArr.push(attrsString);
		  heightArr.push($(this).height());
		});
  
		// compute width, no special handling for ie needed :-)
		var widthArr = [];
		// compute total width, needed for not wrapping around after the screen ends (floating)
		var totalWidth = 0;
		/* Find children thead and tbody.
		 * Only to process the immediate tr-children. Bugfix for inner tables
		 */
		var thtb = _this.originalTable.el.children();
		if (this.options.excludeFooter) {
		  thtb = thtb.not('tfoot');
		}
		thtb.find('> tr > th').each(function(i, v) {
		  var w = $(this).is(':visible') ? $(this).outerWidth() : 0;
		  widthArr.push(w);
		  totalWidth += w;
		});
		if(_this.options.exact) {
			var difference = totalWidth - _this.originalTable.el.outerWidth();
			widthArr[0] -= difference;
		}
		// one extra px on right and left side
		totalWidth += 2
		var rtl = $("html[dir=RTL]"),
			liFloatStyle = rtl.length > 0 ? 'float:right;' : '';
			
		var sortableHtml = '<ul class="dragtable-sortable" style="position:absolute; width:' + totalWidth + 'px;">';
		// assemble the needed html
		thtb.find('> tr > th').each(function(i, v) {
		  var width_li = $(this).is(':visible') ? $(this).outerWidth() : 0;
  
		  sortableHtml += '<li style="'+liFloatStyle+' width:' + width_li + 'px;">';
  
		  sortableHtml += '<table ' + attrsString + '>';
		  var row = thtb.find('> tr > th:nth-child(' + (i + 1) + ')');
		  if (_this.options.maxMovingRows > 1) {
			row = row.add(thtb.find('> tr.r-gridrow > td:nth-child(' + (i + 1) + ')').slice(0, _this.options.maxMovingRows - 1));
		  }
		  row.each(function(j) {
			// TODO: May cause duplicate style-Attribute
			var row_content = $(this).clone().wrap('<div></div>').parent().html();
			if (row_content.toLowerCase().indexOf('<th') === 0) sortableHtml += "<thead>";
			sortableHtml += '<tr ' + rowAttrsArr[j] + '" style="height:' + heightArr[j] + 'px;">';
			sortableHtml += row_content;
			if (row_content.toLowerCase().indexOf('<th') === 0) sortableHtml += "</thead>";
			sortableHtml += '</tr>';
		  });
		  sortableHtml += '</table>';
		  sortableHtml += '</li>';
		});
		sortableHtml += '</ul>';
		this.sortableTable.el = this.originalTable.el.before(sortableHtml).prev();
		// set width if necessary
		this.sortableTable.el.find('> li > table').each(function(i, v) {
		  $(this).css('width', widthArr[i] + 'px');
		  $(this).css('min-width', widthArr[i] + 'px');
		  $(this).css('max-width', widthArr[i] + 'px');
		});
  
		// assign this.sortableTable.selectedHandle
		this.sortableTable.selectedHandle = this.sortableTable.el.find('th .dragtable-handle-selected');
  
		var items = !this.options.dragaccept ? 'li' : 'li:has(' + this.options.dragaccept + ')';
		this.sortableTable.el.sortable({
		  items: items,
		  stop: this._rearrangeTable(),
		  // pass thru options for sortable widget
		  revert: this.options.revert,
		  tolerance: this.options.tolerance,
		  containment: this.options.containment,
		  cursor: this.options.cursor,
		  cursorAt: this.options.cursorAt,
		  distance: this.options.distance,
		  axis: this.options.axis
		});
  
		// assign start index
		this.originalTable.startIndex = $(e.target).closest('th').prevAll().length + 1;
  
		this.options.beforeMoving(this.originalTable, this.sortableTable);
		// Start moving by delegating the original event to the new sortable table
		this.sortableTable.movingRow = this.sortableTable.el.find('> li:nth-child(' + this.originalTable.startIndex + ')');
  
		// prevent the user from drag selecting "highlighting" surrounding page elements
		disableTextSelection();
		// clone the initial event and trigger the sort with it
		this.sortableTable.movingRow.trigger($.extend($.Event(e.type), {
		  which: 1,
		  clientX: e.clientX,
		  clientY: e.clientY,
		  pageX: e.pageX,
		  pageY: e.pageY,
		  screenX: e.screenX,
		  screenY: e.screenY
		}));
  
		// Some inner divs to deliver the posibillity to style the placeholder more sophisticated
		var placeholder = this.sortableTable.el.find('.ui-sortable-placeholder');
		if(!placeholder.height()  <= 0) {
		  placeholder.css('height', this.sortableTable.el.find('.ui-sortable-helper').height());
		  if ( rtl.length > 0 )
			placeholder.css('float', 'right');
		}
  
		placeholder.html('<div class="outer" style="height:100%;"><div class="inner" style="height:100%;"></div></div>');
	  },
	  bindTo: {},
	  _create: function() {
		this.originalTable = {
		  el: this.element,
		  selectedHandle: $(),
		  sortOrder: {},
		  startIndex: 0,
		  endIndex: 0
		};
		// bind draggable to 'th' by default
		this.bindTo = this.originalTable.el.find('th');
		// filter only the cols that are accepted
		if (this.options.dragaccept) {
		  this.bindTo = this.bindTo.filter(this.options.dragaccept);
		}
		// bind draggable to handle if exists
		if (this.bindTo.find(this.options.dragHandle).length > 0) {
		  this.bindTo = this.bindTo.find(this.options.dragHandle);
		}
		// restore state if necessary
		if (this.options.restoreState !== null) {
		  typeof this.options.restoreState === 'function' ? this.options.restoreState(this.originalTable) : this._restoreState(this.options.restoreState);
		}
		var _this = this;
		this.bindTo.on('mousedown', function(evt) {
		  // listen only to left mouse click
		  if(evt.which!==1) return;
		  if (_this.options.beforeStart(_this.originalTable) === false) {
			return;
		  }
		  clearTimeout(this.downTimer);
		  this.downTimer = setTimeout(function() {
			_this.originalTable.selectedHandle = $(this);
			_this.originalTable.selectedHandle.addClass('dragtable-handle-selected');
			_this._generateSortable(evt);
		  }, _this.options.clickDelay);
		}).on('mouseup', function(evt) {
		  clearTimeout(this.downTimer);
		});
	  },
	  redraw: function(){
		this.destroy();
		this._create();
	  },
	  destroy: function() {
		this.bindTo.off('mousedown');
		$.Widget.prototype.destroy.apply(this, arguments); // default destroy
		// now do other stuff particular to this widget
	  }
	});
  
	/** closure-scoped "private" functions **/
  
	var body_onselectstart_save = $(document.body).attr('onselectstart'),
	  body_unselectable_save = $(document.body).attr('unselectable');
  
	// css properties to disable user-select on the body tag by appending a <style> tag to the <head>
	// remove any current document selections
  
	function disableTextSelection() {
	  // jQuery doesn't support the element.text attribute in MSIE 8
	  // http://stackoverflow.com/questions/2692770/style-style-textcss-appendtohead-does-not-work-in-ie
	  var $style = $('<style id="__dragtable_disable_text_selection__" type="text/css">body { -ms-user-select:none;-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;user-select:none; }</style>');
	  $(document.head).append($style);
	  $(document.body).attr('onselectstart', 'return false;').attr('unselectable', 'on');
	  if (window.getSelection) {
		window.getSelection().removeAllRanges();
	  } else {
		document.selection.empty(); // MSIE http://msdn.microsoft.com/en-us/library/ms535869%28v=VS.85%29.aspx
	  }
	}
  
	// remove the <style> tag, and restore the original <body> onselectstart attribute
  
	function restoreTextSelection() {
	  $('#__dragtable_disable_text_selection__').remove();
	  if (body_onselectstart_save) {
		$(document.body).attr('onselectstart', body_onselectstart_save);
	  } else {
		$(document.body).removeAttr('onselectstart');
	  }
	  if (body_unselectable_save) {
		$(document.body).attr('unselectable', body_unselectable_save);
	  } else {
		$(document.body).removeAttr('unselectable');
	  }
	}
  
	function swapNodes(a, b) {
	  var aparent = a.parentNode;
	  var asibling = a.nextSibling === b ? a : a.nextSibling;
	  b.parentNode.insertBefore(a, b);
	  aparent.insertBefore(b, asibling);
	}
  })(jQuery);
