From 23dda79a36633cf4cf7fdc665a9d234beabb9167 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordaneldredge@gmail.com>
Date: Mon, 13 Apr 2015 19:33:26 -0700
Subject: [PATCH] Add embed link to demo page, and update README

---
 README.md    | 19 +++++++++++++++++++
 css/page.css | 40 ++++++++++++++++++++++++++++++++++++++++
 index.html   |  5 +++++
 js/main.js   |  4 ++++
 4 files changed, 68 insertions(+)

diff --git a/README.md b/README.md
index 5c6e09a9..b77bcf35 100755
--- a/README.md
+++ b/README.md
@@ -16,6 +16,25 @@ supported](http://caniuse.com/#feat=audio-api).
 - "Shade" mini-mode
 - "Doubled" mode, where the main window is twice as large: `Ctrl-D`
 
+## Embed Winamp2-js in your web page
+
+If you would like to embed Winamp2-js into your web page, simply paste this
+HTML snippet where you would like the player to appear:
+
+    <script async src="https://jordaneldredge.com/winamp2-js.js"></script>
+
+You can set the default audio file by adding the following attribute to the
+`<script>` tag:
+
+    data-media="https://example.com/dj-llama.mp3"
+
+*Note: The audio file must be hosted on the [same
+domain](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS)
+as your web page*
+
+If Winamp2-js cannot run in a user's browser, it will fall back to a simple
+`<audio>` tag.
+
 ## Running locally vs. Production
 
 Running Winamp2-js locally is as simple as cloning this repository and opening
diff --git a/css/page.css b/css/page.css
index baa78427..52244aea 100644
--- a/css/page.css
+++ b/css/page.css
@@ -33,3 +33,43 @@ body {
 .about a {
     color: white;
 }
+
+#embed {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    color: white;
+    margin-right: 15px;
+    text-align: left;
+}
+
+#embed label {
+    display: inline-block;
+}
+
+#embed a {
+    color: white;
+    float: left;
+}
+
+#embed input {
+    border: 1px solid black;
+    width: 300px;
+    padding: 5px;
+    border-radius: 5px;
+    font-size: 13px;
+    display: none;
+    margin-left: 15px;
+    margin-right: 15px;
+}
+
+#embed #embed-learn-more {
+    display: none;
+}
+#embed.selected #embed-learn-more {
+    display: inline;
+}
+
+#embed.selected input {
+    display: inline;
+}
diff --git a/index.html b/index.html
index b8d0981f..6de951b2 100755
--- a/index.html
+++ b/index.html
@@ -25,6 +25,11 @@
             -
             <a href='https://github.com/captbaritone/winamp2-js'>GitHub</a>
         </p>
+        <p id='embed'>
+            <label><a href='#' id='embed-link'>Embed</a></label>
+            <input type='text' id='embed-input' value='<script async src="https://jordaneldredge.com/winamp2-js.js"></script>'>
+            <label><a href='https://github.com/captbaritone/winamp2-js#embed-winamp2-js-in-your-web-page' id='embed-learn-more'>?</a></label>
+        </p>
         <script>
             (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
                     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
diff --git a/js/main.js b/js/main.js
index 24306891..eedcd37b 100644
--- a/js/main.js
+++ b/js/main.js
@@ -13,6 +13,10 @@ require([
     Context,
     Hotkeys
 ) {
+    document.getElementById('embed-link').onclick = function() {
+        document.getElementById('embed').classList.toggle('selected');
+        document.getElementById('embed-input').select();
+    };
     if(Browser.isCompatible()) {
         var mainWindowElement = document.createElement('div');
         mainWindowElement.innerHTML = mainWindowHtml;