// This document is referenced / embedded into other documents, hence no other styling or formatting is necessary.
// This document should only contain a panel and the code.

<script type="text/javascript" src="http://www.fluidproject.org/releases/1.0/InfusionAll.js"></script>
<style>
ul#todo-list > li {
    padding: 3px;
    margin: 5px;
}
li.fl-reorderer-movable-default{
    background-color: #eee;
}
li.fl-reorderer-movable-hover{
    background-color: lightyellow;
    cursor: move;
}
li.fl-reorderer-movable-selected{
    background-color: #ddd;
}
li.fl-reorderer-movable-dragging {
    background-color: lightyellow;
}
li.fl-reorderer-movable-avatar {
    opacity: 0.55;
    filter: alpha(opacity=55);
    width: 300px;
    border: 0;
}
ul#todo-list>li.fl-reorderer-dropMarker{
    background-color: red;
    height: 2px;
    margin: -4px;
    padding: 0px;
}
</style>
<ul id="todo-list">
  <li id="myUniquePrefix.orderable1">
    Select the date
  </li>
  <li id="myUniquePrefix.orderable2">
    Create promotional plan
    <ul>
      <li>web site</li>
      <li>print materials</li>
    </ul>
  </li>
  <li id="myUniquePrefix.orderable3">
    Book facilities
    <ul>
      <li>Select building</li>
      <li>Book rooms</li>
    </ul>
  </li>
  <li id="myUniquePrefix.orderable6">
    Develop a conference daily schedule of events
  </li>
</ul>
<script type="text/javascript">
  $(document).ready(function () {
        fluid.reorderList("#todo-list", {selectors:{movables:"[id^=myUniquePrefix]"}});
  });
</script>