merge with master
diff --git a/extension/CSXS/manifest.xml b/extension/CSXS/manifest.xml
index bfa91ff..e159a79 100644
--- a/extension/CSXS/manifest.xml
+++ b/extension/CSXS/manifest.xml
@@ -6,11 +6,8 @@
 	</ExtensionList>
 	<ExecutionEnvironment>
 		<HostList>
-            <!-- Uncomment Host tags according to the apps you want your panel to support -->
-            <!-- Photoshop -->
-
             <Host Name="AEFT" Version="[13.0,13.9]" />
-            <Host Name="PHSP" Version="[15.0,15.9]" />
+            <Host Name="PPRO" Version="[8.0,8.9]" />
 
             <!-- Illustrator -->
             <!-- <Host Name="ILST" Version="[18.0,18.9]" />-->
diff --git a/extension/css/compsSelection.css b/extension/css/compsSelection.css
index b180de3..2fefaf8 100644
--- a/extension/css/compsSelection.css
+++ b/extension/css/compsSelection.css
@@ -21,10 +21,6 @@
     
 }
 
-#compsSelection .buttons .settings{
-    float: right;
-}
-
 #compsSelection .compsTable{
     width: 100%;
     font-size: 10px;
diff --git a/extension/css/snapshot.css b/extension/css/snapshot.css
new file mode 100644
index 0000000..b2d8351
--- /dev/null
+++ b/extension/css/snapshot.css
@@ -0,0 +1,26 @@
+.references{
+    background-color: #484043;
+    background-color: rgb(72, 64, 67);
+    background-color: #6E6568;
+    background-color: rgb(110, 101, 104);
+    background-color: #EAD3A8;
+    background-color: rgb(234, 211, 168);
+    background-color: #D23641;
+    background-color: rgb(210, 54, 65);
+    background-color: #FFFFFF;
+    background-color: rgb(255, 255, 255);
+}
+
+#snapshot {
+    width: 100%;
+}
+
+#snapshot h1{
+    color: #EAD3A8;
+}
+
+
+#snapshot .animContainer{
+    width: 100%;
+    height: 400px;
+}
\ No newline at end of file
diff --git a/extension/css/styles.css b/extension/css/styles.css
index 45153e7..73fa055 100644
--- a/extension/css/styles.css
+++ b/extension/css/styles.css
@@ -34,6 +34,10 @@
     border-radius: .4em;
 }
 
+.rightFloat{
+    float: right;
+}
+
 #content {
     margin-right:auto;
     margin-left:auto;
@@ -89,6 +93,7 @@
 
 .buttonSeparator{
     width: 10px;
+    height: 1px;
     display: inline-block;
 }
 
diff --git a/extension/index.html b/extension/index.html
index b614097..8bcffe2 100644
--- a/extension/index.html
+++ b/extension/index.html
@@ -10,6 +10,7 @@
 <link  id="hostStyle" rel="stylesheet" href="css/compsRender.css"/>
 <link  id="hostStyle" rel="stylesheet" href="css/message.css"/>
 <link  id="hostStyle" rel="stylesheet" href="css/info.css"/>
+<link  id="hostStyle" rel="stylesheet" href="css/snapshot.css"/>
 
 <title></title>
 </head>
@@ -19,7 +20,9 @@
     <div id="content">
         <div id='compsSelection'>
             <div class='buttons'>
-                <button class='generalButton settings'>Info</button>
+                <button class='generalButton rightFloat settings'>Info</button>
+                <div class='buttonSeparator rightFloat'></div>
+                <button class='generalButton rightFloat snapshot'>Snapshot</button>
                 <button class='generalButton refresh'>Refresh</button>
                 <div class='buttonSeparator'></div>
                 <button class='generalButton highlightButton render disabled'>Render</button>
@@ -44,6 +47,16 @@
                 <button class='generalButton return'>Return</button>
             </div>
         </div>
+        <div id='snapshot'>
+            <h1>Select animation</h1>
+            <div class='buttons'>
+                <button class='generalButton rightFloat current'>Current renders</button>
+                <div class='buttonSeparator rightFloat'></div>
+                <button class='generalButton rightFloat browse'>Browse</button>
+                <button class='generalButton return'>Back</button>
+            </div>
+            <div class="animContainer"></div>
+        </div>
         <div id='info'>
             <div class='buttons'>
                 <button class='generalButton return'>Back</button>
@@ -94,6 +107,7 @@
     <script src="js/controllers/CompRenderController.js"></script>
     <script src="js/controllers/messageController.js"></script>
     <script src="js/controllers/InfoController.js"></script>
+    <script src="js/controllers/snapshotController.js"></script>
     <script src="js/main.js"></script>
 
         
diff --git a/extension/js/controllers/CompSelectionController.js b/extension/js/controllers/CompSelectionController.js
index cc754a1..bc6de27 100644
--- a/extension/js/controllers/CompSelectionController.js
+++ b/extension/js/controllers/CompSelectionController.js
@@ -151,12 +151,17 @@
         mainController.showView('settings');
     }
     
