var addEvent = (function () {
  if (document.addEventListener) {
    return function (el, type, fn) {
      if (el.length) {
        for (var i = 0; i < el.length; i++) {
          addEvent(el[i], type, fn);
        }
      } else {
        el.addEventListener(type, fn, false);        
      }
    };
  } else {
    return function (el, type, fn) {
      if (el.length) {
        for (var i = 0; i < el.length; i++) {
          addEvent(el[i], type, fn);
        }
      } else {
        el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
      }
    };
  }
})();

function makeElDragDrop(el) {
	el.setAttribute('draggable', 'true');

	addEvent(el, 'dragstart', function (e) {
		e.dataTransfer.effectAllowed = 'move';
		e.dataTransfer.setData('Text', this.id); // required otherwise doesn't work
	});

	addEvent(el, 'dragover', function (e) {
		if (e.preventDefault) e.preventDefault(); // allows us to drop
		this.className = 'over';
		return false;
	});

	// to get IE to work
	addEvent(el, 'dragenter', function (e) {
		this.className = 'over';
		return false;
	});

	addEvent(el, 'dragleave', function () {
		this.className = '';
		return false;
	});

	addEvent(el, 'drop', function (e) {
	    if (e.stopPropagation) e.stopPropagation(); // stops the browser from redirecting...why???

		this.className = '';

		var e1 = $('#' + e.currentTarget.id);
		var e2 = $('#' + e.dataTransfer.getData('Text'));

		var clone = e2.clone();

		makeElDragDrop(clone.get(0));
		



		e2.parent().append(clone);
		e2.remove();

	    return false;
	});
}


$(function() {
	var links = document.querySelectorAll('ul.sortable li'),
	    el = null;
	
	for (var i = 0; i < links.length; i++) {
		el = links[i];
		
		makeElDragDrop(el);
	}
});