TileGrid with scrollBy issue

[BBTubbs]

I'm trying to get the following to work...have a TileGrid with arrows for left or right, where when one clicks on left or right, the tile grid slides one to the left or right.

1) I'm using SmartClient 8.2p

2) I'm using I.E.8.

3) Sample code...
Using http://smartclient.com/#tilingCustomTiles, change the customTiles.js source to be the following below (note, the arrow graphics will show as missing red x in this case):

var tileGrid = isc.TileGrid.create({
width:"100%", tileWidth:56, tileHeight:72, height:90, showAllRecords:false, autoWrapLines:false, overflow:"clip-v", selectionType:"single",animateTileChange:true, tileMargin:4, dataSource:"animals", autoFetchData:true,
animateTileChange:true,
fields: [
{name:"picture"},
{name:"commonName", cellStyle: "commonName"},
{name:"lifeSpan", formatCellValue: "return 'Lifespan: ' + value;"},
{ name:"status",
getCellStyle: function (value, field, record, viewer) {
if (value == "Endangered") return "endangered";
else if (value == "Threatened") return "threatened";
else if (value == "Not Endangered") return "notEndangered";
else return viewer.cellStyle;
}
}
],

getTile : function (record) {
// override getTile() and add a "Remove" button
var canvas = this.Super("getTile", arguments);
canvas.addChild(this.getRemoveButton(this.getRecord(record)));
return canvas;
},

getRemoveButton : function (record) {
var removeButton = isc.ImgButton.create({
src: "[SKINIMG]/Tab/left/close.png",
showHover: true,
prompt: "Remove tile",
size: 15,
showFocused: false,
showRollOver: false,
snapTo: "TR",
showDown: false,
margin: 2,
tileGrid: this,
record: record,
click : function () {
animals.removeData(this.record);
}
});

return removeButton;
}
});

var tileContainer = isc.HLayout.create({width:"100%", height:90, backgroundColor:"light gray", border:"1px solid gray"
,members:[isc.Img.create({efsResultParent:this,height:90,width:48,imageType:"center", src:"icons/leftArrow.png", snapTo:"L", cursor:"pointer", click:function(){alert("L");tileGrid.scrollBy(-56,0);}}),
isc.Img.create({efsResultParent:this,height:90,width:48,imageType:"center", src:"icons/rightArrow.png", snapTo:"R", cursor:"pointer", click:function(){alert("R");tileGrid.scrollBy(56,0);}})]});

isc.VLayout.create({width:"100%",height:"100%",members:[tileGrid ,tileContainer ]});