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>
    <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>
    </div>

    <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 class="badge">4</div></h2>
            </div>
            <div layout-panel="contents" class="panelcontents">
                <ul>
                    <li>
                        <div class="avatar-small">
                            <%= image_tag "avatars/avatar_david.jpg" %>
                        </div>
                        <div class="friend-name">
                            David Wilson<br/>
                            <span class="friend-status">
                                <a href="#">In Session</a>, started at 12:34 pm
                            </span>
                        </div>
                        <div class="friend-icon">
                            <%= image_tag "shared/icon_session.png", :width=>24, :height=>24 %>
                        </div>
                        <br clear="all" />
                    </li>

                    <li>
                        <div class="avatar-small">
                            <%= image_tag "shared/avatar_creepyeye.jpg" %>
                        </div>
                        <div class="friend-name">
                            Brian Smith<br/>
                            <span class="friend-status">Available</span>
                        </div>
                        <div class="friend-icon"></div>
                        <br clear="all" />
                    </li>

                    <li>
                        <div class="avatar-small">
                            <%= image_tag "shared/avatar_silverfox.jpg" %>
                        </div>
                        <div class="friend-name">
                            Peter Walker<br/>
                            <span class="friend-status">
                                Recording: <a href="#">Seven Trails</a>
                            </span>
                        </div>
                        <div class="friend-icon">
                            <%= image_tag "sidebar/icon_recording.png", :width=>24, :height=>24 %>
                        </div>
                        <br clear="all" />
                    </li>

                    <li class="offline">
                        <div class="avatar-small">
                            <%= image_tag "shared/avatar_saltnpepper.jpg" %>
                        </div>
                        <div class="friend-name">
                            Seth Call<br/>
                            <span class="friend-status">
                                Offline
                            </span>
                        </div>
                        <div class="friend-icon"></div>
                        <br clear="all" />
                    </li>
                </ul> 
            </div>
        </div>
    </div>

    <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 class="badge">48</div></h2>
            </div>
            <div layout-panel="contents" class="panelcontents">
                 <!-- chat message input -->
                <div id="chat-fixed">
                <input id="chat-input" type="text" placeholder="enter message" /><br />
                
                <!-- send to box -->
                <div class="chat-select">Send to: <select><option>Everyone</option>
                    <option>All Musicians</option>
                    <option>All Fans</option>
                    <option>Brian Smith</option>
                    <option>Peter Walker</option>
                    <option>David Wilson</option>
                    </select></div>
                </div>
                <ul>
                    <li>
                        <div class="avatar-small">
                            <%= image_tag "avatars/avatar_david.jpg" %>
                        </div>
                        <div class="chat-text">
                            <strong>David Wilson to All Musicians:</strong> I'm hearing a little echo from someone's setup. Can you all check your equipment, please? <em>(2 minutes ago)</em>
                        </div>
                        <br clear="all" />
                    </li>

                    <li>
                        <div class="avatar-small">
                            <%= image_tag "shared/avatar_creepyeye.jpg" %>
                        </div>
                        <div class="chat-text">
                            <strong>Brian Smith to All Musicians:</strong> Let's get rolling. I've got to run in 30 mins <em>(4 minutes ago)</em>
                        </div>
                        <br clear="all" />
                    </li>

                    <li>
                        <div class="avatar-small">
                            <%= image_tag "avatars/avatar_david.jpg" %>
                        </div>
                        <div class="chat-text">
                            <strong>David Wilson to Everyone:</strong> Give me a second <em>(10 minutes ago)</em>
                        </div>
                        <br clear="all" />
                    </li>

                    <li>
                        <div class="avatar-small">
                            <%= image_tag "shared/avatar_silverfox.jpg" %>
                        </div>
                        <div class="chat-text">
                            <strong>Peter Walker to Jonathon Wilson:</strong> Hey bud, how's the new guitar working out? <em>(12 minutes ago)</em>
                        </div>
                        <br clear="all" />
                    </li>
                </ul>
            </div>
        </div>
    </div>


    <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 class="badge">3</div></h2>
            </div>
            <div layout-panel="contents" class="panelcontents">
                <ul>
                    <li>
                        <div class="avatar-small">
                            <%= image_tag "shared/avatar_saltnpepper.jpg" %>
                        </div>
                        <div class="note-text">
                            <strong>Seth Call</strong> would like to be your friend
                            <em>(20 minutes ago)</em>
                            <div class="note-delete">
                                <a href="#">
                                    <%= image_tag "shared/icon_delete_sm.png", :width=>13, :height=>13 %>
                                </a>
                            </div>
                        </div>
                        <br clear="all" />
                    </li>

                    <li>
                        <div class="avatar-small">
                            <%= image_tag "shared/avatar_creepyeye.jpg" %>
                        </div>
                        <div class="note-text">
                            Your Facebook friend <strong>Brian Smith</strong> just joined JamKazam
                            <em>(1 day ago)</em>
                            <div class="note-delete">
                                <a href="#">
                                    <%= image_tag "shared/icon_delete_sm.png", :width=>13, :height=>13 %>
                                </a>
                            </div>
                        </div>
                        <br clear="all" />
                    </li>

                    <li>
                        <div class="avatar-small">
                            <%= image_tag "shared/avatar_david.jpg" %>
                        </div>
                        <div class="note-text">
                            <strong>David Wilson</strong> has accepted your friend request
                            <em>(Dec 8, 2012)</em>
                            <div class="note-delete">
                                <a href="#">
                                    <%= image_tag "shared/icon_delete_sm.png", :width=>13, :height=>13 %>
                                </a>
                            </div>
                        </div>
                        <br clear="all" />
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>