From d1dff7606cc779a802c54dbc999649dd80a17adf Mon Sep 17 00:00:00 2001
From: Zach Fox <fox@highfidelity.io>
Date: Tue, 2 May 2017 14:10:24 -0700
Subject: [PATCH] Lint cleanup; Immediate share button visibility;

---
 interface/src/ui/SnapshotUploader.cpp      |   2 +
 scripts/system/html/css/SnapshotReview.css |  24 +-
 scripts/system/html/img/fb_logo72.png      | Bin 0 -> 1587 bytes
 scripts/system/html/img/twitter_logo72.png | Bin 0 -> 1394 bytes
 scripts/system/html/js/SnapshotReview.js   | 421 +++++++++++++--------
 scripts/system/snapshot.js                 |   5 +-
 6 files changed, 289 insertions(+), 163 deletions(-)
 create mode 100644 scripts/system/html/img/fb_logo72.png
 create mode 100644 scripts/system/html/img/twitter_logo72.png

diff --git a/interface/src/ui/SnapshotUploader.cpp b/interface/src/ui/SnapshotUploader.cpp
index aa37608476..3408cb8512 100644
--- a/interface/src/ui/SnapshotUploader.cpp
+++ b/interface/src/ui/SnapshotUploader.cpp
@@ -31,6 +31,7 @@ void SnapshotUploader::uploadSuccess(QNetworkReply& reply) {
         auto dataObject = doc.object().value("data").toObject();
         QString thumbnailUrl = dataObject.value("thumbnail_url").toString();
         QString imageUrl = dataObject.value("image_url").toString();
+        QString snapshotID = dataObject.value("id").toString();
         auto addressManager = DependencyManager::get<AddressManager>();
         QString placeName = _inWorldLocation.authority(); // We currently only upload shareable places, in which case this is just host.
         QString currentPath = _inWorldLocation.path();
@@ -43,6 +44,7 @@ void SnapshotUploader::uploadSuccess(QNetworkReply& reply) {
         if (dataObject.contains("shareable_url")) {
             detailsObject.insert("shareable_url", dataObject.value("shareable_url").toString());
         }
+        detailsObject.insert("snapshot_id", snapshotID);
         QString pickledDetails = QJsonDocument(detailsObject).toJson();
         userStoryObject.insert("details", pickledDetails);
         userStoryObject.insert("thumbnail_url", thumbnailUrl);
diff --git a/scripts/system/html/css/SnapshotReview.css b/scripts/system/html/css/SnapshotReview.css
index ccc9386d13..0aa422ca84 100644
--- a/scripts/system/html/css/SnapshotReview.css
+++ b/scripts/system/html/css/SnapshotReview.css
@@ -104,7 +104,7 @@ input[type=button].naked:active {
 */
 
 /*
-// START styling of share bar
+// START styling of share overlay
 */
 .shareControls {
     display: flex;
@@ -212,6 +212,28 @@ input[type=button].naked:active {
 // END styling of share overlay
 */
 
+/*
+// START styling of uploading message
+*/
+.uploadingMessage {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    text-align: center;
+    background-color: rgba(0, 0, 0, 0.8);
+    left: 0;
+    top: 0;
+}
+.uploadingMessage > img {
+    width: 72px;
+    height: 72px;
+    display: block;
+    margin: 60px auto 10px auto;
+}
+/*
+// END styling of uploading message
+*/
+
 /*
 // START styling of snapshot controls (bottom panel) and its contents
 */
diff --git a/scripts/system/html/img/fb_logo72.png b/scripts/system/html/img/fb_logo72.png
new file mode 100644
index 0000000000000000000000000000000000000000..8e3a2370dd2bab99c363f5bf5d06d8e89ee30e5c
GIT binary patch
literal 1587
zcmbVMeM}Q)7(Y=F4GtK@PgstVZElmc*DtOoEwpz9Di*p@uoI(P+oNsD_3HJY2P_--
zfgke&L`)o_Btz%?V#w5>PIM}cIMiS^6#=JNK#Vw*MFj<yL#q43_{W~)O`be?e!u7W
zJ@50r>kMhhQ>V<D0sz2NT?%dl03d}wL4g1OWcD{E0{}3S)tcE1I+yhk3<;=hw1ot9
z6k#WgBw;ID-b%&;z<7t#WM<9!g{YOL1O%TW;3yBkTYLiNA*?Qv1udlA=~hC2pJ;|a
zr%eehlIcZy4@NqiDMbvKQIuw~7P+hn8<d~|<2jV0JQT?iAV=l7y(p)IMtM=U7v;l3
z2pmmeT}tRxQ)ayZ#At>DWdcd8RRqJJTrPm6GPxX{2Z}|oSSS(;Me<l!ipu1uI1U^$
zNCn0-wp`SRCymu&Y`IFv!LlAyDD?S!0-r=cGj<`YP$+l~u{f5o<;Hpo-7LYyy1jG!
z3^?hvGENWcq}?FTNLc86RtZ6V36w{#e@*Q6jt$C6Q$mjL2w{OpNKw45QNdo;NWN*~
zt=V2vp@$S2NiUtxSV<$9JI4>^D9^hK@rfS29!+PQcBh-j!)a?iMY>rXu7o(sBd|Gb
zs7Qv0U^q@HiW7_E2n-`4M1o<k1QB6kwM?t=bG!|!LDW)AE|IC_upEZ9Vnm}=YcQ=u
zg5a1&q7eD9I=7c4+*Z<G*XgwRvC?;9QH&u8mS#*eo#)>GgM(&iuY>l0ScV*&t0$~Z
zHy`+fzo1uoaguQskhUa-rohn&qt3T<pvL0Vnk2PCf{ZE0V5tI8Cn*qEtx;oIXbfxn
zKT{K`z<43Q9{*Vvf5?a@@$T#8SAlPy59zikAqGlN4a+8P1AqWRhpSCo$NkP`S2z(F
z`0!)90B-)#Sp9y#A!7ILtU0R_U7s(GWDTpJ1vLk%D^t%LSDgR)bOX9>Vqg35ecu>X
zL25j?YLCTb-O|&sWMSU$&fJRb>YcTFT9qO3UpzoIg*-j=^wfk)-p7w)V!GPvSo5sX
z6B*^Is_t#42C|m-)D@qu9V%I}^*!Ar>0nc8<W2KOx`XI}8P9{W6A5%~_#Y0#{0UHK
zX^`nMH+!(hN`>uMz~12&Mbt#aI&RL!bB>J+n41odYc#bKHLUn$@#Gts;TN~(|4`a`
zq5j+1dwV_eTLkAT?ka)J7e*qx_Une%u6p6PHGQbxd^MnNNYFV$pYvDVbZOOw>@{XX
zSsL>qc&Ny-qwZK|UC)`CYV2jy_e9B|rAXNbH)+{G!MdYm%c+=4`Q@K}*IRtMvUPi+
z{L%B1h;Jx#QTx7sqBcfHJPb>z3h!z-e(UU}rIVr**Y7>+tS=1DNbk-O94WcHEI6W#
z85rNc8GXL;!^+R@44n(kI_!Ed%TiI^IM{oJy|?Sn`&?~KqL1yqXzHk`{ORh{zV`LE
z9~^8cxN*HRCiI$mbQb4A_eMXl2=}zyEBLuMr1z2IiEI~`sj6#?v>bW-Rdh0#`I~WK
z>h^%rt!G{EnuM;SO;he#(aYDqY#X%0skI&0hV(1)`e%`)ropU{P3af+Z*17|!Aa(2
z{h{)jrJIZ4fUvcRe4!bBCkO}2Mk7Hu7!daB?}>pkx5D#k?X01vX`(c`?W!epUS;;Q
sE7^S|?6hW8Memb{eba`wwS|le1lD8gSC&6Z!uW4or%l5TX>wNl3u=i}%K!iX

literal 0
HcmV?d00001

diff --git a/scripts/system/html/img/twitter_logo72.png b/scripts/system/html/img/twitter_logo72.png
new file mode 100644
index 0000000000000000000000000000000000000000..862f2452285534cc699d9b8cd50ede0e92c2c083
GIT binary patch
literal 1394
zcmV-&1&#WNP)<h;3K|Lk000e1NJLTq002k;002k`0ssI2+K(g<00009a7bBm001QE
z001QE0Z=68_y7O}BuPX;RA_<inp;d9RTzN(GiP@8M!P@@%d+jZnsTdcV@y#g5}{R#
zmqbl8+C(Ka=!*%_#0OJN`e0IxrbcVjib_Ik3^tmyO=?UuMG+d1N@+`>3WXL}mU6Q!
zd!4HfH9!}ZopW{;GGxBDo$Sm%-<)&)^UuGFHrD%LHNvd)4WtS~Om7%sdczRY8-|$P
zFvRqRA*MGBF}<;B#n_b%@8D2=I+I~RVFCL6vNtGeb>)>2!w4!p?EWHdXBKAA-0=aw
z+|Va{`?nAfl$cZQ&BpzHc_I>fJRXR&HBgqzwvLKI5>M7?Lm!t~OI<kL7ra5`_2zKf
z4G91^4CT3ORUwyQh9^#kWVK#|BWA{M<N?bsL*iSl5%n?Vv%$_ZJYw~%S!!*&?daG;
zwl6R9o7XaBE}UUTvI6_hgoz@OiS5c^*ICf>d8ViY2iu9=EEsAl5?I~BjG<-+H~aDH
z9=_2l0ssO~8Ivq4?#%vw{!|s3J}j|tggLc(E4M9^>>LH4u7^L|8NJVm4;Gv6bf`U@
zEKII#ZlyoF#dPdpn{(cgr7>fuF5(h@?{>TaxgZ_?`ApjJy|&??a&=nm;wBSAw_Dur
z#6LZ5-@8%Od@jjhGc9VL!Ymuom{J#ZaHy__uj}U3pGYP)8j79aSyohAVLe)I-IQqM
z+`XQ%7*GI?UgqCD7bRNJWXYp*LRxqb0X*hm_qg%#KC!l&zdp10Y{|CLhzT;h-4^-2
zcfr1v2(n;JBhoa#cnC8_FBX`7f689J$NJ<QCI=Tg>!@}I2nb38xfPI(SV&aruL$!K
zaSRNC3O8HfX2T+MPDtm*rLIY--!FTE%6M3_a!C!uCDrF$e5HrYPfsw^Ru)Qfa7oTw
zc_C7H1!+bLfOINu%fy1LRR0$Cg@|vHrOF-ulBJ9}$fDKk;F_McR~K;&y#n>KB*Gh{
zj6yaQug}Pp9`>bz<$H_kRlOs}Kz55~M;A%=DWz+YG9sB+vrinMof{O0GIWeDi<lt8
zM;D@Wktn!wQyvR1OY#7KAFc|guL*R)Ncnk?K0y(S$qKyD68Uvlq>ZQ+MS&9o^igQ?
zTSS6a8pH2(L>G1@G^EKV4#p`v)j*lJIR?Jz;dh@59`1}zs&25TM**nqPHMtacBzV;
z>{sPhURKgf2ot|#C8qs`)Z$BOwo{H+i%<OLrsUvKVkIkZs3S_(ESiN<Oj6*TwkV&P
z?Yf~)px(Y_p)ZauOiFK_jnLKXOE5SiANos!tum>q@5F#m-56HiolOWYK}~bSALm_`
zh-AyzGhT7`$>67#_~hH}vH}O%BFRs}TM)On<H0hpc@6X27SpSDE$9lUKmqvReDt$R
z1bwIk_oLN?>@0dA-&9pdWu?IT=c8YAX=VkQh^@DveR-yri@0^<Z9@PEi*TSd@?*co
z^(Up6i2+X<Q|!ch-0XvH))M!ZlLYil%Qejr>X)u1P%D;gMXzn=wq{@x0}eBC*^re*
z$!yM13F><IPcBA7sVS!kk_Sfc=q9#iySXqUsaz_`aO#?H<RahiPhmrjI4d#;%3SQe
zJX5(F+gP$O8w$v$2E^}rg`q&odyMqy-oc?#7v7b_-jjv%9Sj#|nT>^&?kTB#O!~to
zbxlc{S1R$)W*@@{Tz1B3MQb@^#vm#X5@0GKkAxIW$_NUy*~cUWh6D0&K$DAU!>awC
zhasjn3^Bc7i0KVOOm7%sdczRY8-|$PShZsR0V1^GX^jP^B>(^b07*qoM6N<$f{Z<n
AZ2$lO

literal 0
HcmV?d00001

diff --git a/scripts/system/html/js/SnapshotReview.js b/scripts/system/html/js/SnapshotReview.js
index ed290e9756..8185117669 100644
--- a/scripts/system/html/js/SnapshotReview.js
+++ b/scripts/system/html/js/SnapshotReview.js
@@ -1,3 +1,5 @@
+/*jslint browser:true */
+/*jslint maxlen: 180*/
 "use strict";
 //
 //  SnapshotReview.js
@@ -17,23 +19,23 @@ function showSetupInstructions() {
     var snapshotImagesDiv = document.getElementById("snapshot-images");
     snapshotImagesDiv.className = "snapshotInstructions";
     snapshotImagesDiv.innerHTML = '<img class="centeredImage" src="./img/snapshotIcon.png" alt="Snapshot Instructions" width="64" height="64"/>' +
-    '<br/>' +
-    '<p>This app lets you take and share snaps and GIFs with your connections in High Fidelity.</p>' +
-    "<h4>Setup Instructions</h4>" +
-    "<p>Before you can begin taking snaps, please choose where you'd like to save snaps on your computer:</p>" +
-    '<br/>' +
-    '<div style="text-align:center;">' +
-        '<input class="blueButton" style="margin-left:auto;margin-right:auto;width:130px;" type="button" value="CHOOSE" onclick="chooseSnapshotLocation()" />' +
-    '</div>';
+        '<br/>' +
+        '<p>This app lets you take and share snaps and GIFs with your connections in High Fidelity.</p>' +
+        "<h4>Setup Instructions</h4>" +
+        "<p>Before you can begin taking snaps, please choose where you'd like to save snaps on your computer:</p>" +
+        '<br/>' +
+        '<div style="text-align:center;">' +
+            '<input class="blueButton" style="margin-left:auto;margin-right:auto;width:130px;" type="button" value="CHOOSE" onclick="chooseSnapshotLocation()" />' +
+        '</div>';
     document.getElementById("snap-button").disabled = true;
 }
 function showSetupComplete() {
     var snapshotImagesDiv = document.getElementById("snapshot-images");
     snapshotImagesDiv.className = "snapshotInstructions";
     snapshotImagesDiv.innerHTML = '<img class="centeredImage" src="./img/snapshotIcon.png" alt="Snapshot Instructions" width="64" height="64"/>' +
-    '<br/>' +
-    "<h4>You're all set!</h4>" +
-    '<p>Try taking a snapshot by pressing the red button below.</p>';
+        '<br/>' +
+        "<h4>You're all set!</h4>" +
+        '<p>Try taking a snapshot by pressing the red button below.</p>';
 }
 function chooseSnapshotLocation() {
     EventBridge.emitWebEvent(JSON.stringify({
@@ -52,68 +54,71 @@ function clearImages() {
     imageCount = 0;
     idCounter = 0;
 }
-function addImage(image_data, isGifLoading, canShare, isShowingPreviousImages, blastButtonDisabled, hifiButtonDisabled) {
-    if (!image_data.localPath) {
-        return;
+
+function selectImageToShare(selectedID, isSelected) {
+    if (selectedID.id) {
+        selectedID = selectedID.id; // sometimes (?), `selectedID` is passed as an HTML object to these functions; we just want the ID
     }
-    var id = "p" + idCounter++;
-    // imageContainer setup
-    var imageContainer = document.createElement("DIV");
-    imageContainer.id = id;
-    imageContainer.style.width = "95%";
-    imageContainer.style.height = "240px";
-    imageContainer.style.margin = "5px auto";
-    imageContainer.style.display = "flex";
-    imageContainer.style.justifyContent = "center";
-    imageContainer.style.alignItems = "center";
-    imageContainer.style.position = "relative";
-    // img setup
-    var img = document.createElement("IMG");
-    img.id = id + "img";
-    if (imageCount > 1) {
-        img.setAttribute("class", "multiple");
-    }
-    img.src = image_data.localPath;
-    imageContainer.appendChild(img);
-    document.getElementById("snapshot-images").appendChild(imageContainer);
-    paths.push(image_data.localPath);
-    var isGif = img.src.split('.').pop().toLowerCase() === "gif";
-    if (isGif) {
-        imageContainer.innerHTML += '<span class="gifLabel">GIF</span>';
-    }
-    if (!isGifLoading && !isShowingPreviousImages && canShare) {
-        shareForUrl(id);
-    } else if (isShowingPreviousImages && canShare && image_data.story_id) {
-        appendShareBar(id, image_data.story_id, isGif, blastButtonDisabled, hifiButtonDisabled)
+    var imageContainer = document.getElementById(selectedID),
+        image = document.getElementById(selectedID + 'img'),
+        shareBar = document.getElementById(selectedID + "shareBar"),
+        shareButtonsDiv = document.getElementById(selectedID + "shareButtonsDiv"),
+        showShareButtonsButton = document.getElementById(selectedID + "showShareButtonsButton"),
+        itr,
+        containers = document.getElementsByClassName("shareControls");
+
+    if (isSelected) {
+        showShareButtonsButton.onclick = function () { selectImageToShare(selectedID, false); };
+        showShareButtonsButton.classList.remove("inactive");
+        showShareButtonsButton.classList.add("active");
+
+        image.onclick = function () { selectImageToShare(selectedID, false); };
+        imageContainer.style.outline = "4px solid #00b4ef";
+        imageContainer.style.outlineOffset = "-4px";
+
+        shareBar.style.backgroundColor = "rgba(0, 0, 0, 0.5)";
+
+        shareButtonsDiv.style.visibility = "visible";
+
+        for (itr = 0; itr < containers.length; itr += 1) {
+            var parentID = containers[itr].id.slice(0, 2);
+            if (parentID !== selectedID) {
+                selectImageToShare(parentID, false);
+            }
+        }
+    } else {
+        showShareButtonsButton.onclick = function () { selectImageToShare(selectedID, true); };
+        showShareButtonsButton.classList.remove("active");
+        showShareButtonsButton.classList.add("inactive");
+
+        image.onclick = function () { selectImageToShare(selectedID, true); };
+        imageContainer.style.outline = "none";
+
+        shareBar.style.backgroundColor = "rgba(0, 0, 0, 0.0)";
+
+        shareButtonsDiv.style.visibility = "hidden";
     }
 }
-function appendShareBar(divID, story_id, isGif, blastButtonDisabled, hifiButtonDisabled) {
-    var story_url = "https://highfidelity.com/user_stories/" + story_id;
-    var parentDiv = document.getElementById(divID);
-    parentDiv.setAttribute('data-story-id', story_id);
-    document.getElementById(divID).appendChild(createShareBar(divID, isGif, story_url, blastButtonDisabled, hifiButtonDisabled));
-    if (divID === "p0") {
-        selectImageToShare(divID, true);
-    }
-}
-function createShareBar(parentID, isGif, shareURL, blastButtonDisabled, hifiButtonDisabled) {
-    var shareBar = document.createElement("div");
+function createShareBar(parentID, isGif, blastButtonDisabled, hifiButtonDisabled) {
+    var shareBar = document.createElement("div"),
+        shareButtonsDivID = parentID + "shareButtonsDiv",
+        showShareButtonsButtonDivID = parentID + "showShareButtonsButtonDiv",
+        showShareButtonsButtonID = parentID + "showShareButtonsButton",
+        showShareButtonsLabelID = parentID + "showShareButtonsLabel",
+        blastToConnectionsButtonID = parentID + "blastToConnectionsButton",
+        shareWithEveryoneButtonID = parentID + "shareWithEveryoneButton",
+        facebookButtonID = parentID + "facebookButton",
+        twitterButtonID = parentID + "twitterButton";
+
     shareBar.id = parentID + "shareBar";
     shareBar.className = "shareControls";
-    var shareButtonsDivID = parentID + "shareButtonsDiv";
-    var showShareButtonsButtonDivID = parentID + "showShareButtonsButtonDiv";
-    var showShareButtonsButtonID = parentID + "showShareButtonsButton";
-    var showShareButtonsLabelID = parentID + "showShareButtonsLabel";
-    var blastToConnectionsButtonID = parentID + "blastToConnectionsButton";
-    var shareWithEveryoneButtonID = parentID + "shareWithEveryoneButton";
-    var facebookButtonID = parentID + "facebookButton";
-    var twitterButtonID = parentID + "twitterButton";
-    shareBar.innerHTML += '' +
-        '<div class="shareButtons" id="' + shareButtonsDivID + '" style="visibility:hidden">' +
-            '<input type="button"' + (blastButtonDisabled ? ' disabled' : '') + ' class="blastToConnections blueButton" id="' + blastToConnectionsButtonID + '" value="BLAST TO MY CONNECTIONS" onclick="blastToConnections(' + parentID + ', ' + isGif + ')" />' +
-            '<input type="button"' + (hifiButtonDisabled ? ' disabled' : '') + ' class="shareWithEveryone" id="' + shareWithEveryoneButtonID + '" onclick="shareWithEveryone(' + parentID + ', ' + isGif + ')" />' +
-            '<a class="facebookButton" id="' + facebookButtonID + '" onclick="shareButtonClicked(' + parentID + ')" target="_blank" href="https://www.facebook.com/dialog/feed?app_id=1585088821786423&link=' + shareURL + '"></a>' +
-            '<a class="twitterButton" id="' + twitterButtonID + '" onclick="shareButtonClicked(' + parentID + ')" target="_blank" href="https://twitter.com/intent/tweet?text=I%20just%20took%20a%20snapshot!&url=' + shareURL + '&via=highfidelity&hashtags=VR,HiFi"></a>' +
+    shareBar.innerHTML = '<div class="shareButtons" id="' + shareButtonsDivID + '" style="visibility:hidden">' +
+            '<input type="button"' + (blastButtonDisabled ? ' disabled' : '') + ' class="blastToConnections blueButton" id="' +
+                blastToConnectionsButtonID + '" value="BLAST TO MY CONNECTIONS" onclick="blastToConnections(' + parentID + ', ' + isGif + ')" />' +
+            '<input type="button"' + (hifiButtonDisabled ? ' disabled' : '') + ' class="shareWithEveryone" id="' +
+                shareWithEveryoneButtonID + '" onclick="shareWithEveryone(' + parentID + ', ' + isGif + ')" />' +
+            '<a class="facebookButton" id="' + facebookButtonID + '" onclick="shareButtonClicked(\'facebook\', ' + parentID + ')"></a>' +
+            '<a class="twitterButton" id="' + twitterButtonID + '" onclick="shareButtonClicked(\'twitter\', ' + parentID + ')"></a>' +
         '</div>' +
         '<div class="showShareButtonsButtonDiv" id="' + showShareButtonsButtonDivID + '">' +
             '<label id="' + showShareButtonsLabelID + '" for="' + showShareButtonsButtonID + '">SHARE</label>' +
@@ -124,103 +129,196 @@ function createShareBar(parentID, isGif, shareURL, blastButtonDisabled, hifiButt
         '</div>';
 
     // Add onclick handler to parent DIV's img to toggle share buttons
-    document.getElementById(parentID + 'img').onclick = function () { selectImageToShare(parentID, true) };
+    document.getElementById(parentID + 'img').onclick = function () { selectImageToShare(parentID, true); };
 
     return shareBar;
 }
-function selectImageToShare(selectedID, isSelected) {
-    if (selectedID.id) {
-        selectedID = selectedID.id; // sometimes (?), `selectedID` is passed as an HTML object to these functions; we just want the ID
-    }
-    var imageContainer = document.getElementById(selectedID);
-    var image = document.getElementById(selectedID + 'img');
-    var shareBar = document.getElementById(selectedID + "shareBar");
-    var shareButtonsDiv = document.getElementById(selectedID + "shareButtonsDiv");
-    var showShareButtonsButton = document.getElementById(selectedID + "showShareButtonsButton");
-
-    if (isSelected) {
-        showShareButtonsButton.onclick = function () { selectImageToShare(selectedID, false) };
-        showShareButtonsButton.classList.remove("inactive");
-        showShareButtonsButton.classList.add("active");
-
-        image.onclick = function () { selectImageToShare(selectedID, false) };
-        imageContainer.style.outline = "4px solid #00b4ef";
-        imageContainer.style.outlineOffset = "-4px";
-
-        shareBar.style.backgroundColor = "rgba(0, 0, 0, 0.5)";
-
-        shareButtonsDiv.style.visibility = "visible";
-
-        var containers = document.getElementsByClassName("shareControls");
-        var parentID;
-        for (var i = 0; i < containers.length; ++i) {
-            parentID = containers[i].id.slice(0, 2);
-            if (parentID !== selectedID) {
-                selectImageToShare(parentID, false);
-            }
-        }
-    } else {
-        showShareButtonsButton.onclick = function () { selectImageToShare(selectedID, true) };
-        showShareButtonsButton.classList.remove("active");
-        showShareButtonsButton.classList.add("inactive");
-
-        image.onclick = function () { selectImageToShare(selectedID, true) };
-        imageContainer.style.outline = "none";
-
-        shareBar.style.backgroundColor = "rgba(0, 0, 0, 0.0)";
-
-        shareButtonsDiv.style.visibility = "hidden";
+function appendShareBar(divID, isGif, blastButtonDisabled, hifiButtonDisabled) {
+    document.getElementById(divID).appendChild(createShareBar(divID, isGif, blastButtonDisabled, hifiButtonDisabled));
+    if (divID === "p0") {
+        selectImageToShare(divID, true);
     }
 }
 function shareForUrl(selectedID) {
     EventBridge.emitWebEvent(JSON.stringify({
         type: "snapshot",
         action: "shareSnapshotForUrl",
-        data: paths[parseInt(selectedID.substring(1))]
+        data: paths[parseInt(selectedID.substring(1), 10)]
     }));
 }
+function addImage(image_data, isGifLoading, canShare, isShowingPreviousImages, blastButtonDisabled, hifiButtonDisabled) {
+    if (!image_data.localPath) {
+        return;
+    }
+    var id = "p" + (idCounter++),
+        imageContainer = document.createElement("DIV"),
+        img = document.createElement("IMG"),
+        isGif = img.src.split('.').pop().toLowerCase() === "gif";
+    imageContainer.id = id;
+    imageContainer.style.width = "95%";
+    imageContainer.style.height = "240px";
+    imageContainer.style.margin = "5px auto";
+    imageContainer.style.display = "flex";
+    imageContainer.style.justifyContent = "center";
+    imageContainer.style.alignItems = "center";
+    imageContainer.style.position = "relative";
+    img.id = id + "img";
+    img.src = image_data.localPath;
+    imageContainer.appendChild(img);
+    document.getElementById("snapshot-images").appendChild(imageContainer);
+    paths.push(image_data.localPath);
+    if (isGif) {
+        imageContainer.innerHTML += '<span class="gifLabel">GIF</span>';
+    }
+    if (!isGifLoading && !isShowingPreviousImages && canShare) {
+        shareForUrl(id);
+        appendShareBar(id, isGif, blastButtonDisabled, hifiButtonDisabled);
+    }
+    if (isShowingPreviousImages && image_data.story_id) {
+        appendShareBar(id, isGif, blastButtonDisabled, hifiButtonDisabled);
+        updateShareInfo(id, image_data.story_id);
+    }
+}
+function showUploadingMessage(selectedID, destination) {
+    if (selectedID.id) {
+        selectedID = selectedID.id; // sometimes (?), `containerID` is passed as an HTML object to these functions; we just want the ID
+    }
+
+    var uploadingMessage = document.createElement("div");
+    uploadingMessage.id = selectedID + "uploadingMessage";
+    uploadingMessage.className = "uploadingMessage";
+    uploadingMessage.setAttribute("data-destination", destination);
+
+    var socialIcon = document.createElement("img");
+    switch (destination) {
+        case 'blast':
+            socialIcon.src = "img/shareIcon.png";
+            break;
+        case 'hifi':
+            socialIcon.src = "img/shareToFeed.png";
+            break;
+        case 'facebook':
+            socialIcon.src = "img/fb_logo72.png";
+            break;
+        case 'twitter':
+            socialIcon.src = "img/twitter_logo72.png";
+            break;
+    }
+    uploadingMessage.appendChild(socialIcon);
+
+    uploadingMessage.innerHTML += '<span>Preparing Snapshot for Sharing...</span>';
+
+    document.getElementById(selectedID).appendChild(uploadingMessage);
+}
+function hideUploadingMessage(selectedID, storyID) {
+    if (selectedID.id) {
+        selectedID = selectedID.id; // sometimes (?), `containerID` is passed as an HTML object to these functions; we just want the ID
+    }
+
+    var uploadingMessage = document.getElementById(selectedID + "uploadingMessage");
+    if (uploadingMessage) {
+        uploadingMessage.remove();
+        var destination = uploadingMessage.getAttribute("data-destination");
+
+        switch (destination) {
+            case 'blast':
+                blastToConnections(selectedID, selectedID === "p1");
+                break;
+            case 'hifi':
+                shareWithEveryone(selectedID, selectedID === "p1");
+                break;
+            case 'facebook':
+                var facebookButton = document.getElementById(selectedID + "facebookButton");
+                window.open(facebookButton.getAttribute("href"), "_blank");
+                break;
+            case 'twitter':
+                var twitterButton = document.getElementById(selectedID + "twitterButton");
+                window.open(twitterButton.getAttribute("href"), "_blank");
+                break;
+        }
+
+        EventBridge.emitWebEvent(JSON.stringify({
+            type: "snapshot",
+            action: "removeFromStoryIDsToMaybeDelete",
+            story_id: storyID
+        }));
+    }
+}
+function updateShareInfo(containerID, storyID) {
+    if (containerID.id) {
+        containerID = containerID.id; // sometimes (?), `containerID` is passed as an HTML object to these functions; we just want the ID
+    }
+    var shareBar = document.getElementById(containerID + "shareBar"),
+        parentDiv = document.getElementById(containerID),
+        shareURL = "https://highfidelity.com/user_stories/" + storyID,
+        facebookButton = document.getElementById(containerID + "facebookButton"),
+        twitterButton = document.getElementById(containerID + "twitterButton");
+
+    parentDiv.setAttribute('data-story-id', storyID);
+
+    facebookButton.setAttribute("target", "_blank");
+    facebookButton.setAttribute("href", 'https://www.facebook.com/dialog/feed?app_id=1585088821786423&link=' + shareURL);
+
+    twitterButton.setAttribute("target", "_blank");
+    twitterButton.setAttribute("href", 'https://twitter.com/intent/tweet?text=I%20just%20took%20a%20snapshot!&url=' + shareURL + '&via=highfidelity&hashtags=VR,HiFi');
+
+    hideUploadingMessage(containerID, storyID);
+}
 function blastToConnections(selectedID, isGif) {
-    selectedID = selectedID.id; // `selectedID` is passed as an HTML object to these functions; we just want the ID
+    if (selectedID.id) {
+        selectedID = selectedID.id; // sometimes (?), `selectedID` is passed as an HTML object to these functions; we just want the ID
+    }
 
     document.getElementById(selectedID + "blastToConnectionsButton").disabled = true;
 
-    EventBridge.emitWebEvent(JSON.stringify({
-        type: "snapshot",
-        action: "blastToConnections",
-        story_id: document.getElementById(selectedID).getAttribute("data-story-id"),
-        isGif: isGif
-    }));
+    var storyID = document.getElementById(selectedID).getAttribute("data-story-id");
+
+    if (storyID) {
+        EventBridge.emitWebEvent(JSON.stringify({
+            type: "snapshot",
+            action: "blastToConnections",
+            story_id: storyID,
+            isGif: isGif
+        }));
+    } else {
+        showUploadingMessage(selectedID, 'blast');
+    }
 }
 function shareWithEveryone(selectedID, isGif) {
-    selectedID = selectedID.id; // `selectedID` is passed as an HTML object to these functions; we just want the ID
+    if (selectedID.id) {
+        selectedID = selectedID.id; // sometimes (?), `selectedID` is passed as an HTML object to these functions; we just want the ID
+    }
 
     document.getElementById(selectedID + "shareWithEveryoneButton").disabled = true;
 
-    EventBridge.emitWebEvent(JSON.stringify({
-        type: "snapshot",
-        action: "shareSnapshotWithEveryone",
-        story_id: document.getElementById(selectedID).getAttribute("data-story-id"),
-        isGif: isGif
-    }));
-}
-function shareButtonClicked(selectedID) {
-    selectedID = selectedID.id; // `selectedID` is passed as an HTML object to these functions; we just want the ID
-    EventBridge.emitWebEvent(JSON.stringify({
-        type: "snapshot",
-        action: "shareButtonClicked",
-        story_id: document.getElementById(selectedID).getAttribute("data-story-id")
-    }));
-}
-function cancelSharing(selectedID) {
-    selectedID = selectedID.id; // `selectedID` is passed as an HTML object to these functions; we just want the ID
-    var shareBar = document.getElementById(selectedID + "shareBar");
+    var storyID = document.getElementById(selectedID).getAttribute("data-story-id");
 
-    shareBar.style.display = "inline";
+    if (storyID) {
+        EventBridge.emitWebEvent(JSON.stringify({
+            type: "snapshot",
+            action: "shareSnapshotWithEveryone",
+            story_id: storyID,
+            isGif: isGif
+        }));
+    } else {
+        showUploadingMessage(selectedID, 'hifi');
+    }
+}
+function shareButtonClicked(destination, selectedID) {
+    if (selectedID.id) {
+        selectedID = selectedID.id; // sometimes (?), `selectedID` is passed as an HTML object to these functions; we just want the ID
+    }
+    var storyID = document.getElementById(selectedID).getAttribute("data-story-id");
+
+    if (!storyID) {
+        showUploadingMessage(selectedID, destination);
+    }
 }
 
 function handleCaptureSetting(setting) {
-    var stillAndGif = document.getElementById('stillAndGif');
-    var stillOnly = document.getElementById('stillOnly');
+    var stillAndGif = document.getElementById('stillAndGif'),
+        stillOnly = document.getElementById('stillOnly');
+
     stillAndGif.checked = setting;
     stillOnly.checked = !setting;
 
@@ -229,19 +327,20 @@ function handleCaptureSetting(setting) {
             type: "snapshot",
             action: "captureStillAndGif"
         }));
-    }
+    };
+
     stillOnly.onclick = function () {
         EventBridge.emitWebEvent(JSON.stringify({
             type: "snapshot",
             action: "captureStillOnly"
         }));
-    }
+    };
 
 }
 window.onload = function () {
     // Uncomment the line below to test functionality in a browser.
     // See definition of "testInBrowser()" to modify tests.
-    //testInBrowser(false);
+    //testInBrowser(2);
     openEventBridge(function () {
         // Set up a handler for receiving the data, and tell the .js we are ready to receive it.
         EventBridge.scriptEventReceived.connect(function (message) {
@@ -251,7 +350,9 @@ window.onload = function () {
             if (message.type !== "snapshot") {
                 return;
             }
-            
+
+            var messageOptions = message.options;
+
             switch (message.action) {
                 case 'showSetupInstructions':
                     showSetupInstructions();
@@ -265,9 +366,8 @@ window.onload = function () {
                     break;
                 case 'showPreviousImages':
                     clearImages();
-                    var messageOptions = message.options;
                     imageCount = message.image_data.length;
-                    message.image_data.forEach(function (element, idx, array) {
+                    message.image_data.forEach(function (element, idx) {
                         addImage(element, true, message.canShare, true, message.image_data[idx].blastButtonDisabled, message.image_data[idx].hifiButtonDisabled);
                     });
                     break;
@@ -275,28 +375,28 @@ window.onload = function () {
                     // The last element of the message contents list contains a bunch of options,
                     // including whether or not we can share stuff
                     // The other elements of the list contain image paths.
-                    var messageOptions = message.options;
 
                     if (messageOptions.containsGif) {
                         if (messageOptions.processingGif) {
                             imageCount = message.image_data.length + 1; // "+1" for the GIF that'll finish processing soon
                             message.image_data.push({ localPath: messageOptions.loadingGifPath });
-                            message.image_data.forEach(function (element, idx, array) {
+                            message.image_data.forEach(function (element, idx) {
                                 addImage(element, idx === 1, idx === 0 && messageOptions.canShare, false);
                             });
                         } else {
-                            var gifPath = message.image_data[0].localPath;
-                            var p1img = document.getElementById('p1img');
+                            var gifPath = message.image_data[0].localPath,
+                                p1img = document.getElementById('p1img');
                             p1img.src = gifPath;
 
                             paths[1] = gifPath;
                             if (messageOptions.canShare) {
                                 shareForUrl("p1");
+                                appendShareBar("p1", true, false, false);
                             }
                         }
                     } else {
                         imageCount = message.image_data.length;
-                        message.image_data.forEach(function (element, idx, array) {
+                        message.image_data.forEach(function (element) {
                             addImage(element, false, messageOptions.canShare, false);
                         });
                     }
@@ -306,7 +406,7 @@ window.onload = function () {
                     break;
                 case 'snapshotUploadComplete':
                     var isGif = message.image_url.split('.').pop().toLowerCase() === "gif";
-                    appendShareBar(isGif ? "p1" : "p0", message.story_id, isGif);
+                    updateShareInfo(isGif ? "p1" : "p0", message.story_id);
                     break;
                 default:
                     console.log("Unknown message action received in SnapshotReview.js.");
@@ -333,13 +433,18 @@ function takeSnapshot() {
     }));
 }
 
-function testInBrowser(isTestingSetupInstructions) {
-    if (isTestingSetupInstructions) {
+function testInBrowser(test) {
+    if (test === 0) {
         showSetupInstructions();
-    } else {
+    } else if (test === 1) {
         imageCount = 1;
         //addImage({ localPath: 'http://lorempixel.com/553/255' });
-        addImage({ localPath: 'C:/Users/valef/Desktop/hifi-snap-by-zfox-on-2017-05-01_15-48-15.gif' }, false, true, true, false, false);
-        addImage({ localPath: 'C:/Users/valef/Desktop/hifi-snap-by-zfox-on-2017-05-01_15-48-15.jpg' }, false, true, true, false, false);
+        addImage({ localPath: 'D:/Dropbox/Screenshots/High Fidelity Snapshots/hifi-snap-by-zfox-on-2017-05-01_13-28-58.gif' }, false, true, true, false, false);
+        addImage({ localPath: 'D:/Dropbox/Screenshots/High Fidelity Snapshots/hifi-snap-by-zfox-on-2017-05-01_13-28-58.jpg' }, false, true, true, false, false);
+    } else if (test === 2) {
+        addImage({ localPath: 'D:/Dropbox/Screenshots/High Fidelity Snapshots/hifi-snap-by-zfox-on-2017-05-01_13-28-58.gif' }, false, true, true, false, false);
+        addImage({ localPath: 'D:/Dropbox/Screenshots/High Fidelity Snapshots/hifi-snap-by-zfox-on-2017-05-01_13-28-58.jpg' }, false, true, true, false, false);
+        showUploadingMessage("p0", 'facebook');
+        showUploadingMessage("p1", 'twitter');
     }
 }
diff --git a/scripts/system/snapshot.js b/scripts/system/snapshot.js
index d0d1bd96f5..eb45a07e2f 100644
--- a/scripts/system/snapshot.js
+++ b/scripts/system/snapshot.js
@@ -182,7 +182,6 @@ function onMessage(message) {
             break;
         case 'blastToConnections':
             isLoggedIn = Account.isLoggedIn();
-            storyIDsToMaybeDelete.splice(storyIDsToMaybeDelete.indexOf(message.story_id), 1);
             if (message.isGif) {
                 Settings.setValue("previousAnimatedSnapBlastingDisabled", true);
             } else {
@@ -242,7 +241,6 @@ function onMessage(message) {
             break;
         case 'shareSnapshotWithEveryone':
             isLoggedIn = Account.isLoggedIn();
-            storyIDsToMaybeDelete.splice(storyIDsToMaybeDelete.indexOf(message.story_id), 1);
             if (message.isGif) {
                 Settings.setValue("previousAnimatedSnapHifiSharingDisabled", true);
             } else {
@@ -283,8 +281,7 @@ function onMessage(message) {
                 snapshotToShareAfterLogin = { path: message.data, href: message.href || href };
             }
             break;
-        case 'shareButtonClicked':
-            print('Twitter or FB "Share" button clicked! Removing ID', message.story_id, 'from storyIDsToMaybeDelete[].');
+        case 'removeFromStoryIDsToMaybeDelete':
             storyIDsToMaybeDelete.splice(storyIDsToMaybeDelete.indexOf(message.story_id), 1);
             print('storyIDsToMaybeDelete[] now:', JSON.stringify(storyIDsToMaybeDelete));
             break;