<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:psp_comp="psp_menu_classes.components.*" 
    layout="absolute"
    width="550"
    height="388" 
    creationComplete="init();"
    viewSourceURL="srcview/index.html"
    >

    <mx:Script>
    
        <![CDATA[
            import com.adobe.viewsource.ViewSource;
            import mx.controls.Alert;
            import mx.managers.FocusManager;
            import flash.events.Event;
            import flash.events.KeyboardEvent;
            import psp_menu_classes.components.VerticalScreenSlider;
            import psp_menu_classes.components.PSPMenuItem;
            
            
            [Bindable]
            public var menu_item_size:uint=60;
            
            [Embed(source="assets/psp_bg.jpg")]
            [Bindable]
            public var imgCls:Class;
            
            private function init():void{
                focusManager.setFocus(key_listener);
                addEventListener(KeyboardEvent.KEY_UP,onKeyUp);
                ViewSource.addMenuItem(this,viewSourceURL);
                populatePSPMenu();
            }

            private function populatePSPMenu():void{
                var vslider:VerticalScreenSlider;
                var menu_item:PSPMenuItem;
                for(var i:uint=0;i<10;i++){
                    vslider=new VerticalScreenSlider();
                    vslider.width=menu_item_size;
                    vslider.height=menu_item_size;
                    screen_slider.addSlideItem(vslider);
                    for(var j:uint=0;j<6;j++){
                        menu_item=new PSPMenuItem();
                        menu_item.width=menu_item_size;
                        menu_item.height=menu_item_size;
                        menu_item.setStyle("backgroundColor","0xF"+i+""+i+"0"+j+"0");
                        menu_item.item_value="col:"+i+"\nrow:"+j;
                        vslider.addSlideItem(menu_item);
                    }
                }
            }
            
            public function onKeyUp(e:KeyboardEvent):void{
                switch(e.keyCode){
                    case 37:
                        navigateLeft();
                        break;
                    case 38:
                        navigateUp();
                        break;
                    case 39:
                        navigateRight();
                        break;
                    case 40:
                        navigateDown();
                        break;
                }
            }
            
            public function navigateLeft():void{
                screen_slider.slideToPrevious();
            }
            public function navigateRight():void{
                screen_slider.slideToNext();
            }
            
            public function navigateUp():void{
                var item:DisplayObject=screen_slider.getCurrentItem();
                if(item is VerticalScreenSlider)VerticalScreenSlider(item).slideToPrevious();
            }
            public function navigateDown():void{
                var item:DisplayObject=screen_slider.getCurrentItem();
                if(item is VerticalScreenSlider)VerticalScreenSlider(item).slideToNext();                            
            }
            
        ]]>
    </mx:Script>

    <mx:TextInput visible="false" id="key_listener" y="-100" /><!-- hack, just something to set initial focus on... -->
    <mx:Canvas id="app_bg" width="295" height="170" x="124" y="30" backgroundColor="0xCCCCCC" />
    <mx:Image source="{imgCls}"/>
    <psp_comp:ControlButtons     x="425" y="70" 
                                navigate_left="{screen_slider.slideToPrevious();}" navigate_right="{screen_slider.slideToNext();}"
                                navigate_up="navigateUp();" navigate_down="navigateDown()" />
    <psp_comp:ControlButtons     x="20" y="70" 
                                navigate_left="{screen_slider.slideToPrevious();}" navigate_right="{screen_slider.slideToNext();}"
                                navigate_up="navigateUp();" navigate_down="navigateDown()" />
    <psp_comp:HorizontalScreenSlider     id="screen_slider"  x="{app_bg.x}" y="{app_bg.y}" 
                                        width="{app_bg.width}" height="{app_bg.height}" y_offset="50"  
                                        x_offset="100" backgroundColor="0x000077" backgroundAlpha=".3">
        <psp_comp:slide_items>
            <psp_comp:PSPMenuItem width="{menu_item_size}" height="{menu_item_size}" backgroundColor="0xFFFF00" item_value="no sub items"/>
            <psp_comp:PSPMenuItem width="{menu_item_size}" height="{menu_item_size}" backgroundColor="0xFFFF77" item_value="no nsub items" />
        </psp_comp:slide_items>
    </psp_comp:HorizontalScreenSlider>
    <mx:Text text="Click the arrow buttons or arrow buttons to navigate, eh?" selectable="false" horizontalCenter="0" y="{height-50}" />

</mx:Application>