/*
Copyright (c) 2009 Yahoo! Inc.  All rights reserved.  
The copyrights embodied in the content of this file are licensed under the BSD (revised) open source license
*/
package
{
	import com.yahoo.astra.fl.controls.MenuBar;
	import com.yahoo.astra.utils.InstanceFactory;
	//import the required data class
	import com.yahoo.astra.fl.data.XMLDataProvider;
	import flash.text.TextFormat;	
	import flash.display.Sprite;
	import flash.display.Stage;
	import flash.display.StageScaleMode;
	import flash.display.StageAlign;
	import fl.controls.Button;
	import flash.events.MouseEvent;
	
	public class SkinnedMenuBar extends Sprite
	{
		public function SkinnedMenuBar()
		{
			this.stage.scaleMode = StageScaleMode.NO_SCALE;
			this.stage.align = StageAlign.TOP_LEFT;			
			super();
			this.createMenu();
			this.createButtons();
		}
		
		/**
		 * MenuBar instance
		 */
		public var menuBar:MenuBar;
		
		/**
		 *
		 */
		private var _lightMenuButton:Button;
		
		private var _darkMenuButton:Button;
		
		/**
		 * @private
		 * XML for MenuBar
		 */
		private var menus:XML = 
		<menus>
		<menu label="colors">
			<menuitem label="red" type="check" group="colors" />
			<menuitem label="orange" type="check" group="colors" />
			<menuitem label="yellow" type="check" group="colors" />
			<menuitem label="green" type="check" group="colors" />
			<menuitem label="blue" type="check" group="colors" />
			<menuitem label="purple" type="check" group="colors" />
		</menu>
		<menu label="cars">
			<menuitem label="american" type="radio" group="cars">
				<menuitem label="cadillac" type="radio"/>
				<menuitem label="buick" type="radio" />
				<menuitem label="pontiac" type="radio" />
				<menuitem label="chevrolet" type="radio" />
				<menuitem label="ford" type="radio" />
			</menuitem>
			<menuitem label="japanese" type="radio" group="cars">
				<menuitem label="toyota" type="radio" />
				<menuitem label="honda" type="radio" />
				<menuitem label="nissan" type="radio" />
			</menuitem>
		</menu>
		<menu label="food">
		<menuitem label="fruit">
		<menuitem label="apples">
			<menuitem label="gala" icon="MenuAppleIcon" selectedIcon="MenuAppleSelectedIcon" group="apple" />
			<menuitem label="granny smith" icon="MenuAppleIcon" selectedIcon="MenuAppleSelectedIcon" group="apple" />
			<menuitem label="fuji" icon="MenuAppleIcon" selectedIcon="MenuAppleSelectedIcon" group="apple" />
		</menuitem>
		</menuitem>
		</menu>
		</menus>;

		/**
		 * @private
		 *
		 * Creates a styled menu
		 */
		private function createMenu():void
		{
			menuBar = new MenuBar(this);
			this.setDarkStyles();
			menuBar.dataProvider = new XMLDataProvider(menus);		
		}
		
		private function setDarkStyles():void
		{
			var roundedLightSkin:InstanceFactory = new InstanceFactory(ProgramaticSkin, {width:10, colors:[0x999999, 0x666666, 0x999999], alphas:[1, 1, 1], ratios:[0, 120, 200], height:10,gradientRotation:90});
			var squaredLightSkin:InstanceFactory = new InstanceFactory(ProgramaticSkin, {width:10, colors:[0x999999, 0x666666, 0x999999], alphas:[1, 1, 1], ratios:[0, 120, 200], height:10,gradientRotation:90, elipse:0});			
			var roundedDarkSkin:InstanceFactory = new InstanceFactory(ProgramaticSkin, {width:10, colors:[0x000000, 0x666666, 0x000000], alphas:[1, 1, 1], ratios:[0, 90, 200], height:10,gradientRotation:90});
			var squaredDarkSkin:InstanceFactory = new InstanceFactory(ProgramaticSkin, {width:10, colors:[0x000000, 0x000000],height:10, elipse:0});
			var textFormat:TextFormat = new TextFormat("Verdana", 10, 0xeeeeee);			
			this.refreshMenuStyles(roundedLightSkin, squaredLightSkin, roundedDarkSkin, squaredDarkSkin, textFormat);						
		}
		
		private function setLightStyles():void
		{
			var roundedLightSkin:InstanceFactory = new InstanceFactory(ProgramaticSkin, {width:10, colors:[0x999999, 0xeeeeee, 0x999999], alphas:[1, 1, 1], ratios:[0, 90, 200], height:10,gradientRotation:90});
			var squaredLightSkin:InstanceFactory = new InstanceFactory(ProgramaticSkin, {width:10, colors:[0x999999, 0xeeeeee, 0x999999], alphas:[1, 1, 1], ratios:[0, 90, 200],height:10,gradientRotation:90, elipse:0});			
			var roundedDarkSkin:InstanceFactory = new InstanceFactory(ProgramaticSkin, {width:10, colors:[0xdddddd, 0xffffff, 0xdddddd], alphas:[1, 1, 1], ratios:[0, 90, 200],height:10,gradientRotation:90});
			var squaredDarkSkin:InstanceFactory = new InstanceFactory(ProgramaticSkin, {width:10, colors:[0xdddddd, 0xffffff, 0xdddddd], alphas:[1, 1, 1], ratios:[0, 90, 200],height:10,gradientRotation:90, elipse:0});
			var textFormat:TextFormat = new TextFormat("Verdana", 10, 0x000000);		
			this.refreshMenuStyles(roundedLightSkin, squaredLightSkin, roundedDarkSkin, squaredDarkSkin, textFormat);						
		}		
		
		private function refreshMenuStyles(	roundedLightSkin:InstanceFactory, 
											squaredLightSkin:InstanceFactory, 
											roundedDarkSkin:InstanceFactory, 
											squaredDarkSkin:InstanceFactory, 
											textFormat:TextFormat):void
		{
			menuBar.setStyle("skin", roundedDarkSkin);
			menuBar.setMenuBarRendererStyle("left_overSkin", roundedLightSkin);
			menuBar.setMenuBarRendererStyle("left_selectedOverSkin", roundedLightSkin);
			menuBar.setMenuBarRendererStyle("left_selectedUpSkin", roundedLightSkin);
			menuBar.setMenuBarRendererStyle("left_selectedDownSkin", roundedLightSkin);	
			menuBar.setMenuBarRendererStyle("left_downSkin", roundedLightSkin);
			menuBar.setMenuBarRendererStyle("right_overSkin", roundedLightSkin);
			menuBar.setMenuBarRendererStyle("right_downSkin", roundedLightSkin);
			menuBar.setMenuBarRendererStyle("right_selectedOverSkin", roundedLightSkin);
			menuBar.setMenuBarRendererStyle("right_selectedUpSkin", roundedLightSkin);
			menuBar.setMenuBarRendererStyle("right_selectedDownSkin", roundedLightSkin);			
			
			
			menuBar.setMenuBarRendererStyle("overSkin", squaredLightSkin);
			menuBar.setMenuBarRendererStyle("selectedOverSkin", squaredLightSkin);
			menuBar.setMenuBarRendererStyle("selectedUpSkin", squaredLightSkin);
			menuBar.setMenuBarRendererStyle("selectedDownSkin", squaredLightSkin);
			menuBar.setMenuBarRendererStyle("downSkin", squaredLightSkin);

			menuBar.setMenuBarRendererStyle("textFormat", textFormat);

						
			menuBar.setMenuBarRendererStyle("disabledSkin", squaredLightSkin);
			
			menuBar.setMenuStyle("skin", roundedLightSkin);		
			menuBar.setMenuRendererStyle("textFormat", textFormat);
			menuBar.setMenuRendererStyle("overSkin", squaredDarkSkin);
			menuBar.setMenuRendererStyle("upSkin", squaredLightSkin);
			menuBar.setMenuRendererStyle("selectedUpSkin", squaredDarkSkin);
			menuBar.setMenuRendererStyle("selectedOverSkin", squaredDarkSkin);
			menuBar.setMenuRendererStyle("downSkin", squaredDarkSkin);
			menuBar.setMenuRendererStyle("selectedDownSkin", squaredDarkSkin);						
		}
		
		private function createButtons():void
		{
			_lightMenuButton = new Button();
			_lightMenuButton.label = "Show Light Styles";
			_lightMenuButton.addEventListener(MouseEvent.CLICK, changeMenuStyles);
			_lightMenuButton.x = 400;
			_lightMenuButton.y = 30;
			_lightMenuButton.width = 120;
			this.addChild(_lightMenuButton);
			_darkMenuButton = new Button();
			_darkMenuButton.label = "Show Dark Styles";
			_darkMenuButton.addEventListener(MouseEvent.CLICK, changeMenuStyles);
			_darkMenuButton.x = 400;
			_darkMenuButton.y = 60;
			_darkMenuButton.width = 120;
			this.addChild(_darkMenuButton);
			
		}
		
		private function changeMenuStyles(event:MouseEvent):void
		{
			var stylePackage:String = event.currentTarget.label;
			if(stylePackage == "Show Light Styles")
			{
				this.setLightStyles();
			}
			else
			{
				this.setDarkStyles();
			}			
		}
	}	
}