function loadConfig(url) {
   var req = new XMLHttpRequest();
   req.open('GET', url + '?cache=' + Math.random(), false);
   req.onreadystatechange = function(){
      if (req.readyState === 4) {
         var s = document.createElement('script');
         s.appendChild(document.createTextNode(req.responseText));
         document.head.appendChild(s);
      }
   };
   req.send(null);
}

function createGauge(position, label, sensor, append) {
   if (!append) {
      append = '@attributes.unit_of_measurement'
   }

   return  {
      position: position,
      type: TYPES.GAUGE,
      title: label,
      id: 'sensor.' + sensor,
      state: false,
      value: function(item, entity) {
         num = parseFloat(entity.state);
         return num && !isNaN(num) ? num.toFixed(1) : num;
      },
      settings: {
         size: 120,
         type: 'arch',
         min: 0,
         max: 100,
         cap: 'round',
         thick: 10,
         append: append,
         duration: 500,
         thresholds: { 0: { color: '#16a085'}, 66: { color: '#f1c40f' }, 70: { color: '#e74c3c' } },
         fractionSize: 1,
      }
   }
}

// Load secrets
loadConfig("includes/config/secrets.js");

// Load pages
loadConfig("includes/pages/overview.js");
loadConfig("includes/pages/humidity.js");
loadConfig("includes/pages/cctv.js");
loadConfig("includes/pages/misc.js");

// Global config
var CONFIG = {
   customTheme: [CUSTOM_THEMES.TRANSPARENT],
   transition: TRANSITIONS.ANIMATED_GPU,
   entitySize: ENTITY_SIZES.SMALL,

   serverUrl: "http://" + CONFIG_SECRETS.homeAssistantHost,
   wsUrl: "ws://" + CONFIG_SECRETS.homeAssistantHost + "/api/websocket",
   authToken: null, // nope, don't use that...
   debug: false,
   pingConnection: true,

   tileSize: 150,
   tileMargin: 8,
   groupMarginCss: '20px 40px',
   
   events: [],
   timeFormat: 24,
   menuPosition: MENU_POSITIONS.BOTTOM,
   hideScrollbar: true,
   groupsAlign: GROUP_ALIGNS.HORIZONTALLY,

   // https://github.com/resoai/TileBoard/wiki/Header-configuration
   header: {
      styles: {
         padding: '10px 20px 0',
         fontSize: '22px'
      },
      right: [
         {
            type: HEADER_ITEMS.TIME,
         }
      ],
   },

   // https://github.com/resoai/TileBoard/wiki/Screensaver-configuration
   /*screensaver: {
      timeout: 5, // after 5 mins of inactive
      slidesTimeout: 3, // 10s for one slide
      styles: { fontSize: '40px' },
      leftBottom: [{ type: SCREENSAVER_ITEMS.DATETIME }], // put datetime to the left-bottom of screensaver
      slides: [
         { bg: 'images/bg1.jpeg' },
         {
            bg: 'images/bg2.png',
            rightTop: [ // put text to the 2nd slide
               {
                  type: SCREENSAVER_ITEMS.CUSTOM_HTML,
                  html: 'Welcome to the <b>TileBoard</b>',
                  styles: { fontSize: '40px' }
               }
            ]
         },
         { bg: 'https://images.unsplash.com/photo-1508138221679-760a23a2285b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80' }
      ]
   },*/

   pages: [
      PAGE_OVERVIEW,
      PAGE_HUMIDITY,
      PAGE_CCTV,
      PAGE_MISC,
   ],
}