siddartha/index.html

## index.html
<!DOCTYPE html>
<html>

  <head>
    <script async="async" src="https://www.googletagservices.com/tag/js/gpt.js"></script>
    <script async src="//acdn.adnxs.com/prebid/not-for-prod/1/prebid.js"></script>
    <script>
      var googletag = googletag || {};
      googletag.cmd = googletag.cmd || [];
      var pbjs = pbjs || {};
      pbjs.que = pbjs.que || [];
    </script>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
<header>


  Ad Example
  <div id="topSlot" class="ad"></div>
</header>
<main>
  <section>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mattis rhoncus urna neque viverra justo nec ultrices dui sapien. Malesuada fames ac turpis egestas sed tempus. Id ornare arcu odio
      ut sem. Nibh venenatis cras sed felis eget velit aliquet sagittis. Erat nam at lectus urna duis convallis convallis tellus id. Pharetra vel turpis nunc eget. Ut porttitor leo a diam sollicitudin tempor id eu. Arcu bibendum at varius vel pharetra
      vel turpis. Semper risus in hendrerit gravida rutrum quisque non tellus orci. Urna id volutpat lacus laoreet non curabitur. Montes nascetur ridiculus mus mauris vitae ultricies. Eu turpis egestas pretium aenean pharetra magna ac placerat vestibulum.
      Proin fermentum leo vel orci. Cursus sit amet dictum sit. Curabitur vitae nunc sed velit dignissim sodales ut eu. Volutpat consequat mauris nunc congue nisi vitae suscipit tellus mauris. Viverra suspendisse potenti nullam ac tortor vitae.
    </p>

    <p>
      Risus in hendrerit gravida rutrum. Purus sit amet luctus venenatis lectus magna fringilla. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Amet massa vitae tortor condimentum lacinia quis vel eros donec. Faucibus in ornare quam viverra
      orci sagittis eu. Nunc id cursus metus aliquam eleifend mi in. Pharetra massa massa ultricies mi quis hendrerit. Vestibulum mattis ullamcorper velit sed ullamcorper morbi. Massa tincidunt nunc pulvinar sapien et. Proin sed libero enim sed faucibus.
      Quis commodo odio aenean sed adipiscing diam donec. Convallis a cras semper auctor. Nibh tortor id aliquet lectus proin nibh nisl condimentum id. Massa tincidunt nunc pulvinar sapien et ligula. Vitae turpis massa sed elementum tempus egestas sed
      sed. Lorem mollis aliquam ut porttitor leo a diam sollicitudin. Massa tempor nec feugiat nisl pretium fusce id. Quis varius quam quisque id diam.
    </p>
    <div id="ad2"></div>
    <p>
      Sollicitudin tempor id eu nisl nunc. Lobortis mattis aliquam faucibus purus in massa tempor nec feugiat. Commodo elit at imperdiet dui accumsan sit amet nulla. Eu augue ut lectus arcu bibendum at varius vel pharetra. Nunc scelerisque viverra mauris in
      aliquam sem fringilla. Malesuada pellentesque elit eget gravida cum. Tellus in hac habitasse platea. Orci nulla pellentesque dignissim enim sit amet venenatis. Neque egestas congue quisque egestas diam in arcu cursus. Rhoncus mattis rhoncus urna
      neque viverra. Volutpat est velit egestas dui id ornare arcu odio ut. Maecenas ultricies mi eget mauris pharetra et. Urna duis convallis convallis tellus id interdum. Eu volutpat odio facilisis mauris sit amet massa vitae tortor.
    </p>
    <p>
      Urna condimentum mattis pellentesque id nibh. Et ultrices neque ornare aenean. Quisque id diam vel quam elementum pulvinar etiam non. Convallis a cras semper auctor neque vitae tempus quam pellentesque. Cursus euismod quis viverra nibh. Ipsum dolor sit
      amet consectetur adipiscing. Malesuada bibendum arcu vitae elementum curabitur vitae nunc. Netus et malesuada fames ac turpis egestas integer eget aliquet. Sapien et ligula ullamcorper malesuada proin libero nunc consequat. Purus sit amet luctus
      venenatis lectus magna. Malesuada proin libero nunc consequat. Ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. Ultrices dui sapien eget mi proin sed libero enim sed.
    </p>
    <p>
      Sodales neque sodales ut etiam sit amet nisl purus. Morbi leo urna molestie at elementum eu facilisis. Massa id neque aliquam vestibulum morbi blandit. Et egestas quis ipsum suspendisse ultrices gravida dictum fusce. Diam maecenas ultricies mi eget mauris
      pharetra et ultrices neque. Tincidunt nunc pulvinar sapien et ligula. Amet nisl suscipit adipiscing bibendum est ultricies integer quis auctor. Nulla pellentesque dignissim enim sit amet venenatis urna cursus eget. Leo urna molestie at elementum
      eu. Id ornare arcu odio ut sem nulla pharetra. Id consectetur purus ut faucibus pulvinar. Quis enim lobortis scelerisque fermentum dui faucibus in ornare quam. Varius morbi enim nunc faucibus a pellentesque. Vestibulum morbi blandit cursus risus.
      Euismod quis viverra nibh cras pulvinar mattis nunc sed blandit. Eget mi proin sed libero enim sed. Sit amet est placerat in egestas erat imperdiet sed. Nullam eget felis eget nunc. Consequat ac felis donec et odio pellentesque.
    </p>
    <p>
      Interdum varius sit amet mattis vulputate. Elementum nisi quis eleifend quam adipiscing vitae proin sagittis nisl. Feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Adipiscing diam donec adipiscing tristique risus nec. Mi ipsum faucibus vitae
      aliquet. Amet cursus sit amet dictum sit amet. Nascetur ridiculus mus mauris vitae ultricies. Arcu cursus euismod quis viverra nibh. Dictum non consectetur a erat nam at lectus. Sapien faucibus et molestie ac feugiat sed lectus vestibulum mattis.
      Amet purus gravida quis blandit turpis cursus in. In nibh mauris cursus mattis molestie a iaculis at erat. Tristique sollicitudin nibh sit amet.

      <p>
        Eu lobortis elementum nibh tellus. Dui nunc mattis enim ut tellus. Et malesuada fames ac turpis egestas. Amet facilisis magna etiam tempor. A scelerisque purus semper eget duis at. Enim nunc faucibus a pellentesque sit amet. Elit scelerisque mauris pellentesque
        pulvinar pellentesque habitant morbi tristique. In est ante in nibh mauris cursus mattis molestie. Sed egestas egestas fringilla phasellus faucibus. Enim ut tellus elementum sagittis vitae et leo duis. Eget sit amet tellus cras adipiscing enim
        eu turpis.
      </p>

      <p>
        Consectetur lorem donec massa sapien faucibus et molestie. Velit ut tortor pretium viverra suspendisse. Lacus vestibulum sed arcu non odio euismod lacinia at. Leo in vitae turpis massa sed elementum. Risus feugiat in ante metus dictum. In tellus integer
        feugiat scelerisque varius. Urna neque viverra justo nec ultrices dui sapien. Lacus vestibulum sed arcu non odio euismod lacinia. Nulla pellentesque dignissim enim sit amet venenatis urna. Sit amet mauris commodo quis imperdiet massa. Massa ultricies
        mi quis hendrerit dolor. Nunc congue nisi vitae suscipit tellus mauris. Gravida rutrum quisque non tellus orci. Ac odio tempor orci dapibus ultrices in iaculis nunc. Diam ut venenatis tellus in metus vulputate eu scelerisque felis. Mi bibendum
        neque egestas congue quisque egestas. Tempus imperdiet nulla malesuada pellentesque. Pharetra vel turpis nunc eget. Enim praesent elementum facilisis leo vel fringilla.
      </p>
      <p>
        Viverra justo nec ultrices dui. Lacus vel facilisis volutpat est velit. A condimentum vitae sapien pellentesque habitant morbi tristique senectus. Integer eget aliquet nibh praesent tristique. Faucibus in ornare quam viverra. Id aliquet risus feugiat
        in. Et odio pellentesque diam volutpat commodo sed egestas egestas. Interdum consectetur libero id faucibus nisl tincidunt eget nullam. A cras semper auctor neque vitae tempus quam pellentesque nec. Senectus et netus et malesuada fames ac turpis.
      </p>
      <p>
        Faucibus pulvinar elementum integer enim neque volutpat. Parturient montes nascetur ridiculus mus mauris. Pharetra magna ac placerat vestibulum lectus mauris. Et malesuada fames ac turpis egestas integer eget. Cras semper auctor neque vitae tempus quam
        pellentesque nec. Sit amet mauris commodo quis. Faucibus interdum posuere lorem ipsum dolor sit. Molestie at elementum eu facilisis. Eros donec ac odio tempor orci dapibus ultrices. Pretium viverra suspendisse potenti nullam ac. Massa massa ultricies
        mi quis hendrerit. Metus dictum at tempor commodo ullamcorper a lacus vestibulum sed. A scelerisque purus semper eget duis at tellus at. Nunc eget lorem dolor sed viverra ipsum. Vitae elementum curabitur vitae nunc sed velit dignissim sodales.
      </p>
  </section>
  <aside>
    <p>
      Eu lobortis elementum nibh tellus. Dui nunc mattis enim ut tellus. Et malesuada fames ac turpis egestas. Amet facilisis magna etiam tempor. A scelerisque purus semper eget duis at. Enim nunc faucibus a pellentesque sit amet. Elit scelerisque mauris pellentesque
      pulvinar pellentesque habitant morbi tristique. In est ante in nibh mauris cursus mattis molestie. Sed egestas egestas fringilla phasellus faucibus. Enim ut tellus elementum sagittis vitae et leo duis. Eget sit amet tellus cras adipiscing enim eu
      turpis.
    </p>

    <div class="ad" id="middlerightSlot"></div>

    <p>
      Consectetur lorem donec massa sapien faucibus et molestie. Velit ut tortor pretium viverra suspendisse. Lacus vestibulum sed arcu non odio euismod lacinia at. Leo in vitae turpis massa sed elementum. Risus feugiat in ante metus dictum. In tellus integer
      feugiat scelerisque varius. Urna neque viverra justo nec ultrices dui sapien. Lacus vestibulum sed arcu non odio euismod lacinia. Nulla pellentesque dignissim enim sit amet venenatis urna. Sit amet mauris commodo quis imperdiet massa. Massa ultricies
      mi quis hendrerit dolor. Nunc congue nisi vitae suscipit tellus mauris. Gravida rutrum quisque non tellus orci. Ac odio tempor orci dapibus ultrices in iaculis nunc. Diam ut venenatis tellus in metus vulputate eu scelerisque felis. Mi bibendum neque
      egestas congue quisque egestas. Tempus imperdiet nulla malesuada pellentesque. Pharetra vel turpis nunc eget. Enim praesent elementum facilisis leo vel fringilla.
    </p>
    <p>
      Viverra justo nec ultrices dui. Lacus vel facilisis volutpat est velit. A condimentum vitae sapien pellentesque habitant morbi tristique senectus. Integer eget aliquet nibh praesent tristique. Faucibus in ornare quam viverra. Id aliquet risus feugiat
      in. Et odio pellentesque diam volutpat commodo sed egestas egestas. Interdum consectetur libero id faucibus nisl tincidunt eget nullam. A cras semper auctor neque vitae tempus quam pellentesque nec. Senectus et netus et malesuada fames ac turpis.
    </p>

    <p>
      Faucibus pulvinar elementum integer enim neque volutpat. Parturient montes nascetur ridiculus mus mauris. Pharetra magna ac placerat vestibulum lectus mauris. Et malesuada fames ac turpis egestas integer eget. Cras semper auctor neque vitae tempus quam
      pellentesque nec. Sit amet mauris commodo quis. Faucibus interdum posuere lorem ipsum dolor sit. Molestie at elementum eu facilisis. Eros donec ac odio tempor orci dapibus ultrices. Pretium viverra suspendisse potenti nullam ac. Massa massa ultricies
      mi quis hendrerit. Metus dictum at tempor commodo ullamcorper a lacus vestibulum sed. A scelerisque purus semper eget duis at tellus at. Nunc eget lorem dolor sed viverra ipsum. Vitae elementum curabitur vitae nunc sed velit dignissim sodales.
    </p>
  </aside>

