<?xml version="1.0" encoding="utf-8"?>
<!--

Licensed to the Apache Software Foundation (ASF) under one or more
contributor license agreements.  See the NOTICE file distributed with
this work for additional information regarding copyright ownership.
The ASF licenses this file to You under the Apache License, Version 2.0
(the "License"); you may not use this file except in compliance with
the License.  You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

-->
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
		 xmlns:s="library://ns.adobe.com/flex/spark" 
		 xmlns:mx="library://ns.adobe.com/flex/mx" 
		 xmlns:c="com.flexcapacitor.controls.*"
		 xmlns:handlers="com.flexcapacitor.handlers.*" 
		 xmlns:clipboard="com.flexcapacitor.effects.clipboard.*" 
		 xmlns:status="com.flexcapacitor.effects.status.*" 
		 xmlns:flexiframe="com.google.code.flexiframe.*"
		 xmlns:controls="com.riaspace.controls.*"
		 
		 minWidth="200" 
		 minHeight="100"
		 implements="com.flexcapacitor.views.IInspector" 
		 resize="editor_resizeHandler(event)"
		 >
	
	
	<!-- 
	Notes: 
	
	It may be worth investigating Moonshine project. 
	
	*******************************
	Code highlighting 
	*******************************
	Currently there are 3 editors, a spark textarea with no 
	syntax highlighting, a mx text area with syntax highlighting
	but some redraw issues and no undo or redo support and 
	an html based editor called ace editor that is awesome
	but has a bug in firefox where the code cannot be edited. 
	when it becomes uneditable you have to click on the flex 
	application and then click back into the editor. 
	it also does not resize correctly but that may be a 
	flex issue. it also is being erased when hidden and revealed.
	
	
	*******************************
	Writing code 
	*******************************
	the code editor only shows the code of the selection or document.
	it is not yet tied to the component to allow the user to enter 
	code and have it be retained. 
	
	in the future there may be a second code window to show or edit the 
	code of the selected event. this would listen for an event like 
	the property or style selected event that the metadata panel uses.
	and / or there may be a option to show all document code or 
	only event code. 
	
	what most likely will happen is that this panel will be used to show
	the selected objects generated code and or the event code. 
	then there would be full sized editors that open up in new 
	tabs that show the complete document code. or for purposes of 
	split view this would continue to server both purposes. 
	
	
	*******************************
	Generating Code: 
	*******************************
	this is the second or third iteration of generating source code
	but it is inadequate.  
	there is code already started in the ComponentDecription class that
	should be better. the component description would have a static 
	property called exporter. this would be a class that would be 
	used to generate the code. it would return the correct code through 
	the componentDescription.toString() method. 
	
	There would be a HTML exporter, MXML exporter and so on. 
	
	Currently the properties and the styles are not set on the 
	componentDescription instance. This is why we are using the current 
	method. 
	-->
	
	<fx:Script>
		<![CDATA[
			import com.flexcapacitor.controller.Radiate;
			import com.flexcapacitor.events.RadiateEvent;
			import com.flexcapacitor.model.IDocument;
			import com.flexcapacitor.model.IProject;
			import com.flexcapacitor.utils.AndroidDocumentExporter;
			import com.flexcapacitor.utils.ClassUtils;
			import com.flexcapacitor.utils.DisplayObjectUtils;
			import com.flexcapacitor.utils.HTMLDocumentExporter;
			import com.flexcapacitor.utils.SyntaxHighlighter;
			import com.flexcapacitor.utils.XMLUtils;
			import com.flexcapacitor.utils.supportClasses.ComponentDescription;
			import com.google.code.flexiframe.IFrame;
			
			import mx.collections.ArrayList;
			import mx.events.FlexEvent;
			import mx.events.ResizeEvent;
			
			import spark.components.Application;
			import spark.events.IndexChangeEvent;
			import spark.events.TextOperationEvent;
			
			public static const HTML:String = "HTML";
			public static const MXML:String = "MXML";
			public static const ANDROID:String = "Android";
			public static const XAML:String = "XAML";
			
			/**
			 * Reference to Radiate
			 * */
			public var radiate:Radiate;
			
			[Bindable]
			public var exportWindow:Boolean;
			
			
			/**
			 * Indicates if XML is invalid
			 * */
			[Bindable]
			public var isValid:Boolean;
			
			/**
			 * Error event, if any occurs, from generated code
			 * */
			[Bindable]
			public var error:Error;
			
			/**
			 * Error message, if any occurs, from generated code
			 * */
			[Bindable]
			public var errorMessage:String;
			
			/**
			 * Error messages, if any, from generated code
			 * */
			[Bindable]
			public var errors:Array = [];
			
			/**
			 * Warning messages, if any, from generated code
			 * */
			[Bindable]
			public var warnings:Array = [];


			public function activate():void {
				radiate = Radiate.getInstance();
				
				radiate.addEventListener(RadiateEvent.TARGET_CHANGE, handleTargetChange, false, 0, true);
				radiate.addEventListener(RadiateEvent.PROPERTY_CHANGED, handlePropertyChange, false, 0, true);
				radiate.addEventListener(RadiateEvent.MOVE_ITEM, handlePropertyChange, false, 0, true);
				radiate.addEventListener(RadiateEvent.ADD_ITEM, handlePropertyChange, false, 0, true);
				radiate.addEventListener(RadiateEvent.REMOVE_ITEM, handlePropertyChange, false, 0, true);
				radiate.addEventListener(RadiateEvent.DOCUMENT_CHANGE, handleDocumentChange, false, 0, true);
				
				if (radiate.target) {
					update();
				}
			}
			
			public function deactivate():void {
				if (radiate) {
					radiate.removeEventListener(RadiateEvent.TARGET_CHANGE, handleTargetChange);
					radiate.removeEventListener(RadiateEvent.PROPERTY_CHANGED, handlePropertyChange);
					radiate.removeEventListener(RadiateEvent.MOVE_ITEM, handlePropertyChange);
					radiate.removeEventListener(RadiateEvent.ADD_ITEM, handlePropertyChange);
					radiate.removeEventListener(RadiateEvent.REMOVE_ITEM, handlePropertyChange);
					radiate.removeEventListener(RadiateEvent.DOCUMENT_CHANGE, handleDocumentChange);
				}
			}
			
			public function reamoveListeners():void {
				radiate = Radiate.getInstance();
				radiate.removeEventListener(RadiateEvent.TARGET_CHANGE, handleTargetChange);
				radiate.removeEventListener(RadiateEvent.PROPERTY_CHANGED, handlePropertyChange);
				radiate.removeEventListener(RadiateEvent.MOVE_ITEM, handlePropertyChange);
				radiate.removeEventListener(RadiateEvent.ADD_ITEM, handlePropertyChange);
				radiate.removeEventListener(RadiateEvent.REMOVE_ITEM, handlePropertyChange);
				radiate.removeEventListener(RadiateEvent.DOCUMENT_CHANGE, handleDocumentChange);
				
			}
			
			/**
			 * Handle target change
			 * */
			protected function handleTargetChange(event:RadiateEvent):void {

				// if code is not modified by the user 
				// and show selection 
				// we only want to update the view on selection change when we are 
				// paying attention when we have show selected component code option enabled
				if (!isCodeModifiedByUser) {
					if (showSelection.selected) {
						update();
					}
				}
				
				if (updateCodeLive.selected) {
					radiate.dispatchCodeUpdatedEvent(sourceCode, HTML);
				}
			}
			
			/**
			 * Updates the code when the document changes. 
			 * */
			protected function handleDocumentChange(event:RadiateEvent):void {
				var selectedDocument:IDocument = IDocument(event.selectedItem);
				
				
				if (radiate.isPreviewVisible) {
					//return;
				}
				
				if (!isCodeModifiedByUser) {
					update(true);
				}
				
				if (updateCodeLive.selected) {
					radiate.dispatchCodeUpdatedEvent(sourceCode, HTML);
				}
			}
			
			/**
			 * Updates the code when a property change happens. 
			 * If the text has been modified by the user then we don't update the code.
			 * They have to press the resync button. 
			 * */
			protected function handlePropertyChange(event:RadiateEvent):void {
				
				if (!isCodeModifiedByUser) {
					update(true);
				}
				
				if (updateCodeLive.selected) {
					radiate.dispatchCodeUpdatedEvent(sourceCode, HTML);
				}
			}
			
			/**
			 * Updates the code to reflect the selected language 
			 * */
			protected function codeType_changeHandler(event:IndexChangeEvent):void {
				
				update(true);
				
				// if HTML preview is visible then dispatch an event to 
				// so that preview can be changed else where
				// needs refactoring
				if (radiate.isPreviewDocumentVisible() && String(codeType.selectedItem)!=HTML) {
					radiate.dispatchPreviewEvent(sourceCode, String(codeType.selectedItem));
					radiate.openDocument(radiate.selectedDocument);
					radiate.closeDocument(radiate.selectedDocument, true);
				}
				
			}
			
			/**
			 * Generate the code for the provided target component. 
			 * */
			public function updateTarget(target:Object):void {
				var iDocument:IDocument = radiate.selectedDocument;
				var targetDescription:ComponentDescription;
				var output:String = "";
				var noCodeMessage:String = "Enable Show Source Code to see source code.";
				var xml:XML;
				
				
				// find target in display list and get it's code
				targetDescription = DisplayObjectUtils.getTargetInComponentDisplayList(target, iDocument.componentDescription);
				
				
				if (targetDescription) {
					
					if (codeType.selectedItem==MXML) {
						//output = getMXMLOutputString(targetDescription, true);
						output = iDocument.getSource(targetDescription);
						errorMessage = iDocument.exporter.errorMessage;
					}
					else if (codeType.selectedItem==HTML) {
						var includePreviewCode:Boolean = true;
						
						if (htmlExporter==null) {
							htmlExporter = new HTMLDocumentExporter();
						}
						
						//htmlExporter.document = iDocument;
						htmlExporter.showFullHTMLPageSource = showFullHTMLPageSource;
						htmlExporter.useInlineStyles = setStylesInline.selected;
						htmlExporter.showBorders = showBorders;
						htmlExporter.showBordersCSS = showBordersCSS;
						htmlExporter.addZoom = exportWindow ? false : setZoom.selected;
						htmlExporter.zoomCSS = zoomCSS;
						htmlExporter.useSVGButtonClass = useSVGButtonClass;
						htmlExporter.css = css;
						htmlExporter.stylesheets = stylesheets;
						htmlExporter.target = target;
						htmlExporter.buttonCSS2 = buttonCSS2;
						htmlExporter.includePreviewCode = includePreviewCode;
						htmlExporter.template = html5boilerplate;
						htmlExporter.showOnlyHTML = showOnlyHTML;
						htmlExporter.showOnlyCSS = showOnlyCSS;
						htmlExporter.showScreenshotBackground = showBackgroundImage;
						
						output = htmlExporter.export(iDocument, false, target);
						
						errorMessage = htmlExporter.errorMessage;
					}
					else if (codeType.selectedItem==ANDROID) {
						//output = getAndroidOutputString(targetDescription, true, "", true);
						
						if (androidExporter==null) {
							androidExporter = new AndroidDocumentExporter();
						}
						
						output = androidExporter.exportXMLString(iDocument, false, target);
					}
					

					if (codeType.selectedItem==HTML) {
							
						try {
							// don't use XML for HTML output because it converts this:
							// <div ></div>
							// to this:
							// <div />
							// and that breaks the html page
							
							// we can still try it to make sure it's valid
							xml = new XML(output); // check if valid
							
							sourceCode = output;
							
							// passing the raw string not the xml
							if (showSourceCode) {
								setTextareaCode(output);
							}
							else {
								setTextareaCode(noCodeMessage);
							}
						}
						catch (error:Error) {
							// Error #1083: The prefix "s" for element "Group" is not bound.
							// <s:Group x="93" y="128">
							//	<s:Button x="66" y="17"/>
							//</s:Group>
							sourceCode = output;
							
							// passing the raw string not the xml
							if (showSourceCode) {
								setTextareaCode(output);
							}
							else {
								setTextareaCode(noCodeMessage);
							}
						}
					}
					else {
						sourceCode = output;
						// passing the raw string not the xml
						//if (showSourceCode) {
							setTextareaCode(output);
						//}
						//else {
						//	setTextareaCode(noCodeMessage);
						//}
					}
					
				}
				else {
					sourceCode = "";
					setTextareaCode("");
				}
			}
			
			
			/**
			 * Get application code
			 * */
			public function getDocumentCode():String {
				updateTarget(radiate.selectedDocument.instance);
				
				return sourceCode;
			}
			
			/**
			 * Get the vertical position string for HTML
			 * */
			/*public function getVerticalPositionHTML(instance:IVisualElement, propertyModel:Styles, stylesValue:String = "", isBasicLayout:Boolean = true):String {
				
				if (!isBasicLayout) return stylesValue;
				
				if (instance.verticalCenter!=null) {
					stylesValue += "display:block;margin:" + instance.verticalCenter + " auto;";
					stylesValue = stylesValue.replace("absolute", "relative");
					
					propertyModel.display = Styles.BLOCK;
					propertyModel.position = Styles.RELATIVE;
					propertyModel.margin = instance.verticalCenter + " auto;";
					
					return stylesValue;
				}
				else if (instance.top!=null || instance.bottom!=null) {
					stylesValue += instance.top!=null ? "top:" + instance.top + "px;" : "";
					stylesValue += instance.bottom!=null ? "bottom:" + instance.bottom + "px;" : "";
					if (instance.top!=null) propertyModel.top = instance.top + "px";
					if (instance.bottom!=null) propertyModel.bottom = instance.bottom + "px";
					return stylesValue;
				}
				else {
					stylesValue += "top:" + instance.y + "px;";
					propertyModel.top = instance.y + "px;";
				}
				
				return stylesValue;
			}*/
			
			
			/**
			 * Get the document code and dispatch a preview event.
			 * */
			protected function previewButton_clickHandler(event:MouseEvent):void {
				var document:Object;
				
				if (!radiate.selectedDocument) return;
				
				if (!isCodeModifiedByUser) {
					var code:String = getDocumentCode(); // puts document code into text area
				}
				
				// allow to swap between preview and non preview
				if (!radiate.isPreviewDocumentVisible()) {
					radiate.openDocumentPreview(radiate.selectedDocument, true);
					document = radiate.getDocumentPreview(radiate.selectedDocument);
					
					if (document is IFrame) {
						document.content = wrapInPreview(sourceCode);
					}
					
					//radiate.dispatchPreviewEvent(codeModelTextArea.text, String(codeType.selectedItem));
				}
				else {
					radiate.openDocument(radiate.selectedDocument);
					//radiate.dispatchPreviewEvent(codeModelTextArea.text, "");
				}
			}
			
			
			/**
			 * Text has changed in the textarea. Update preview if visible
			 * */
			protected function sparkTextArea_changeHandler(event:TextOperationEvent = null):void {
				//Radiate.log.info("Text area code changed");
				
				updatePreviewDocument();
				
				if (sparkSyntaxHighlighter) {
					//sparkSyntaxHighlighter.highlightCode();
				}
				
				if (codeType.selectedItem == HTML) {
					isCodeModifiedByUser = true;
				}
				
				lastTextAreaValue = sparkTextArea.text;
				
			}
			
			/**
			 * MX TextArea change
			 * */
			private function mxTextAreaChangeHandler():void {
				updatePreviewDocument();
				mxSyntaxHighlighter.highlightCode();
				// saveData(); this was attempt to add undo history to mxTextArea - didn't work
				lastTextAreaValue = mxTextArea.text;
				
				
				if (codeType.selectedItem == HTML) {
					isCodeModifiedByUser = true;
				}
				
				isValid = XMLUtils.isValidXML(lastTextAreaValue);
				
				if (!isValid) {
					error = XMLUtils.validationError;
					errorMessage = XMLUtils.validationErrorMessage;
				}
				else {
					error = null;
					errorMessage = null;
				}
			}
			
			/**
			 * AS3 TextArea change
			 * */
			protected function as3TextArea_changeHandler(event:TextOperationEvent):void {
				
				updatePreviewDocument();
				
				
				if (codeType.selectedItem == HTML) {
					isCodeModifiedByUser = true;
				}
				
				lastTextAreaValue = as3TextArea.text;
			}
			
			
			/**
			 * Handle updating preview and set if code is modified by user
			 * */
			public function updatePreviewDocument():void {
				
				if (updateCodeLive.selected) {
					
					if (radiate.isPreviewDocumentVisible()) {
						var preview:Object = radiate.getDocumentPreview(radiate.selectedDocument);
						
						if (preview is IFrame) {
							preview.content = wrapInPreview(getTextAreaCode());
						}
						
						//radiate.dispatchPreviewEvent(codeModelTextArea.text, String(codeType.selectedItem));
					}
					//radiate.dispatchCodeUpdatedEvent(codeModelTextArea.text, HTML);
				}
				
			}
			
			/**
			 * 
			 * */
			protected function showSelection_clickHandler(event:MouseEvent):void {
				update(true);
			}
			
			/**
			 * Indicates when the user has typed in the text area
			 * */
			[Bindable]
			public var isCodeModifiedByUser:Boolean;
			
			/**
			 * Show borders around HTML elements
			 * */
			[Bindable]
			public var showBorders:Boolean;
			
			/**
			 * Use SVG button class
			 * */
			[Bindable]
			public var useSVGButtonClass:Boolean = true;
			
			/**
			 * Show full HTML page source
			 * */
			[Bindable]
			public var showFullHTMLPageSource:Boolean = false;
			
			/**
			 * Show only HTML
			 * */
			[Bindable]
			public var showOnlyHTML:Boolean = false;
			
			/**
			 * Do not show source code. Syntax highlighting source code can be 
			 * performance intensive so we allow the option to disable it. 
			 * */
			[Bindable]
			public var showSourceCode:Boolean = true;
			
			/**
			 * Show only CSS
			 * */
			[Bindable]
			public var showOnlyCSS:Boolean = false;
			
			/**
			 * Create screen shot and add as background image of HTML page 
			 * */
			[Bindable]
			public var showBackgroundImage:Boolean = false;
			
			/**
			 * 
			 * */
			protected function resyncButton_clickHandler(event:MouseEvent):void {
				isCodeModifiedByUser = false;
				update(true);
			}
			
			/**
			 * Updates the code to show the selected item or document
			 * */
			public function update(dispatchCodeUpdatedEvent:Boolean = false):void {
				radiate = Radiate.getInstance();
				
				if (!radiate.target && !radiate.selectedDocument) return;
				
				if (showSelection.selected) {
					updateTarget(radiate.target);
				}
				else {
					updateTarget(radiate.selectedDocument.instance);
				}
				
				if (dispatchCodeUpdatedEvent) {
					
					//if (radiate.isPreviewDocumentVisible()) {
					document = radiate.getDocumentPreview(radiate.selectedDocument);
					
					if (document is IFrame) {
						document.content = wrapInPreview(sourceCode);
					}
						
						//radiate.dispatchPreviewEvent(codeModelTextArea.text, String(codeType.selectedItem));
					//}
					
					radiate.dispatchCodeUpdatedEvent(sourceCode, HTML, openInSeparateWindow.selected);
				}
				
				if (radiate.target is Application) {
					targetNameLabel.text = "Application";
				}
				else {
					targetNameLabel.text = ClassUtils.getIdentifierOrName(radiate.target, true, true);
				}
				/*
				var functionName:String = "createEditor";
				var result:Object;
				if (currentState=="iframe" && !createdEditor) {
					editor.content = "<div id='editor' style='display:block;position:absolute;top:0px;left:0px;right:0px;bottom:0px;height:100%;'></div>";
					editor.validateNow();
					result = ExternalInterface.call(functionName);
					result = ExternalInterface.call("setEditorText", codeModelTextArea.text);
                	createdEditor = true;
				}*/
				
				return;
				
			}
			
			private function callback():void {
				trace("CALLBACK");
			}
			
			private var aceEditorCreated:Boolean;
			private var aceEditorVisible:Boolean;
			
			/**
			 * Get a tag with less than or greater than wrapped around it. 
			 * */
			private function getWrapperTag(wrapperTag:String = "", end:Boolean = false, styles:String = ""):String {
				var output:String = "";
				
				if (wrapperTag=="") return "";
				
				if (end) {
					output = "</" + wrapperTag + ">";
					return output;
				}
				
				output += "<" + wrapperTag;
				
				if (styles) {
					output += " style=\"" + styles + "\"" ;
				}
				
				output += ">";
				
				return output;
			}
			
			/**
			 * Enable or disable live updating as on target change, property change and
			 * user code changes. 
			 * 
			 * If user unchecks and is modified then do not update. 
			 * Resync button will visible for them to update themselves. 
			 * */
			protected function updateCodeLive_changeHandler(event:Event):void {
				
				
				if (updateCodeLive.selected) {
					radiate.dispatchCodeUpdatedEvent(sourceCode, HTML);
				}
				else {
					if (!isCodeModifiedByUser) {
						radiate.dispatchCodeUpdatedEvent(sourceCode, HTML);
					}
				}
			}
			
			
			protected function openInSeparateWindow_changeHandler(event:Event):void {
				
				update();
			}
			
			protected function editor_updateCompleteHandler(event:FlexEvent):void {
				
				var result:Object = ExternalInterface.call("updateHeight", editor.height);
				//trace(result);
			}
			
			private var dataArray:Array= new Array();
              
			private var currentData:int;
			
			private function saveData():void {
			
				if (dataArray.length<10) {
				    dataArray.push(mxTextArea.text);
				}
				else {
					dataArray.splice(0,1);
					dataArray.push(mxTextArea.text);
				}
				
				currentData= dataArray.length-1;
			}

			private function undo():void {
				
				if (currentData>0) {
					mxTextArea.text=dataArray[currentData-1];
					currentData=currentData-1;
				}
			}
			
			private function redo():void {
				if (currentData<dataArray.length-1){
					mxTextArea.text=dataArray[currentData+1];
					currentData=currentData+1;
				}
			}
			
			/**
			 * Last source code
			 * */
			[Bindable]
			public var sourceCode:String;
			
			public var lastTextAreaValue:String;
			
			public var mxSyntaxHighlighter:SyntaxHighlighter;
			public var sparkSyntaxHighlighter:SyntaxHighlighter;
			
			public function getTextAreaCode():String {
				
				if (currentState=="normal") {
					return sparkTextArea.text;
				}
				else if (currentState=="highlight2") {
					return as3TextArea.text;
				}
				else if (currentState=="highlight") {
					return mxTextArea.text;
				}
				else if (currentState=="editor") {
					var result:String = ExternalInterface.call("getEditorText");
					return result;
				}
				
				return null;
			}
			
			/**
			 * Put the generated code into a text area
			 * */
			public function setTextareaCode(value:String):void {
				var createEditor:String = "createEditor";
				var result:Object;
				
				if (currentState=="normal") {
					sparkTextArea.text = value;
					
					if (lastTextAreaValue==value) {
						return;
					}
					
					sparkTextArea.text = value;
					lastTextAreaValue = value;

					if (!sparkSyntaxHighlighter) {
						sparkSyntaxHighlighter = new SyntaxHighlighter(sparkTextArea);
						sparkSyntaxHighlighter.timerInterval = 200;
						sparkSyntaxHighlighter.cssString = SyntaxHighlighter.CRIMSON_EDITOR_CSS;
					}
					
					sparkSyntaxHighlighter.highlightCode();
					aceEditorVisible = false; // temp for now
				}
				
				else if (currentState=="highlight2") {
					as3TextArea.text = value;
					
					if (lastTextAreaValue==value) {
						return;
					}
					
					as3TextArea.text = value;
					lastTextAreaValue = value;
/*
					if (!sparkSyntaxHighlighter) {
						sparkSyntaxHighlighter = new SyntaxHighlighter(sparkTextArea);
						sparkSyntaxHighlighter.timerInterval = 1;
						sparkSyntaxHighlighter.cssString = SyntaxHighlighter.CRIMSON_EDITOR_CSS;
					}
					
					sparkSyntaxHighlighter.highlightCode();*/
					aceEditorVisible = false; // temp for now
				}
				else if (currentState=="highlight") {
					
					if (lastTextAreaValue==value && mxSyntaxHighlighter) {
						return;
					}
					
					if (mxTextArea) {
						mxTextArea.text = value;
					}
					
					lastTextAreaValue = value;

					if (!mxSyntaxHighlighter) {
						mxSyntaxHighlighter = new SyntaxHighlighter(mxTextArea);
						mxSyntaxHighlighter.timerInterval = 20;
						mxSyntaxHighlighter.cssString = SyntaxHighlighter.CRIMSON_EDITOR_CSS;
					}
					
					mxSyntaxHighlighter.highlightCode();
					aceEditorVisible = false; // temp for now
				}
				else if (currentState=="editor") {
					
					if (!aceEditorCreated) {
						editor.content = "<div id='editor1' style='display:block;position:absolute;top:0px;left:0px;right:0px;bottom:0px;height:100%;width:100%'></div>";
						//editor.content = " ";
						editor.validateNow();
						result = ExternalInterface.call(createEditor, "editor0", ExternalInterface.objectID);
						ExternalInterface.addCallback("editorChange", editorChange);
						ExternalInterface.addCallback("cursorChange", cursorChange);
	                	aceEditorCreated = true;
					}
					
					settingEditorText = true;
					result = ExternalInterface.call("setEditorText", value);
					settingEditorText = false;
					
				}
				
			}
			
			protected function editorType_changeHandler(event:IndexChangeEvent):void {
				currentState = event.currentTarget.selectedItem.name;
				setTextareaCode(sourceCode);
			}
			
			public function editorChange(value:String = ""):void {
				if (settingEditorText || value==sourceCode) return;
				updatePreviewDocument();
			}
			
			public function cursorChange(value:String = ""):void {
				//trace("cursor change:" + getTimer());
			}
			
			protected function editor_resizeHandler(event:ResizeEvent):void {
				//trace("resize from : " + event.currentTarget);
				ExternalInterface.call("resizeEditor");
			}
			
			public var settingEditorText:Boolean;
			
			private var htmlExporter:HTMLDocumentExporter;
			
			private var androidExporter:AndroidDocumentExporter;
			
			private function wrapInPreview(source:String):String {
				var componentTree:ComponentDescription = radiate.selectedDocument.componentDescription;
				var targetDescription:ComponentDescription;
				
				if (showSelection.selected) {
					targetDescription = DisplayObjectUtils.getTargetInComponentDisplayList(radiate.target, componentTree);
				}
				else {
					targetDescription = DisplayObjectUtils.getTargetInComponentDisplayList(radiate.selectedDocument.instance, componentTree);
				}
				
				if (targetDescription==null || radiate.target == componentTree.instance) {
					targetDescription = componentTree;
				}
				
				var output:String = "<div id=\"applicationContainer\" style=\"position:absolute;";
				//output += "width:" + (component.instance.width + 40) + "px;";
				output += "width:100%;";
				output += "height:" + (targetDescription.instance.height + 40) + "px;";
				output += "background-color:#666666;\">" + source + "</div>";
				
				return output;
			}
			
			protected function mxTextArea_keyUpHandler(event:KeyboardEvent):void {
				if (event.keyCode==Keyboard.Z) {
					if (event.ctrlKey && !event.shiftKey) {
						undo();
					}
					if (event.ctrlKey && event.shiftKey) {
						redo();
					}
				}
			}
			
			protected function getHTMLButton_clickHandler(event:MouseEvent):void {
				var htmlText:String = mxTextArea.htmlText;
				trace(htmlText);
			}
			
			protected function showBorders_clickHandler(event:MouseEvent):void {
				showBorders = showBordersCheckbox.selected;
				update(true);
			}
			
			protected function useSVGButtonClassCheckbox_changeHandler(event:Event):void {
				useSVGButtonClass = useSVGButtonClassCheckbox.selected;
				update(true);
			}
			
			protected function showFullHTMLCheckbox_clickHandler(event:MouseEvent):void {
				showFullHTMLPageSource = showFullHTMLCheckbox.selected;
				update(true);
			}
			
			protected function setStylesInline_clickHandler(event:MouseEvent):void {
				update(true);
			}
			
			protected function setZoom_clickHandler(event:MouseEvent):void {
				update(true);
			}
			
			protected function showOnlyHTML_clickHandler(event:MouseEvent):void {
				showOnlyHTML = showOnlyHTMLCheckbox.selected;
				update(true);
			}
			
			protected function showOnlyCSS_clickHandler(event:MouseEvent):void {
				showOnlyCSS = showOnlyCSSCheckbox.selected;
				update(true);
			}
			
			protected function showBackgroundImageCheckbox_clickHandler(event:MouseEvent):void {
				showBackgroundImage = showBackgroundImageCheckbox.selected;
				update(true);
			}
			
			protected function showSourceCodeCheckbox_clickHandler(event:MouseEvent):void {
				showSourceCode = showSourceCodeCheckbox.selected;
				update(true);
			}
			
			protected function showOriginalSourceLabel_clickHandler(event:MouseEvent):void {
				var selectedDocument:IDocument = radiate.selectedDocument as IDocument;
				
				if (selectedDocument) {
					Radiate.log.info(selectedDocument.originalSource);
				}
				else {
					Radiate.log.info("Please select a document");
				}
			}
			
			protected function showProjectSourceLabel_clickHandler(event:MouseEvent):void {
				var selectedProject:IProject = radiate.selectedProject as IProject;
				
				if (selectedProject) {
					Radiate.log.info(selectedProject.source);
				}
				else {
					Radiate.log.info("Please select a project");
				}
			}
			
		]]>
	</fx:Script>
	
	<fx:Declarations>
		
		<fx:Object id="as3TextArea"/>
		
		<handlers:EventHandler eventName="click" target="{copyIcon}" setTriggerEvent="true">
			
			<clipboard:CopyToClipboard data="{sourceCode}" 
									   targetAncestor="{this}" 
									   allowNullData="true">
				<clipboard:successEffect>
					<status:ShowStatusMessage message="Code copied to the clipboard"/>
				</clipboard:successEffect>
				<clipboard:noDataEffect>
					<status:ShowStatusMessage message="Nothing to copy to the clipboard"/>
				</clipboard:noDataEffect>
				<clipboard:errorEffect>
					<status:ShowStatusMessage message="An error occurred while attempting to copy to the clipboard"/>
				</clipboard:errorEffect>
			</clipboard:CopyToClipboard>
			
		</handlers:EventHandler>
		
		<fx:String id="html5boilerplate">
