<div id="chat-application"
  data-username="<%=user%>"
  data-token="<%=token%>"
  data-chat-server-url="<%=chatServerURL%>"
  data-chat-interval-chat="<%=chatIntervalChat%>"
  data-chat-interval-session="<%=chatIntervalSession%>"
  data-chat-interval-status="<%=chatIntervalStatus%>"
  data-chat-interval-users="<%=chatIntervalUsers%>"
  data-public-mode="<%=publicMode%>"
  data-public-mode-enabled="<%=publicModeEnabled%>"
  data-view="<%=view%>"
  data-fullscreen="<%=fullscreen%>"
  data-weemo-key="<%=weemoKey%>"

  data-label-panel-error1="&{benjp.chat.panel.error1}"
  data-label-panel-error2="&{benjp.chat.panel.error2}"
  data-label-panel-login1="&{benjp.chat.panel.login1}"
  data-label-panel-login2="&{benjp.chat.panel.login2}"
  data-label-panel-demo="&{benjp.chat.panel.demo}"
  data-label-panel-public="&{benjp.chat.panel.public}"
  data-label-display-name="&{benjp.chat.display.name}"
  data-label-email="&{benjp.chat.email}"
  data-label-save-profile="&{benjp.chat.save.profile}"
  data-label-title="&{benjp.chat.title}"
  data-label-new-messages="&{benjp.chat.new.messages}"
  data-label-available="&{benjp.chat.available}"
  data-label-away="&{benjp.chat.away}"
  data-label-donotdisturb="&{benjp.chat.donotdisturb}"
  data-label-invisible="&{benjp.chat.invisible}"
  data-label-current-status="&{benjp.chat.current.status}"
  data-label-no-messages="&{benjp.chat.no.messages}"
  data-label-public-welcome="&{benjp.chat.public.welcome}"
  data-label-support-fullname="&{benjp.chat.support.fullname}"
  data-label-offline="&{benjp.chat.button.offline}"
  data-label-users="&{benjp.chat.button.users}"
  data-label-spaces="&{benjp.chat.button.spaces}"
  data-label-quote="&{benjp.chat.quote}"
  data-label-delete="&{benjp.chat.delete}"
  data-label-deleted="&{benjp.chat.deleted}"
  data-label-header-favorites="&{benjp.chat.favorites}"
  data-label-header-people="&{benjp.chat.people}"
  data-label-header-spaces="&{benjp.chat.spaces}"
  data-label-header-teams="&{benjp.chat.teams}"
  data-label-edit="&{benjp.chat.edit}"
>

  <div class="chat-sync-panel" style="display:none;"></div>
  <div class="chat-error-panel" style="display:none;"></div>
  <div class="chat-demo-panel" style="display:none;"></div>
  <div class="chat-login-panel" style="display:none;"></div>
  <div class="chat-about-panel" style="display:none;"></div>