</main>

<footer>
  <div class="bottom">
    <div class="ad" id="bottomleftSlot"></div>
    <div class="ad" id="bottomrightSlot"></div>
  </div>
  <p>
    Copyright 2018 Farvision LLC
  </p>
</footer>
  </body>

</html>

## script.js
var size = [
  //[300, 600],
  //[300, 250],
  //[160, 600],
  //[120, 600],
  [250, 250]
];
var PREBID_TIMEOUT = 1000;

googletag.cmd.push(function () {
  (function (googletag, pbjs, config) {
    var sizeMappings = {};
    var slots = {};
    function refreshSlot(slot) {
      pbjs.que.push(function() {
        pbjs.requestBids({
          timeout: PREBID_TIMEOUT,
          adUnitCodes: [slot.getSlotElementId()],
          bidsBackHandler: function() {
            pbjs.setTargetingForGPTAsync([slot.getSlotElementId()]);
            googletag.pubads().refresh([slot]);
          }
        });
      });
    }
    Object.keys(config.sizeMappings).forEach(function (key) {
      var sizeMappingBuilder = googletag.sizeMapping();
      config.sizeMappings[key].forEach(function (mapping) {
        sizeMappingBuilder.addSize(mapping[0], mapping[1]);
      });
      var sizeMapping = sizeMappingBuilder.build();
      sizeMappings[key] = sizeMapping;
      console.log('created sizemapping ', key, ' ', sizeMappings[key]);
    });

    //googletag.pubads().enableSingleRequest();
    googletag.pubads().collapseEmptyDivs(true, true);
    googletag.pubads().setCentering(true);
    googletag.pubads().disableInitialLoad();
    googletag.enableServices();
    googletag.pubads().addEventListener('impressionViewable', function (event) {
      var elementId = event.slot.getSlotElementId();
      var slotConfig = slots[elementId];
      if (slotConfig) {
        var handle = setTimeout(function () {
          googletag.cmd.push(function () {
            refreshSlot(event.slot);
          });
        }, config.definitons[elementId].timeout);
        console.log('handle for time ', handle, ' elementId ', elementId, ' duration ', config.definitons[elementId].timeout);
      }
    });
    Object.keys(config.definitons).forEach(function (key) {
      var def = config.definitons[key];
      var slot = googletag.defineSlot(def.adUnitPath, def.size, key);
      slot.setTargeting('test', 'refresh');
      slot.defineSizeMapping(sizeMappings[def.sizeMapping]);
      slot.addService(googletag.pubads());
      googletag.display(key);
      slots[key] = { slot: slot };
    });
    googletag.pubads().refresh();
  })(window.googletag, window.pbjs, {
    definitons: {
      topSlot: {
        adUnitPath: '/1001824/prebid_test2',
        size: size,
        sizeMapping: 'mappingleaderslot',
        timeout: 5000,
      },
      middlerightSlot: {
        adUnitPath: '/1001824/prebid_test3',
        size: size,
        sizeMapping: 'mappingbigboxslot',
        timeout: 3000,
      },
      bottomrightSlot: {
        adUnitPath: '/1001824/prebid_test1',
        size: size,
        sizeMapping: 'mappingbigboxslot',
        timeout: 3000,
      },
      bottomleftSlot: {
        adUnitPath: '/1001824/prebid_test4',
        size: size,
        sizeMapping: 'mappingbigboxslot',
        timeout: 3000,
      },
    },
    sizeMappings: {
      mappingleaderslot: [
        [
          [1024, 769],
          [
            [970, 250],
            [970, 90],
            [728, 90],
            [468, 60],
            [320, 50],
            [234, 60]
          ]
        ],
        [
          [768, 500],
          [
            [728, 90],
            [468, 60],
            [320, 50],
            [234, 60]
          ]
        ],
        [
          [1, 1],
          [
            [320, 50],
            [234, 60]
          ]
        ],
      ],
      mappingbigboxslot: [
        [
          [1024, 769],
          [
            [300, 600],
            [300, 250],
            [160, 600],
            [120, 600],
            [250, 250]
          ]
        ],
        [
          [768, 500],
          [
            [300, 250],
            [250, 250]
          ]
        ],
        [
          [1, 1],
          [
            [300, 250],
            [250, 250]
          ]
        ],
      ]
    }
  });
});

