Add a "Download" button on the CSV tab (#24)

* Adding download button.

* Download CSV function

index.html

@@ -32,7 +32,13 @@
 
   <div id="display"></div>
 
-  <div id="md-options">
+  <div id="csv-options" class="options">
+    <p>
+      <button class="btn" type="button" onclick="downloadCsv();"><span class="octicon octicon-cloud-download"></span> Download</button>
+    </p>
+  </div>
+
+  <div id="md-options" class="options">
     <div class="form-checkbox">
       <label>
         <input type="checkbox" checked="checked" id="check-formatter">
@@ -44,7 +50,7 @@
     </div>
   </div>
 
-  <div id="sql-info">
+  <div id="sql-info" class="options">
     <p class="note">
     Read about the SQL function <a href="https://github.com/stevecat/table-magic/pull/20">in this pull request</a>.
     </p>

magic.js

@@ -16,6 +16,7 @@ $(window).load(function() {
   layout(true);
 
   if (tab!=="md") { $('#md-options').hide(); }
+  if (tab!="csv") { $('#csv-options').hide(); }
   if (tab!="sql") { $('#sql-info').hide(); }
 
   // bind form buttons
@@ -150,13 +151,34 @@ function changeTab(newTab) {
         if (newTab==='sql') $('#sql-info').show();
       }
 
+
+      $('.options').hide();
+      if (newTab==="md") { $('#md-options').show(); }
+      if (newTab==="csv") { $('#csv-options').show(); }
+      if (newTab==="sql") { $('#sql-info').show(); }
+
       // Update variables
       tab = newTab;
 
     }
 
 }
 
+function downloadCsv() {
+
+  if (tab==="csv") {
+
+   var element = document.createElement('a');
+   element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent($('textarea').val()));
+   element.setAttribute('download', 'tablemagic.csv');
+   element.style.display = 'none';
+   document.body.appendChild(element);
+   element.click();
+   document.body.removeChild(element);
+
+  }
+
+}
 
 function csv2array(csv) {