<!-- サインイン ユーザーの情報表示エリア -->
<!-- Sign In コントロール -->
<msgr:sign-in size="medium" theme="blue"></msgr:sign-in>
<msgr:if cid="$user" condition="online"><!-- If コントロール -->
        <!-- 表示アイコン Display Picture コントロール -->
    <div id="userPicture"><msgr:display-picture cid="$user" presence-enabled="false" size="small"></msgr:display-picture></div>

        <!-- 名前 Display Name コントロール -->
    <div><msgr:display-name cid="$user" linked="true"></msgr:display-name></div>

        <!-- 表示メッセージ Personal Message コントロール -->
    <div id="userMessage"><msgr:personal-message cid="$user"></msgr:personal-message></div>
</msgr:if>

var User;

function onAuthenticated(e) {
    // 認証完了

    // User オブジェクト取得
    User = e.get_user();
}

function onSignedIn(e) {
    // 送信ボタンの有効化
    $("#sendButton").removeAttr("disabled");

    // オンラインのメンバーに更新があった場合に呼ぶ関数を指定
    User.get_onlineContacts().add_collectionChanged(onlineContactsCollectionChanged);

    // 会話コレクションに更新があった場合に呼ぶ関数を指定
    User.get_conversations().add_collectionChanged(conversationCollectionChanged);
}

function onSignedOut(e) {
    // 送信ボタンの無効化
    $("#sendButton").attr("disabled", "disabled");
}

function onlineContactsCollectionChanged() {
    var list = $("#onlineContacts"); // <select>要素
    var selectedCid = list.val(); // 選択されている項目の value 属性値を取得
    var existed = false;
    list.children().remove(); // 一度 <select>要素内の項目を削除

    // オンラインのメンバー列挙
    for (var i = 0; i < User.get_onlineContacts().get_count(); ++i) {
        var c = User.get_onlineContacts().get_item(i);
        var cid = c.get_cid(); // メンバーの CID 取得
        if (cid == selectedCid) {
            existed = true;
        }
        // <option>要素の追加 value属性には CID を指定し、表示テキストはメンバーの名前を指定
        list.append($("<option>").attr("value", cid).text(c.get_displayName()));
    }

    if (existed) {
        // 一覧の更新前に選択されていた項目を選択
        list.val(selectedCid);
    }
}