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;
                }

                // 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
                  ){

                    // Splice out the creative from this placement
                    creative = result.placements[pageCreativePlacementId].splice(Math.floor(Math.random() * result.placements[pageCreativePlacementId].length), 1)[0];
                    
                    // Remove this creative from all other placements it might be in
                    for( var plKey of Object.keys(result.placements) ){
                      for( var crKey of Object.keys(result.placements[plKey]) ){
                        if(
                          typeof result.placements[plKey][crKey] == 'object'
                          && result.placements[plKey][crKey]['id'] == creative['id']
                        ){
                          result.placements[plKey].splice(crKey, 1);
                        }
                      }
                    }

                  }
                }
                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)
  {

    // 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 if( creative.type == 'iframe' ){
      var style = "border:none; padding:0; margin:0;";
      if(
        creative.metadata['width']
        && creative.metadata['height']
      ){
        style += " width:"+creative.metadata['width']+"px; height:"+creative.metadata['height']+"px;"
      }
      payload.innerHTML = "<iframe src='"+bannerDelivery.baseurl+"/ifr/"+bannerDelivery.clientId+"/"+creative.id+"' frameborder='0' marginwidth='0' scrolling='no' style='"+style+"'></iframe>";
    }else{
      payload.innerHTML = creative.deliverable_text;
    }

    // Check for autoplacement
    if( creative['autoplace'] ){

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

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

    }else{

      // 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);
          });

          // Resolve timeout
          var timeout = 5000;
          var opts = ( typeof document.ccmsBannersOptions == 'object' ? document.ccmsBannersOptions : {} );
          if( opts['popup_timeout'] ){
            timeout = parseInt(opts['popup_timeout']);
          }

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

          // 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;

          // 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;

      }

    }

    // 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();

    // 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 = 'valley';
document.addEventListener('DOMContentLoaded', bannerDelivery.loadPlacements());