<% if (!"public".equals(view)) { %>
  <div class="uiGrayLightBox clearfix input-prepend no-user-selection">
    <span class="menu-standard pull-left">
      <span class="avatar-user">
        <div class="activityAvatar avatarCircle" style="width:30px; height:30px;">
          <a rel="tooltip" data-placement="bottom" href="/portal/intranet/profile/benjamin" data-original-title="">
            <img class="avatar-image" onerror="this.src='/chat/img/Avatar.gif;'" src='/rest/jcr/repository/social/production/soc:providers/soc:organization/soc:<%=user%>/soc:profile/soc:avatar' width='30px' height='30px'  style="width:30px; height:30px;">
          </a>
        </div>
      </span>

      <div class="pull-left" style="position: relative;height: 26px;margin: 8px 5px 0 0;">
        <div class="uiActionWithLabel dropdown" data-toggle="dropdown"><span class="chat-status-chat chat-status-invisible" style="padding: 0;margin: 0;" data-toggle="tooltip" title="Change your status"></span></div>
        <span class="dropdown-menu chat-status-panel">
          <div class="chat-menu" status="available"><i class="chat-status chat-status-available"></i>&{benjp.chat.available}</div>
          <div class="chat-menu" status="away"><i class="chat-status chat-status-away"></i>&{benjp.chat.away}</div>
          <div class="chat-menu" status="donotdisturb"><i class="chat-status chat-status-donotdisturb"></i>&{benjp.chat.donotdisturb}</div>
          <div class="chat-menu" status="invisible"><i class="chat-status chat-status-invisible"></i>&{benjp.chat.invisible}</div>
        </span>
      </div>

      <label class="pull-left" style="margin-top: 5px; margin-bottom: 0;">
        <a href='/portal/intranet/profile/<%=user%>' class='label-user' target='_new'><%=(fullname.length()>29)?fullname.substring(0,29)+"...":fullname%></a>
        <% if ("DEV".equals(demoMode)) { %>
        <span class="label-demo">(Demo Mode)</span>
        <% } %>
      </label>
    </span>
    <span class="menu-standard pull-right">
      <a type="button" class="btn btn-weemo-download" title="&{benjp.chat.button.install}" href="#">
        <i class="icon-download-alt"></i> &{benjp.chat.button.install}</a>

      <div class="uiSearchForm uiSearchInput pull-right" style="margin-top: 6px;" data-placement="bottom" data-toggle="tooltip" title="Tip: use @ with username or space">
        <div onclick="event.cancelBubble=true;"><input class="span4" id="chat-search" type="text" ></div>
      </div>

    </span>
  </div>
  <div class="uiLeftContainerArea no-user-selection" style="padding: 15px 15px 0 0;">
    <div id="chat-users" class="uiBox">
      <span>&nbsp;</span>
    </div>
  </div>
  <% } %>
  <div class="uiRightContainerArea" style="padding: 15px 0 0 0; float:initial;">
    <div class="uiBox">
      <div class="room-detail" id="room-detail">

        <span class="room-detail-avatar">
          <div class="activityAvatar avatarCircle" style="width:30px; height:30px;">
            <a rel="tooltip" data-placement="bottom" class="target-avatar-link" href="" data-original-title="">
              <img class="avatar-image target-avatar-image" src='/chat/img/Avatar.gif;' width="30px" height="30px" style="width:30px; height:30px;">
            </a>
          </div>
        </span>

        <span class="target-user-fullname room-detail-fullname">
         &nbsp;
        </span>

        <span class="room-detail-button">
          <a type="button" class="btn btn-primary pull-right btn-weemo disabled" data-toggle="tooltip" title="Make a Video Call">
            <i class="icon-facetime-video icon-white"></i> &{benjp.chat.button.call}</a>
          <a type="button" class="btn btn-success pull-right btn-weemo-conf disabled" data-toggle="tooltip" title="Join a Conference">
            <i class="icon-facetime-video icon-white"></i> &{benjp.chat.button.join}</a>
        </span>


        <span class="team-button">
	        <ul class="nav pull-right uiDropdownWithIcon" style="margin-top: 15px;margin-right: 10px;">
            <li>
              <div class="uiActionWithLabel team-edit-button" href="javaScript:void(0)" data-toggle="tooltip" title="Edit team members"><i class="uiIconEditPage uiIconLightGray"></i>&nbsp;&{benjp.chat.edit}</div>
            </li>
          </ul>
        </span>

      </div>

      <div id="chats"></div>

      <div class="chat-message">

        <span class="pull-left" style="padding-left: 20px;">
          <span class="msg-button msg-emoticons no-user-selection" data-toggle="tooltip" title="Show emoticons" data-placement="right">&nbsp;</span><br>
        <!--span class="msg-button msg-help no-user-selection">&nbsp;</span-->
          <span class="msg-emoticons-panel no-user-selection" style="display:none">
            <span class="emoticon emoticon-smile-white emoticon-btn" data=":)">&nbsp;</span>
            <span class="emoticon emoticon-sad-white emoticon-btn" data=":(">&nbsp;</span>
            <span class="emoticon emoticon-big-smile-white emoticon-btn" data=":D">&nbsp;</span>
            <span class="emoticon emoticon-eye-blink-white emoticon-btn" data=";)">&nbsp;</span>
            <br>
            <span class="emoticon emoticon-surprise-white emoticon-btn" data=":O">&nbsp;</span>
            <span class="emoticon emoticon-no-voice-white emoticon-btn" data=":|">&nbsp;</span>
            <span class="emoticon emoticon-tongue-white emoticon-btn" data=":p">&nbsp;</span>
            <span class="emoticon emoticon-bow-white emoticon-btn" data="(bow)">&nbsp;</span>
            <br>
            <span class="emoticon emoticon-yes-white emoticon-btn" data="(y)">&nbsp;</span>
            <span class="emoticon emoticon-no-white emoticon-btn" data="(n)">&nbsp;</span>
            <span class="emoticon emoticon-star-white emoticon-btn" data="(star)">&nbsp;</span>
            <span class="emoticon emoticon-beer-white emoticon-btn" data="(beer)">&nbsp;</span>
            <br>
            <span class="emoticon emoticon-bug-white emoticon-btn" data="(bug)">&nbsp;</span>
            <span class="emoticon emoticon-cake-white emoticon-btn" data="(cake)">&nbsp;</span>
            <span class="emoticon emoticon-cash-white emoticon-btn" data="(cash)">&nbsp;</span>
            <span class="emoticon emoticon-coffee-white emoticon-btn" data="(coffee)">&nbsp;</span>
          </span>
        </span>

        <div class="meeting-actions pull-right dropup" data-placement="left" data-toggle="tooltip" title="Show collaborative actions">
          <div class="popover top meeting-action-popup">
            <div class="arrow">
            </div>
            <div class="popover-inner">
              <h3 class="popover-title">
                <span class="meeting-action-title"></span>
                <div class="pull-right uiActionWithLabel meeting-close-panel"><i class="uiIconClose uiIconLightGray"></i></div>
              </h3>
              <div class="popover-content meeting-action-content">
                <div class="meeting-action-panel meeting-action-link-panel" data-height="140" data-title="Link">
                  <input type="text" class="input-with-value" id="share-link-text" data-value="ex: http://www.exoplatform.com">
                  <a type="button" class="btn btn-primary pull-right share-link-button"><i class="icon-globe icon-white"></i> Share</a>
                </div>
                <div class="meeting-action-panel meeting-action-file-panel" data-height="200" data-title="File">
                  <span id="dropzone-container">
                    <div class="progressBar" id="dropzone">
                      <div class="progress">
                        <div class="bar" style="width: 0.0%;"></div>
                        <div class="label">Drop your file here</div>
                      </div>
                    </div>
                  </span>
                  <span class="action-label">&nbsp;or&nbsp;&nbsp;</span>
                  <br>
                  <form action="" id="chat-file-form" method="post" enctype="multipart/form-data">
                    <input type="hidden" name="room" value="---" id="chat-file-room" />
                    <input type="hidden" name="targetUser" value="---" id="chat-file-target-user" />
                    <input type="hidden" name="targetFullname" value="---" id="chat-file-target-fullname" />
                    <div class="chat-file-upload btn">
                      <span>Select Manually</span>
                      <input type="file" name="userfile" id="chat-file-file" />
                    </div>
                    <input type="submit" value="Select file" id="chat-file-submit" style="display:none" />
                  </form>
                </div>
                <div class="meeting-action-panel meeting-action-question-panel" data-height="140" data-title="Question">
                  <input type="text" class="input-with-value" id="question-text" data-value="What is your question?">
                  <a type="button" class="btn btn-primary pull-right question-button"><i class="icon-question-sign icon-white"></i> Ask</a>
                </div>
                <div class="meeting-action-panel meeting-action-hand-panel" data-height="140" data-title="Raise hand">
                  <input type="text" class="input-with-value" id="raise-hand-comment-text" data-value="Optional comment">
                  <a type="button" class="btn btn-primary pull-right raise-hand-button"><i class="icon-hand-up icon-white"></i> Raise your hand</a>
                </div>
                <div class="meeting-action-panel meeting-action-task-panel" data-height="190" data-title="Assign task">
                  <input type="text" class="input-with-value" data-value="Assignee" id="task-add-user" >
                  <input type="hidden" id="task-add-fullname" value="">
                  <div class="task-users-results" style="display:none;"></div>
                  <input type="text" class="input-with-value" data-value="Task" id="task-add-task">
                  <input type="text" class="input-with-value" data-value="Due" style="width:130px;" id="task-add-date" data-date="<%=today%>" >
                  <a type="button" class="btn btn-primary pull-right create-task-button"><i class="icon-check icon-white"></i> Post</a>
                </div>
                <div class="meeting-action-panel meeting-action-event-panel" data-height="220" data-title="Add event">
                  <input type="text" class="input-with-value" data-value="Event" id="event-add-summary">
                  <span class="action-label" style="display: inline-block;width: 40px;">from</span>
                  <input type="text" data-value="mm/dd/yyyy" data-date="<%=today%>" style="width:80px;" id="event-add-start-date">
                  <span class="uiSelectbox">
                    <select class="selectbox" id="event-add-start-time">
                      <option value="all-day">All Day</option>
                    </select>
                  </span>
                  <br>
                  <span class="action-label" style="display: inline-block;width: 40px;">to</span>
                  <input type="text" data-value="mm/dd/yyyy" data-date="<%=today%>" style="width:80px;" id="event-add-end-date">
                  <span class="uiSelectbox">
                    <select class="selectbox" id="event-add-end-time">
                      <option value="all-day">All Day</option>
                    </select>
                  </span>
                  <a type="button" class="btn btn-primary pull-right create-event-button"><i class="icon-calendar icon-white"></i> Post</a>
                </div>

              </div>
            </div>
          </div>
          <div class="uiActionWithLabel meeting-action-toggle" data-toggle="dropdown"><i class="uiIconComment uiIconLightGray"></i><i class="uiIconMiniArrowDown uiIconLightGray"></i></div>
          <ul class="dropdown-menu pull-right">
            <li class="meeting-action-link meeting-action-event" data-toggle="meeting-action-event-panel" style="display: none;"><a href="#"><i class="icon-calendar"></i> Add Event</a></li>
            <li class="meeting-action-link meeting-action-task" data-toggle="meeting-action-task-panel" style="display: none;"><a href="#"><i class="icon-check"></i> Assign Task</a></li>
            <li class="meeting-action-link" data-toggle="meeting-action-link-panel"><a href="#"><i class="icon-globe"></i> Share Link</a></li>
            <li class="meeting-action-link" data-toggle="meeting-action-file-panel" id="meeting-action-upload-link"><a href="#"><i class="icon-file"></i> Upload File</a></li>
            <li class="divider"></li>
            <!--li class="meeting-action-link" data-toggle="meeting-action-flag-panel"><a href="#"><i class="icon-flag"></i> Add to Agenda (Coming Soon)</a></li-->
            <li class="meeting-action-link" data-toggle="meeting-action-question-panel"><a href="#"><i class="icon-question-sign"></i> Ask a Question</a></li>
            <li class="meeting-action-link" data-toggle="meeting-action-hand-panel"><a href="#"><i class="icon-hand-up"></i> Raise Hand</a></li>
          </ul>
        </div>

        <div style="display: block;margin-left: 45px;margin-right: 54px;">
          <textarea type="text" name="text" id="msg" autocomplete="off" disabled></textarea>
        </div>

        <%/*
        <div class="meeting-action-panel meeting-action-flag-panel">
          <input type="text" class="span6 input-with-value" data-value="Topic to be discussed today?">
          <div class="pull-right uiActionWithLabel meeting-close-panel"><i class="uiIconClose uiIconLightGray"></i></div>
          <a type="button" class="btn btn-primary pull-right"><i class="icon-flag icon-white"></i> Post</a>
        </div>
        */%>

      </div>
    </div>
  </div>
