<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
                xmlns:fx="com.atellis.controls.*"
                xmlns:styles="styles.*" 
                xmlns:skins="styles.skins.*" 
                xmlns:degrafa="http://www.degrafa.com/2007"
                applicationComplete="init()" backgroundColor="#000000" xmlns:transitions="fl.transitions.*" xmlns:dattoli="com.dattoli.*"
                 viewSourceURL="srcview/index.html">
    <mx:Style source="styles/style.css"/>
    <mx:Script>
        <![CDATA[
            import flash.events.Event;
            import flash.display.StageDisplayState;
            import caurina.transitions.Tweener;
            //Custom classes
            import nl.larsvanmeurs.flash.effects.carousel.ICarouselItem;
            import nl.larsvanmeurs.flash.effects.carousel.Carousel;
            import nl.larsvanmeurs.flash.display.*;
            import nl.larsvanmeurs.flash.effects.carousel.CarouselItem;
            import com.dattoli.audioManager;
            import com.dattoli.PlayerPanel;
            
            private var carousel:Carousel;
            private var item_array:Array = new Array();
            private var menuItem:Sprite;
            private var item:CarouselItem;
            private var n:int;
            private var currentItemIndex:int;
            private var audiomanager:audioManager;
            [Bindable]
            private var currentGenre:Object;
            
            private function init():void {
                /* Set up full screen handler. */
                Application.application.stage.addEventListener(FullScreenEvent.FULL_SCREEN, fullScreenHandler);
                //Setup Carousel Menu
                var carouselWidth:Number = carouselMenu.width * .5;
                var carouselHeight:Number =  carouselMenu.height/10;
                carousel = new Carousel(carouselWidth,carouselHeight);
                loadXML();
                carousel.x = (Application.application.width/2);
                carousel.y = (Application.application.height/2);
                carouselMenu.addChild(carousel);
                //Mouse.hide();
            }
            private function fullScreenHandler(evt:FullScreenEvent):void {
                if (evt.fullScreen) {
                    updateDisplayList(unscaledWidth,unscaledHeight);
                    /* Do something specific here if we switched to full screen mode. */
                } else {
                    updateDisplayList(unscaledWidth,unscaledHeight);
                    /* Do something specific here if we switched to normal mode. */
                }
            }
            private function toggleFullScreen(event:Event):void {
               if(event.target.selected) {
                        Application.application.stage.displayState = StageDisplayState.FULL_SCREEN;
                    }
                     else{
                        Application.application.stage.displayState = StageDisplayState.NORMAL;
                    }
            }
            private function loadXML():void{
                var loader:URLLoader=new URLLoader();
                loader.addEventListener(Event.COMPLETE,completeHandler);
                var request:URLRequest=new URLRequest('icons.xml');
                try 
                {
                    loader.load(request);
                } 
                catch(error:Error) 
                {
                    trace('XML file not found');
                }
            }
            private function completeHandler(event:Event):void{
                var result:XML=new XML(event.target.data);
                var myXML:XMLDocument=new XMLDocument();
                myXML.ignoreWhite=true;
                myXML.parseXML(result.toXMLString());
                var node:XMLNode=myXML.firstChild;
                n = int(node.childNodes.length);
                for(var i:int=0;i<n;i++)
                {
                    var ob:Object=new Object();
                    ob.label=node.childNodes[i].attributes['tooltip'];
                    ob.directory=node.childNodes[i].attributes['directory'];
                    ob.filelist=node.childNodes[i].attributes['content'];
                    item_array.push(ob);
                    var iconLoader:Loader = new Loader();
                    iconLoader.name = i.toString();
                    iconLoader.load(new URLRequest(node.childNodes[i].attributes['image']));
                    iconLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeImageHandler);
                    menuItem = new Sprite();
                    menuItem.graphics.beginFill(0xFFFFFF);
                    menuItem.graphics.drawRect(0,0,128,128);
                    menuItem.graphics.endFill();
                    menuItem.addChild(iconLoader);
                    item = new CarouselItem(menuItem, menuItem.width, menuItem.height, false, item_array[i].label, item_array[i].directory, item_array[i].filelist);
                    item.addChild(menuItem);
                    item.name = "item"+i.toString();
                    carousel.addItem(item);
                }
                currentItemIndex = 0;
                carousel.rotateTo(carousel.getChildByName("item"+currentItemIndex) as ICarouselItem);
                carousel.lock();
                carousel.addEventListener("clicked",initPlayer);
                carousel.addEventListener("unClicked", destroyPlayer);
            }
            private function completeImageHandler(event:Event):void{
                event.currentTarget.loader.parent.graphics.clear();
                event.currentTarget.loader.parent.parent.reflecting = true;
            }
            private function moveCarousel(event:Event):void{
                if(event.target.id == "left"){
                    --currentItemIndex;
                    if(currentItemIndex == -1){
                        currentItemIndex = n -1;
                        carousel.rotateTo(carousel.getChildByName("item"+currentItemIndex) as ICarouselItem, .5);
                    }
                    else{
                    carousel.rotateTo(carousel.getChildByName("item"+currentItemIndex) as ICarouselItem, .5);
                    }
                }
                //Has to be the "right" button
                else{
                    ++currentItemIndex;
                    if(currentItemIndex > n-1){
                        currentItemIndex = 0;
                        carousel.rotateTo(carousel.getChildByName("item"+currentItemIndex) as ICarouselItem, .5);
                    }
                    else{
                    carousel.rotateTo(carousel.getChildByName("item"+currentItemIndex) as ICarouselItem, .5);
                    }
                }
                carousel.lock();
            }
            private function initPlayer(event:Event):void{
                var currentItem:CarouselItem = event.target.curItem;
                var iconData:BitmapData = new BitmapData(currentItem.graphic.width, currentItem.graphic.height, true, 0x00FFFFFF);
                iconData.draw(currentItem.graphic);
                var icon:Bitmap = new Bitmap(iconData, "auto", true);
                currentGenre = new Object();
                currentGenre.graphic = icon;
                currentGenre.label = currentItem.label;
                this.currentState = "playerState";
                player.addEventListener("closePlayer", destroyPlayer);
                audiomanager = new audioManager(this.width, this.height, currentItem.directory, currentItem.filelist);
                playerCanvas.addChild(audiomanager);
                player.closeIcon = currentGenre;
                player.genreText.text = currentItem.label;
                volSlider.value = audiomanager.vol;
            }
            private function destroyPlayer(event:Event):void{
                this.currentState = "carouselState";
                audiomanager.onStop();
                playerCanvas.removeChild(audiomanager);
                carousel.rotateTo(carousel.getChildByName("item"+currentItemIndex) as ICarouselItem, .5);
            }
            private function daPlay(event:MouseEvent):void{
                if(event.target.selected){
                    audiomanager.onPause();
                }
                else{
                    audiomanager.onPlay();
                }
            }
            protected override function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
                super.updateDisplayList(unscaledWidth,unscaledHeight);
                this.width = unscaledWidth;
                this.height = unscaledHeight;
        }
        ]]>
    </mx:Script>
    <mx:Button id="btnFullScreen" toggle="true" x="2" y="2" height="20" width="20"
                skin="styles.skins.FullScreenButtonSkin" click="toggleFullScreen(event)"
                />
    <mx:VBox id="carouselContainer" width="100%" height="75%" horizontalCenter="0" verticalCenter="0">
        <mx:UIComponent id="carouselMenu" width="{carouselContainer.width * .75}" height="100%"/>
    </mx:VBox>
    <mx:HBox id="carouselNav" bottom="10" horizontalAlign="center" width="100%" verticalAlign="middle">
            <mx:Button id="left" click="moveCarousel(event)" 
                skin="styles.skins.CarouselLeftButton" width="150" height="100"/>
            <mx:Button id="right" click="moveCarousel(event)"
                skin="styles.skins.CarouselRightButton" width="150" height="100"/>
    </mx:HBox>
    <mx:Canvas id="logo" width="265" horizontalCenter="0" top="10"/>
    <skins:DattoliLogo graphicsTarget="{[logo]}"/>