## style.css
.ad {
  outline: 1px solid blue;
  min-width: 90px;
  min-height: 90px;
}

.bottom {
 display: flex;
 justify-content: space-around;
}

section {
  flex: 1 1 auto;
}

aside {
  flex: 1 1 auto;
}

main {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
}

footer {
  outline: 1px solid red;
}
	<!DOCTYPE html>
	<html>

	<head>
	<script async="async" src="https://www.googletagservices.com/tag/js/gpt.js"></script>
	<script async src="//acdn.adnxs.com/prebid/not-for-prod/1/prebid.js"></script>
	<script>
	var googletag = googletag \|\| {};
	googletag.cmd = googletag.cmd \|\| [];
	var pbjs = pbjs \|\| {};
	pbjs.que = pbjs.que \|\| [];
	</script>
	<link rel="stylesheet" href="style.css">
	<script src="script.js"></script>
	</head>

	<body>
	<header>


	Ad Example
	<div id="topSlot" class="ad"></div>
	</header>
	<main>
	<section>
	<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mattis rhoncus urna neque viverra justo nec ultrices dui sapien. Malesuada fames ac turpis egestas sed tempus. Id ornare arcu odio
	ut sem. Nibh venenatis cras sed felis eget velit aliquet sagittis. Erat nam at lectus urna duis convallis convallis tellus id. Pharetra vel turpis nunc eget. Ut porttitor leo a diam sollicitudin tempor id eu. Arcu bibendum at varius vel pharetra
	vel turpis. Semper risus in hendrerit gravida rutrum quisque non tellus orci. Urna id volutpat lacus laoreet non curabitur. Montes nascetur ridiculus mus mauris vitae ultricies. Eu turpis egestas pretium aenean pharetra magna ac placerat vestibulum.
	Proin fermentum leo vel orci. Cursus sit amet dictum sit. Curabitur vitae nunc sed velit dignissim sodales ut eu. Volutpat consequat mauris nunc congue nisi vitae suscipit tellus mauris. Viverra suspendisse potenti nullam ac tortor vitae.
	</p>

	<p>
	Risus in hendrerit gravida rutrum. Purus sit amet luctus venenatis lectus magna fringilla. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Amet massa vitae tortor condimentum lacinia quis vel eros donec. Faucibus in ornare quam viverra
	orci sagittis eu. Nunc id cursus metus aliquam eleifend mi in. Pharetra massa massa ultricies mi quis hendrerit. Vestibulum mattis ullamcorper velit sed ullamcorper morbi. Massa tincidunt nunc pulvinar sapien et. Proin sed libero enim sed faucibus.
	Quis commodo odio aenean sed adipiscing diam donec. Convallis a cras semper auctor. Nibh tortor id aliquet lectus proin nibh nisl condimentum id. Massa tincidunt nunc pulvinar sapien et ligula. Vitae turpis massa sed elementum tempus egestas sed
	sed. Lorem mollis aliquam ut porttitor leo a diam sollicitudin. Massa tempor nec feugiat nisl pretium fusce id. Quis varius quam quisque id diam.
	</p>
	<div id="ad2"></div>
	<p>
	Sollicitudin tempor id eu nisl nunc. Lobortis mattis aliquam faucibus purus in massa tempor nec feugiat. Commodo elit at imperdiet dui accumsan sit amet nulla. Eu augue ut lectus arcu bibendum at varius vel pharetra. Nunc scelerisque viverra mauris in
	aliquam sem fringilla. Malesuada pellentesque elit eget gravida cum. Tellus in hac habitasse platea. Orci nulla pellentesque dignissim enim sit amet venenatis. Neque egestas congue quisque egestas diam in arcu cursus. Rhoncus mattis rhoncus urna
	neque viverra. Volutpat est velit egestas dui id ornare arcu odio ut. Maecenas ultricies mi eget mauris pharetra et. Urna duis convallis convallis tellus id interdum. Eu volutpat odio facilisis mauris sit amet massa vitae tortor.
	</p>
	<p>
	Urna condimentum mattis pellentesque id nibh. Et ultrices neque ornare aenean. Quisque id diam vel quam elementum pulvinar etiam non. Convallis a cras semper auctor neque vitae tempus quam pellentesque. Cursus euismod quis viverra nibh. Ipsum dolor sit
	amet consectetur adipiscing. Malesuada bibendum arcu vitae elementum curabitur vitae nunc. Netus et malesuada fames ac turpis egestas integer eget aliquet. Sapien et ligula ullamcorper malesuada proin libero nunc consequat. Purus sit amet luctus
	venenatis lectus magna. Malesuada proin libero nunc consequat. Ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. Ultrices dui sapien eget mi proin sed libero enim sed.
	</p>
	<p>
	Sodales neque sodales ut etiam sit amet nisl purus. Morbi leo urna molestie at elementum eu facilisis. Massa id neque aliquam vestibulum morbi blandit. Et egestas quis ipsum suspendisse ultrices gravida dictum fusce. Diam maecenas ultricies mi eget mauris
	pharetra et ultrices neque. Tincidunt nunc pulvinar sapien et ligula. Amet nisl suscipit adipiscing bibendum est ultricies integer quis auctor. Nulla pellentesque dignissim enim sit amet venenatis urna cursus eget. Leo urna molestie at elementum
	eu. Id ornare arcu odio ut sem nulla pharetra. Id consectetur purus ut faucibus pulvinar. Quis enim lobortis scelerisque fermentum dui faucibus in ornare quam. Varius morbi enim nunc faucibus a pellentesque. Vestibulum morbi blandit cursus risus.
	Euismod quis viverra nibh cras pulvinar mattis nunc sed blandit. Eget mi proin sed libero enim sed. Sit amet est placerat in egestas erat imperdiet sed. Nullam eget felis eget nunc. Consequat ac felis donec et odio pellentesque.
	</p>
	<p>
	Interdum varius sit amet mattis vulputate. Elementum nisi quis eleifend quam adipiscing vitae proin sagittis nisl. Feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Adipiscing diam donec adipiscing tristique risus nec. Mi ipsum faucibus vitae
	aliquet. Amet cursus sit amet dictum sit amet. Nascetur ridiculus mus mauris vitae ultricies. Arcu cursus euismod quis viverra nibh. Dictum non consectetur a erat nam at lectus. Sapien faucibus et molestie ac feugiat sed lectus vestibulum mattis.
	Amet purus gravida quis blandit turpis cursus in. In nibh mauris cursus mattis molestie a iaculis at erat. Tristique sollicitudin nibh sit amet.

	<p>
	Eu lobortis elementum nibh tellus. Dui nunc mattis enim ut tellus. Et malesuada fames ac turpis egestas. Amet facilisis magna etiam tempor. A scelerisque purus semper eget duis at. Enim nunc faucibus a pellentesque sit amet. Elit scelerisque mauris pellentesque
	pulvinar pellentesque habitant morbi tristique. In est ante in nibh mauris cursus mattis molestie. Sed egestas egestas fringilla phasellus faucibus. Enim ut tellus elementum sagittis vitae et leo duis. Eget sit amet tellus cras adipiscing enim
	eu turpis.
	</p>

	<p>
	Consectetur lorem donec massa sapien faucibus et molestie. Velit ut tortor pretium viverra suspendisse. Lacus vestibulum sed arcu non odio euismod lacinia at. Leo in vitae turpis massa sed elementum. Risus feugiat in ante metus dictum. In tellus integer
	feugiat scelerisque varius. Urna neque viverra justo nec ultrices dui sapien. Lacus vestibulum sed arcu non odio euismod lacinia. Nulla pellentesque dignissim enim sit amet venenatis urna. Sit amet mauris commodo quis imperdiet massa. Massa ultricies
	mi quis hendrerit dolor. Nunc congue nisi vitae suscipit tellus mauris. Gravida rutrum quisque non tellus orci. Ac odio tempor orci dapibus ultrices in iaculis nunc. Diam ut venenatis tellus in metus vulputate eu scelerisque felis. Mi bibendum
	neque egestas congue quisque egestas. Tempus imperdiet nulla malesuada pellentesque. Pharetra vel turpis nunc eget. Enim praesent elementum facilisis leo vel fringilla.
	</p>
	<p>
	Viverra justo nec ultrices dui. Lacus vel facilisis volutpat est velit. A condimentum vitae sapien pellentesque habitant morbi tristique senectus. Integer eget aliquet nibh praesent tristique. Faucibus in ornare quam viverra. Id aliquet risus feugiat
	in. Et odio pellentesque diam volutpat commodo sed egestas egestas. Interdum consectetur libero id faucibus nisl tincidunt eget nullam. A cras semper auctor neque vitae tempus quam pellentesque nec. Senectus et netus et malesuada fames ac turpis.
	</p>
	<p>
	Faucibus pulvinar elementum integer enim neque volutpat. Parturient montes nascetur ridiculus mus mauris. Pharetra magna ac placerat vestibulum lectus mauris. Et malesuada fames ac turpis egestas integer eget. Cras semper auctor neque vitae tempus quam
	pellentesque nec. Sit amet mauris commodo quis. Faucibus interdum posuere lorem ipsum dolor sit. Molestie at elementum eu facilisis. Eros donec ac odio tempor orci dapibus ultrices. Pretium viverra suspendisse potenti nullam ac. Massa massa ultricies
	mi quis hendrerit. Metus dictum at tempor commodo ullamcorper a lacus vestibulum sed. A scelerisque purus semper eget duis at tellus at. Nunc eget lorem dolor sed viverra ipsum. Vitae elementum curabitur vitae nunc sed velit dignissim sodales.
	</p>
	</section>
	<aside>
	<p>
	Eu lobortis elementum nibh tellus. Dui nunc mattis enim ut tellus. Et malesuada fames ac turpis egestas. Amet facilisis magna etiam tempor. A scelerisque purus semper eget duis at. Enim nunc faucibus a pellentesque sit amet. Elit scelerisque mauris pellentesque
	pulvinar pellentesque habitant morbi tristique. In est ante in nibh mauris cursus mattis molestie. Sed egestas egestas fringilla phasellus faucibus. Enim ut tellus elementum sagittis vitae et leo duis. Eget sit amet tellus cras adipiscing enim eu
	turpis.
	</p>

	<div class="ad" id="middlerightSlot"></div>

	<p>
	Consectetur lorem donec massa sapien faucibus et molestie. Velit ut tortor pretium viverra suspendisse. Lacus vestibulum sed arcu non odio euismod lacinia at. Leo in vitae turpis massa sed elementum. Risus feugiat in ante metus dictum. In tellus integer
	feugiat scelerisque varius. Urna neque viverra justo nec ultrices dui sapien. Lacus vestibulum sed arcu non odio euismod lacinia. Nulla pellentesque dignissim enim sit amet venenatis urna. Sit amet mauris commodo quis imperdiet massa. Massa ultricies
	mi quis hendrerit dolor. Nunc congue nisi vitae suscipit tellus mauris. Gravida rutrum quisque non tellus orci. Ac odio tempor orci dapibus ultrices in iaculis nunc. Diam ut venenatis tellus in metus vulputate eu scelerisque felis. Mi bibendum neque
	egestas congue quisque egestas. Tempus imperdiet nulla malesuada pellentesque. Pharetra vel turpis nunc eget. Enim praesent elementum facilisis leo vel fringilla.
	</p>
	<p>
	Viverra justo nec ultrices dui. Lacus vel facilisis volutpat est velit. A condimentum vitae sapien pellentesque habitant morbi tristique senectus. Integer eget aliquet nibh praesent tristique. Faucibus in ornare quam viverra. Id aliquet risus feugiat
	in. Et odio pellentesque diam volutpat commodo sed egestas egestas. Interdum consectetur libero id faucibus nisl tincidunt eget nullam. A cras semper auctor neque vitae tempus quam pellentesque nec. Senectus et netus et malesuada fames ac turpis.
	</p>

	<p>
	Faucibus pulvinar elementum integer enim neque volutpat. Parturient montes nascetur ridiculus mus mauris. Pharetra magna ac placerat vestibulum lectus mauris. Et malesuada fames ac turpis egestas integer eget. Cras semper auctor neque vitae tempus quam
	pellentesque nec. Sit amet mauris commodo quis. Faucibus interdum posuere lorem ipsum dolor sit. Molestie at elementum eu facilisis. Eros donec ac odio tempor orci dapibus ultrices. Pretium viverra suspendisse potenti nullam ac. Massa massa ultricies
	mi quis hendrerit. Metus dictum at tempor commodo ullamcorper a lacus vestibulum sed. A scelerisque purus semper eget duis at tellus at. Nunc eget lorem dolor sed viverra ipsum. Vitae elementum curabitur vitae nunc sed velit dignissim sodales.
	</p>
	</aside>

	</main>

	<footer>
	<div class="bottom">
	<div class="ad" id="bottomleftSlot"></div>
	<div class="ad" id="bottomrightSlot"></div>
	</div>
	<p>
	Copyright 2018 Farvision LLC
	</p>
	</footer>
	</body>

	</html>
	var size = [
	//[300, 600],
	//[300, 250],
	//[160, 600],
	//[120, 600],
	[250, 250]
	];
	var PREBID_TIMEOUT = 1000;

	googletag.cmd.push(function () {
	(function (googletag, pbjs, config) {
	var sizeMappings = {};
	var slots = {};
	function refreshSlot(slot) {
	pbjs.que.push(function() {
	pbjs.requestBids({
	timeout: PREBID_TIMEOUT,
	adUnitCodes: [slot.getSlotElementId()],
	bidsBackHandler: function() {
	pbjs.setTargetingForGPTAsync([slot.getSlotElementId()]);
	googletag.pubads().refresh([slot]);
	}
	});
	});
	}
	Object.keys(config.sizeMappings).forEach(function (key) {
	var sizeMappingBuilder = googletag.sizeMapping();
	config.sizeMappings[key].forEach(function (mapping) {
	sizeMappingBuilder.addSize(mapping[0], mapping[1]);
	});
	var sizeMapping = sizeMappingBuilder.build();
	sizeMappings[key] = sizeMapping;
	console.log('created sizemapping ', key, ' ', sizeMappings[key]);
	});

	//googletag.pubads().enableSingleRequest();
	googletag.pubads().collapseEmptyDivs(true, true);
	googletag.pubads().setCentering(true);
	googletag.pubads().disableInitialLoad();
	googletag.enableServices();
	googletag.pubads().addEventListener('impressionViewable', function (event) {
	var elementId = event.slot.getSlotElementId();
	var slotConfig = slots[elementId];
	if (slotConfig) {
	var handle = setTimeout(function () {
	googletag.cmd.push(function () {
	refreshSlot(event.slot);
	});
	}, config.definitons[elementId].timeout);
	console.log('handle for time ', handle, ' elementId ', elementId, ' duration ', config.definitons[elementId].timeout);
	}
	});
	Object.keys(config.definitons).forEach(function (key) {
	var def = config.definitons[key];
	var slot = googletag.defineSlot(def.adUnitPath, def.size, key);
	slot.setTargeting('test', 'refresh');
	slot.defineSizeMapping(sizeMappings[def.sizeMapping]);
	slot.addService(googletag.pubads());
	googletag.display(key);
	slots[key] = { slot: slot };
	});
	googletag.pubads().refresh();
	})(window.googletag, window.pbjs, {
	definitons: {
	topSlot: {
	adUnitPath: '/1001824/prebid_test2',
	size: size,
	sizeMapping: 'mappingleaderslot',
	timeout: 5000,
	},
	middlerightSlot: {
	adUnitPath: '/1001824/prebid_test3',
	size: size,
	sizeMapping: 'mappingbigboxslot',
	timeout: 3000,
	},
	bottomrightSlot: {
	adUnitPath: '/1001824/prebid_test1',
	size: size,
	sizeMapping: 'mappingbigboxslot',
	timeout: 3000,
	},
	bottomleftSlot: {
	adUnitPath: '/1001824/prebid_test4',
	size: size,
	sizeMapping: 'mappingbigboxslot',
	timeout: 3000,
	},
	},
	sizeMappings: {
	mappingleaderslot: [
	[
	[1024, 769],
	[
	[970, 250],
	[970, 90],
	[728, 90],
	[468, 60],
	[320, 50],
	[234, 60]
	]
	],
	[
	[768, 500],
	[
	[728, 90],
	[468, 60],
	[320, 50],
	[234, 60]
	]
	],
	[
	[1, 1],
	[
	[320, 50],
	[234, 60]
	]
	],
	],
	mappingbigboxslot: [
	[
	[1024, 769],
	[
	[300, 600],
	[300, 250],
	[160, 600],
	[120, 600],
	[250, 250]
	]
	],
	[
	[768, 500],
	[
	[300, 250],
	[250, 250]
	]
	],
	[
	[1, 1],
	[
	[300, 250],
	[250, 250]
	]
	],
	]
	}
	});
	});
	.ad {
	outline: 1px solid blue;
	min-width: 90px;
	min-height: 90px;
	}

	.bottom {
	display: flex;
	justify-content: space-around;
	}

	section {
	flex: 1 1 auto;
	}

	aside {
	flex: 1 1 auto;
	}

	main {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	}

	footer {
	outline: 1px solid red;
	}