jam-cloud/app/views/clients/_sidebar.html.erb

<div layout="sidebar" class="sidebar" style="display:none;">
    <div layout-sidebar-expander="visible" class="expander visible">
        <p>
            <%= image_tag "sidebar/expand_arrows_right.jpg" %>
        </p>
    </div>
    <div layout-sidebar-expander="hidden" class="expander hidden">
        <p>
            <%= image_tag "sidebar/expand_arrows_left.jpg" %>
        </p>
    </div>

    <!-- Search Box -->
    <div class="search">
        <div layout-panel="header" class="panel-header">
            <h2>search</h2>
        </div>
        <div class="searchbox">
            <form id="searchForm">
                <input id="search-input" autocomplete="off" type="text" name="search" placeholder="enter search terms" />
            </form>
            <div id="sidebar-search-header" style="margin: 4px 4px 8px 8px">
                <div class="left">
                    <strong><a id="sidebar-search-expand" style="color:#fff; text-decoration:underline">&laquo;&nbsp;EXPAND</a></strong>
                </div>
                <!-- search filter dropdown -->
                <div class="right">
                    Show:
                    <select>
                        <option>Musicians</option>
                        <option>Bands</option>
                        <option>Fans</option>
                        <option>Recordings</option>
                    </select>
                </div>
            </div>
        </div>
        <div style="clear:both;"></div><br />
        <!-- border between header and beginning of search results -->
        <div class="sidebar-search-result"></div>
        <div id="sidebar-search-results" class="results-wrapper">
        </div>
    </div>

    <!-- Friends -->
    <div layout="panel" layout-id="panelFriends">
        <div layout-panel="collapsed">
            F
        </div>
        <div layout-panel="expanded" class="panel expanded">
            <div layout-panel="header" class="panel-header">
                <h2>friends<div id="sidebar-friend-count" class="badge">0</div></h2>
            </div>
            <div layout-panel="contents" class="panelcontents">
                <ul id="sidebar-friend-list">
                </ul> 
            </div>
        </div>
    </div>

    <!-- Chat -->
    <div layout="panel" layout-id="panelChat">
        <div layout-panel="collapsed">
            C
        </div>
        <div layout-panel="expanded" class="panel expanded">
            <div layout-panel="header" class="panel-header">
                <h2>chat<div id="sidebar-chat-count" class="badge">0</div></h2>
            </div>
            <div layout-panel="contents" class="panelcontents">
                 <!-- chat message input -->
                <div class="chat-fixed">
                    <input id="chat-input" type="text" placeholder="enter message" /><br />
                    
                    <!-- send to box -->
                    <div class="chat-select">Send to: 
                        <select id="sidebar-chat-friend-list">
                            <option>Everyone</option>
                            <option>All Musicians</option>
                            <option>All Fans</option>
                        </select>
                    </div>
                </div>
                <ul id="sidebar-chat-list">
                </ul>
            </div>
        </div>
    </div>

    <!-- Notifications -->
    <div layout="panel" layout-id="panelNotifications">
        <div layout-panel="collapsed">
            N
        </div>
        <div layout-panel="expanded" class="panel expanded">
            <div layout-panel="header" class="panel-header">
                <h2>notifications<div id="sidebar-notification-count" class="badge">0</div></h2>
            </div>
            <div layout-panel="contents" class="panelcontents">
                <ul id="sidebar-notification-list">
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- Search result template -->
<script type="text/template" id="template-sidebar-search-result">
    <div user-id="{userId}" class="sidebar-search-result">
        <a class="avatar-small"><img src="{avatar_url}" /></a>
        <div class="result-name"><a href="{profile_url}">{userName}</a><br />
            <span class="result-location">{location}</span>
        </div><br />
        <a id="btn-connect-friend" class="button-orange smallbutton right">CONNECT</a>
        <br clear="all" />
    </div>
</script>

<!-- Friend panel template -->
<script type="text/template" id="template-friend-panel">
    <li class="{cssClass}">
        <div class="avatar-small"><img src="{avatar_url}" /></div>
        <div class="friend-name">
            {userName}<br/>
            <span class="friend-status">
                {status} {extra_info}
            </span>
        </div>
        <div class="friend-icon">{info_image_url}</div>
        <br clear="all" />
    </li>
</script>

<!-- Friend request confirmation template -->
<script type="text/template" id="template-sidebar-invitation-sent">
    <div user-id="{userId}" class="sidebar-search-connected">
        <div style="margin-top:10px;">
            <br />
            <img src="/assets/content/icon_goodquality.png" width="16" height="16" />
            <br />
            <b>Invitation Sent!</b><br />
            <a href="{profile_url}">View {first_name}&quot;s Profile</a>
        </div>
    </div>
</script>

<!-- Notification panel template -->
<script type="text/template" id="template-notification-panel">
    <li notification-id="{notificationId}">
        <div class="avatar-small"><img src="{avatar_url}" /></div>
        <div class="note-text">
            {text}
            <em>({date})</em>
            <div class="note-delete">
                <a>
                    <img id="img-delete-notification" notification-id="{notificationId}" src="/assets/shared/icon_delete_sm.png" width="13" height="13" />
                </a>
            </div>
        </div><br />
        <div id="div-actions">
            <a id="btn-notification-action" class="button-orange smallbutton right"></a>
        </div>
        <br/ >
        <br clear="all" />
    </li>
</script>

<!-- Chat panel template -->
<script type="text/template" id="template-chat-panel">
    <li>
        <div class="avatar-small"><img src="{avatar_url}" /></div>
        <div class="chat-text">
            <strong>{label}:</strong>&nbsp;{text}
            <em>({date})</em>
        </div>
        <br clear="all" />
    </li>
</script>