      */
     override public function getNavigationDestinationIndex(currentIndex:int, navigationUnit:uint, arrowKeysWrapFocus:Boolean):int
     {
-        // TODO (jszeto) Currently we just support LEFT/RIGHT. Need to add logic for UP/DOWN/PGUP/PGDN
         if (!target || target.numElements < 1)
             return -1; 
         
         var maxIndex:int = target.numElements - 1;
-        var newIndex:int;
+        var newIndex:int = 0;
+        var numRows:int = Math.ceil(target.numElements / requestedMaxColumnCount);
         
         if (currentIndex == -1)
         {
-            if (navigationUnit == NavigationUnit.LEFT)
-                return maxIndex;
-            else if (navigationUnit == NavigationUnit.RIGHT)
+            if (navigationUnit == NavigationUnit.RIGHT || navigationUnit == NavigationUnit.DOWN)
                 return 0;    
-        }   
-        
-        if (navigationUnit == NavigationUnit.LEFT)
-            newIndex = currentIndex - 1;
-        else if (navigationUnit == NavigationUnit.RIGHT)
-            newIndex = currentIndex + 1;
-        else
-            return currentIndex;
+            else
+                return -1;
+        }  
+        
+        var currentRow:int = getRowForIndex(currentIndex);
+        var currentColCount:int;
+        var newColCount:int;
+                
+        if (navigationUnit == NavigationUnit.LEFT ||
+            navigationUnit == NavigationUnit.RIGHT)
+            
+        {
+            newIndex = currentIndex + (navigationUnit == NavigationUnit.LEFT ? -1 : 1);
+            
+            // We don't support wrapping, so if the old and new index are 
+            // on different rows, then don't change the index. 
+            if (getRowForIndex(newIndex) != currentRow)
+                newIndex = currentIndex;        
+        }
+        else if (navigationUnit == NavigationUnit.UP)
+        {
+            if (currentRow == 0)
+                return currentIndex;
+            
+            currentColCount = numColsInRow[currentRow];
+            newColCount = numColsInRow[currentRow - 1];
+            
+            newIndex = currentIndex - newColCount;
+            
+            // If the newIndex isn't on the previous row, then we need to shift
+            // it back one more spot. This situation only occurs when the 
+            // number of columns in the two rows are different
+            if ((getRowForIndex(newIndex) != currentRow - 1) && (currentColCount != newColCount))
+            {
+                newIndex--;
+            }
+        }
+        else if (navigationUnit == NavigationUnit.DOWN)
+        {
+            if (currentRow == numRows - 1)
+                return currentIndex;
+            
+            // Assumes that the smaller column rows are always above the larger column rows
+            newIndex = currentIndex + numColsInRow[currentRow];
+        }
         
         if (newIndex > maxIndex)
+            newIndex = maxIndex;
+        else if (newIndex < 0)
             newIndex = 0;
-        else if (newIndex < 0)
-            newIndex = maxIndex;
         
         return newIndex;
+    }
+    
+    // Helper function that figures out the row of a particular index
+    private function getRowForIndex(index:int):int
+    {
+        var currentRow:int = 0;
+        
+        while (currentRow < numColsInRow.length)
+        {  
+            index -= numColsInRow[currentRow];
+
+            if (index >= 0)
+                currentRow++;
+            else
+                break;
+        }
+        
+        return currentRow;
     }
     
     // Helper function

        if (!layoutTarget)
            return;
        
        var xPos:Number = 0;
        var yPos:Number = 0;
        var itemIndex:int = 0;

        super();
    }
    
    private var numColsInRow:Array;
    
    //--------------------------------------------------------------------------
    //
    //  Properties
