<?xml version="1.0" encoding="utf-8"?>
  <Application xmlns="http://www.adobe.com/2006/mxml" horizontalGap="0" xmlns:qs="qs.controls.*" horizontalAlign="left" paddingLeft="0" paddingTop="0" paddingBottom="0" paddingRight="0" 
          layout="horizontal" backgroundColor="#343434"  initialize="createData();updateControl();"
          viewSourceURL="/source/Fisheye.zip" xmlns:f="flash.filters.*" >        
          
          <Script>
                  <![CDATA[
                          [Bindable] public var textItems:Array;
                          [Bindable] public var images:Array;
                          [Bindable] public var currentDP:Array;
                          [Bindable] public var mar: Boolean = true;
                          
                          private function createData():void
                          {
                                  var words:Array = ("The quick brown fox jumped over the lazy dog").split(" ");        
                                  textItems= [];
                                  var images:Array = [];
                                  var kind:String = "panorama/persons";
                                  for(var j:int=0;j<6;j++)
                                  {
                                          textItems = textItems.concat(words);
                                          for(var i:int=1;i<=44;i++)
                                          {
                                          if (i<=9) {
                                          images.push("../assets/img/" + kind + "/img00"+i+".jpg");
                                          } else {
                                          images.push("../assets/img/" + kind + "/img0"+i+".jpg");
                                          }
                                          }
                                  }
                                  this.images = currentDP = images;
                          }
                          
                          private function updateControl():void
                          {
                                  fisheye.setStyle("horizontalAlign",hAlign.selectedValue);
                                  fisheye.setStyle("verticalAlign",vAlign.selectedValue);
                                  fisheye.setStyle("defaultSpacing",spacing.value);
                                  fisheye.setStyle("defaultScale",dscale.value);
                                  fisheye.setStyle("hilightSpacing",hspacing.value);
                                  fisheye.setStyle("hilightMinScale",mscale.value);
                                  fisheye.setStyle("hilightMaxScale",maxscale.value);
                                  fisheye.setStyle("hilightScaleRadius",srad.value);
                                  fisheye.setStyle("hilightScaleSlope",sslope.value);
                                  fisheye.setStyle("animationSpeed",aspeed.value);
                                  fisheye.setStyle("zoomMode",zoomMode.selectedValue);
                          }
  
                          private function updateData():void
                          {
                                  if(content.selectedItem == "images")
                                  {
                                          currentDP = images;
                                          fisheye.itemRenderer = imageRenderer;                                        
                                  }
                                  else
                                  {
                                          currentDP = textItems;
                                          fisheye.itemRenderer = testSquare;                                        
                                  }
                          }
                  ]]>
          </Script>
          
          <Style>
                  FisheyeTile {
                          fontSize: 38;        
                  }
                  RadioButton, CheckBox {
                          text-roll-over-color: #FFFFFF;
                          text-selected-color: #FFFFFF;
                          color: #FFFFFF;        
                  }
                  
                  .insetBox {
                          paddingBottom: 30;
                          paddingLeft: 30;
                          paddingRight: 30;
                          paddingTop: 30;        
                  }
                  
                  FormItemLabel {
                          color: #FFFFFF;        
                  }
                  
                  HRule, VRule {
                          strokeWidth: 1;
                          strokeColor: #FFFFFF;        
                  }
          </Style>
  
          <Component id="testSquare">                                                
                  <HBox width="100" height="100" backgroundColor="#FFFFFF">
                          <states>
                                  <State name="selected" />
                                  <State name="hilighted" />
                          </states>
                  </HBox>                                                        
          </Component>
          
                  <Binding source="sel.value" destination="fisheye.selectedIndex" />
                  <Binding destination="sel.value" source="fisheye.selectedIndex" />
                  
                  <RadioButtonGroup id="hAlign" selectedValue="center" change="updateControl();"/>
                  <RadioButtonGroup id="vAlign" selectedValue="center" change="updateControl();"/>
                  <RadioButtonGroup id="zoomMode" selectedValue="scale" change="updateControl();"/>
                  
                  <Form height="100%" backgroundColor="#565656">
                          <HRule width="100%"/>
                          <FormItem label="horizontal-align">
                                  <RadioButton groupName="hAlign" label="left" value="left"/>
                                  <RadioButton groupName="hAlign" label="center" value="center"/>
                                  <RadioButton groupName="hAlign" label="right" value="right"/>
                          </FormItem>
                          <HRule width="100%"/>
                          <FormItem label="vertical-align">
                                  <RadioButton groupName="vAlign" label="top" value="top"/>
                                  <RadioButton groupName="vAlign" label="center" value="center"/>
                                  <RadioButton groupName="vAlign" label="bottom" value="bottom"/>
                          </FormItem>
                          <HRule width="100%"/>
                          <FormItem label="spacing">
                                  <NumericStepper id="spacing" stepSize="1" value="20" maximum="150" change="updateControl();" />
                          </FormItem>
                          <FormItem label="defaultScale">
                                  <NumericStepper id="dscale" stepSize=".1" value=".3" change="updateControl();" />
                          </FormItem>
                          <HRule width="100%" />
                          <FormItem label="hilight spacing">
                                  <NumericStepper id="hspacing" stepSize="1" value="30" maximum="150" change="updateControl();" />
                          </FormItem>
                          <FormItem label="hilight minScale">
                                  <NumericStepper id="mscale" stepSize=".05" value=".1" change="updateControl();" />
                          </FormItem>
                          <FormItem label="max scale">
                                  <NumericStepper id="maxscale" stepSize=".05" value="1" change="updateControl();" />
                          </FormItem>
                          <FormItem label="scale radius">
                                  <NumericStepper id="srad"  stepSize="1" minimum="0" value="4" change="updateControl();" />
                          </FormItem>
                          <FormItem label="scale slope">
                                  <NumericStepper id="sslope"  stepSize=".1" minimum="0" value=".3" change="updateControl();" />
                          </FormItem>
                          <FormItem label="animation speed">
                                  <NumericStepper id="aspeed" minimum=".05"  stepSize=".05" value=".3" change="updateControl();" />
                          </FormItem>
                          <HRule width="100%"/>
                          <FormItem label="content">
                                  <ComboBox id="content" dataProvider="{['images','test squares']}" change="updateData();" />
                          </FormItem>
                          <FormItem label="zoom mode">
                                  <RadioButton selected="true" groupName="zoomMode" label="Scale" value="scale" />
                                  <RadioButton groupName="zoomMode" label="Resize" value="resize" />
                          </FormItem>
                          <FormItem label="selection">
                                  <HSlider id="sel" liveDragging="true" width="100" minimum="-1" maximum="{currentDP.length}" snapInterval="1" />
                                  
                          </FormItem>
                  </Form>
                  <VRule height="100%" />
                  <HBox width="100%" horizontalGap="0" height="100%" styleName="insetBox" clipContent="true" >
                          
                          
                          <qs:FisheyeTile id="fisheye" width="100%" height="100%" dataProvider="{currentDP}" 
                                  stateProperty="currentState" rolloverValue="hilighted" defaultValue="" selectedValue="selected"
                                  >                        
                                  <qs:itemRenderer>
                                          <Component id="imageRenderer">
                                                  <qs:BitmapTile>
                                                          <qs:states>
                                                                  <State name="selected">
                                                                          <SetStyle name="borderColor" value="#E27C0E" />
                                                                          <SetStyle name="borderAlpha" value="1" />
                                                                          <SetStyle name="borderWidth" value="3" />
                                                                          <SetProperty name="filters" />
                                                                  </State>
                                                                  <State name="hilighted">
                                                                          <SetProperty name="filters">
                                                                                  <value>
                                                                                          <Array>
                                                                                                  <f:GlowFilter color="#FFFFFF" blurX="8" blurY="8" />
                                                                                          </Array>
                                                                                  </value>
                                                                          </SetProperty>
                                                                  </State>
                                                          </qs:states>                                                
                                                  </qs:BitmapTile>
                                          </Component>
                                  </qs:itemRenderer>
                                  
                          </qs:FisheyeTile>
                  </HBox>
  </Application>