<mx:states>
    <mx:State id="carouselState" name="carouselState"/>
        
    <mx:State id="playerState" name="playerState" >
        <mx:RemoveChild target="{carouselNav}" />
        <mx:AddChild position="firstChild">
            <dattoli:PlayerPanel borderThicknessTop="30" closeIcon="{currentGenre}" id="player" 
                                width="20" height="20" horizontalScrollPolicy="off" verticalScrollPolicy="off" backgroundColor="#222222">
                <mx:Canvas width="100%" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off" id="playerCanvas">
                    <mx:Button id="playButton" toggle="true" click="daPlay(event)" skin="styles.skins.PlayerPlayButton"
                        width="40" height="40" y="300" x="{playerCanvas.width*.50}"/>
                    <mx:Button id="rewButton" click="audiomanager.cyclesongArray('rew')" skin="styles.skins.PlayerRewButton"
                        width="30" height="30" y="300" x="{playButton.x + playButton.width + 50}"/>
                    <mx:Button id="ffButton" click="audiomanager.cyclesongArray('forw')" skin="styles.skins.PlayerFFButton"
                        width="30" height="30" y="300" x="{rewButton.x + rewButton.width + 50}"/>
                    <mx:VSlider id="volSlider" minimum="0" maximum="1" liveDragging="true"
                                value="{audiomanager.vol}" height="{playerCanvas.height *.50}"
                                x="{playerCanvas.width - 50}" y="{playerCanvas.height/2 - volSlider.height/2}" styleName="{getStyle('sliderStyle')}" showDataTip="false"
                                change="audiomanager.volumeControl(volSlider.value)"/>
                    <mx:Label x="{playerCanvas.width - 68}" y="{playerCanvas.height/2 - volSlider.height/2 - 12}" text="{Math.floor(volSlider.value * 100)}" textAlign="center" width="60" fontSize="13" color="#FFFFFF"/>

                </mx:Canvas>
            </dattoli:PlayerPanel>
        </mx:AddChild>
        <mx:SetProperty target="{player}" name="width" value="100%"/>
        <mx:SetProperty target="{player}" name="height" value="100%"/>
</mx:State>
</mx:states>

<mx:transitions>
    <mx:Transition fromState="*" toState="playerState">
                       <mx:Parallel id="t1" targets="{[carouselNav,player]}" effectEnd="audiomanager.onPlay()">
                       <mx:Fade duration="400" target="{left}" alphaFrom="1" alphaTo="0"/>
                       <mx:Fade duration="400" target="{right}" alphaFrom="1" alphaTo="0"/>
                    <mx:RemoveChildAction/>
                    <mx:Resize duration="400" target="{player}"/>          
                    </mx:Parallel>

         </mx:Transition>
             <mx:Transition fromState="playerState" toState="*">
                       <mx:Sequence targets="{[carouselNav,player]}">
                       <mx:Parallel id="t2" targets="{[carouselNav,player]}">
                       <mx:Fade duration="400" target="{left}" alphaFrom="0" alphaTo="1"/>
                       <mx:Fade duration="400" target="{right}" alphaFrom="0" alphaTo="1"/>
                    <mx:Resize duration="400" target="{player}" widthTo="20" heightTo="20"/>    
                    </mx:Parallel>
                    <mx:RemoveChildAction/>     
                    </mx:Sequence>
         </mx:Transition>
</mx:transitions>    
</mx:Application>