A example of how we need to create an instance of a reusable UI Component.

gistfile1.js

// E.g of a listItem Class
function listItem(text, onSelectFunc) {
  this.text = text;
  this.onSelect = function() {
    console.log('I am selected');
  }
}

// E.g Collection of listItems
var listItems = [];
listItems.push(new listItem('SBS Radio'));
listItems.push(new listItem('Hip Hop'));
listItems.push(new listItem('Jazz'));
listItems.push(new listItem('Rock'));

// Creating a new verticalList based on your component
var myUiList = new foxtel.ui.verticalList();
myUiList.xPos = 10; // Absolute X position on screen
myUiList.yPos = 50; // Absolute Y position on screen
myUiList.transition = {
  enabled: true,  
  durationInSec: 5,
  timingFuntion: "ease"
} // what's the transition effects 
myUiList.defaultClass = 'normalClass'; // normal class
myUiList.highlightClass = 'highlightClass'; // the class you will apply when an item is selected
myUiList.data = listItems;

// the verticalList should also provide methods like so that will be called on key down events like KEY_DOWN etc
myUiList.moveUp();
myUiList.moveDown();
myUiList.onSelect();