<![CDATA[<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <script src="js/vendor/modernizr-2.6.2.min.js"></script>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

<!--template_content-->

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\\/script>')</script>
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>

        <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
        <script>
            (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
            function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
            e=o.createElement(i);r=o.getElementsByTagName(i)[0];
            e.src='//www.google-analytics.com/analytics.js';
            r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
            ga('create','UA-XXXXX-X');ga('send','pageview');
        </script>
    </body>
</html>
]]>
		</fx:String>
		
			<!--<![CDATA[<link rel="stylesheet" href="css/normalize/2.1.2/normalize.css"/>]]>-->
		<fx:String id="stylesheets">
			<![CDATA[]]>
		</fx:String>
		<fx:String id="css">
			<![CDATA[
*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
]]>
		</fx:String>
		<fx:String id="showBordersCSS">
			<![CDATA[
*, *:before, *:after {
  outline:1px dotted red;
}
]]>
		</fx:String>
		
		<!--- cause all padding and borders to be inside width and height 
		http://www.paulirish.com/2012/box-sizing-border-box-ftw/
		-->
		<fx:String id="borderBoxCSS">
			<![CDATA[
*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
]]>
		</fx:String>
		
		<!--- 
		adds zoom css for replicating preview
		-->
		<fx:String id="zoomCSS">
			<![CDATA[
IFRAME_ID {
    zoom: ZOOM_VALUE;
    -moz-transform: scale(ZOOM_VALUE);
    -moz-transform-origin: 0 0;
    -o-transform: scale(ZOOM_VALUE);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(ZOOM_VALUE);
    -webkit-transform-origin: 0 0;
}
]]>
		</fx:String>
		
		
		<!-- If you use .button it causes sizing issues where the size of the button is 0 
		Firefox: 
		Paste the following code into the editor after all other html code (from style tag to style tag).
		And the class of the HTML button is set to class="button"
		
		Fix: 
		Rename "button" to "buttonSkin" and set class="buttonSkin". In time this will point to actual skins and defined styles.
		Look at buttonCSS2. 
		-->
		<fx:String id="buttonCSS">
			<![CDATA[
.button {
	position: absolute;
	background: url(assets/svg/button_skin_up.svg) 0 0 no-repeat;
	border: 0px;
}

.button:hover {
	background: url(assets/svg/button_skin_over.svg) 0 0 no-repeat;
}

.button:active {
	background: url(assets/svg/button_skin_down.svg) 0 0 no-repeat;
}
]]>
		</fx:String>
		
		
		<fx:String id="buttonCSS2">
			<![CDATA[
.buttonSkin {
	background: url(assets/svg/button_skin_up.svg) 0 0 no-repeat;
	border: 0px;
}

.buttonSkin:hover {
	background: url(assets/svg/button_skin_over.svg) 0 0 no-repeat;
	border: 0px;
}

.buttonSkin:active {
	background: url(assets/svg/button_skin_down.svg) 0 0 no-repeat;
	border: 0px;
}
]]>
		</fx:String>
	</fx:Declarations>
	
	<s:states>
		<s:State name="highlight"/>
		<s:State name="normal"/>
		<s:State name="highlight2"/>
		<s:State name="editor"/>
	</s:states>
	
	<s:layout>
		<s:VerticalLayout gap="8"/>
	</s:layout>
	
	
	<!-- FIRST ROW -->
	<s:HGroup left="0" right="0" 
			  width="100%"
			  clipAndEnableScrolling="true" 
			  paddingLeft="6" 
			  paddingRight="10"
			  verticalAlign="baseline"
			  >

		<s:Label id="targetNameLabel" 
				 minWidth="150"
				 color="#999999" 
				 />

		
		<!--
		<s:Label minWidth="150"
				 color="#A6a5a5"
				 includeIn="editor"
				 text="This editor cannot edit in Firefox"
				 visible="false"
				 />
		
		<s:Label minWidth="150"
				 color="#A6a5a5"
				 includeIn="highlight"
				 text="This editor has no undo or redo"
				 visible="false"
				 />
		
		
		<s:Label minWidth="150"
				 color="#A6a5a5"
				 includeIn="normal"
				 text="This editor has no syntax highlighting"
				 visible="false"
				 />-->
		
		<s:Spacer width="100%"/>
		
		<s:CheckBox id="updateCodeLive" 
					selected="true"
					label="Update Live"
					visible="{!exportWindow &amp;&amp; codeType.selectedItem==HTML}"
					includeInLayout="{!exportWindow}"
					change="updateCodeLive_changeHandler(event)"/>
		
		<s:Button id="resyncButton" 
				  label="Resync" 
				  enabled="{isCodeModifiedByUser}" 
				  click="resyncButton_clickHandler(event)"
				  visible="{!exportWindow &amp;&amp; codeType.selectedItem==HTML}"
				  includeInLayout="{!exportWindow}"
				  />
		
		<s:Button label="Preview HTML" 
				  enabled="{codeType.selectedItem==HTML}" 
				  visible="{!exportWindow &amp;&amp; codeType.selectedItem==HTML}"
				  includeInLayout="{!exportWindow}"
				  click="previewButton_clickHandler(event)"/>
		
		<s:Label text="Editor type:"
				 color="#A6a5a5" 
				 visible="false"
					 includeInLayout="false"
				 />
		
		<s:ButtonBar id="editorType" 
					 requireSelection="true"
					 selectedIndex="0"
					 labelField="name"
					 initialize="editorType.dataProvider = new ArrayList(states);editorType.selectedIndex = 0;"
					 change="editorType_changeHandler(event)"
					 visible="false"
					 includeInLayout="false">
		</s:ButtonBar>
		
		<s:Label text="Language type:"
				 color="#A6a5a5" 
				 />
		
		
		<s:ButtonBar id="codeType" 
						selectedIndex="0"
						change="codeType_changeHandler(event)">
			<s:dataProvider>
				<s:ArrayList>
					<fx:String>{MXML}</fx:String>
					<fx:String>{HTML}</fx:String>
					<fx:String>{ANDROID}</fx:String>
				</s:ArrayList>
			</s:dataProvider>
		</s:ButtonBar>
		
		<c:ImageButton id="copyIcon" 
					   source="{Radii8LibraryAssets.copy}" 
					   toolTip="Copy the code to the Clipboard"
					   verticalAlign="middle"
					   useHandCursor="true"
					   />
	</s:HGroup>
	
	<!-- SECOND ROW -->
	<s:TileGroup left="0" 
				 right="0" 
			  top="28"
			  width="100%"
			  clipAndEnableScrolling="true" 
			  paddingLeft="6" 
			  paddingRight="10"
			  verticalAlign="top"
			  verticalGap="6"
			  horizontalGap="6"
			  maxHeight="45"
			  minHeight="24"
			  visible="{codeType.selectedItem==HTML}" 
			  includeInLayout="{codeType.selectedItem==HTML}" 
			  >
		
		
		<s:Button id="getHTMLButton" 
				  label="GetHTML" 
				  click="getHTMLButton_clickHandler(event)"
				  includeInLayout="false"
				  visible="false"
				  />
		
		<s:CheckBox id="openInSeparateWindow" 
					label="Open in Window" 
					visible="{codeType.selectedItem==HTML}" 
					includeInLayout="{codeType.selectedItem==HTML}" 
					change="openInSeparateWindow_changeHandler(event)"/>
		
		<s:CheckBox id="useSVGButtonClassCheckbox" 
					label="Use SVG Button" 
					visible="{codeType.selectedItem=='htmll'}" 
					includeInLayout="{codeType.selectedItem=='htmll'}" 
					change="useSVGButtonClassCheckbox_changeHandler(event)"/>
		
		
		<s:CheckBox id="showSourceCodeCheckbox" 
					selected="true"
					label="Show Source Code"
					click="showSourceCodeCheckbox_clickHandler(event)"/>
		
		<s:CheckBox id="showFullHTMLCheckbox" 
					selected="false"
					label="Show Full HTML"
					click="showFullHTMLCheckbox_clickHandler(event)"/>
		
		<s:CheckBox id="showBackgroundImageCheckbox" 
					selected="false"
					label="Show Background Image"
					click="showBackgroundImageCheckbox_clickHandler(event)"/>
		
		<s:CheckBox id="setStylesInline" 
					selected="false"
					label="Set styles inline"
					click="setStylesInline_clickHandler(event)"/>
	
		<s:CheckBox id="showOnlyCSSCheckbox" 
					selected="false"
					label="Show only styles"
					click="showOnlyCSS_clickHandler(event)"/>
		
		<s:CheckBox id="showOnlyHTMLCheckbox" 
					selected="false"
					label="Show only markup"
					click="showOnlyHTML_clickHandler(event)"/>
		
		<s:CheckBox id="showBordersCheckbox" 
					selected="false"
					label="Show Outlines"
					visible="{!exportWindow}"
					includeInLayout="{!exportWindow}"
					click="showBorders_clickHandler(event)"/>
	
		<s:CheckBox id="setZoom" 
					selected="true"
					label="Set zoom"
					visible="{!exportWindow}"
					includeInLayout="{!exportWindow}"
					click="setZoom_clickHandler(event)"/>
	
		<s:CheckBox id="showSelection" 
					selected="false"
					label="Show Selected Item"
					visible="{!exportWindow}"
					includeInLayout="{!exportWindow}"
					click="showSelection_clickHandler(event)"/>
		
		<!--<s:Spacer width="100%"/>-->
		
		<s:Spacer width="16"/>
		
	</s:TileGroup>
	
	<s:Group width="100%" height="100%" >
			
		<s:TextArea id="sparkTextArea" 
					top="55"
					focusColor="#585858"
					width="100%" height="100%" 
					fontFamily="Monaco,Menlo,Ubuntu Mono,Consolas,source-code-pro,monospace"
					borderVisible="false"
					paddingTop="8"
					fontSize="12"
					includeIn="normal"
					change="sparkTextArea_changeHandler(event)"
					>
			<s:keyFocusChange>
				event.preventDefault();
				event.currentTarget.insertText("\t");
	        </s:keyFocusChange>
		</s:TextArea>
		
		<!--<controls:AS3TextArea id="as3TextArea" 
					top="55"
					focusColor="#585858"
					width="100%" height="100%" 
					fontFamily="Monaco,Menlo,Ubuntu Mono,Consolas,source-code-pro,monospace"
					borderVisible="false"
					paddingTop="8"
					fontSize="12"
					includeIn="highlight2"
					change="as3TextArea_changeHandler(event)"
					>
			<controls:keyFocusChange>
				event.preventDefault();
				event.currentTarget.insertText("\t");
	        </controls:keyFocusChange>
		</controls:AS3TextArea>-->
		
		<mx:TextArea id="mxTextArea"  
					 top="0"
					 focusAlpha="0"
					 fontFamily="Monaco,Menlo,Ubuntu Mono,Consolas,source-code-pro,monospace"
					 borderVisible="false"
					 paddingTop="8"
					 fontSize="12"
					 width="100%" height="100%"
					 keyUp="mxTextArea_keyUpHandler(event)"
					 change="mxTextAreaChangeHandler()"
					 editable="true"
					 includeIn="highlight"
					 leading="0"
					 >
			<mx:keyFocusChange>
				event.preventDefault();
				//mx.controls.TextArea(event.currentTarget).insertText("\t");
	        </mx:keyFocusChange>
		</mx:TextArea>
		
		
		<flexiframe:IFrame id="editor" 
						   top="50" left="0"
						   width="100%" height="100%" 
						   includeIn="editor"
						   resize="editor_resizeHandler(event)"
						   overlayDetection="true"
						   >
		</flexiframe:IFrame>
		
	</s:Group>

	<s:Label id="showOriginalSourceLabel" 
			 paddingLeft="8"
			 paddingBottom="4"
			 color="#888888"
			 toolTip="Show original source code"
			 text="Show original document source code"
			 includeInLayout="false"
			 visible="false"
			 click="showOriginalSourceLabel_clickHandler(event)"
			 />

	<s:Label id="showProjectSourceLabel" 
			 paddingLeft="8"
			 paddingBottom="4"
			 color="#888888"
			 toolTip="Show project source code"
			 text="Show project source code"
			 includeInLayout="false"
			 visible="false"
			 click="showProjectSourceLabel_clickHandler(event)"
			 />
	
	<s:Label id="errorLabel" 
			 paddingLeft="8"
			 color="#f00000"
			 text="{errorMessage}"
			 includeInLayout="false"
			 visible="false"
			 width="100%"
			 />
</s:Group>