<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                layout="absolute"
                minWidth="1024"
                minHeight="768"
                creationComplete="init()" viewSourceURL="srcview/index.html">
    <mx:Style>
        Application{
            background-color:#ffffff;
            background-image:'';    
        }
    </mx:Style>
    <mx:Script>
        <![CDATA[
            import mx.controls.Image;
            import mx.events.SliderEvent;
            import nl.blueberry.ui.UnlimitedImage;
            import mx.core.UIComponent;
            
            private var unlimitedImage:UnlimitedImage
            private var center:UIComponent;
            private var maskObj:Image;
            
            private function init():void {
                UnlimitedImage.doMask = true;
                UnlimitedImage.gap = 0;
                
                maskObj = new Image();
                maskObj.addEventListener( Event.COMPLETE , maskLoaded );
                maskObj.load( 'mask.png' );
                
                center = new UIComponent();
                placeholder.addChild( center );
                
                unlimitedImage = new UnlimitedImage();
                unlimitedImage.renderOnlyWithMask = true;
                unlimitedImage.width = 4800 //*1.3;
                unlimitedImage.height = 4800 //*1.3;
                
                unlimitedImage.source = 'clouds.jpg';
                unlimitedImage.addEventListener( Event.COMPLETE , reposition );
                
                center.addChild( unlimitedImage );
            }
            
            private function maskLoaded( event:Event ):void {
                maskObj.width = 3000
                maskObj.height = 3000
                maskObj.x = 0
                maskObj.y = 0
                maskObj.rotation = 30;
                
                unlimitedImage.setRotation( 90 );
                unlimitedImage.setMask( maskObj , maskObj.x , maskObj.y );
            }
            
            private function reposition( event:Event ):void {
                center.scaleX = .1
                center.scaleY = .1
                
                slider_changeHandler(null);
            }
            
            protected function slider_changeHandler( event:SliderEvent ):void {
                center.scaleX = slider.value / 100
                center.scaleY = slider.value / 100
                
                center.x = Math.round( Application.application.width / 2 ) 
                center.y = Math.round( Application.application.height / 2 )
                
            }
        ]]>
    </mx:Script>
        <mx:Canvas id="placeholder"
                   width="100%"
                   height="100%"/>
        <mx:HSlider minimum="1"
                    maximum="100"
                    value="1"
                    id="slider"
                    change="slider_changeHandler(event)"/>
</mx:Application>