listbox selection color

Unless

var main = function() {
  UI().show();
}
var data = [];
var i = 0, n = 200;
while ( i<n ) {
  data.push({text:i+1});
  i++;
}
var UI = function() {
  var w = new Window('dialog' ),
  list;
  w.preferredSize = [200,250];
  w.alignChildren = ["fill","fill"]
  list = new List();
  w.onShow = function() {
  list.add(w, 200);
  list.fill ( listItemRenderer, data );
  w.layout.layout(true)
  }
  return w;
}
var listItemRenderer = function (parent, data ) {
  var g = parent.add('group'),
  red = g.add('group'),
  inGp = g.add('group'),
  t = inGp.add('edittext', undefined, data.text ),
  b = inGp.add('button',undefined,"?" );
  g.orientation = 'stack';
  red.alignment = ["fill","fill"];
  inGp.alignment = ["fill","top"];
  t.preferredSize.width = 100;
  b.maximumSize.width = 25;
  t.alignment = ["fill","top"];
  red.visible = false;
  var paintItem = function(o,c){
  var r = (c && typeof(c.r)=='number' )? c.r :  Math.round ( Math.random()*10 )/10;
  var g  = (c && typeof(c.g)=='number')? c.g:  Math.round ( Math.random()*10 )/10;
  var b = (c && typeof(c.b)=='number')? c.b : Math.round ( Math.random()*10 )/10;
  o.graphics.backgroundColor = o.graphics.newBrush(
  o.graphics.BrushType.SOLID_COLOR,[r,g,b], 1
  );
  };
  paintItem ( red, {r:1,g:0,b:0} );
  b.onClick = function() {
  alert( t.text );
  };
  g.update = function( data ) {
  t.text = data.text;
  }
  g.addEventListener ( 'mouseover', onMouseOver );
  g.addEventListener ( 'mouseout', onMouseOut );
  function onMouseOver(evt) {
  red.visible = true;
  }
  function onMouseOut(evt) {
  red.visible = false;
  }
  return g;
}
var List = function() {
  var max = 12, pnl, lstGp, sb, ls = this, sbValue = 0, itemHeight, index = 0, mul = 1, 
  index  = 0;
  this.listItems = [];
  this.data;
  this.add = function(parent, maxSize) {
  pnl = parent.add('panel');
  pnl.alignment = ["fill","fill"];
  pnl.orientation = 'row';
  pnl.maximumSize.height = maxSize;
  lstGp =pnl.add ('group');
  lstGp.orientation = 'column';
  sb = pnl.add ('scrollbar');
  lstGp.spacing = 0;
  lstGp.margins = 0;
  lstGp.alignment = ["fill","fill"];
  sb.alignment = ["fill","fill"];
  sb.maximumSize.width = 25;
  sb.onChange = function() {
  itemHeight = ls.listItems[0].size.height;
  var sbHeight = sb.size.height, i = 0;
  sb.maxvalue=itemHeight*ls.data.length - sb.size.height ;
  var n = ls.listItems.length, movedBefore = [], movedAfter = [], notMoved = [];
  var delta = sbValue - sb.value;
  sbValue = sb.value;
  var itemsCount = index+Math.floor(sb.size.height/(itemHeight+lstGp.spacing))+1 ;
  while ( i<n ) {
  if (delta<0 && ls.listItems [ i ].location[1]  + delta +  itemHeight +2*lstGp.spacing < 0 ) {
  ls.listItems [ i ].location[1] = ls.listItems [ i ].location[1] + delta+ max*itemHeight;
  ls.listItems [ i ].index = ls.listItems [ i ].index || i;
  ls.listItems [ i ].index+=max;
  ls.listItems [ i ].update( {text:ls.listItems [ i ].index+1} );
  }
  else if (delta>0 && ls.listItems [ i ].location[1]+delta>ls.listItems [ i ].parent.location[1]+ls.listItems [ i ].parent.size.height )  {
  ls.listItems [ i ].location[1] = ls.listItems [ i ].location[1] + delta-max*itemHeight;
  ls.listItems [ i ].index && ls.listItems [ i ].index-=max;
  ls.listItems [ i ].update( {text:ls.listItems [ i ].index+1} );
  }
  else {
  ls.listItems [ i ].location[1]+=delta;
  }
  i++;
  }
  }
  };
  this.fill = function ( itemRenderer, data ) {
  var i = 0, n =0;
  this.data = data;
  if ( !itemRenderer
  || !(itemRenderer instanceof Function)
  || !data
  || !(data instanceof Array) 
  || !data.length ) {
  List.isReady = false;
  }
  n = data.length;
  while ( i<n ) {
  i< max && ls.listItems = itemRenderer (lstGp,  data );
  i++;
  }
  List.isReady = true;
  };
}
main();