<table class="w100">
  <tr>
    <td valign="top" width="40%"><h3>Get a Widget:</h3>
      <!-- ########## Javascript code for widget ########## -->
      <textarea class="w95" rows="10">
        <!-- widget -->
        <div id="divWidgetCode" class="widget">
          <!-- header -->
          <div id="divWidgetCodeHeader" class="widget-header"><strong><span id="lblWidgetCodeType"></span></strong> by <span id="spnWidgetCodeArtistName"></span></div>
          <!-- start widget content -->
          <div class="widget-content">
            <!-- band avatar -->
            <div class="widget-avatar"><img id="imgWidgetCodeAvatar" alt=""/></div>
            <a href="javascript:void(0)" class="widget-pausebutton" title="pause"></a>
            <!-- song title -->
            <div class="widget-controls">
              <!-- timeline and controls -->
              <div class="w100">
                <!-- recording play controls -->
                <div class="recording-controls">
                  <!-- playback position -->
                  <div class="recording-position">
                    <!-- start time -->
                    <div class="recording-time">0:00</div>
                    <!-- playback background & slider -->
                    <div class="recording-playback">
                      <div class="recording-slider"><img src="images/content/slider_playcontrols.png" width="5" height="16" /></div>
                    </div>
                    <!-- end time -->
                    <div class="recording-time">4:59</div>
                  </div>
                  <!-- end playback position -->
                  <!-- current playback time -->
                  <div class="recording-current">1:23</div>
                </div>
                <!-- end recording play controls -->
              </div>
            </div>
            <!-- band member avatars -->
            <div class="widget-social">&nbsp;
              <a href="#"><img src="images/content/icon_like.png" width="12" height="12" alt=""/>&nbsp;&nbsp;LIKE</a>
              <a href="#"><img class="space" src="images/content/icon_comment.png" width="12" height="12" alt=""/>&nbsp;&nbsp;COMMENT</a>
              <a href="#"><img class="space" src="images/content/icon_share.png" width="13" height="15" alt=""/>&nbsp;&nbsp;SHARE</a>
            </div>
            <!-- jamkazam branding -->
            <div class="widget-branding"><span id="spnWidgetCodeBranding"></span> on
              <a href="http://jamkazam.com"><img src="images/shared/jk_logo_small.png" alt="" width="142" height="26" align="absbottom"/></a>
            </div>
          </div>
          <!-- end widget content -->
        </div>
        <!-- /widget -->
      </textarea> <br /><br />
      <div class="right"><a class="button-orange mr10">COPY WIDGET CODE</a></div>
    </td>
    <td>
      <div class="ml10">Preview:
        <!-- recording widget -->
        <div id="divWidgetPreview" class="widget">
          <!-- header -->
          <div id="divWidgetPreviewHeader" class="widget-header"><strong><span id="lblWidgetPreviewType"></span></strong> by <span id="spnWidgetPreviewArtistName"></span></div>
          <!-- start widget content -->
          <div class="widget-content">
            <!-- band avatar -->
            <div class="widget-avatar"><img id="imgWidgetPreviewAvatar" src="" alt=""/></div>
            <a href="javascript:void(0)" class="widget-playbutton" title="play"></a>

            <!-- song title -->
            <div id="divWidgetPreviewTitle" class="widget-title"></div>

            <!-- avatars -->
            <div class="widget-members"></div>

            <!-- jamkazam branding -->
            <div class="widget-branding"><span id="spnWidgetPreviewBranding"></span> on
              <a href=<%= "#{root_url}" %>>
                <%= image_tag "shared/jk_logo_small.png", :size => "142x26", :align => "absbottom", :alt => "" %>
              </a>
            </div>
          </div>
          <!-- end widget content -->
        </div>
        <!-- /widget -->
      </div>
    </td>
  </tr>
</table>