var list_id = 'route_select_box';

Event.observe(window, 'load', function() {
  $$('.sort_link').each(function(element) {
    element.observe('click', sortList);
  });
});


Element.addMethods({
  getSortPosition: function(element, criterion)
  {
    element = $(element);
    var position = 0;
    element.classNames().each(function(className) {
      if (className.match( new RegExp( criterion + "_(\\d+)"))!=undefined) {
        position = parseInt(RegExp.$1);
      }
    });
    return position;
  }
});

function sortList(event) {
  var sort_link = Event.element(event);

  event.stop();

  var criteria = null;
  sort_link.classNames().each(function(className) {
    if (className.match(/(\w+)_sort/)!=undefined) {
      criteria = RegExp.$1;
    }
  });

  // define new orientation
  var orientation = "asc";
  if ( sort_link.hasClassName("asc")) {
    orientation = "desc";
  }

  // reset asc / desc class on sort_links
  $$('.sort_link').each(function(link) {
    link.removeClassName("asc");
    link.removeClassName("desc");
  });
  sort_link.addClassName( orientation);

  // build sorted list
  var elements = $$("#" + list_id + " li").sortBy(function(listItem) {
    return $(listItem).getSortPosition(criteria);
  });

  // use orientation for final order
  if ( orientation == "desc") {
    elements = elements.reverse();
  }

  // register position update for all target elements in page
  var elementsByNewIndexClass = new Hash();
  $(elements).each(function(element, index) {
    var numberElement = element.down( '.number_bubble');
    var currentIndexClass = numberElement.classNames().find(function(className){
      return className.match(/number_bubble_\d+/)!=undefined;
    });

    elementsByNewIndexClass.set( 'number_bubble_'+(index+1), $$('.'+currentIndexClass));
  });

  // remove current list
  $$("#" + list_id + " li").each(function(li) {
    li.remove();
  })

  // update position element class
  elementsByNewIndexClass.each(function(pair){
    pair.value.each(function(element){
      var currentIndexClass = element.classNames().find(function(className){
        return className.match(/number_bubble_\d+/)!=undefined;
      });
      element.removeClassName( currentIndexClass);
      element.addClassName( pair.key);
    });
  });

  // insert sorted list
  $(elements).each(function(element) {
    $(list_id).insert(element);
  });
}