<?xml version="1.0" encoding="utf-8"?>
<Application 
    xmlns="http://www.adobe.com/2006/mxml" 
    xmlns:cynergy="com.cynergysystems.*"
    xmlns:controls="com.qs.controls.*"
    frameRate="60" backgroundColor="#FFFFFF"
    preloader="com.preload.CustomPreloader"
    layout="absolute" 
    creationComplete="onCreationComplete()" 
    creationCompleteEffect="{ creationCompleteEffect }" 
    horizontalScrollPolicy="off"
    verticalScrollPolicy="off"
     viewSourceURL="srcview/index.html">
    
    <Script>
        <![CDATA[
            import mx.effects.effectClasses.ZoomInstance;
            import mx.effects.easing.Circular;
            import mx.effects.easing.Back;
            import mx.formatters.NumberFormatter;
            import mx.effects.easing.Exponential;
            import mx.effects.easing.Bounce;
            import mx.rpc.events.ResultEvent;
        
            [Bindable]
            private var loadingData : Boolean = true;
            
            private static const baseURL : String  = "http://api.flickr.com/services/feeds/photos_public.gne?format=rss_200&tags="
        
            private function onResult( event : ResultEvent ) : void 
            {
                var pattern : RegExp = /media:/;
                var string : String = event.result as String;
                
                while( string.search( pattern ) >= 0 )
                {
                    string = string.replace( pattern, "_" );
                }
                
                var data : XMLList = (new XML( string )).channel.item;
                list.dataProvider = data;
                loadingData = false;
            }
            
            private function numberFormat( number : Number ) : String
            {
                var nf : NumberFormatter = new NumberFormatter();
                nf.precision = 2;
                return nf.format( number );
            }
            
            private function requestData() : void
            {
                loadingData = true;
                var tags : String = searchString.text;
                var regExp : RegExp = / /;
                
                while ( tags.search( regExp ) >= 0 )
                {
                    tags = tags.replace( regExp, "," );
                }
                
                httpService.url = baseURL + tags + "&tagmode=" + (tagmode.selected ? 'all' : 'any');
                httpService.send();
            }
            
            private function onCreationComplete() : void
            {
                zoomComponent.addEventListener( ImageZoom.EVENT_SCALE_UPDATED, onScaleChange );
            }
            
            private function onScaleChange( event : Event ) : void
            {
                zoom.value = zoomComponent.scale;
            }
            
            private function openURL( url : String ) : void
            {
                 navigateToURL( new URLRequest( url ) , '_blank' );
            }
        ]]>
    </Script>
    
    <HTTPService resultFormat="text" useProxy="false" id="httpService" result="onResult(event)" />
    
    <Sequence id="creationCompleteEffect">
        <Move yFrom="-50" target="{ appControlBar }" easingFunction="{ Bounce.easeOut }" />
        <Fade alphaFrom="0" alphaTo=".5" target="{ logo }" duration="600" />
        <Fade alphaFrom="0" alphaTo="1" target="{ listPanel }" duration="600" />
        <Fade alphaFrom="0" alphaTo="1" target="{ imagePanel }" duration="600" />
        <Fade alphaFrom="0" alphaTo="1" target="{ zoomInButton }" duration="600" />
        <Fade alphaFrom="0" alphaTo="1" target="{ zoomOutButton }" duration="600" />
        <Fade alphaFrom="0" alphaTo="1" target="{ resetButton }" duration="600" />    
            
        <effectEnd>
            <![CDATA[
                requestData();
            ]]>
        </effectEnd>
    </Sequence>
    
    <Style source="styles.css" />
    <SWFLoader id="logo" source="@Embed('assets/logo.swf')"  horizontalCenter="0" verticalCenter="0" width="602" height="540" alpha="0"/>
    
    <ApplicationControlBar dock="true" id="appControlBar">
        
        <VBox width="100%" height="100%">
            <HBox defaultButton="{ searchButton }">
                <TextInput width="200" id="searchString" text="Adobe, Flex" />
                <Button label="Search!" click="requestData()" id="searchButton" useHandCursor="true" buttonMode="true" paddingTop="2" />
                    
                <HBox height="100%" verticalAlign="middle">
                    <Label text="powered by "/>
                    <Image source="@Embed('/assets/flickr.gif')" />
                </HBox>
            </HBox>
            <Canvas width="100%" height="100%"> 
                <CheckBox id="tagmode" label="tagmode=all" selected="true" top="0" left="0" />    
                <HBox bottom="0" right="0">
                    <Label text=" Scale: { numberFormat( zoomComponent.scale ) }x"  />
                    <Label text=" Position: { numberFormat( zoomComponent.image.x ) }, { numberFormat( zoomComponent.image.y ) }"  />
                    <Label text=" Dimensions: { numberFormat( zoomComponent.image.width ) } x { numberFormat( zoomComponent.image.height ) }"  />
                </HBox>
            </Canvas>
        </VBox> 
        
        
        <Button icon="@Embed('/assets/cynergy.png')" useHandCursor="true" buttonMode="true" click="openURL('http://www.cynergysystems.com')" toolTip="Go To www.cynergysystems.com" />
        
    </ApplicationControlBar>
    
    
    <Panel id="listPanel" layout="absolute" width="242" top="10" left="10" bottom="10" alpha="0" title="{ loadingData ? 'Loading Data' : 'Select an Image' }">
        
        <List id="list" top="0" bottom="0" left="0" right="0" alpha="{ loadingData ? .3 : 1}" >
            <itemRenderer>
                <Component>
                    <HBox paddingRight="10" useHandCursor="true" buttonMode="true" mouseChildren="false" >
                        <controls:SuperImage width="75" height="75" source="{ data._thumbnail.@url }" />
                        <Text selectable="false" width="100%" height="75" text="{ XML(data).title }" fontSize="14" />
                    </HBox>
                </Component>
            </itemRenderer>
        </List>
        
        <Text horizontalCenter="0" top="15" visible="{ !loadingData &amp;&amp; list.dataProvider.length == 0 }" maxWidth="220" height="100" >
            <htmlText>
                <![CDATA[No results could be found.<br/>Please Refine your query.]]>
            </htmlText>
        </Text>
        
        <SWFLoader source="@Embed('/assets/cynergyLogoSmall.swf')" visible="{ loadingData }" horizontalCenter="0" top="15"
            showEffect="Fade" hideEffect="Fade" />
        
    </Panel>
     
    <Panel id="imagePanel" layout="absolute" top="10" left="260" bottom="10" right="10" alpha="0"  title="{ list.selectedItem.title }">
        
        <cynergy:ImageZoom 
            id="zoomComponent" 
            borderStyle="solid" 
            source="{ list.selectedItem._content.@url }"
            fadeDuration="1000" 
            bottom="0" left="0" top="0" right="0"
            zoomIncrement="{ options.zoomIncrement }"
            imageDoubleClickEnabled="{ options.imageDoubleClickEnabled }"
            mouseWheelEnabled="{ options.mouseWheelEnabled }"
            mouseFollow="{ options.mouseFollowEnabled }" />
            
            <VSlider id="zoom" minimum=".1" maximum="5" value="1" change="zoomComponent.zoom( zoom.value )" 
                right="3" top="3" /> 
            
            <ControlBar verticalAlign="middle" paddingTop="0" paddingBottom="0">
                <cynergy:OptionsPanel id="options" width="100%"/>
            </ControlBar>
        
    </Panel>
    
    <Button id="resetButton"   alpha="0" icon="@Embed('/assets/arrow_refresh_small.png')" click="zoomComponent.reset()"  top="15" right="65" height="20" width="20" toolTip="Reset to 100%" useHandCursor="true" buttonMode="true" />
    <Button id="zoomOutButton" alpha="0" icon="@Embed('/assets/magifier_zoom_out.png')" click="zoomComponent.zoomOut()"  top="15" right="40" height="20" width="20" toolTip="Zoom Out" useHandCursor="true" buttonMode="true" />
    <Button id="zoomInButton"  alpha="0" icon="@Embed('/assets/magnifier_zoom_in.png')" click="zoomComponent.zoomIn()"   top="15" right="15" height="20" width="20" toolTip="Zoom In" useHandCursor="true" buttonMode="true" />
    
    
</Application>