VRFS-1020 share dialog work

2014-02-02 18:14:47 -05:00 · 2014-02-02 18:14:47 -05:00 · b7ddd4661a
parent da9a001e43
commit b7ddd4661a
16 changed files with 555 additions and 37 deletions
--- a/web/app/assets/javascripts/jam_rest.js
+++ b/web/app/assets/javascripts/jam_rest.js
@ -43,6 +43,16 @@
            });
        }

+        function getSessionHistory(id) {
+            return $.ajax({
+                type: "GET",
+                dataType: "json",
+                url: '/api/sessions/' + id + '/history',
+                contentType: 'application/json',
+                processData: false
+            });
+        }
+
        function addSessionComment(sessionId, userId, comment) {
            return $.ajax({
                url: '/api/sessions/' + sessionId + "/comments",
@ -652,7 +662,6 @@
        }

        function getClaimedRecordings(options) {
-
            return $.ajax({
                type: "GET",
                dataType: "json",
@ -662,6 +671,15 @@
            });
        }

+        function getClaimedRecording(id) {
+            return $.ajax({
+                type: "GET",
+                dataType: "json",
+                contentType: 'application/json',
+                url: "/api/claimed_recordings/" + id
+            });
+        }
+
        function claimRecording(options) {
            var recordingId = options["id"];

@ -757,6 +775,7 @@
        this.getBandFollowing = getBandFollowing;
        this.getBands = getBands;
        this.updateSession = updateSession;
+        this.getSessionHistory = getSessionHistory;
        this.addSessionComment = addSessionComment;
        this.addSessionLike = addSessionLike;
        this.addRecordingComment = addRecordingComment;
@ -779,6 +798,7 @@
        this.stopRecording = stopRecording;
        this.getRecording = getRecording;
        this.getClaimedRecordings = getClaimedRecordings;
+        this.getClaimedRecording = getClaimedRecording;
        this.claimRecording = claimRecording;
        this.startPlayClaimedRecording = startPlayClaimedRecording;
        this.stopPlayClaimedRecording = stopPlayClaimedRecording;
--- a/web/app/assets/javascripts/shareDialog.js
+++ b/web/app/assets/javascripts/shareDialog.js
@ -2,18 +2,82 @@

    "use strict";
    context.JK = context.JK || {};
-    context.JK.ShareDialog = function(app) {
+    context.JK.ShareDialog = function(app, entityId, entityType) {
        var logger = context.JK.logger;
        var rest = context.JK.Rest();

        function registerEvents(onOff) {
+            if (onOff) {

+            }
+            else {
+
+            }
        }

        function showDialog() {
            app.layout.showDialog('share-dialog');
        }

+        function initDialog() {
+
+            var fill = entityType === "session" ? "teal-fill" : "orange-fill";
+
+            $("#shareType").html(entityType);
+
+            $("#divWidgetCodeHeader").addClass(fill);
+            $("#divWidgetPreviewHeader").addClass(fill);
+            $("#divWidgetPreview").addClass(entityType);
+
+            // SESSION
+            if (entityType === "session") {
+                $("#lblWidgetCodeType").html('LIVE SESSION');
+                $("#lblWidgetPreviewType").html('LIVE SESSION');
+
+                rest.getSessionHistory(entityId)
+                    .done(function(response) {
+                        var name, photoUrl;
+
+                        
+                    });
+            }
+
+            // RECORDING
+            else {
+                $("#lblWidgetCodeType").html('RECORDING');
+                $("#lblWidgetPreviewType").html('RECORDING');
+
+                rest.getClaimedRecording(entityId)
+                    .done(function(response) {
+                        var name, photoUrl;
+
+                        if (response.recording.band) {
+                            name = response.recording.band.name;
+                            photoUrl = context.JK.resolveBandAvatarUrl(response.recording.band.photo_url);
+                        }
+                        else {
+                            name = response.recording.owner.name;
+                            photoUrl = context.JK.resolveAvatarUrl(response.recording.owner.photo_url);
+                        }
+
+                        console.log("band photo url=" + photoUrl);
+                        $("#imgWidgetCodeAvatar").attr('src', photoUrl);
+                        $("#imgWidgetPreviewAvatar").attr('src', photoUrl);
+
+                        $("#divWidgetPreviewTitle").html(response.recording.name);
+
+                        $("#spnWidgetCodeArtistName").html(name);
+                        $("#spnWidgetPreviewArtistName").html(name);
+
+                        $.each(response.recording.recorded_tracks, function(index, val) {
+                            $(".widget-members").append('<div class="widget-avatar-small">');
+                            $(".widget-members").append('<img src="' + context.JK.resolveAvatarUrl(val.user.photo_url) + '" alt="" />');
+                            $(".widget-members").append('</div>');
+                        });
+                    });
+            }
+        }
+
        /*function showEmailDialog() {
            $('#invitation-dialog').show();
            $('#invitation-textarea-container').show();
@ -96,6 +160,8 @@
            };

            app.bindDialog('shareSessionRecording', dialogBindings);
+
+            initDialog();
        };

        this.initialize = initialize;
--- a/web/app/assets/stylesheets/client/client.css
+++ b/web/app/assets/stylesheets/client/client.css
@ -33,6 +33,7 @@
 *= require ./ftue
 *= require ./invitationDialog
 *= require ./shareDialog
+ *= require ./hoverBubble
 *= require ./recordingFinishedDialog
 *= require ./localRecordingsDialog
 *= require ./createSession
--- a/web/app/assets/stylesheets/client/hoverBubble.css.scss
+++ b/web/app/assets/stylesheets/client/hoverBubble.css.scss
--- a/web/app/assets/stylesheets/web/web.css
+++ b/web/app/assets/stylesheets/web/web.css
@ -8,6 +8,7 @@
 *= require client/dialog
 *= require client/invitationDialog
 *= require client/shareDialog
+*= require client/hoverBubble
 *= require web/main
 *= require web/footer
 *= require web/recordings
--- a/web/app/views/api_claimed_recordings/show.rabl
+++ b/web/app/views/api_claimed_recordings/show.rabl
@ -8,9 +8,14 @@ attributes :id, :name, :description, :is_public, :is_downloadable, :genre_id

 child(:recording => :recording) {
    attributes :id, :created_at, :duration, :comment_count, :like_count, :play_count
+    
    child(:band => :band) {
-      attributes :id, :name
-    }    
+      attributes :id, :name, :photo_url
+    }
+
+    child(:owner => :owner) {
+      attributes :id, :name, :photo_url
+    }
    
    child(:mixes => :mixes) {
    	attributes :id, :url, :is_completed
@ -20,14 +25,10 @@ child(:recording => :recording) {
      attributes :id, :fully_uploaded, :url, :client_track_id, :client_id, :instrument_id

      child(:user => :user) {
-        attributes :id, :first_name, :last_name, :city, :state, :country, :photo_url
+        attributes :id, :first_name, :last_name, :name, :city, :state, :country, :photo_url
      }
    }

-    child(:band => :band) {
-      attributes :id, :name, :photo_url
-    }
-
    child(:comments => :comments) {
      attributes :comment, :created_at

--- a/web/app/views/api_music_sessions/history_show.rabl
+++ b/web/app/views/api_music_sessions/history_show.rabl
@ -3,17 +3,17 @@ object @history
 attributes :music_session_id, :description, :genres

 child(:user => :creator) {
-	attributes :name, :photo_url
+  attributes :name, :photo_url
 }

 child(:band => :band) {
-	attributes :name, :photo_url
+  attributes :name, :photo_url
 }

 child(:music_session_user_histories => :users) {
-	attributes :instruments
+  attributes :instruments

-	child(:user => :user) {
-		attributes :name, :photo_url
-	}
+  child(:user => :user) {
+    attributes :name, :photo_url
+  }
 }
--- a/web/app/views/clients/_hoverBand.html.erb
+++ b/web/app/views/clients/_hoverBand.html.erb
@ -0,0 +1,52 @@
+<!-- band hover -->
+<div id="band-detail-1" class="hidden bubble">
+<h2>Band Detail</h2>
+<div class="bubble-inner">
+<a href="#" class="avatar_large left mr20"><img src="images/content/avatar_band3.jpg" /></a>
+<div class="left"><h3>Fox Force Five</h3>
+<small>Richmond, VA<br />
+<strong>Jazz</strong></small><br />
+
+12 <img src="images/content/icon_like.png" width="12" height="12" align="absmiddle" />&nbsp;&nbsp;&nbsp;4 <img src="images/content/icon_followers.png" width="22" height="12" align="absmiddle" />&nbsp;&nbsp;&nbsp;17 <img src="images/content/icon_recordings.png" width="12" height="13" align="absmiddle" />&nbsp;&nbsp;&nbsp;64 <img src="images/content/icon_session_tiny.png" width="12" height="12" align="absmiddle" />
+</div>
+<br clear="all" /><br />
+
+<div class="f11">Nulla facilisi. In vel sem. Morbi id urna in diam dignissim feugiat. Proin molestie tortor eu velit. Aliquam erat volutpat. Nullam ultrices, diam tempus vulputate egestas, eros pede varius leo, sed imperdiet lectus est ornare odio.</div>
+  <table class="musicians" cellpadding="0" cellspacing="5">
+                <tr>
+                <td width="24"><a href="#" class="avatar-tiny" id="musician1"><img src="images/shared/avatar_david.jpg" /></a></td>
+                <td><a href="#">John Doe</a></td>
+                <td><div class="nowrap"><img src="images/content/icon_instrument_guitar24.png" width="24" height="24" />&nbsp;<img src="images/content/icon_instrument_vocal24.png" width="24" height="24" /></div></td>
+                </tr>
+                <tr>
+                <td width="24"><a href="#" class="avatar-tiny"><img src="images/shared/avatar_creepyeye.jpg" /></a></td>
+                <td><a href="#">Cassandra Defrenza</a></td>
+                <td><img src="images/content/icon_instrument_keyboard24.png" width="24" height="24" /></td>
+                </tr>
+                <tr>
+                <td width="24"><a href="#" class="avatar-tiny"><img src="images/shared/avatar_silverfox.jpg" /></a></td>
+                <td><a href="#">Jimmy Stratham</a></td>
+                <td><img src="images/content/icon_instrument_guitar24.png" width="24" height="24" /></td>
+                </tr>
+                </table><br />
+
+                <div align="center">
+<div class="left"><a href="#" class="button-orange">PROFILE</a></div>
+<div class="left"><a href="#" class="button-orange">LIKE</a></div>
+<div class="left"><a href="#" class="button-orange">FOLLOW</a></div>
+</div>
+<br /><br />
+
+
+</div>
+
+
+</div>
+
+
+
+<script type="text/template" id="template-hover-bubble">
+  <div class="hover-bubble">
+
+  </div>
+</script>
--- a/web/app/views/clients/_hoverBubble.html.erb
+++ b/web/app/views/clients/_hoverBubble.html.erb
@ -1,3 +1,232 @@
+<!-- band hover -->
+<div id="band-detail-1" class="hidden bubble">
+<h2>Band Detail</h2>
+<div class="bubble-inner">
+<a href="#" class="avatar_large left mr20"><img src="images/content/avatar_band3.jpg" /></a>
+<div class="left"><h3>Fox Force Five</h3>
+<small>Richmond, VA<br />
+<strong>Jazz</strong></small><br />
+
+12 <img src="images/content/icon_like.png" width="12" height="12" align="absmiddle" />&nbsp;&nbsp;&nbsp;4 <img src="images/content/icon_followers.png" width="22" height="12" align="absmiddle" />&nbsp;&nbsp;&nbsp;17 <img src="images/content/icon_recordings.png" width="12" height="13" align="absmiddle" />&nbsp;&nbsp;&nbsp;64 <img src="images/content/icon_session_tiny.png" width="12" height="12" align="absmiddle" />
+</div>
+<br clear="all" /><br />
+
+<div class="f11">Nulla facilisi. In vel sem. Morbi id urna in diam dignissim feugiat. Proin molestie tortor eu velit. Aliquam erat volutpat. Nullam ultrices, diam tempus vulputate egestas, eros pede varius leo, sed imperdiet lectus est ornare odio.</div>
+  <table class="musicians" cellpadding="0" cellspacing="5">
+                <tr>
+                <td width="24"><a href="#" class="avatar-tiny" id="musician1"><img src="images/shared/avatar_david.jpg" /></a></td>
+                <td><a href="#">John Doe</a></td>
+                <td><div class="nowrap"><img src="images/content/icon_instrument_guitar24.png" width="24" height="24" />&nbsp;<img src="images/content/icon_instrument_vocal24.png" width="24" height="24" /></div></td>
+                </tr>
+                <tr>
+                <td width="24"><a href="#" class="avatar-tiny"><img src="images/shared/avatar_creepyeye.jpg" /></a></td>
+                <td><a href="#">Cassandra Defrenza</a></td>
+                <td><img src="images/content/icon_instrument_keyboard24.png" width="24" height="24" /></td>
+                </tr>
+                <tr>
+                <td width="24"><a href="#" class="avatar-tiny"><img src="images/shared/avatar_silverfox.jpg" /></a></td>
+                <td><a href="#">Jimmy Stratham</a></td>
+                <td><img src="images/content/icon_instrument_guitar24.png" width="24" height="24" /></td>
+                </tr>
+                </table><br />
+
+                <div align="center">
+<div class="left"><a href="#" class="button-orange">PROFILE</a></div>
+<div class="left"><a href="#" class="button-orange">LIKE</a></div>
+<div class="left"><a href="#" class="button-orange">FOLLOW</a></div>
+</div>
+<br /><br />
+
+
+</div>
+
+
+</div>
+
+<!-- musician hover -->
+<div id="musician-detail-1" class="hidden bubble">
+<h2>Musician Detail</h2>
+<div class="bubble-inner">
+<a href="#" class="avatar_large left mr20"><img src="images/shared/avatar_david.jpg" /></a>
+<div class="left ib"><h3>John Doe</h3>
+<small>Austin, TX</small><br /><br />
+
+<div class="left mr10 mb"><img src="images/content/icon_instrument_guitar24.png" width="24" height="24" /></div>
+<div class="left mr10"><img src="images/content/icon_instrument_vocal24.png" width="24" height="24" /></div>
+<div class="left mr10"><img src="images/content/icon_instrument_keyboard24.png" width="24" height="24" /></div>
+<br clear="all" />
+
+122 <img src="images/content/icon_friend.png" align="absmiddle" />&nbsp;&nbsp;&nbsp;4 <img src="images/content/icon_followers.png" width="22" height="12" align="absmiddle" />&nbsp;&nbsp;&nbsp;17 <img src="images/content/icon_recordings.png" width="12" height="13" align="absmiddle" />&nbsp;&nbsp;&nbsp;64 <img src="images/content/icon_session_tiny.png" width="12" height="12" align="absmiddle" /></div><br clear="all" /><br />
+<div class="f12"><strong>IN SESSION &mdash; <a href="#">Click to Join</a></strong></div>
+
+
+<br />
+
+<div class="f11">Nulla facilisi. In vel sem. Morbi id urna in diam dignissim feugiat. Proin molestie tortor eu velit. Aliquam erat volutpat. Nullam ultrices, diam tempus vulputate egestas, eros pede varius leo, sed imperdiet lectus est ornare odio.</div><br />
+
+<small><strong>FOLLOWING:</strong></small>
+  <table class="musicians" cellpadding="0" cellspacing="5">
+                <tr>
+                <td width="24"><a href="#" class="avatar-tiny"><img src="images/content/avatar_band3.jpg" /></a></td>
+                <td><a href="#"><strong>Fox Force Five</strong></a></td>
+               <td width="24"><a href="#" class="avatar-tiny"><img src="images/content/avatar_band1.jpg" /></a></td>
+                <td><a href="#"><strong>Tammany Hall</strong></a></td>
+                </tr>
+                <tr>
+                <td width="24"><a href="#" class="avatar-tiny"><img src="images/content/avatar_band2.jpg" /></a></td>
+                <td><a href="#"><strong>Bethany Grey</strong></a></td>
+                <td></td>
+                <td></td>
+                </tr>
+               
+                </table><br />
+
+                <div align="center">
+<div class="left"><a href="#" class="button-orange">PROFILE</a></div>
+<div class="left"><a href="#" class="button-orange">LIKE</a></div>
+<div class="left"><a href="#" class="button-orange">FRIEND</a></div>
+<div class="left"><a href="#" class="button-orange">FOLLOW</a></div>
+</div>
+<br /><br />
+
+
+</div>
+
+</div>
+
+<!-- fan hover -->
+<div id="fan-detail-1" class="hidden bubble">
+<h2>Fan Detail</h2>
+<div class="bubble-inner">
+<a href="#" class="avatar_large left mr20"><img src="images/shared/avatar_creepyeye.jpg" /></a>
+<div class="left ib"><h3>Tomas Jones</h3>
+<small>Austin, TX</small><br /><br />
+
+122 <img src="images/content/icon_friend.png" align="absmiddle" />&nbsp;&nbsp;&nbsp;4 <img src="images/content/icon_followers.png" width="22" height="12" align="absmiddle" /></div><br clear="all" /><br />
+<br />
+
+<div class="f11">Nulla facilisi. In vel sem. Morbi id urna in diam dignissim feugiat. Proin molestie tortor eu velit. Aliquam erat volutpat. Nullam ultrices, diam tempus vulputate egestas, eros pede varius leo, sed imperdiet lectus est ornare odio.</div><br />
+
+<small><strong>FOLLOWING:</strong></small>
+  <table class="musicians" cellpadding="0" cellspacing="5">
+                <tr>
+                <td width="24"><a href="#" class="avatar-tiny"><img src="images/content/avatar_band3.jpg" /></a></td>
+                <td><a href="#"><strong>Fox Force Five</strong></a></td>
+               <td width="24"><a href="#" class="avatar-tiny"><img src="images/shared/avatar_silverfox.jpg" /></a></td>
+                <td><a href="#"><strong>Bob Scrothers</strong></a></td>
+                </tr>
+                <tr>
+                <td width="24"><a href="#" class="avatar-tiny"><img src="images/content/avatar_band2.jpg" /></a></td>
+                <td><a href="#"><strong>Bethany Grey</strong></a></td>
+                <td></td>
+                <td></td>
+                </tr>
+               
+                </table><br />
+
+                <div align="center">
+<div class="left"><a href="#" class="button-orange">PROFILE</a></div>
+<div class="left"><a href="#" class="button-orange">FOLLOW</a></div>
+</div>
+<br /><br />
+
+
+</div>
+
+</div>
+
+<!-- session hover -->
+<div id="session-detail-1" class="hidden bubble">
+<h2>Session Detail</h2>
+<div class="bubble-inner">
+<div class="small left">JAZZ</div>
+<div class="small right">01/25/14 - 11:23 pm</div>
+<br clear="all" />
+<div class="f11 mt5 mb5">Nulla facilisi. In vel sem. Morbi id urna in diam dignissim feugiat. Proin molestie tortor eu velit. Aliquam erat volutpat. Nullam ultrices, diam tempus vulputate egestas, eros pede varius leo, sed imperdiet lectus est ornare odio.</div>
+<div class="small">12 <img src="images/content/icon_arrow.png" width="7" height="12" align="absmiddle" />&nbsp;&nbsp;&nbsp;&nbsp;4 <img src="images/content/icon_comment.png" width="13" height="12" align="absmiddle" />&nbsp;&nbsp;&nbsp;&nbsp;17 <img src="images/content/icon_like.png" width="12" height="12" align="absmiddle" /></div><br />
+
+MUSICIANS:
+<!-- sub-table of musicians -->
+                <table class="musicians" cellpadding="0" cellspacing="5">
+                <tr>
+                <td width="24"><a href="#" class="avatar-tiny" id="musician1"><img src="images/shared/avatar_david.jpg" /></a></td>
+                <td><a href="#">John Doe</a></td>
+                <td><div class="nowrap"><img src="images/content/icon_instrument_guitar24.png" width="24" height="24" />&nbsp;<img src="images/content/icon_instrument_vocal24.png" width="24" height="24" /></div></td>
+                </tr>
+                <tr>
+                <td width="24"><a href="#" class="avatar-tiny"><img src="images/shared/avatar_creepyeye.jpg" /></a></td>
+                <td><a href="#">Cassandra Defrenza</a></td>
+                <td><img src="images/content/icon_instrument_keyboard24.png" width="24" height="24" /></td>
+                </tr>
+                <tr>
+                <td width="24"><a href="#" class="avatar-tiny"><img src="images/shared/avatar_silverfox.jpg" /></a></td>
+                <td><a href="#">Jimmy Stratham</a></td>
+                <td><img src="images/content/icon_instrument_guitar24.png" width="24" height="24" /></td>
+                </tr>
+                </table><br /><br />
+
+                <div align="center">
+<div class="left"><a href="#" class="button-orange">LIKE</a></div>
+<div class="left"><a href="#" class="button-orange">COMMENT</a></div>
+<div class="left"><a href="#" class="button-orange">SHARE</a></div>
+</div>
+<br /><br />
+
+
+</div>
+
+</div>
+
+<!-- recording hover -->
+<div id="recording-detail-1" class="hidden bubble">
+<h2>Recording Detail</h2>
+<div class="bubble-inner">
+<h3>Twelve Weeks</h3>
+<div class="small left">JAZZ</div>
+<div class="small right">01/25/14 - 11:23 pm</div>
+<br clear="all" />
+<div class="f11 mt5 mb5">Nulla facilisi. In vel sem. Morbi id urna in diam dignissim feugiat. Proin molestie tortor eu velit. Aliquam erat volutpat. Nullam ultrices, diam tempus vulputate egestas, eros pede varius leo, sed imperdiet lectus est ornare odio.</div>
+<div class="small">12 <img src="images/content/icon_arrow.png" width="7" height="12" align="absmiddle" />&nbsp;&nbsp;&nbsp;&nbsp;4 <img src="images/content/icon_comment.png" width="13" height="12" align="absmiddle" />&nbsp;&nbsp;&nbsp;&nbsp;17 <img src="images/content/icon_like.png" width="12" height="12" align="absmiddle" /><br />
+<br />
+<a href="#" class="avatar_large left mr20"><img src="images/content/avatar_band3.jpg" /></a>
+<div class="left"><h3>Fox Force Five</h3>
+<small>Richmond, VA</small></div>
+<br clear="all" /><br />
+MUSICIANS:
+<!-- sub-table of musicians -->
+                <table class="musicians" cellpadding="0" cellspacing="5">
+                <tr>
+                <td width="24"><a href="#" class="avatar-tiny" id="musician1"><img src="images/shared/avatar_david.jpg" /></a></td>
+                <td><a href="#">John Doe</a></td>
+                <td><div class="nowrap"><img src="images/content/icon_instrument_guitar24.png" width="24" height="24" />&nbsp;<img src="images/content/icon_instrument_vocal24.png" width="24" height="24" /></div></td>
+                </tr>
+                <tr>
+                <td width="24"><a href="#" class="avatar-tiny"><img src="images/shared/avatar_creepyeye.jpg" /></a></td>
+                <td><a href="#">Cassandra Defrenza</a></td>
+                <td><img src="images/content/icon_instrument_keyboard24.png" width="24" height="24" /></td>
+                </tr>
+                <tr>
+                <td width="24"><a href="#" class="avatar-tiny"><img src="images/shared/avatar_silverfox.jpg" /></a></td>
+                <td><a href="#">Jimmy Stratham</a></td>
+                <td><img src="images/content/icon_instrument_guitar24.png" width="24" height="24" /></td>
+                </tr>
+                </table><br /><br />
+
+                <div align="center">
+<div class="left"><a href="#" class="button-orange">LIKE</a></div>
+<div class="left"><a href="#" class="button-orange">COMMENT</a></div>
+<div class="left"><a href="#" class="button-orange">SHARE</a></div>
+</div>
+<br /><br />
+
+
+</div>
+
+</div>
+
+</div>
+
+
 <script type="text/template" id="template-hover-bubble">
  <div class="hover-bubble">

--- a/web/app/views/clients/_hoverFan.html.erb
+++ b/web/app/views/clients/_hoverFan.html.erb
@ -0,0 +1,46 @@
+<!-- fan hover -->
+<div id="fan-detail-1" class="hidden bubble">
+<h2>Fan Detail</h2>
+<div class="bubble-inner">
+<a href="#" class="avatar_large left mr20"><img src="images/shared/avatar_creepyeye.jpg" /></a>
+<div class="left ib"><h3>Tomas Jones</h3>
+<small>Austin, TX</small><br /><br />
+
+122 <img src="images/content/icon_friend.png" align="absmiddle" />&nbsp;&nbsp;&nbsp;4 <img src="images/content/icon_followers.png" width="22" height="12" align="absmiddle" /></div><br clear="all" /><br />
+<br />
+
+<div class="f11">Nulla facilisi. In vel sem. Morbi id urna in diam dignissim feugiat. Proin molestie tortor eu velit. Aliquam erat volutpat. Nullam ultrices, diam tempus vulputate egestas, eros pede varius leo, sed imperdiet lectus est ornare odio.</div><br />
+
+<small><strong>FOLLOWING:</strong></small>
+  <table class="musicians" cellpadding="0" cellspacing="5">
+                <tr>
+                <td width="24"><a href="#" class="avatar-tiny"><img src="images/content/avatar_band3.jpg" /></a></td>
+                <td><a href="#"><strong>Fox Force Five</strong></a></td>
+               <td width="24"><a href="#" class="avatar-tiny"><img src="images/shared/avatar_silverfox.jpg" /></a></td>
+                <td><a href="#"><strong>Bob Scrothers</strong></a></td>
+                </tr>
+                <tr>
+                <td width="24"><a href="#" class="avatar-tiny"><img src="images/content/avatar_band2.jpg" /></a></td>
+                <td><a href="#"><strong>Bethany Grey</strong></a></td>
+                <td></td>
+                <td></td>
+                </tr>
+               
+                </table><br />
+
+                <div align="center">
+<div class="left"><a href="#" class="button-orange">PROFILE</a></div>
+<div class="left"><a href="#" class="button-orange">FOLLOW</a></div>
+</div>
+<br /><br />
+
+
+</div>
+
+</div>
+
+<script type="text/template" id="template-hover-bubble">
+  <div class="hover-bubble">
+
+  </div>
+</script>
--- a/web/app/views/clients/_hoverMusician.html.erb
+++ b/web/app/views/clients/_hoverMusician.html.erb
--- a/web/app/views/clients/_hoverRecording.html.erb
+++ b/web/app/views/clients/_hoverRecording.html.erb
@ -0,0 +1,55 @@
+<!-- recording hover -->
+<div id="recording-detail-1" class="hidden bubble">
+<h2>Recording Detail</h2>
+<div class="bubble-inner">
+<h3>Twelve Weeks</h3>
+<div class="small left">JAZZ</div>
+<div class="small right">01/25/14 - 11:23 pm</div>
+<br clear="all" />
+<div class="f11 mt5 mb5">Nulla facilisi. In vel sem. Morbi id urna in diam dignissim feugiat. Proin molestie tortor eu velit. Aliquam erat volutpat. Nullam ultrices, diam tempus vulputate egestas, eros pede varius leo, sed imperdiet lectus est ornare odio.</div>
+<div class="small">12 <img src="images/content/icon_arrow.png" width="7" height="12" align="absmiddle" />&nbsp;&nbsp;&nbsp;&nbsp;4 <img src="images/content/icon_comment.png" width="13" height="12" align="absmiddle" />&nbsp;&nbsp;&nbsp;&nbsp;17 <img src="images/content/icon_like.png" width="12" height="12" align="absmiddle" /><br />
+<br />
+<a href="#" class="avatar_large left mr20"><img src="images/content/avatar_band3.jpg" /></a>
+<div class="left"><h3>Fox Force Five</h3>
+<small>Richmond, VA</small></div>
+<br clear="all" /><br />
+MUSICIANS:
+<!-- sub-table of musicians -->
+                <table class="musicians" cellpadding="0" cellspacing="5">
+                <tr>
+                <td width="24"><a href="#" class="avatar-tiny" id="musician1"><img src="images/shared/avatar_david.jpg" /></a></td>
+                <td><a href="#">John Doe</a></td>
+                <td><div class="nowrap"><img src="images/content/icon_instrument_guitar24.png" width="24" height="24" />&nbsp;<img src="images/content/icon_instrument_vocal24.png" width="24" height="24" /></div></td>
+                </tr>
+                <tr>
+                <td width="24"><a href="#" class="avatar-tiny"><img src="images/shared/avatar_creepyeye.jpg" /></a></td>
+                <td><a href="#">Cassandra Defrenza</a></td>
+                <td><img src="images/content/icon_instrument_keyboard24.png" width="24" height="24" /></td>
+                </tr>
+                <tr>
+                <td width="24"><a href="#" class="avatar-tiny"><img src="images/shared/avatar_silverfox.jpg" /></a></td>
+                <td><a href="#">Jimmy Stratham</a></td>
+                <td><img src="images/content/icon_instrument_guitar24.png" width="24" height="24" /></td>
+                </tr>
+                </table><br /><br />
+
+                <div align="center">
+<div class="left"><a href="#" class="button-orange">LIKE</a></div>
+<div class="left"><a href="#" class="button-orange">COMMENT</a></div>
+<div class="left"><a href="#" class="button-orange">SHARE</a></div>
+</div>
+<br /><br />
+
+
+</div>
+
+</div>
+
+</div>
+
+
+<script type="text/template" id="template-hover-bubble">
+  <div class="hover-bubble">
+
+  </div>
+</script>
--- a/web/app/views/clients/_hoverSession.html.erb
+++ b/web/app/views/clients/_hoverSession.html.erb
@ -0,0 +1,49 @@
+<!-- session hover -->
+<div id="session-detail-1" class="hidden bubble">
+<h2>Session Detail</h2>
+<div class="bubble-inner">
+<div class="small left">JAZZ</div>
+<div class="small right">01/25/14 - 11:23 pm</div>
+<br clear="all" />
+<div class="f11 mt5 mb5">Nulla facilisi. In vel sem. Morbi id urna in diam dignissim feugiat. Proin molestie tortor eu velit. Aliquam erat volutpat. Nullam ultrices, diam tempus vulputate egestas, eros pede varius leo, sed imperdiet lectus est ornare odio.</div>
+<div class="small">12 <img src="images/content/icon_arrow.png" width="7" height="12" align="absmiddle" />&nbsp;&nbsp;&nbsp;&nbsp;4 <img src="images/content/icon_comment.png" width="13" height="12" align="absmiddle" />&nbsp;&nbsp;&nbsp;&nbsp;17 <img src="images/content/icon_like.png" width="12" height="12" align="absmiddle" /></div><br />
+
+MUSICIANS:
+<!-- sub-table of musicians -->
+                <table class="musicians" cellpadding="0" cellspacing="5">
+                <tr>
+                <td width="24"><a href="#" class="avatar-tiny" id="musician1"><img src="images/shared/avatar_david.jpg" /></a></td>
+                <td><a href="#">John Doe</a></td>
+                <td><div class="nowrap"><img src="images/content/icon_instrument_guitar24.png" width="24" height="24" />&nbsp;<img src="images/content/icon_instrument_vocal24.png" width="24" height="24" /></div></td>
+                </tr>
+                <tr>
+                <td width="24"><a href="#" class="avatar-tiny"><img src="images/shared/avatar_creepyeye.jpg" /></a></td>
+                <td><a href="#">Cassandra Defrenza</a></td>
+                <td><img src="images/content/icon_instrument_keyboard24.png" width="24" height="24" /></td>
+                </tr>
+                <tr>
+                <td width="24"><a href="#" class="avatar-tiny"><img src="images/shared/avatar_silverfox.jpg" /></a></td>
+                <td><a href="#">Jimmy Stratham</a></td>
+                <td><img src="images/content/icon_instrument_guitar24.png" width="24" height="24" /></td>
+                </tr>
+                </table><br /><br />
+
+                <div align="center">
+<div class="left"><a href="#" class="button-orange">LIKE</a></div>
+<div class="left"><a href="#" class="button-orange">COMMENT</a></div>
+<div class="left"><a href="#" class="button-orange">SHARE</a></div>
+</div>
+<br /><br />
+
+
+</div>
+
+</div>
+
+
+
+<script type="text/template" id="template-hover-bubble">
+  <div class="hover-bubble">
+
+  </div>
+</script>
--- a/web/app/views/clients/_shareDialog.html.erb
+++ b/web/app/views/clients/_shareDialog.html.erb
@ -1,6 +1,6 @@
 <!-- Share dialog -->
 <div class="dialog share-overlay" layout="dialog" layout-id="share-dialog" style="width:800px; height:auto;">
-    <div class="content-head"><h1>share this session</h1></div>
+    <div class="content-head"><h1>share this <span id="shareType"></span></h1></div>
    <div class="dialog-inner">
        <div class="right"> <a class="button-orange" layout-action="close">X CLOSE</a></div>
        <table class="w100">
@ -20,7 +20,9 @@
                <td valign="top" width="48%">
                    <div class="ml10">
                        <h3>Share a Link:</h3><br />
-                        <%= true ? '' :  "#{root_url}#{share_token}" %>
+                        <% unless share_token.blank? %>
+                            <%= "#{root_url}#{share_token}" %>
+                        <% end %>
                        <div class="right"><a class="button-orange">COPY LINK</a></div>
                    </div>
                </td>
@ -32,14 +34,14 @@
                <td valign="top" width="40%"><h3>Get a Widget:</h3>
                    <!-- ########## Javascript code for widget ########## -->                
                    <textarea class="w95" rows="10">
-                         <!-- session widget -->
-                        <div class="widget session">
+                         <!-- widget -->
+                        <div id="divWidgetCode" class="widget">
                            <!-- header -->
-                            <div class="widget-header orange-fill"><strong>LIVE SESSION</strong> by Raven &amp; The Blackbirds</div>
+                            <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 src="images/content/avatar_band4.jpg" alt=""/></div>
+                                <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">
@ -85,28 +87,24 @@
                <td>
                    <div class="ml10">Preview:
                        <!-- recording widget -->
-                        <div class="widget session">
+                        <div id="divWidgetPreview" class="widget">
                        <!-- header -->
-                            <div class="widget-header teal-fill"><strong>LIVE SESSION</strong> by Raven &amp; The Blackbirds</div>
+                            <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"><%= image_tag "content/avatar_band4.jpg", :alt => "" %></div>
+                                <div class="widget-avatar"><img id="imgWidgetPreviewAvatar" src="" alt=""/></div>
                                <a href="javascript:void(0)" class="widget-playbutton" title="play"></a>
+                                
                                <!-- song title -->
-                                <div class="widget-title">You Hurt Me Bad</div>
+                                <div id="divWidgetPreviewTitle" class="widget-title"></div>
+                                
                                <!-- avatars -->
-                                <div class="widget-members">
-                                    <div class="widget-avatar-small"><%= image_tag "shared/avatar_david.jpg", :alt => "" %></div>
-                                    <div class="widget-avatar-small"><%= image_tag "shared/avatar_silverfox.jpg", :alt => "" %></div>
-                                    <div class="widget-avatar-small"><%= image_tag "shared/avatar_saltnpepper.jpg", :alt => "" %></div>
-                                    <div class="widget-avatar-small"><%= image_tag "shared/avatar_creepyeye.jpg", :alt => "" %></div>
-                                    <div class="widget-avatar-small"><%= image_tag "shared/avatar_silverfox.jpg", :alt => "" %></div>
-                                    <div class="widget-avatar-small"><%= image_tag "shared/avatar_saltnpepper.jpg", :alt => "" %></div>
-                                </div>
+                                <div class="widget-members"></div>
+
                                <!-- jamkazam branding -->
-                                <div class="widget-branding">live session on 
-                                    <a href="http://www.jamkazam.com">
+                                <div class="widget-branding"><span id="spnWidgetPreview" on 
+                                    <a href=<%= "#{root_url}" %>>
                                        <%= image_tag "shared/jk_logo_small.png", :size => "142x26", :align => "absbottom", :alt => "" %>
                                    </a>
                                </div>
--- a/web/app/views/music_sessions/show.html.erb
+++ b/web/app/views/music_sessions/show.html.erb
@ -95,7 +95,7 @@
          JK.app = JK.JamKazam();
          JK.app.initialize({inClient: false, layoutOpts: {layoutFooter: false}});

-          var shareDialog = new JK.ShareDialog(JK.app);
+          var shareDialog = new JK.ShareDialog(JK.app, @music_session.id, "session");
          shareDialog.initialize();

          $("#btnShare").click(function(e) {
--- a/web/app/views/recordings/show.html.erb
+++ b/web/app/views/recordings/show.html.erb
@ -94,7 +94,7 @@
          JK.app = JK.JamKazam();
          JK.app.initialize({inClient: false, layoutOpts: {layoutFooter: false}});

-          var shareDialog = new JK.ShareDialog(JK.app);
+          var shareDialog = new JK.ShareDialog(JK.app, '<%= @claimed_recording.id %>', "recording");
          shareDialog.initialize();

          $("#btnShare").click(function(e) {