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

<div id="sidebar-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" layout="panel" layout-id="panelSearch">
    <div layout-panel="collapsed">
    </div>
    <div layout-panel="expanded" class="panel expanded">
      <div layout-panel="header" class="panel-header always-open">
        <h2>search</h2>
        <div class="searchbox">
          <form id="searchForm">
            <input id="search-input" autocomplete="off" type="text" name="search" placeholder="enter search terms" />
          </form>
        </div>
      </div>

      <!-- border between header and beginning of search results -->
      <!--<div class="sidebar-search-result"></div>-->
      <div class="panelcontents" layout-panel="contents">
        <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:&nbsp;<%= select_tag(Search::SEARCH_TEXT_TYPE_ID, options_for_select(Search::SEARCH_TEXT_TYPES.collect { |ii| [ii.to_s.titleize, ii] })) %>
          </div>
        </div>

        <div style="clear:both;"></div><br />
        <div id="sidebar-search-results" class="results-wrapper"></div>
      </div>

    </div>
  </div>

  <!-- Friends -->
  <div layout="panel" layout-id="panelFriends">
    <div layout-panel="collapsed">
    </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">
          <li class="invite-friend-row">
            <div class="friend-name">
              Invite More Friends
            </div>
            <br clear="all"/>
            <div class="invitation-button-holder">
              <div class="left mr20">
                <div class="left">
                  <a class="btn-email-invitation">
                    <%= image_tag("content/icon_gmail.png", :size => "24x24", :align => "absmiddle") %>
                  </a>
                </div>
                <div class="right mt5 ml5">E-mail</div>
              </div>
              <div class="left left">
                <div class="left">
                  <a class="btn-gmail-invitation">
                    <%= image_tag("content/icon_google.png", :size => "24x24", :align => "absmiddle") %>
                  </a>
                </div>
                <div class="right mt5 ml5">Google+</div>
              </div>
              <div class="left left">
                <div class="left">
                  <a class="btn-facebook-invitation">
                    <%= image_tag("content/icon_facebook.png", :size => "24x24", :align => "absmiddle") %>
                  </a>
                </div>
                <div class="right mt5 ml5">Facebook</div>
              </div>
            </div>
            <br clear="all" />
          </li>
        </ul> 
      </div>
    </div>
  </div>

  <!-- Chat -->
  <div layout="panel" layout-id="panelChat">
    <div layout-panel="collapsed">
    </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="chatcontents">
        <div class="chat-status">
          <span>Chat is available when in session.</span>
        </div>
        
        <div class="chat-list-scroller">
          <div class="previous-chat-list wrapword">
          </div>
        </div>
      
        <div class="chat-sender">
          <form class="chat-message-form">
            <textarea name="chat-message" id="new-chat-message" placeholder="enter message"></textarea>
          </form>
          <div class="right">
            <%= link_to 'NEXT', '#', class: 'btn-next-pager' %>
            <%= link_to 'SEND', '#', class: 'button-orange btn-send-chat-message' %>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Notifications -->
  <div layout="panel" layout-id="panelNotifications">
    <div layout-panel="collapsed">
    </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 notification-scroller">
        <ul id="sidebar-notification-list">
        </ul>
      </div>
    </div>
  </div>
</div>

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

<script type="text/template" id="template-bands-sidebar-search-result">
  <div band-id="{bandId}" class="sidebar-search-result">
    <a band-id="{bandId}" hoveraction="band" class="avatar-small">
      <img src="{avatar_url}" />
    </a>
    <div class="result-name">
      <a band-id="{bandId}" hoveraction="band" href="{profile_url}">{bandName}</a><br />
      <span class="result-location">{location}</span>
    </div>
    <br clear="all" />
  </div>
</script>

<script type="text/template" id="template-fans-sidebar-search-result">
  <div user-id="{userId}" class="sidebar-search-result">
    <a user-id="{userId}" hoveraction="fan" class="avatar-small">
      <img src="{avatar_url}" />
    </a>
    <div class="result-name">
      <a user-id="{userId}" hoveraction="fan" href="{profile_url}">{userName}</a><br />
      <span class="result-location">{location}</span>
    </div><br />
    <br clear="all" />
  </div>
</script>

<!-- Friend panel template -->
<script type="text/template" id="template-friend-panel">
  <li class="{cssClass}">
    <div class="avatar-small" user-id="{userId}" hoveraction="{hoverAction}"><img src="{avatar_url}" /></div>
    <div class="friend-name" user-id="{userId}" hoveraction="{hoverAction}">
      <span class="friend-name-label">{userName}</span><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}&#39;s Profile</a>
    </div>
  </div>
</script>

<!-- Notification panel template -->
<script type="text/template" id="template-notification-panel">
  <li class="notification-entry" session-id="{sessionId}" notification-id="{notificationId}">
    <div class="avatar-small" user-id="{userId}" hoveraction="musician"><img src="{avatar_url}" /></div>
    <div session-id="{sessionId}" hoveraction="hoveraction" class="note-text">
      {text}<br/>
      <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-message">
  <div class="chat-message">
    <span class="chat-message-sender">{{data.sender}}</span>
    <span class="chat-message-text">{{data.msg}}</span>
    <time class="chat-message-timestamp timeago" datetime="{{data.sent}}">{{data.sent}}</time>
  </div>
</script>