<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    viewSourceURL="srcview/index.html" 
    themeColor="#000000"
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:seb="com.sebastiaanholtrop.components.coverflow.*" 
    layout="vertical" width="100%" height="100%" 
    creationComplete="init()"
    backgroundColor="#000000">
    
    <mx:Script>
        <![CDATA[
            import mx.events.ScrollEvent;
            import mx.collections.IList;
            import mx.collections.ArrayCollection;
            
            [Bindable]
            private var imagesArrayCollection:ArrayCollection;
            
            //************************************************************************************
            // Initialisation
            //************************************************************************************
            
            private function init():void {
                
                this.imagesArrayCollection = new ArrayCollection();
                this.imagesArrayCollection.addItem({source:"img/23.jpg"});
                this.imagesArrayCollection.addItem({source:"img/American IV_ The Man Comes...jpg"});
                this.imagesArrayCollection.addItem({source:"img/Beyond.jpg"});
                this.imagesArrayCollection.addItem({source:"img/Cansei de Ser Sexy.jpg"});
                this.imagesArrayCollection.addItem({source:"img/Closer.jpg"});
                this.imagesArrayCollection.addItem({source:"img/Death By Sexy.jpg"});
                this.imagesArrayCollection.addItem({source:"img/Decoration Day.jpg"});
                this.imagesArrayCollection.addItem({source:"img/Funeral.jpg"});
                this.imagesArrayCollection.addItem({source:"img/hacker.jpg"});
                this.imagesArrayCollection.addItem({source:"img/nuit blanche.jpg"});
                
                // set the maxScrollPosition of the scrollBar manually
                scrollBar.maxScrollPosition = this.imagesArrayCollection.length - 1;
                scrollBar.invalidateDisplayList();
            }
            
            //************************************************************************************
            // Changing data
            //************************************************************************************
            
            private function addNewCover():void {
                //this.imagesArrayCollection.addItemAt({source:"img/Funeral.jpg"}, 4);
                this.imagesArrayCollection.addItem({source:"img/Funeral.jpg"});
            }
            
            private function deleteCover():void {
                this.imagesArrayCollection.removeItemAt(4);
            }
            
            private function moveCover():void {
                this.imagesArrayCollection.removeItemAt(0);
            }
            
            private function replaceCover():void {
                this.imagesArrayCollection.setItemAt({source:"img/hacker.jpg"}, 5);
            }
            
            //************************************************************************************
            // Event handlers
            //************************************************************************************
            
            private function coverFlowChangeHandler(event:Event):void {
                trace(event);
            }
            
            private function animationCompleteHandler(event:Event):void {
                trace(event);
            }
            
            private function scrollEventHandler(event:ScrollEvent):void {
                coverFlow.selectedIndex = event.currentTarget.scrollPosition;
            }
        ]]>
    </mx:Script>
    
    <mx:Panel title="SebCoverFlow Sample Application" id="coverPanel" width="80%" height="100%" x="{this.width/2 - coverPanel.width/2}">
        
        <mx:VBox width="100%" height="100%" backgroundColor="#000000">
            
            <seb:SebCoverFlow 
                change="coverFlowChangeHandler(event);" 
                animationComplete="animationCompleteHandler(event);" 
                id="coverFlow" 
                dataProvider="{this.imagesArrayCollection}"
                width="100%" height="100%" 
                horizontalGap="{horizontalGapSlider.value}"
                selectedItemWidth="{selectedItemWidthSlider.value}"
                flippoint="{flippointSlider.value}"
                angle="{angleSlider.value}"
                selectedItemZoom="{selectedItemZoomSlider.value}"
                cameraOffsetX="{cameraOffsetXSlider.value}"
                cameraOffsetY="{cameraOffsetYSlider.value}" />
            
            <mx:HScrollBar id="scrollBar" 
                width="100%" 
                minScrollPosition="0" maxScrollPosition="0" 
                scrollPosition="{coverFlow.selectedIndex}" 
                lineScrollSize="1" pageScrollSize="1" 
                scroll="scrollEventHandler(event);" 
                repeatDelay="1000" repeatInterval="500" />
            
        </mx:VBox>
    </mx:Panel>
    
    <mx:HBox id="controlsHBox">
        <mx:Button label="First" click="coverFlow.selectedIndex = 0" />
        <mx:Button label="Previous" click="coverFlow.selectedIndex--;" />
        <mx:Button label="Next" click="coverFlow.selectedIndex++;" />
        <mx:Button label="Last" click="coverFlow.selectedIndex = coverFlow.dataProvider.length - 1" />
        <mx:Label text="SelectedIndex: {coverFlow.selectedIndex}" color="#FFFFFF" />
        <mx:Button label="Add new cover" click="this.addNewCover();" />
        <mx:Button label="Delete cover" click="this.deleteCover();" />
        <mx:Button label="Move Cover" click="this.moveCover();" />
        <mx:Button label="Replace Cover" click="this.replaceCover();" />
    </mx:HBox>
    
    <mx:Panel 
        id="controlPanel" 
        label="Controls" width="80%" 
        horizontalAlign="center">
        
        <mx:Canvas width="100%" height="100%">
            
            <mx:Label text="Horizontal gap:" width="100" x="286" y="33"/>
            <mx:HSlider id="horizontalGapSlider" liveDragging="true" value="130" minimum="10" maximum="300"  x="419" y="33"/>
            
            <mx:Label text="SelectedItem width:" width="159" x="286" y="59"/>
            <mx:HSlider id="selectedItemWidthSlider" liveDragging="true" value="200" minimum="0" maximum="1000"  x="419" y="59"/>
            
            <mx:Label text="Angle:" width="100" x="10" y="85"/>
            <mx:HSlider id="angleSlider" liveDragging="true" value="-80" minimum="-180" maximum="180"  x="118" y="83"/>
        
            <mx:Label text="Flippoint:" width="100" x="10" y="59"/>
            <mx:HSlider id="flippointSlider" liveDragging="true" value="60" minimum="10" maximum="2000"  x="118" y="57"/>
        
            <mx:Label text="SelectedItem Zoom:" width="124" x="286" y="85"/>
            <mx:HSlider id="selectedItemZoomSlider" liveDragging="true" value="-150" minimum="-2000" maximum="2000"  x="419" y="85"/>
        
            <mx:Label text="Camera offset x:" width="138" x="10" y="31"/>
            <mx:HSlider id="cameraOffsetXSlider" liveDragging="true" value="0" minimum="-2000" maximum="2000"  x="118" y="31"/>
            
            <mx:Label text="Camera offset y:" width="100" x="579" y="4"/>
            <mx:VSlider id="cameraOffsetYSlider" liveDragging="true" value="75" minimum="-2000" maximum="2000"  x="687" y="4" height="106"/>
        
        </mx:Canvas>
    </mx:Panel>
    
</mx:Application>