<?xml version="1.0" encoding="utf-8"?> 
<mx:Application 
  xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
  xmlns:rtc="AfcsNameSpace"> 
  
  <mx:Script>
    <![CDATA[
      import com.adobe.rtc.pods.simpleChatClasses.ChatMessageDescriptor;
      import com.adobe.rtc.events.ChatEvent;
      import com.adobe.rtc.pods.simpleChatClasses.SimpleChatModel;
      
      // This simple example just shows how this shared model can be made easily bindable for MXML.
      // See SimpleChatModel for details.
      
      [Bindable]
      public var chatModel:SimpleChatModel;
      protected function buildModel():void
      {
         // Create the model: just calling the constructor won't create the collection node or pass the messages.
         // Call subscribe and give it a shared ID while creating the model. 
         // The shared ID becomes the name of the collection node.
         chatModel = new SimpleChatModel();
         chatModel.sharedID = "myChat_SimpleChatModel";
         
         chatModel.subscribe();
         chatModel.addEventListener(ChatEvent.HISTORY_CHANGE, onChatMsg);
         this.addEventListener(KeyboardEvent.KEY_UP, onKeyStroke);
       }
      
      protected function submitChat(str:String):void
      {
         var cmd:ChatMessageDescriptor = new ChatMessageDescriptor();
         cmd.displayName = cSession.userManager.getUserDescriptor(cSession.userManager.myUserID).displayName;
         cmd.msg =  str;
         chatModel.sendMessage(cmd);
         chat_mesg_input.text = "";
       }
      
      protected function clearChat():void
      {
         chat_mesg_area.text = "";
         chatModel.clear();
       }
      
      protected function onChatMsg(p_evt:ChatEvent):void
      {
         if(p_evt.message != null && p_evt.message.msg != null && p_evt.message.displayName != null)
           chat_mesg_area.text += "\r\n" +  p_evt.message.displayName + ": " + p_evt.message.msg;
         else
           chat_mesg_area.text = "";
       }
      
      protected function onKeyStroke(p_evt:KeyboardEvent):void
      {
         if(p_evt.keyCode == Keyboard.ENTER) {
            submitChat(chat_mesg_input.text);
          } 
       }
      
      private function doLogin() : void
      {
         auth.userName = username.text;
         auth.password = password.text;
         cSession.login();
         loginForm.enabled = false;
       }
      
      private function onAuthSuccess( event : Event ) : void
      {
         vs.selectedIndex = 1;
         buildModel();
       }
      
      private function onAuthfail( event : Event ) : void
      {
         loginForm.enabled = true;
       }
      
    ]]>
  </mx:Script>
  
  <rtc:AdobeHSAuthenticator 
    authenticationSuccess="onAuthSuccess(event)"
    authenticationFailure="onAuthfail(event)"
    id="auth"  />
    
  <mx:ViewStack 
    id="vs"
    top="10" left="10" right="10" bottom="10" >
    
    <mx:Canvas width="100%" height="100%" >
      <mx:Panel title="Login:"
            horizontalCenter="0"
            verticalCenter="0"
            id="loginForm"
            defaultButton="{ login }">

        <mx:Form>

          <mx:FormItem label="Username:" width="100%">
            <mx:TextInput id="username" width="100%"/>
          </mx:FormItem>


          <mx:FormItem label="Password:"  width="100%">
            <mx:TextInput id="password" width="100%" displayAsPassword="true"/>
          </mx:FormItem>

        </mx:Form>

        <mx:ControlBar horizontalAlign="right">
          <mx:Button id="login"
                 label="Login"
                 enabled="{ username.text.length &gt; 0 &amp;&amp; password.text.length }"
                 click="doLogin()"/>
        </mx:ControlBar>


      </mx:Panel>
    </mx:Canvas>
    
    <rtc:ConnectSessionContainer roomURL="put your room url here"
                   id="cSession"
                   authenticator="{auth}"
                   width="100%"
                   height="100%"
                   autoLogin="false">

      <mx:Panel width="100%" height="100%"  title="Simple Chat">
        <mx:TextArea width="100%"
               height="100%"
               id="chat_mesg_area"/>

        <mx:ControlBar>
          <mx:TextInput width="100%"  id="chat_mesg_input"/>

          <mx:Button label="Submit Chat" click="submitChat(chat_mesg_input.text)"/>
          <mx:Button label="Clear Chat" click="clearChat()"/>

        </mx:ControlBar>
      </mx:Panel>
    </rtc:ConnectSessionContainer>
    
  </mx:ViewStack>  
    
  
</mx:Application>