bgneal@1: addEvent(window, 'load', reorder_init);
bgneal@1: 
bgneal@1: var lis;
bgneal@1: var top = 0;
bgneal@1: var left = 0;
bgneal@1: var height = 30;
bgneal@1: 
bgneal@1: function reorder_init() {
bgneal@1:     lis = document.getElementsBySelector('ul#orderthese li');
bgneal@1:     var input = document.getElementsBySelector('input[name=order_]')[0];
bgneal@1:     setOrder(input.value.split(','));
bgneal@1:     input.disabled = true;
bgneal@1:     draw();
bgneal@1:     // Now initialise the dragging behaviour
bgneal@1:     var limit = (lis.length - 1) * height;
bgneal@1:     for (var i = 0; i < lis.length; i++) {
bgneal@1:         var li = lis[i];
bgneal@1:         var img = document.getElementById('handle'+li.id);
bgneal@1:         li.style.zIndex = 1;
bgneal@1:         Drag.init(img, li, left + 10, left + 10, top + 10, top + 10 + limit);
bgneal@1:         li.onDragStart = startDrag;
bgneal@1:         li.onDragEnd = endDrag;
bgneal@1:         img.style.cursor = 'move';
bgneal@1:     }
bgneal@1: }
bgneal@1: 
bgneal@1: function submitOrderForm() {
bgneal@1:     var inputOrder = document.getElementsBySelector('input[name=order_]')[0];
bgneal@1:     inputOrder.value = getOrder();
bgneal@1:     inputOrder.disabled=false;
bgneal@1: }
bgneal@1: 
bgneal@1: function startDrag() {
bgneal@1:     this.style.zIndex = '10';
bgneal@1:     this.className = 'dragging';
bgneal@1: }
bgneal@1: 
bgneal@1: function endDrag(x, y) {
bgneal@1:     this.style.zIndex = '1';
bgneal@1:     this.className = '';
bgneal@1:     // Work out how far along it has been dropped, using x co-ordinate
bgneal@1:     var oldIndex = this.index;
bgneal@1:     var newIndex = Math.round((y - 10 - top) / height);
bgneal@1:     // 'Snap' to the correct position
bgneal@1:     this.style.top = (10 + top + newIndex * height) + 'px';
bgneal@1:     this.index = newIndex;
bgneal@1:     moveItem(oldIndex, newIndex);
bgneal@1: }
bgneal@1: 
bgneal@1: function moveItem(oldIndex, newIndex) {
bgneal@1:     // Swaps two items, adjusts the index and left co-ord for all others
bgneal@1:     if (oldIndex == newIndex) {
bgneal@1:         return; // Nothing to swap;
bgneal@1:     }
bgneal@1:     var direction, lo, hi;
bgneal@1:     if (newIndex > oldIndex) {
bgneal@1:         lo = oldIndex;
bgneal@1:         hi = newIndex;
bgneal@1:         direction = -1;
bgneal@1:     } else {
bgneal@1:         direction = 1;
bgneal@1:         hi = oldIndex;
bgneal@1:         lo = newIndex;
bgneal@1:     }
bgneal@1:     var lis2 = new Array(); // We will build the new order in this array
bgneal@1:     for (var i = 0; i < lis.length; i++) {
bgneal@1:         if (i < lo || i > hi) {
bgneal@1:             // Position of items not between the indexes is unaffected
bgneal@1:             lis2[i] = lis[i];
bgneal@1:             continue;
bgneal@1:         } else if (i == newIndex) {
bgneal@1:             lis2[i] = lis[oldIndex];
bgneal@1:             continue;
bgneal@1:         } else {
bgneal@1:             // Item is between the two indexes - move it along 1
bgneal@1:             lis2[i] = lis[i - direction];
bgneal@1:         }
bgneal@1:     }
bgneal@1:     // Re-index everything
bgneal@1:     reIndex(lis2);
bgneal@1:     lis = lis2;
bgneal@1:     draw();
bgneal@1: //    document.getElementById('hiddenOrder').value = getOrder();
bgneal@1:     document.getElementsBySelector('input[name=order_]')[0].value = getOrder();
bgneal@1: }
bgneal@1: 
bgneal@1: function reIndex(lis) {
bgneal@1:     for (var i = 0; i < lis.length; i++) {
bgneal@1:         lis[i].index = i;
bgneal@1:     }
bgneal@1: }
bgneal@1: 
bgneal@1: function draw() {
bgneal@1:     for (var i = 0; i < lis.length; i++) {
bgneal@1:         var li = lis[i];
bgneal@1:         li.index = i;
bgneal@1:         li.style.position = 'absolute';
bgneal@1:         li.style.left = (10 + left) + 'px';
bgneal@1:         li.style.top = (10 + top + (i * height)) + 'px';
bgneal@1:     }
bgneal@1: }
bgneal@1: 
bgneal@1: function getOrder() {
bgneal@1:     var order = new Array(lis.length);
bgneal@1:     for (var i = 0; i < lis.length; i++) {
bgneal@1:         order[i] = lis[i].id.substring(1, 100);
bgneal@1:     }
bgneal@1:     return order.join(',');
bgneal@1: }
bgneal@1: 
bgneal@1: function setOrder(id_list) {
bgneal@1:     /* Set the current order to match the lsit of IDs */
bgneal@1:     var temp_lis = new Array();
bgneal@1:     for (var i = 0; i < id_list.length; i++) {
bgneal@1:         var id = 'p' + id_list[i];
bgneal@1:         temp_lis[temp_lis.length] = document.getElementById(id);
bgneal@1:     }
bgneal@1:     reIndex(temp_lis);
bgneal@1:     lis = temp_lis;
bgneal@1:     draw();
bgneal@1: }
bgneal@1: 
bgneal@1: function addEvent(elm, evType, fn, useCapture)
bgneal@1: // addEvent and removeEvent
bgneal@1: // cross-browser event handling for IE5+,  NS6 and Mozilla
bgneal@1: // By Scott Andrew
bgneal@1: {
bgneal@1:   if (elm.addEventListener){
bgneal@1:     elm.addEventListener(evType, fn, useCapture);
bgneal@1:     return true;
bgneal@1:   } else if (elm.attachEvent){
bgneal@1:     var r = elm.attachEvent("on"+evType, fn);
bgneal@1:     return r;
bgneal@1:   } else {
bgneal@1:     elm['on'+evType] = fn;
bgneal@1:   }
bgneal@1: }