+    function showSnapshotView() {
+        mainController.showView('snapshot');
+    }
+    
     function init(csIntfc) {
         view = $('#compsSelection');
         compsListContainer = view.find('.compsList');
         csInterface = csIntfc;
         csInterface.addEventListener('bm:compositions:list', updateCompositionsList);
         view.find('.refresh').on('click', getCompositionsList);
+        view.find('.snapshot').on('click', showSnapshotView);
         renderButton = view.find('.render');
         renderButton.on('click', renderCompositions);
         view.find('.settings').on('click', showSettings);
diff --git a/extension/js/controllers/snapshotController.js b/extension/js/controllers/snapshotController.js
new file mode 100644
index 0000000..a5d461b
--- /dev/null
+++ b/extension/js/controllers/snapshotController.js
@@ -0,0 +1,75 @@
+/*jslint vars: true, plusplus: true, devel: true, nomen: true, regexp: true, indent: 4, maxerr: 50 */
+/*global $, alertData, successData, bodymovin, mainController */
+var snapshotController = (function () {
+    'use strict';
+    var ob = {}, view, csInterface, anim, animContainer, showing = false;
+    
+    function showSelection() {
+        mainController.showView('selection');
+    }
+    
+    function displayCurrentRenders() {
+        
+    }
+    
+    function browseFiles() {
+        var eScript = 'bm_main.browseFile()';
+        csInterface.evalScript(eScript);
+    }
+    
+    function handleFilePath(ev) {
+        var jsonData = JSON.parse(ev.data.substr(7));
+        //var result = window.cep.fs.readFile(path);
+        if (anim) {
+            anim.destroy();
+        }
+        var params = {
+                animType: 'svg',
+                wrapper: animContainer,
+                loop: false,
+                autoplay: false,
+                prerender: true,
+                animationData: jsonData
+            };
+        anim = bodymovin.loadAnimation(params);
+    }
+    
+    function handleWindowResize() {
+        if (!showing) {
+            return;
+        }
+        console.log($(window).height());
+        console.log($(window).width());
+    }
+    
+    function init(csIntfc) {
+        csInterface = csIntfc;
+        view = $('#snapshot');
+        view.hide();
+        view.find('.buttons .current').on('click', displayCurrentRenders);
+        view.find('.buttons .browse').on('click', browseFiles);
+        view.find('.return').on('click', showSelection);
+        animContainer = view.find('.animContainer')[0];
+        csInterface.addEventListener('bm:file:path', handleFilePath);
+        $(window).on('resize', handleWindowResize);
+    }
+    
+    function show() {
+        if (!showing) {
+            showing = true;
+            view.show();
+        }
+    }
+    
+    function hide() {
+        if (showing) {
+            showing = false;
+            view.hide();
+        }
+    }
+    
+    ob.show = show;
+    ob.hide = hide;
+    ob.init = init;
+    return ob;
+}());
\ No newline at end of file
diff --git a/extension/js/main.js b/extension/js/main.js
index 8824531..ef11098 100644
--- a/extension/js/main.js
+++ b/extension/js/main.js
@@ -1,5 +1,5 @@
 /*jslint vars: true, plusplus: true, devel: true, nomen: true, regexp: true, indent: 4, maxerr: 50 */
-/*global $, window, location, CSInterface, SystemPath, themeManager, compSelectionController, compRenderController, messageController, infoController*/
+/*global $, window, location, CSInterface, SystemPath, themeManager, compSelectionController, compRenderController, messageController, infoController, snapshotController*/
 
 var mainController = (function () {
     'use strict';
@@ -45,6 +45,8 @@
         messageController.init(csInterface);
         mainViews.push({id: 'settings', controller: infoController});
         infoController.init(csInterface);
+        mainViews.push({id: 'snapshot', controller: snapshotController});
+        snapshotController.init(csInterface);
         loadJSX('initializer.jsx');
         
         showView('selection');
diff --git a/extension/jsx/hostscript.jsx b/extension/jsx/hostscript.jsx
index ccec7c0..5a518b4 100644
--- a/extension/jsx/hostscript.jsx
+++ b/extension/jsx/hostscript.jsx
@@ -3,6 +3,24 @@
 var bm_main = (function () {
     'use strict';
     var ob = {};
+    
+    function browseFile() {
+        //openDlg()
+        var f = new File(Folder.desktop.absoluteURI);
+        var openFileData = f.openDlg();
+        if (openFileData !== null) {
+            var file = new File(openFileData.absoluteURI);
+            if (file.open('r')) {
+                var reading = file.read();
+                reading = '__PFX__' + reading;
+                bm_eventDispatcher.sendEvent('bm:file:path', reading);
+            }
+            
+        }
+
+    }
+    
+    ob.browseFile = browseFile;
 
     return ob;
 }());
\ No newline at end of file