Transfer items from one list box to another using JavaScript

Hi,
This is gonna be my first blog entry.
Am currently working with some list box stuffs. A little of which encompasses transfer of items from one list box to another using JavaScript. Let's start.
Below is the PopUp.aspx page:

<form id="form1" runat="server">
<table style="border:2px dashed Black">
    <tr>
    <td>
    <asp:ListBox ID="listAvailableColumns" runat="server"></asp:ListBox>
    </td>
    <td>
        <input id="btnLeft" type="button" value="Right" onclick="MoveLeftRight('listAvailableColumns','listSelectedColumns');"/>
        <br />
        <input id="btnRight" type="button" value="Left" onclick="MoveLeftRight('listSelectedColumns','listAvailableColumns');"/>
    </td>
    <td>
        <asp:ListBox ID="listSelectedColumns" runat="server"></asp:ListBox>
    </td>
    <td>
    <input id="btnUp" type="button" value="Up" onclick="MoveUp('listSelectedColumns');"/>
    <br />
    <input id="btnDown" type="button" value="Down" onclick="MoveDown('listSelectedColumns');"/>
    </td>
    </tr>
</table>
</form>

Below is the screenshot of what exactly the above form looks like, haven't styled it much, looks kinda plain..:)

Its basically 2 list boxes and 4 HTML buttons.
Buttons named as 'Left' and 'Right' will help us to transfer items to/from both the list boxes, while buttons named as 'Up' and 'Down' will assist us in scrolling the items of one of the list boxes.

The JavaScript function, called on onclick of buttons 'Left' and 'Right' is as follows:

function MoveLeftRight(ListBox1, ListBox2) {
            var listAvailable = document.getElementById(ListBox1);
            var listSelected = document.getElementById(ListBox2);
            if(listAvailable!=null && listSelected!=null) {
            if(listAvailable.length<0)
            {
            alert('There are no items');
            return false;
            }
            if(listAvailable.options.selectedIndex==-1)
            {
            alert('Please select an item to move');
            }
            if(listAvailable.options.selectedIndex>=0)
            {
            var toBeOption=new Option();
            toBeOption.text = listAvailable.options[listAvailable.options.selectedIndex].text;
            toBeOption.value = listAvailable.options[listAvailable.options.selectedIndex].value;
            listSelected.options[listSelected.length] = toBeOption;
            listAvailable.remove(listAvailable.options.selectedIndex);
            }
            }
            } 

Now, let me explain the above code:
It takes into account 2 parameters, which are the 2 list boxes.
When button 'Right' is clicked(it will transfer items from listAvailableColumns list box to listSelectedColumns list box), the function will be as MoveLeftRight(listAvailableColumns,listSelectedColumns) when debugged.
The function checks for empty list box, throws an alert accordingly. Also, it checks whether any item has been clicked to move.
Further, it appends a new list item (the item which is selected in the first list box) to the listSelectedColumns list box and removes that very item from the first list box.
Same code runs for transfer of items from listSelectedColumns list box to listAvailableColumns list box, the only difference being the arousal of the function as MoveLeftRight(listSelectedColumns, listAvailableColumns).

Below is the code for vertical scroll of the list box namely, listSelectedColumns:

function MoveUp(listBox) {
                var listBoxID = document.getElementById(listBox);
                var index = listBoxID.selectedIndex;
                if (index == -1) {
                    alert('Please select an item to move up');
                    return;
                }
                if (index == 0) {
                    alert('Please select another item to move up or click Down button');
                    return;
                }
                if (index > 0) {
                    var newOptionText = listBoxID.options[index].text;
                    var newOptionValue = listBoxID.options[index].value;

                    listBoxID.options[index].text = listBoxID.options[index-1].text;
                    listBoxID.options[index].value = listBoxID.options[index-1].value;

                    listBoxID.options[index-1].text = newOptionText;
                    listBoxID.options[index - 1].value = newOptionValue;

                    listBoxID.selectedIndex = index - 1;
                }
                }

function MoveDown(listBox) {
                    var listBoxID = document.getElementById(listBox);
                    var index = listBoxID.selectedIndex;
                    if (index == -1) {
                        alert('Please select an item to move down');
                        return;
                        }

                        if (index == listBoxID.length - 1) {
                            alert('Please select other item to move down or click Up button');
                        }
                        else
                        {
                            var newOptionText= listBoxID.options[index].text;
                            var newOptionValue= listBoxID.options[index].value;

                            listBoxID.options[index].text = listBoxID.options[index + 1].text;
                            listBoxID.options[index].value = listBoxID.options[index + 1].value;

                            listBoxID.options[index + 1].text = newOptionText;
                            listBoxID.options[index + 1].value = newOptionValue;

                            listBoxID.selectedIndex = index + 1;
                        }
                    }

MoveUp(listBox) is the function set on onclick of the button namely 'Up', while 'Down' button invokes the function 'MoveDown(listBox)'.
Both the functions are quite simple, they store the text/value pair of the current list item in variables newOptionText/newOptionValue respectively. Then the current index texts/values are interchanged with the up/down indexes elements. The code is actually self-explanatory.