Test makets

// ==UserScript==
// @name         Test makets
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       yoksel
// @match        http://localhost:3001/*
// @grant        none
// ==/UserScript==
/* jshint -W097 */
'use strict';

var url = document.location.pathname;
var pageId = url.slice(1,-5);
var projectsList = ['', '']; // add some projects here
var project = localStorage.project ? localStorage.project : projectsList[0];

var style = document.createElement('style');
document.head.appendChild( style );

// Add switcher
var bodyFirstChild = document.body.firstChild;
var maketSelector = document.createElement('div');
maketSelector.classList.add('maket-selector');

projectsList.forEach( function(item, i, arr) {
    var id = 'maket-' + item;
    var radio = document.createElement('input');
    radio.setAttribute('type', 'radio');
    radio.setAttribute('id', id);
    radio.setAttribute('name', 'makets');
    radio.setAttribute('data-project', item);
    
    if ( item == project ) {
        radio.setAttribute('checked', '');
    }

    var label = document.createElement('label');
    label.setAttribute('for', 'maket-' + item);
    label.innerHTML = item;
    
    maketSelector.appendChild( radio );
    maketSelector.appendChild( label );
    
    radio.onclick = function() {
        project = this.dataset.project;
        localStorage.project = project;
        setStyles();
    }
});

document.body.insertBefore( maketSelector, bodyFirstChild );

// Add styles
setStyles();

function setStyles() {
    var imgUrlBegin = project + "-" + pageId;
    var styleStrings = ['BODY { background-image: url(../../img/' + imgUrlBegin + '-mobile.jpg); }',
                        '@media ( min-width: 768px ) { BODY { background-image: url(../../img/' + imgUrlBegin + '-tablet.jpg); } }',
                        '@media ( min-width: 1200px ) { BODY { background-image: url(../../img/' + imgUrlBegin + '-desktop.jpg); } }',
                        '.maket-selector { position: absolute; z-index: 10; left: 10px; top: 10px; padding: 1rem; background: rgba(255,255,255,.9); border: 1px solid #DDD; }',
                        '.maket-selector label { display: block; padding: .5rem; cursor: pointer }', 
                        '.maket-selector input { display: none; }',
                        '.maket-selector input:checked + label { font-weight: bold; }'
                       ];

    style.innerHTML = styleStrings.join( '\n' );
}