<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
     creationComplete="photos.send()" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#002579, #1D0000]" viewSourceURL="srcview/index.html">

    <mx:HTTPService id="photos" url="http://www.cyberslingers.com/sandbox/gallery/flickrfeed.ashx" result="xmlQuery(event)" resultFormat="e4x" />
        
    <mx:Script>
        <![CDATA[
        import mx.rpc.events.ResultEvent;
        
        [Bindable]
        private var myXML:XML;        
        
        private function xmlQuery(event:ResultEvent):void
        {
            myXML = event.result as XML;
            mainImage.source = myXML.pic[0].image;
            imageTitle.text = myXML.pic[0].title;
            
            var thumbCount:int = 0;
            for each (var x:XML in myXML.pic)
            {
                var thumb:Image = new Image();
                //thumb.width = 50;
                //thumb.height = 50;
                thumb.scaleContent = false;
                thumb.setStyle("horizontalAlign", "center");
                thumb.setStyle("verticalAlign", "middle");
                thumb.alpha = .5;
                thumb.source = x.thumbnail;
                thumb.addEventListener("click", loadImage);
                thumb.addEventListener("mouseOver", changeAlpha);
                thumb.addEventListener("mouseOut", changeAlpha);
                tscroller.addChild(thumb);
                thumbCount += 1;
            }
            // determine how far to scroll right - set by trial and error unless
            // thumbnail width is constant (masking?)
            mr.xTo = thumbCount * (-90); 
            // scroll speed is not perfect either - speed changes depending on distance from
            // current position to the last thumbnail, which is always different.
            // need to redo using eventlistener for mouse.x, then increment x with easing
            mr.duration = thumbCount * 100;  
            ml.duration = thumbCount * 100;
        }

        private function loadImage(event:MouseEvent):void
        {
            mainImage.source = myXML.pic.(thumbnail == event.currentTarget.source).image;
            imageTitle.text = myXML.pic.(thumbnail == event.currentTarget.source).title;
        }
        private function changeAlpha(event:MouseEvent):void
        {
            if(event.currentTarget.alpha == .5)
            {
                event.currentTarget.alpha = 1;
            }
            else
            {
                event.currentTarget.alpha = .5;
            }
        }
        ]]> 
    </mx:Script>
    <mx:VBox id="container" height="100%" width="100%" horizontalAlign="center" backgroundColor="#323232" backgroundAlpha="0.0">
        <!-- begin thumbnail scroller -->
        <mx:HBox id="tscroller_container"  horizontalGap="0" verticalAlign="middle" width="363" verticalScrollPolicy="off" backgroundColor="#FFFFFF" height="50" backgroundAlpha="0.0">
            <mx:Spacer width="5" height="5"/>
                <mx:Button label="&lt;" id="leftBtn" mouseOver="ml.play()" mouseOut="ml.stop()" height="40" width="33" textAlign="center"/>
                    <mx:Spacer width="5" height="5"/>
                        <mx:HBox id="tscroller_mask" width="276" horizontalScrollPolicy="off"  borderStyle="none" backgroundColor="#353434" backgroundAlpha="0.0">
                            <mx:HBox horizontalGap="5" id="tscroller" verticalAlign="middle" >
                            <!-- thumbnails are placed here -->
                            </mx:HBox>
                        </mx:HBox>
                    <mx:Spacer width="5" height="5"/>
                <mx:Button label="&gt;" id="rightBtn" mouseOver="mr.play()" mouseOut="mr.stop()"  height="40" width="33"/>
            <mx:Spacer width="5" height="5"/>
        </mx:HBox>
        <mx:Label text="Please wait . . ." color="#FFFFFF" id="imageTitle" fontSize="12"/>
        <mx:Image id="mainImage" scaleContent="false" verticalAlign="middle" horizontalAlign="center" />
    </mx:VBox>
    
    <mx:Move id="ml" xTo="0" duration="1500" target="{tscroller}" />
    <mx:Move id="mr" xTo="0" duration="1500" target="{tscroller}" />
</mx:Application>