</div>

<!-- ################################## -->
<!-- ######### TEXT MODAL ############ -->
<!-- ################################## -->
<div class="modal hide text-modal">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Text Discussion</h3>
  </div>
  <div class="modal-body">
    <textarea id="text-modal-area"></textarea>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn btn-primary text-modal-close">Close</a>
  </div>
</div>
<!-- ################################## -->
<!-- ######### EDIT MODAL ############ -->
<!-- ################################## -->
<div class="modal hide edit-modal">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>&{benjp.chat.edit}</h3>
  </div>
  <div class="modal-body">
    <textarea id="edit-modal-area" data-id="---"></textarea>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn edit-modal-cancel">&{benjp.chat.cancel}</a>
    <a href="#" class="btn btn-primary edit-modal-save">&{benjp.chat.save}</a>
  </div>
</div>
<!-- ################################## -->
<!-- ######### TEAM MODAL ############ -->
<!-- ################################## -->
<div class="modal hide team-modal">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>&{benjp.chat.team}</h3>
  </div>
  <div class="modal-body">
    <label>&{benjp.chat.team.name}</label><input type="text" id="team-modal-name" data-id="---" value="" />
    <label>&{benjp.chat.team.people}</label>
    <div class="team-users-list">
    </div>
    <div class="uiSearchForm uiSearchInput team-users-search">
      <div onclick="event.cancelBubble=true;">
        <input class="span3" id="team-add-user" type="text" >
        <label class="team-add-user-label">&{benjp.chat.team.help}</label>
      </div>
    </div>
    <div class="team-users-results" style="display:none;">
    </div>

  </div>
  <div class="modal-footer">
    <a href="#" class="btn team-modal-cancel">&{benjp.chat.cancel}</a>
    <a href="#" class="btn btn-primary team-modal-save">&{benjp.chat.save}</a>
  </div>
</div>
<!-- ################################## -->
<!-- ######### MIGRATION MODAL ############ -->
<!-- ################################## -->
<div class="modal hide help-modal" style="display:none;">
  <div class="modal-header">
    <h3>How to use Admin Command Line mode?</h3>
  </div>
  <div class="modal-body">
    If you're a host or administrator, you have access to specific commands :
    <ul>
      <li><b>/me [text]</b>: shows your name followed by the text you write. Ex: /me works from home ;</li>
      <li><b>/call</b>: starts a one to one or conference call from the current room you're in ;</li>
      <li><b>/join</b>: join an existing conference call ;</li>
      <li><b>/terminate</b>: force terminate a call in the Chat - this doesn't close Video process ;</li>
      <li><b>/export</b>: export current room's history (last 2000 messages by default) with text only format ;</li>
      <li><b>/help</b>: well, if you're here, you already figured how this one works ;</li>
    </ul>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn help-modal-cancel" onclick="javascript:jqchat('.help-modal').hide();">Close</a>
  </div>
</div>
