var bannerDelivery = bannerDelivery || {

  baseurl: null,
  clientId: null,
  pageCreatives: null,
  viewportThreshold: 768,
  
  loadPlacements: function()
  {

    // Sane
    if( !bannerDelivery.clientId ){
      throw "Client ID not set";
    }

    var isMobile = window.innerWidth <= bannerDelivery.viewportThreshold;
    var isDesktop = window.innerWidth > bannerDelivery.viewportThreshold;

    // Look for placements
    bannerDelivery.pageCreatives = document.getElementsByClassName('cq-creative');
    var placementIds = [];
    for( var i in bannerDelivery.pageCreatives ){
      if(
        bannerDelivery.pageCreatives[i].dataset
        && bannerDelivery.pageCreatives[i].dataset['placement']
        && placementIds.indexOf(bannerDelivery.pageCreatives[i].dataset['placement']) == -1
      ){
        placementIds.push(bannerDelivery.pageCreatives[i].dataset['placement'])
      }
    }

    // If we have placements to fill, fetch them.
    if( placementIds.length > 0 ){

      // Form and send the XHR
      var opts = ( typeof document.ccmsBannersOptions == 'object' ? document.ccmsBannersOptions : {} );
      opts.viewport = ( isMobile ? 'mobile' : 'desktop' );
      opts.uri = window.location.pathname;
      var url = bannerDelivery.baseurl + '/creatives/?client_id=' + bannerDelivery.clientId + '&placement_ids=' + placementIds.join(',') + '&options=' + btoa(JSON.stringify(opts));
      var xhr = new XMLHttpRequest();
      xhr.addEventListener("readystatechange", function(e) {
        if (this.readyState == 4) {
          if( this.status == '200' ){ 
            var result = JSON.parse(this.responseText);
            if( result.error ){
              throw result.error;
            }else{

              // Find all DOM els with our placementIds
              for( var i=0; i<bannerDelivery.pageCreatives.length; i++ ){

                // Qualify whether this placement can be filled

                // Sanity check stuff
                if(
                  !bannerDelivery.pageCreatives[i].dataset
                  || !bannerDelivery.pageCreatives[i].dataset['placement']
                ){
                  continue;
                }

                // Now do viewport checks
                if(
                  (isMobile && bannerDelivery.pageCreatives[i].dataset['desktopOnly'])
                  || (isDesktop && bannerDelivery.pageCreatives[i].dataset['mobileOnly'])
                ){
                  continue;
                }

                // Certain placement types are not allowed on mobile
                if(
                  isMobile
                  && bannerDelivery.pageCreatives[i].dataset['type'] == 'pagepeel'
                ){
                  continue;
                }

                // Fixed positions only allowed top and bottom on mobile
                if(
                  isMobile
                  && bannerDelivery.pageCreatives[i].dataset['type'] == 'fixed'
                  && ['top','bottom'].indexOf(bannerDelivery.pageCreatives[i].dataset['position']) == -1
                ){
                  continue;
                }

                // Fixed left and right need 1500px min width
                if(
                  bannerDelivery.pageCreatives[i].dataset['type'] == 'fixed'
                  && ['left','right'].indexOf(bannerDelivery.pageCreatives[i].dataset['position']) != -1
                  && window.innerWidth < 1500
                ){
                  continue;
                }

                // Eligible. Loop through potential multiple placemtent ids and try to find a creative
                var creative = null;
                var pageCreativePlacementIds = bannerDelivery.pageCreatives[i].dataset['placement'].split(',');
                for(pcpi=0; pcpi<pageCreativePlacementIds.length; pcpi++){
                  var pageCreativePlacementId = pageCreativePlacementIds[pcpi];
                  if(
                    !creative
                    && result.placements[pageCreativePlacementId]
                    && result.placements[pageCreativePlacementId].length > 0
                  ){
                    creative = result.placements[pageCreativePlacementId].splice(Math.floor(Math.random() * result.placements[pageCreativePlacementId].length), 1)[0];
                  }
                }
                if( creative ){
                  bannerDelivery.placeCreative(bannerDelivery.pageCreatives[i], creative);
                }

              }

            }
          }else{
            throw "An error occurred while fetching placements";
          }
        }
      });

      xhr.open("GET", url, true);
      xhr.send();

    }
    
  },

  placeCreative: function(placementEl, creative)
  {

    // Send in an impression
    var url = bannerDelivery.baseurl + '/action/?type=impression&client_id=' + bannerDelivery.clientId + '&creative_id=' + creative.id;
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.send();
    
    // Resolve payload
    var payload = document.createElement("div");
    if( creative.type == 'image' ){
      var imgTag = "<img src='" + creative.deliverable_photo_url + "'></a>";
      if(
        creative['deliverable_photo_clickthrough']
        && typeof creative['deliverable_photo_clickthrough'] != 'undefined'
        && creative.deliverable_photo_clickthrough.length > 0
      ){
        var ctUrl = bannerDelivery.baseurl + '/action/?type=click&client_id=' + bannerDelivery.clientId + '&creative_id=' + creative.id;
        imgTag = "<a href='" + ctUrl + "' target='new'>" + imgTag + "</a>";
      }
      payload.innerHTML = imgTag;

    }else{
      payload.innerHTML = creative.deliverable_text;
    }

    // Place in DOM
    switch( placementEl.dataset['type'] ){

      case 'fixed':

        // Make sure there isn't already one on the page
        var positionClass = 'cq-position-'+placementEl.dataset['position'];
        if( document.getElementsByClassName(positionClass).length > 0 ){
          return true;
        }

        // As usual we start with a wrap
        var wrapper = document.createElement("div");
        wrapper.classList.add('cq-oop-fixed');
        wrapper.classList.add(positionClass);

        // Add the creative
        payload.classList.add('cq-creative');
        wrapper.appendChild(payload);

        // Add the closer
        var closer = document.createElement("div");
        closer.classList.add('cq-closer');
        closer.classList.add('cq-hidden'); // Hide class
        closer.innerHTML = 'x';
        
        // Closer click action
        closer.onclick = function(){
          document.querySelector('.'+positionClass).style.display = 'none';
          document.body.classList.remove('cq-oop-fixed-'+placementEl.dataset['position']);
        }

        // Append closer
        payload.prepend(closer);

        // Append to DOM
        placementEl.appendChild(wrapper);

        // Add a body class for this position
        document.body.classList.add('cq-oop-fixed-'+placementEl.dataset['position']);

        // Delay load the close button
        window.setTimeout(function(){
          bannerDelivery.setCk(creativeCk);
          closer.classList.remove('cq-hidden'); // Show closer
        }, 5000);

        // Evaluate JS
        bannerDelivery.evalScriptTags(placementEl);

        // Done
        break;

      case 'pagepeel':

        // Prevent from loading if there is already one on the page.
        if( document.getElementsByClassName('cq-oop-curl').length > 0 ){
          return true;
        }

        // Start with a wrap
        var wrapper = document.createElement("div");
        wrapper.classList.add('cq-oop-curl');

        // Now a creative wrap
        var creativeWrapper = document.createElement("div");
        creativeWrapper.classList.add('cq-creative-wrap');
        payload.classList.add('cq-creative');
        creativeWrapper.appendChild(payload);
        wrapper.appendChild(creativeWrapper);

        // Now the peel object
        var peel = document.createElement("div");
        peel.classList.add('cq-peel');
        var peelImg = document.createElement("img");
        peelImg.src = 'https://499c5dde9963d0b3ee86-019e649c341632cf56fb3a0bbe5a8c26.ssl.cf1.rackcdn.com/peel-image.png';
        peel.appendChild(peelImg);
        wrapper.appendChild(peel);

        // Set the click action
        wrapper.onclick = function(){ window.open(ctUrl); };

        // Append UI
        placementEl.appendChild(wrapper);

        // Set the pulse interval
        bannerDelivery.classPulse();

        // Evaluate JS
        bannerDelivery.evalScriptTags(placementEl);

        // Done
        break;

      case 'popup':

        // Start with cookie check
        var creativeCk = 'cq_pop_'+creative.id;
        if( bannerDelivery.getCk(creativeCk) ){
          return true; // Already seen it
        }

        // Wrapper
        var wrapper = document.createElement("div");
        wrapper.classList.add('cq-oop-pop');

        // Screen
        var screen = document.createElement("div");
        screen.classList.add('cq-screen');
        wrapper.appendChild(screen);

        // Closer - append to creative payload
        var closer = document.createElement("div");
        closer.classList.add('cq-closer');
        closer.classList.add('cq-hidden'); // Hide class
        closer.innerHTML = 'x';

        // Closer click action
        closer.onclick = function(){
          document.querySelector('.cq-oop-pop').style.display = 'none';
          $(document).unbind('scroll'); 
          $('body').css({'overflow':'visible'});
        }

        // Append closer
        payload.appendChild(closer);
        
        // Combine it all
        payload.classList.add('cq-creative');
        wrapper.appendChild(payload);
        placementEl.appendChild(wrapper);

        // Lock scrolling
        $('body').css({'overflow':'hidden'});
        $(document).bind('scroll',function () { 
          window.scrollTo(0,0);
        });

        // Delay load the close button
        window.setTimeout(function(){
          bannerDelivery.setCk(creativeCk);
          closer.classList.remove('cq-hidden'); // Show closer
        }, 5000);

        // Evaluate JS
        bannerDelivery.evalScriptTags(placementEl);

        // Done
        break;

      // pushdown ad - attempt to attach after nav.navbar-default as in the default template
      case 'pushdown':

          // Create wrapper
          var wrapper = document.createElement("div");
          var wrapperId = 'cq_oop_'+placementEl.dataset['placement'];
          wrapper.id = wrapperId;
          wrapper.classList.add('cq-oop-pushdown');
          wrapper.classList.add('cq-expanded'); // Load expanded

          // Now apply a class to the payload and append
          payload.classList.add('cq-oop-pushdown-creative');
          wrapper.appendChild(payload);
          
          // Apply to the nav container
          var navContainer = document.querySelector('.navbar-default');
          navContainer.appendChild(wrapper);

          // Evaluate JS
          bannerDelivery.evalScriptTags(wrapper);

          // Set the auto-collapse
          window.setTimeout(function(){
            wrapper.classList.remove('cq-expanded');
          }, 5000);

          break;

      // Top reveal
      case 'reveal':

        // Create wrapper
        var wrapper = document.createElement("div");
        wrapper.classList.add('cq-oop-reveal-wrap');

        // Ad container
        var creativeWrapper = document.createElement("div");
        creativeWrapper.classList.add('cq-reveal-creative');

        // Combine it all
        payload.classList.add('cq-creative');
        creativeWrapper.appendChild(payload);
        wrapper.appendChild(creativeWrapper);

        // Now prepend it before page content
        body = document.getElementsByTagName('body')[0];
        body.prepend(wrapper);

        window.addEventListener('load', function(e) {

          depth = document.querySelector('.cq-reveal-creative').offsetHeight;

          // Animate!
          setTimeout(function(){
            
            body.setAttribute('style','margin-top:0');
            wrapper.setAttribute('style', 'height:'+depth+'px; transition:height 1s ease-in-out;');

            // Final tweaks
            var firstDiv = document.querySelector('body').getElementsByClassName('pk-layer')[0];
            var newDepth = depth + 20;
            setTimeout(function(){
              firstDiv.setAttribute('style', 'margin-top:'+newDepth+'px');
              wrapper.classList.add('fixed');
            }, 1000);

          }, 1000);

        });

        break;

      // Crawler
      case 'crawler':

        // Create wrapper
        var wrapper = document.createElement("div");
        wrapper.classList.add('cq-oop-crawler-wrap');

        // Closer - append to creative payload
        var closer = document.createElement("div");
        closer.classList.add('cq-closer');
        closer.classList.add('cq-hidden'); // Hide class
        closer.innerHTML = 'x';

        // Append closer
        payload.appendChild(closer);

        // Closer click action
        closer.onclick = function(){
          document.querySelector('.cq-oop-crawler-wrap').style.display = 'none';
        }

        // Ad container
        var creativeWrapper = document.createElement("div");
        creativeWrapper.classList.add('cq-crawler-creative');

        // Combine it all
        payload.classList.add('cq-creative');
        creativeWrapper.appendChild(payload);
        wrapper.appendChild(creativeWrapper);

        placementEl.appendChild(wrapper);

        // Delay load the close button
        window.setTimeout(function(){
          closer.classList.remove('cq-hidden'); // Show closer
        }, 5000);

        // Done
        break;

      // Shoutbox
      case 'shoutbox':

        // Start with cookie check
        var creativeCk = 'cq_shout_'+creative.id;
        if( bannerDelivery.getCk(creativeCk) ){
          return true; // Already seen it
        }
        
        // Make sure there isn't already one on the page
        var position = placementEl.dataset['position'];
        var positionClass = 'cq-position-'+position;
        if( document.getElementsByClassName(positionClass).length > 0 ){
          return true;
        }
        
        // Create wrapper
        var wrapper = document.createElement("div");
        wrapper.classList.add('cq-oop-shoutbox');
        wrapper.classList.add(positionClass);
        
        // Closer - append to creative payload
        var closer = document.createElement("div");
        closer.classList.add('cq-closer');
        closer.classList.add('cq-hidden'); // Hide class
        closer.innerHTML = 'x';
        
        // Append closer
        payload.appendChild(closer);
        
        // Combine it all
        payload.classList.add('cq-creative');
        wrapper.appendChild(payload);
        placementEl.appendChild(wrapper);

        // Get width of creative and offset out of viewport
        window.addEventListener('load', function(e) {

          var width = document.querySelector('.cq-oop-shoutbox .cq-creative').offsetWidth;
          
          // Position
          window.setTimeout(function(){
            if( position.match('right') ){
              document.querySelector('.cq-oop-shoutbox').style.right = '-'+(width)+'px';
            }else if( position.match('left') ){
              document.querySelector('.cq-oop-shoutbox').style.left = '-'+(width)+'px';
            }
            document.querySelector('.cq-oop-shoutbox').style.height = 'auto';
          }, 100);

          // Animate and delay load the close button
          window.setTimeout(function(){
            var shoutbox = document.querySelector('.cq-oop-shoutbox');
            if( position.match('right') ){
              shoutbox.style.right = '0px';
              shoutbox.style.transition = 'right 1s ease-in-out';
            }else if( position.match('left') ){
              shoutbox.style.left = '0px';
              shoutbox.style.transition = 'left 1s ease-in-out';
            }
          }, 1000);

          // Closer click action
          closer.onclick = function(){
            if( position.match('right') ){
              wrapper.setAttribute('style', 'right: -'+width+'px; transition:right 0.4s ease-in-out;');
            }else if( position.match('left') ){  
              wrapper.setAttribute('style', 'left: -'+width+'px; transition:left 0.4s ease-in-out;');
            }
          }

          // Delay load the close button
          window.setTimeout(function(){
            bannerDelivery.setCk(creativeCk);
            closer.classList.remove('cq-hidden'); // Show closer
          }, 5000);

        });

        // Done
        break;

      // Wallpaper
      case 'wallpaper':

        // Create wrapper
        var wrapper = document.createElement("div");
        wrapper.classList.add('cq-oop-wallpaper-wrap');

        // Creative
        var creativeWrapper = document.createElement("div");
        creativeWrapper.classList.add('cq-oop-wallpaper');

        // Combine it all
        payload.classList.add('cq-creative');
        creativeWrapper.appendChild(payload);
        wrapper.appendChild(creativeWrapper);

        // Create site wrapper
        var bodyWrapper = document.createElement("div");
        bodyWrapper.classList.add('body-wrapper');

        var siteBody = document.querySelector('body');
        siteBody.prepend(bodyWrapper);
        bodyWrapper.style.maxWdth = 'max-content';
        bodyWrapper.style.position = 'relative';
        bodyWrapper.style.zIndex = 10;
        siteBody.setAttribute('style', 'display: table;');

        // Move all body tag children to this new wrapper
        var elements = document.querySelectorAll( 'body > *' );
        for( var i=0; i<elements.length; i++ ){
          if( 
            elements.item(i).innerHTML.match('div') 
            || elements.item(i).innerHTML.match('section') 
          ){
            thisEl = elements.item(i);
            bodyWrapper.appendChild(thisEl);
          }
        }
        
        placementEl.appendChild(wrapper);

        // Done
        break;

      // Standard / non-OOP banner
      default:

        // Append DOM el
        placementEl.appendChild(payload);

        // Eval
        bannerDelivery.evalScriptTags(placementEl);

        // Done
        break;

    }

    // Done
    return true;

  },

  evalScriptTags: function(el)
  {
    var scriptTags = el.getElementsByTagName("script");
    if( scriptTags.length > 0 ){
      for( var i = 0; i <= scriptTags.length; i++ ){
        if( scriptTags[i] ){
          bannerDelivery.nodeScriptReplace(scriptTags[i]);
        }
      }
    }
  },

  getCk: function(ckName) {
      var v = document.cookie.match('(^|;) ?' + ckName + '=([^;]*)(;|$)');
      return v ? v[2] : null;
  },

  setCk: function(ckName) {
      document.cookie = ckName + "=1;path=/;";
  },

  classPulse: function()
  {
    document.querySelector('.cq-oop-curl').classList.add('cq-pulse');
    window.setTimeout(function(){
      document.querySelector('.cq-oop-curl').classList.remove('cq-pulse');
      window.setTimeout(bannerDelivery.classPulse, 2500);
    }, 350);
  },

  nodeScriptReplace: function(node) {
    if ( bannerDelivery.nodeScriptIs(node) === true ) {
      node.parentNode.replaceChild( bannerDelivery.nodeScriptClone(node) , node );
    }
    else {
      var i = -1, children = node.childNodes;
      while ( ++i < children.length ) {
        bannerDelivery.nodeScriptReplace( children[i] );
      }
    }

    return node;
  },

  nodeScriptClone: function(node){
    var script  = document.createElement("script");
    script.text = node.innerHTML;

    var i = -1, attrs = node.attributes, attr;
    while ( ++i < attrs.length ) {                                    
      script.setAttribute( (attr = attrs[i]).name, attr.value );
    }
    return script;
  },

  nodeScriptIs: function(node) {
    return node.tagName === 'SCRIPT';
  }

};




bannerDelivery.baseurl = 'https://bandel.creativecirclemedia.com';
bannerDelivery.clientId = 'nmcwye';
document.addEventListener('DOMContentLoaded', bannerDelivery.loadPlacements());