addEvent(window, 'load', reorder_init);

var lis;

var top = 0;

var left = 0;

var height = 30;

function reorder_init() {

    lis = document.getElementsBySelector('ul#orderthese li');

    var input = document.getElementsBySelector('input[name=order_]')[0];

    setOrder(input.value.split(','));

    input.disabled = true;

    draw();

    // Now initialise the dragging behaviour

    var limit = (lis.length - 1) * height;

    for (var i = 0; i < lis.length; i++) {

        var li = lis[i];

        var img = document.getElementById('handle'+li.id);

        li.style.zIndex = 1;

        Drag.init(img, li, left + 10, left + 10, top + 10, top + 10 + limit);

        li.onDragStart = startDrag;

        li.onDragEnd = endDrag;

        img.style.cursor = 'move';

    }

}

function submitOrderForm() {

    var inputOrder = document.getElementsBySelector('input[name=order_]')[0];

    inputOrder.value = getOrder();

    inputOrder.disabled=false;

}

function startDrag() {

    this.style.zIndex = '10';

    this.className = 'dragging';

}

function endDrag(x, y) {

    this.style.zIndex = '1';

    this.className = '';

    // Work out how far along it has been dropped, using x co-ordinate

    var oldIndex = this.index;

    var newIndex = Math.round((y - 10 - top) / height);

    // 'Snap' to the correct position

    this.style.top = (10 + top + newIndex * height) + 'px';

    this.index = newIndex;

    moveItem(oldIndex, newIndex);

}

function moveItem(oldIndex, newIndex) {

    // Swaps two items, adjusts the index and left co-ord for all others

    if (oldIndex == newIndex) {

        return; // Nothing to swap;

    }

    var direction, lo, hi;

    if (newIndex > oldIndex) {

        lo = oldIndex;

        hi = newIndex;

        direction = -1;

    } else {

        direction = 1;

        hi = oldIndex;

        lo = newIndex;

    }

    var lis2 = new Array(); // We will build the new order in this array

    for (var i = 0; i < lis.length; i++) {

        if (i < lo || i > hi) {

            // Position of items not between the indexes is unaffected

            lis2[i] = lis[i];

            continue;

        } else if (i == newIndex) {

            lis2[i] = lis[oldIndex];

            continue;

        } else {

            // Item is between the two indexes - move it along 1

            lis2[i] = lis[i - direction];

        }

    }

    // Re-index everything

    reIndex(lis2);

    lis = lis2;

    draw();

//    document.getElementById('hiddenOrder').value = getOrder();

    document.getElementsBySelector('input[name=order_]')[0].value = getOrder();

}

function reIndex(lis) {

    for (var i = 0; i < lis.length; i++) {

        lis[i].index = i;

    }

}

function draw() {

    for (var i = 0; i < lis.length; i++) {

        var li = lis[i];

        li.index = i;

        li.style.position = 'absolute';

        li.style.left = (10 + left) + 'px';

        li.style.top = (10 + top + (i * height)) + 'px';

    }

}

function getOrder() {

    var order = new Array(lis.length);

    for (var i = 0; i < lis.length; i++) {

        order[i] = lis[i].id.substring(1, 100);

    }

    return order.join(',');

}

function setOrder(id_list) {

    /* Set the current order to match the lsit of IDs */

    var temp_lis = new Array();

    for (var i = 0; i < id_list.length; i++) {

        var id = 'p' + id_list[i];

        temp_lis[temp_lis.length] = document.getElementById(id);

    }

    reIndex(temp_lis);

    lis = temp_lis;

    draw();

}

function addEvent(elm, evType, fn, useCapture)

// addEvent and removeEvent

// cross-browser event handling for IE5+,  NS6 and Mozilla

// By Scott Andrew

{

  if (elm.addEventListener){

    elm.addEventListener(evType, fn, useCapture);

    return true;

  } else if (elm.attachEvent){

    var r = elm.attachEvent("on"+evType, fn);

    return r;

  } else {

    elm['on'+evType] = fn;

  }

}