Feature/vvp

@mikedeboer @mattpardee 

This is a refactor of the virtual viewport baseclass and scrollbar. 

I've use this file to test:

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:a="http://ajax.org/2005/aml" >
        <head profile="http://www.w3.org/2005/10/profile">
            <title>Cloud9 - Draggable Tabs</title>
    
            <script type="text/javascript" src="apf.js"></script>
            <style>
                HTML{overflow:hidden}
            </style>
        </head> 
        <body id="bdy">
            <a:skin
              src        = "/static/style/skins.xml"
              media-path = "http://static.c9.io/static/style/images/"
              icon-path  = "http://static.c9.io/static/style/icons/" />
    
            <a:menu id="mnuTest">
                <a:item type="radio">Test 1</a:item>
                <a:item type="radio">Test 2</a:item>
                <a:item type="radio">Test 3</a:item>
            </a:menu>
    
            <a:scrollbar
                id       = "sb"
                skin     = "sbios"
                top      = "0"
                right    = "0"
                bottom   = "0"
                width    = "7"
                showonscroll = "true"
                zindex   = "100000"
            />
    
            <a:hbox width="400">
            <a:list id="dgGoToFile"
              width = "400"
              height = "200"
              autoselect = "false"
              class   = "searchresults"
              skin    = "lineselect"
              scrollbar = "sb 2 2 2"
              model   = "mdlTests"
              viewport = "virtual"
              style = "position:relative;overflow:hidden;border:2px solid red;"
              multiselect     = "true"
              empty-message   = "No search results">
                <a:each match="[//repo|//error|//file|//test]" filter2="{txtGoToFile.value}" filter-fields2="text()" />
                <a:caption><?lm
                    <span>[@name]</span>
                    {[@status-message] || "empty"}
                ?></a:caption>
            </a:list>
            </a:hbox>
            
            <a:model id="mdlTests">
                <data>
                    <repo name="test" status="1" status-message="hallo" />
                    <repo name="test" status="1" status-message="hallo">
                        <error name="hello" />
                        <file name="File" status="0" status-message="hallo">
                            <test name="test 1" status="-1" />
                        </file>
                    </repo>
                    <repo name="test2" status="-1" status-message="hallo">
                        <file name="File" value="10">
                            <test name="test 1" value="10" />
                        </file>
                    </repo>
                    <uirecorder><col1 visible="true" width="60%"/><col2 visible="true" width="15%"/><col3 visible="false" width="10%"/><col4 visible="false" width="15%"/></uirecorder>
                    <repo name="test" status="1" status-message="hallo" />
                    <repo name="test" status="1" status-message="hallo">
                        <error name="hello" />
                        <file name="File" status="0" status-message="hallo">
                            <test name="test 1" status="-1" />
                        </file>
                    </repo>
                    <repo name="test2" status="-1" status-message="hallo">
                        <file name="File" value="10">
                            <test name="test 1" value="10" />
                        </file>
                    </repo>
                    <uirecorder><col1 visible="true" width="60%"/><col2 visible="true" width="15%"/><col3 visible="false" width="10%"/><col4 visible="false" width="15%"/></uirecorder>
                    <repo name="test" status="1" status-message="hallo" />
                    <repo name="test" status="1" status-message="hallo">
                        <error name="hello" />
                        <file name="File" status="0" status-message="hallo">
                            <test name="test 1" status="-1" />
                        </file>
                    </repo>
                    <repo name="test2" status="-1" status-message="hallo">
                        <file name="File" value="10">
                            <test name="test 1" value="10" />
                        </file>
                    </repo>
                    <uirecorder><col1 visible="true" width="60%"/><col2 visible="true" width="15%"/><col3 visible="false" width="10%"/><col4 visible="false" width="15%"/></uirecorder>
                    <repo name="test" status="1" status-message="hallo" />
                    <repo name="test" status="1" status-message="hallo">
                        <error name="hello" />
                        <file name="File" status="0" status-message="hallo">
                            <test name="test 1" status="-1" />
                        </file>
                    </repo>
                    <repo name="test2" status="-1" status-message="hallo">
                        <file name="File" value="10">
                            <test name="test 1" value="10" />
                        </file>
                    </repo>
                    <uirecorder><col1 visible="true" width="60%"/><col2 visible="true" width="15%"/><col3 visible="false" width="10%"/><col4 visible="false" width="15%"/></uirecorder>
                </data>
            </a:model>
        </body>
    </html>