<?xml version="1.0" encoding="utf-8"?>
  <!-- 
      This program is free software: you can redistribute it and/or modify
      it under the terms of the GNU General Public License as published by
      the Free Software Foundation, either version 3 of the License.
  
      This program is distributed in the hope that it will be useful,
      but WITHOUT ANY WARRANTY; without even the implied warranty of
      MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
      GNU General Public License for more details.
  
      You should have received a copy of the GNU General Public License
      along with this program.  If not, see <http://www.gnu.org/licenses/>.
  
          Javier Quevedo Fernández 05-2009.
  -->
  <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" creationComplete="init();">
          <mx:Script>
                  <![CDATA[
                          import mx.events.FlexEvent;
                          import mx.binding.utils.BindingUtils;
                          import net.ximpel.classes.Helper
                          import net.ximpel.classes.Subject;
                          import net.ximpel.classes.OverlayCel;
                          import mx.core.Application;
                          [Bindable]
                          public var overlayCel : OverlayCel;
                          
                          [Bindable]
                          public var subjects : Array;
                          
                          private var fileReferenceList : FileReference; 
                          public function init():void{
                                  if (overlayCel){
                                          BindingUtils.bindProperty(overlayCel, "x", this.xInput, "text");
                                          BindingUtils.bindProperty(overlayCel, "y", this.yInput, "text");
                                          BindingUtils.bindProperty(overlayCel, "label", this.labelInput, "text");
                                          BindingUtils.bindProperty(overlayCel, "width", this.widthInput, "text");
                                          BindingUtils.bindProperty(overlayCel, "height", this.heightInput, "text");
                                          BindingUtils.bindProperty(overlayCel, "label", this.labelInput, "text");
                                          subjects = editorSubjects();
                                          leadsToBox.selectedIndex = -1;        
                                          if (overlayCel.leadsTo)
                                                  this.leadsToBox.text = overlayCel.leadsTo.id;
                                          leadsToBox.dataProvider = subjects.map(toId);
                                          leadsToBox.addEventListener(FlexEvent.VALUE_COMMIT, onLeadsToBoxCommit);
                                  }
                          }
                          
              private function toId(element:Subject, index:int, arr:Array):String {
                  return element.id;
              }                                
                          private function editorSubjects(): Array {
                  var ximpelEditor : XimpelEditor = Application.application as XimpelEditor;
                  return ximpelEditor.editorView.interactiveVideo.subjects;
              }
                          
                          private function selectFileHandler(event:Event):void{
                                  var fileReference : FileReference = FileReference(event.currentTarget);
                                  hoverImageInput.text = fileReference.name;
                          }
                          
                          private function selectImageSource (event:Event):void{
                                  
                              fileReferenceList = new FileReference();
                                  fileReferenceList.addEventListener(Event.SELECT, selectFileHandler);
                  fileReferenceList.browse();
                          }
                          
                          private function onOpenColorPicker(event:Event):void{
                                  BindingUtils.bindProperty(overlayCel, "color", this.colorPicker, "selectedColor");
                          }
                          private function onOpenHoverColorPicker(event:Event):void{
                                  BindingUtils.bindProperty(overlayCel, "hoverColor", this.hoverColorPicker, "selectedColor");
                          }
                          private function onAlphaChange(event:Event):void{
                                  BindingUtils.bindProperty(overlayCel, "alpha", this.alphaInput, "value");
                          }
                          private function onHoverAlphaChange(event:Event):void{
                                  BindingUtils.bindProperty(overlayCel, "hoverAlpha", this.hoverAlphaInput, "value");
                          }
                          
                          private function onLeadsToBoxCommit(event:Event):void{
                                  var __subject : Subject = Helper.getSubject(subjects, this.leadsToBox.text);
                                  if (__subject.id != "none")
                                                  overlayCel.leadsTo = __subject;
                                  else
                                          overlayCel.leadsTo = null;
                                  
                          }
                  ]]>
          </mx:Script>
     <mx:NumberValidator
                  id="xInputValidator"
              source="{xInput}" 
                  property="text"
                  allowNegative="false"
                  negativeError="The value must be a positive number" 
                     
      />
     <mx:NumberValidator
                  id="yInputValidator"
              source="{yInput}" 
                  property="text"
                   allowNegative="false"
                   negativeError="The value must be a positive number" 
      />
      <mx:NumberValidator
                  id="widthInputValidator"
              source="{widthInput}" 
                  property="text"
                  minValue="1"
                  lowerThanMinError="The width must be a number greater than 0"   
      />   
  <mx:NumberValidator
                  id="heightInputValidator"
              source="{heightInput}" 
                  property="text"
                  minValue="1"
                  lowerThanMinError="The height must be a number greater than 0"                   
      />   
  
          <mx:Form  horizontalCenter="0">
                  <mx:FormHeading label="Overlay Cel editor" />
                  <mx:FormItem label="Label">
                      <mx:TextInput id="labelInput" text="{overlayCel.label}" />
                  </mx:FormItem>
                  <mx:FormItem label="X">
                      <mx:TextInput id="xInput" text="{overlayCel.x}" />
                  </mx:FormItem>
                  <mx:FormItem label="Y">
                      <mx:TextInput id="yInput" text="{overlayCel.y}" />
                  </mx:FormItem>               
                     <mx:FormItem label="Width">
                      <mx:TextInput id="widthInput" text="{overlayCel.width}" />
                  </mx:FormItem>
                  <mx:FormItem label="Height">
                      <mx:TextInput id="heightInput" text="{overlayCel.height}" />
                  </mx:FormItem>               
                  <mx:FormItem label="Color">
                          <mx:ColorPicker id="colorPicker" showTextField="true" open="onOpenColorPicker(event)" selectedColor="{uint(overlayCel.color)}" />
                  </mx:FormItem>
                  <mx:FormItem label="Alpha">
                      <mx:HSlider id="alphaInput" minimum="0.0" maximum="1.0" snapInterval="0.01"  change="onAlphaChange(event)" value="{overlayCel.alpha}"  />
                  </mx:FormItem>
                          <mx:FormItem label="Hover Alpha">
                      <mx:HSlider id="hoverAlphaInput" minimum="0.0" maximum="1.0" snapInterval="0.01"  change="onHoverAlphaChange(event)" value="{overlayCel.hoverAlpha}"  />
                  </mx:FormItem>                
                  <mx:FormItem label="Hover Color">
                          <mx:ColorPicker id="hoverColorPicker" showTextField="true" open="onOpenHoverColorPicker(event)" selectedColor="{uint(overlayCel.hoverColor)}" />
                  </mx:FormItem>
                  <mx:FormItem label="Hover Image">
                      <mx:HBox width="100%">
                              <mx:TextInput id="hoverImageInput" width="98" text="{overlayCel.hoverImage}" />
                              <mx:LinkButton label="Select" click="selectImageSource(event)" />
                      </mx:HBox>
                  </mx:FormItem>
                 <mx:FormItem label="Leads to">
                      <mx:ComboBox id="leadsToBox" text="{overlayCel.leadsTo.id}" />
                   </mx:FormItem>
                  </mx:Form>
  </mx:Canvas>