Index of array list

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<ul data-bind="foreach: itemList">
    <li>
        <input type="button" data-bind="click: $root.moveup" value="UP" />
        <input type="button" data-bind="click: $root.movedown" value="DWN" /><span data-bind="text: itemName"></span>
    </li>
</ul>

CSS

li {
    list-style: none;
    margin:5px;
}
li span {
    margin-left:10px;
}

JavaScript

function myAppViewModel() {
    var self = this;

    self.itemList = ko.observableArray([{
        itemName: "Item 1"
    }, {
        itemName: "Item 2"
    }, {
        itemName: "Item 3"
    }, {
        itemName: "Item 4"
    }]);

    var itemIndex = self.itemList();
    
    self.moveup = function (itemIndex) {
        var i = self.itemList.indexOf(itemIndex); 
        console.log(self.itemList);
        if(i >= 1){
         var array = self.itemList();
            self.itemList.splice(i-1, 2, array[i], array[i-1]);
        }    
        console.log(i)
    } 
        self.movedown = function (itemIndex) {
        var i = self.itemList.indexOf(itemIndex);
        if(i >= 0){
         var array = self.itemList();
            self.itemList.splice(i+1, 2, array[i], array[i+1]);
        }    
        console.log(i)
    }
}
ko.applyBindings(new myAppViewModel());