<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" layout="absolute" viewSourceURL="srcview/index.html">

    <!-- add Yahoo! Flex styles (http://developer.yahoo.com/flash/articles/yahoo-flex-skin.html) -->
    <mx:Style source="assets/styles/yflexskin.css" />
    
    <!-- application styles -->
    <mx:Style source="assets/styles/ScrollToList.css" />
    
    <!-- fake data -->
    <mx:Script source="assets/data/sampleMovieData.as" />
    
    <mx:Script>
        <![CDATA[
            import mx.effects.easing.Sine;
            import mx.effects.AnimateProperty;
            import mx.events.ListEvent;
            
            private var scrollAnimation:AnimateProperty = new AnimateProperty();
            
            private function scrollToMovie(event:ListEvent):void{
                var yPosition:int = movieWrapper.getChildAt(event.rowIndex).y;
                scrollAnimation.stop();
                scrollAnimation.property = "verticalScrollPosition";
                scrollAnimation.easingFunction = Sine.easeOut;
                scrollAnimation.duration = 900;
                scrollAnimation.toValue = yPosition;
                scrollAnimation.play([movieWrapper]);
            }
            
            private function addSpaceToBottom():void{
                if(movieWrapper.numChildren > 2){
                    var spacerHeight:int = movieWrapper.height - movieWrapper.getChildAt(movieWrapper.numChildren-2).height;
                    if(spacerHeight > 0)
                        spacerBottom.height = spacerHeight;
                }
            }
        ]]>
    </mx:Script>
    
    <mx:Panel title="Upcoming Movie Releases" width="750" height="100%" layout="horizontal">

        <mx:DataGrid dataProvider="{movieData}" width="240" height="235" itemClick="scrollToMovie(event)">
            <mx:columns>
                <mx:DataGridColumn headerText="Release Date" dataField="releaseDate" width="90" />
                <mx:DataGridColumn headerText="Title" dataField="title" />
            </mx:columns>
        </mx:DataGrid>
        
        <!-- scroll-to list -->
        <mx:VBox id="movieWrapper" styleName="movieWrapper" width="100%" height="100%" minHeight="0">
            <mx:Repeater id="movieRepeater" dataProvider="{movieData}">
                <mx:HBox width="100%" styleName="movieDisplay"
                    backgroundColor="{movieRepeater.currentIndex % 2 == 1 ? 0xFFFFFF : 0xF7F7F7}">
                    <mx:Image source="/assets/images/{movieRepeater.currentItem.image}" />
                    <mx:VBox width="100%">
                        <mx:Label text="{movieRepeater.currentItem.title}" styleName="movieLabel" />
                        <mx:Text text="{movieRepeater.currentItem.description}" width="100%" />
                    </mx:VBox>
                </mx:HBox>
            </mx:Repeater>
            <mx:Spacer id="spacerBottom" creationComplete="addSpaceToBottom()" />
        </mx:VBox>

    </mx:Panel>
    
</mx:Application>