'use strict';

const webshot = require('webshot')
  , async = require('async')
  , React = require('react')
  , ReactDOMServer = require('react-dom/server')
  , weatherSymbolComponent = require('./src/js/index')
  , el = React.DOM
  , weatherSymbol = weatherSymbolComponent.create()
  , recipes = require('./src/js/recipes')
  , fs = require('fs');


// lag klasse for å generere webside og ta screenshot
// Iterer alle ID'er

function createSymbol (id) {
  return ReactDOMServer.renderToString(
    weatherSymbol({
      type: 'svg',
      id
    }
  ));
}

function createMarkup (svg) {
  let html, style, symbolDefs;

  style = '* { padding: 0; margin: 0; }\n';
  style += '.iconContainer { height: 51px; width: 51px; }\n';

  // TODO: FIx this
  style += require('fs').readFileSync('src/css/index.styl').toString();

  symbolDefs = require('fs').readFileSync('src/html/symbolDefs.html').toString();

  html = '<!DOCTYPE html><html><head><style>';
  html += style;
  html += '</style></head><body>';
  html += symbolDefs;
  html += '<div class="iconContainer">';
  html += svg;
  html += '</div></body></html>';
  return html;
}

const options = {
  siteType: 'html',
  windowSize: {
    width: 51,
    height: 51
  }
};

async.forEachOfLimit(recipes, 10, function (recipe, id, callback) {
  const pngFileName = 'dist/png/' + id + '.png';

  const svg = createSymbol(id);
  const html = createMarkup(svg);

  webshot(html, pngFileName, options, function (err) {
    if (err) {
      console.log(err.message);
    } else {
      console.log('Created ' + pngFileName);
    }
    callback();
  });
});

@@ -97,24 +97,51 @@
 re('react')%0A
+  , path = require('path')%0A
   , ReactDOM
@@ -367,18 +367,90 @@
 re('fs')
-;
 %0A
+  , stylus = require('stylus');%0A%0Aconst dest = process.argv%5B2%5D %7C%7C 'dist/';
 %0A%0A// lag
@@ -681,51 +681,148 @@
 (svg
+, cb
 ) %7B%0A  
-let html, style, symbolDefs;%0A%0A  style
+const stylusFileName = 'src/css/index.styl';%0A  const stylusCss = fs.readFileSync(stylusFileName).toString();%0A%0A  let boilerplateCss
  = '
@@ -854,23 +854,33 @@
 ; %7D%5Cn';%0A
+%0A
   
-style
+boilerplateCss
  += '.ic
@@ -933,127 +933,135 @@
 %0A%0A  
-// TODO: FIx this%0A  style += require('fs').readFileSync('src/css/index.styl').toString();%0A%0A  symbolDefs = require('fs')
+stylus.render(stylusCss, %7B filename: stylusFileName %7D, function (err, css) %7B%0A    if (err) throw err;%0A%0A    const symbolDefs = fs
 .rea
@@ -1113,16 +1113,22 @@
 g();%0A%0A  
+  let 
 html = '
@@ -1160,24 +1160,26 @@
 d%3E%3Cstyle%3E';%0A
+  
   html += st
@@ -1180,15 +1180,43 @@
  += 
-style;%0A
+boilerplateCss;%0A    html += css;%0A  
   ht
@@ -1242,24 +1242,26 @@
 ad%3E%3Cbody%3E';%0A
+  
   html += sy
@@ -1270,16 +1270,18 @@
 olDefs;%0A
+  
   html +
@@ -1313,16 +1313,18 @@
 ner%22%3E';%0A
+  
   html +
@@ -1330,16 +1330,18 @@
 += svg;%0A
+  
   html +
@@ -1370,21 +1370,27 @@
 %3E';%0A
-  return html
+%0A    cb(html);%0A  %7D)
 ;%0A%7D%0A
@@ -1538,17 +1538,22 @@
 pe, id, 
-c
+asyncC
 allback)
@@ -1581,33 +1581,99 @@
 e = 
-'dist/png/' + id + '.png'
+path.join(dest, 'png', id + '.png')%0A    , svgFileName = path.join(dest, 'svg', id + '.svg')
 ;%0A%0A 
@@ -1707,22 +1707,10 @@
 d);%0A
+%0A
  
- const html =
  cre
@@ -1722,20 +1722,38 @@
 rkup(svg
-);%0A%0A
+, function (html) %7B%0A  
   websho
@@ -1795,32 +1795,34 @@
 ion (err) %7B%0A    
+ 
+ 
 if (err) %7B%0A     
@@ -1812,24 +1812,26 @@
  if (err) %7B%0A
+  
       consol
@@ -1846,24 +1846,26 @@
 r.message);%0A
+  
     %7D else %7B
@@ -1867,24 +1867,26 @@
 lse %7B%0A      
+  
 console.log(
@@ -1916,27 +1916,138 @@
 e);%0A
+%0A 
     
-%7D%0A    callback(
+   fs.writeFileSync(svgFileName, svg);%0A        console.log('Created ' + svgFileName);%0A        asyncCallback();%0A      %7D%0A    %7D
 );%0A 

Add output of svg. Add support for output dest as argument.