module Webglimpse { export function runScrollExample ( container ) { var canvas = document . createElement ( 'canvas' ) ; canvas . id = 'exampleCanvas' ; canvas . style . padding = '0' ; container . appendChild ( canvas ) ; var drawable = newDrawable ( canvas ) ; var updateCanvasSize = function ( ) { canvas . width = $ ( canvas ) . width ( ) ; canvas . height = $ ( canvas ) . height ( ) ; drawable . redraw ( ) ; } ; $ ( window ) . resize ( updateCanvasSize ) ; updateCanvasSize ( ) ; var rowsPane = new Pane ( newRowLayout ( ) ) ; var scrollLayout = newVerticalScrollLayout ( ) ; var scrollable = new Pane ( scrollLayout , false ) ; scrollable . addPainter ( newBackgroundPainter ( white ) ) ; scrollable . addPane ( newInsetPane ( rowsPane , newInsets ( 12 , 10 ) , white ) , 0 ) ; var scrollbar = newVerticalScrollbar ( scrollLayout , drawable ) ; var scrollPane = new Pane ( newColumnLayout ( false ) , false ) ; scrollPane . addPane ( scrollbar , 0 , { width : 16 } ) ; scrollPane . addPane ( scrollable , 1 ) ; drawable . setContentPane ( scrollPane ) ; drawable . redraw ( ) ; var numRows = 500 ; var rowBgColors = [ black , green , blue , cyan ] ; var rowFgColors = [ white , black , white , black ] ; var createTextTexture = createTextTextureFactory ( '20px verdana,sans-serif' ) ; for ( var r = 0 ; r < numRows ; r ++ ) { var row = new Pane ( { updatePrefSize : fixedSize ( null , 50 ) } ) ; row . addPainter ( newBackgroundPainter ( rowBgColors [ r % rowBgColors . length ] ) ) ; var text = r . toFixed ( 0 ) ; if ( r === 0 ) text += ' first' ; if ( r === numRows - 1 ) text += ' last' ; var labelTexture = createTextTexture ( rowFgColors [ r % rowFgColors . length ] , text ) ; row . addPainter ( newTexturePainter ( labelTexture , 0 , 0.5 , { xAnchor : 0 , yAnchor : labelTexture . yAnchor ( 0.5 ) } ) ) ; setTimeout ( ( function ( row , r ) { return function ( ) { rowsPane . addPane ( row , r ) ; drawable . redraw ( ) ; } ; } ) ( row , r ) , 10 * r ) ; } } }