'use babel';
import SubAtom from 'sub-atom';
import $ from 'jquery';

// css classes on the status items that we don't want
// to be serialized
const ignoredCSSClasses = /(^|\s)\S*(inline-block)\S*/g;

var disposables;

export function activate() {
  disposables = new SubAtom();
  atom.packages.onDidActivateInitialPackages(() => {
    process.nextTick(() => {
      handleEvents();
      setInitialOrder();
    });
  });
}

export function deactivate() {
  disposables.dispose();
  disposables = null;
}

function handleEvents() {
  disposables.add('status-bar', 'mousedown', '.status-bar-left > *, .status-bar-right > *', dragStart);
}

var dragDisposable;

function dragStart(event) {
  if(event.which != 1) return;
  event.preventDefault();
  var currentItem = event.currentTarget;
  dragDisposable = new SubAtom();
  dragDisposable.add(document.body, 'mousemove', mousemoveEvent => drag(currentItem, mousemoveEvent));
  dragDisposable.add(document.body, 'mouseup mouseleave', () => dragEnd(currentItem));
  currentItem.classList.add('dragging');
  document.querySelector('status-bar').classList.add('dragging');
}

function drag(currentItem, event) {
  var {pageX} = event;
  var previousItem = getNextItem(currentItem, true);
  var nextItem = getNextItem(currentItem);
  if(previousItem && pageX < $(previousItem).offset().left + previousItem.clientWidth) {
    var previousOffset = $(previousItem).offset().left;
    var previousWidth = previousItem.clientWidth;
    if(pageX > previousOffset + previousWidth / 2) {
      $(currentItem).insertAfter(previousItem);
    } else {
      $(currentItem).insertBefore(previousItem);
    }
  } else if(nextItem && pageX > $(nextItem).offset().left) {
    var nextOffset = $(nextItem).offset().left;
    var nextWidth = nextItem.clientWidth;
    if(pageX < nextOffset + nextWidth / 2) {
      $(currentItem).insertBefore(nextItem);
    } else {
      $(currentItem).insertAfter(nextItem);
    }
  }
}

function dragEnd(currentItem) {
  if(dragDisposable) dragDisposable.dispose();
  dragDisposable = null;
  currentItem.classList.remove('dragging');
  document.querySelector('status-bar').classList.remove('dragging');
  saveOrder();
}

function getNextItem(currentItem, reverse = false) {
  var statusItems = document.querySelectorAll('.status-bar-left > *, .status-bar-right > *');
  var currentIndex = Array.prototype.indexOf.call(statusItems, currentItem);
  while(currentIndex >= 0 && currentIndex < statusItems.length) {
    currentIndex += Math.pow(-1, reverse); // -1 if reverse == true, 1 otherwise
    let item = statusItems[currentIndex];
    if(isVisible(item)) return item;
  }
}

function isVisible(el) {
  if(!isHTMLElement(el)) return false;
  var {display, visibility, width} = window.getComputedStyle(el);
  width = parseInt(width) || el.clientWidth;
  return display != 'none' && visibility != 'hidden' && width > 0;
}

function saveOrder() {
  for(let side of ['left', 'right']) {
    let statusItems = document.querySelectorAll(`status-bar .status-bar-${side} > *`);
    atom.config.set(`move-status-items.${side}`, serializeStatusItems(statusItems));
  }
}

function serializeStatusItems(statusItems) {
  return Array.prototype.map.call(statusItems, statusItem => {
    if(!isHTMLElement(statusItem)) return '';
    return serializeStatusItem(statusItem);
  });
}

function serializeStatusItem(statusItem) {
  return statusItem.tagName + serializeClassName(statusItem) + serializeAttribute(statusItem, 'is');
}

function serializeClassName(el) {
  if(!el || !el.className) return '';
  var className = el.className.replace(ignoredCSSClasses, '').trim();
  if(!className) return '';
  return className.replace(/(^|\s+)/g, '.');
}

function serializeAttribute(el, attr) {
  var value = el.getAttribute(attr);
  if(!value) return '';
  return `[${attr}="${value}"]`;
}

function setInitialOrder() {
  var statusBar = document.querySelector('status-bar');
  var config = atom.config.get('move-status-items');
  for(let side in config) {
    if(!config.hasOwnProperty(side)) continue;
    let statusItemContainer = statusBar.querySelector(`.status-bar-${side}`);
    for(let serializedStatusItem of config[side]) {
      let statusItem = statusBar.querySelector(serializedStatusItem);
      if(!isHTMLElement(statusItem)) continue;
      if (statusItemContainer.contains(statusItem)) continue;
      if (statusItem.contains(statusItemContainer)) continue;
      statusItemContainer.appendChild(statusItem);
    }
  }
}

function isHTMLElement(el) {
  return el instanceof HTMLElement;
}

@@ -41,32 +41,8 @@
 om';
-%0Aimport $ from 'jquery';
 %0A%0A//
@@ -1249,16 +1249,17 @@
 m);%0A  if
+ 
 (previou
@@ -1275,17 +1275,27 @@
 pageX %3C 
-$
+(Math.round
 (previou
@@ -1299,31 +1299,39 @@
 iousItem
-)
 .offset
-().left
+Left / 10) * 10)
  + previ
@@ -1378,17 +1378,26 @@
 ffset = 
-$
+Math.round
 (previou
@@ -1397,39 +1397,46 @@
 previousItem
-)
 .offset
-().left
+Left / 10) * 10
 ;%0A    var pr
@@ -1477,24 +1477,25 @@
 idth;%0A    if
+ 
 (pageX %3E pre
@@ -1539,83 +1539,127 @@
     
-$(currentItem).insertAfter(previousItem);%0A    %7D else %7B%0A      $(currentItem)
+previousItem.parentNode.insertBefore(currentItem, previousItem.nextSibling);%0A    %7D else %7B%0A      previousItem.parentNode
 .ins
@@ -1668,16 +1668,29 @@
 tBefore(
+currentItem, 
 previous
@@ -1713,16 +1713,17 @@
  else if
+ 
 (nextIte
@@ -1735,17 +1735,27 @@
 pageX %3E 
-$
+(Math.round
 (nextIte
@@ -1755,31 +1755,39 @@
 nextItem
-)
 .offset
-().left
+Left / 10) * 10)
 ) %7B%0A    
@@ -1803,17 +1803,26 @@
 ffset = 
-$
+Math.round
 (nextIte
@@ -1826,23 +1826,30 @@
 Item
-)
 .offset
-().left
+Left / 10) * 10
 ;%0A  
@@ -1894,16 +1894,17 @@
 ;%0A    if
+ 
 (pageX %3C
@@ -1936,38 +1936,43 @@
  2) %7B%0A      
-$(currentItem)
+nextItem.parentNode
 .insertBefor
@@ -1973,16 +1973,29 @@
 tBefore(
+currentItem, 
 nextItem
@@ -2020,43 +2020,74 @@
     
-$(currentItem).insertAfter(nextItem
+nextItem.parentNode.insertBefore(currentItem, nextItem.nextSibling
 );%0A 

Remove JQuery