<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
    xmlns:components="com.mariosh.components.*" backgroundColor="#FFFFFF" 
    backgroundGradientAlphas="1,1" creationComplete="init()" viewSourceURL="srcview/index.html">
    <mx:Script>
        <![CDATA[
            import com.mariosh.components.SlideshowImage;
            import mx.collections.ArrayCollection;
            
            [Bindable]
            private var pictures:ArrayCollection = new ArrayCollection(
                [{label:"Acura NSX", source:"http://farm4.static.flickr.com/3248/2736375105_4fa48e0217.jpg"},
                {label:"Acura NSX 2", source:"http://farm4.static.flickr.com/3145/2715483547_35c884899b.jpg"},
                {label:"Acura RSX", source:"http://farm4.static.flickr.com/3098/2838069387_28d8c7b78a.jpg"},
                {label:"Acura RSX HDR", source:"http://farm1.static.flickr.com/190/515602736_5937775507.jpg"},
                {label:"Acura TSX", source:"http://farm2.static.flickr.com/1359/1404871355_4e4dcf3f0b.jpg"}]);
                
            private var timer:Timer;
                
            private function init():void
            {
                timer = new Timer(4000);
                timer.addEventListener(TimerEvent.TIMER, onTimer);
                onPlayPauseChange();
            }
            
            private function onTimer(e:TimerEvent):void
            {
                if(slideBar.selectedIndex == pictures.length-1)
                    slideBar.selectedIndex = 0;
                else
                    slideBar.selectedIndex++;
            }
            
            private function startTimer():void
            {
                timer.start();
            }
            
            private function stopTimer():void
            {
                timer.reset();    
            }
            
            private function onPlayPauseChange():void
            {
                if(playPauseBtn.running)
                    startTimer();
                else
                    stopTimer();
            }
        ]]>
    </mx:Script>

    <components:Slideshow id="slideShow"
        width="500" height="180" 
        x="77" y="44"
        dataProvider="{pictures}"
        currentIndex="{slideBar.selectedIndex}"  
        borderStyle="solid" borderColor="#363636" backgroundColor="#000000"/>
    <mx:HBox x="77" y="225" 
        width="500" height="18" 
        verticalAlign="middle" horizontalAlign="right" 
        backgroundColor="#BCBBBB" borderStyle="solid" 
        borderColor="#9A9C9E" horizontalGap="1">
        <components:SlideBar id="slideBar" 
            numSlides="{pictures.length}" width="142" height="18" 
            verticalAlign="middle" horizontalGap="0" 
            paddingRight="4" slideClick="if(timer.running){timer.reset();timer.start()}"/>
        <mx:VRule strokeWidth="1" strokeColor="#CECECE" height="16"/>
        <components:PausePlayButton id="playPauseBtn" 
            width="16" height="16"
            change="onPlayPauseChange()"
            running="{true}"/>
    </mx:HBox>
    <mx:Canvas x="77" y="40" width="500" height="3" backgroundColor="#DC3636">
    </mx:Canvas>
</mx:Application>