(function() {
  var canAccessTop = true;
  try{
    var i = window.top.document.id;
  } catch(e){
    canAccessTop = false;
  }
  var blackoutTime = 50;
  var rh = window.ResponsiveHelper = function(items, onUpate) {
    if (!canAccessTop){
      console.log("ResponsiveHelper: Top window is not accessible - cannot run!");
      return;
    }
    this.items = items;
    this.onUpate = onUpate;
    this.canUpdate = true;
    this.ref;
    this.init = this.init.bind(this);
    this.updateStyles = this.updateStyles.bind(this);
    this.init();
    Premium.utils.debug("ResponsiveHelper loaded successfully.");
  };
  rh.ExpandedPerc = .25;
  rh.CollapsedPerc = .13;
  rh.MediumHeightThresh = 700; // below this is 'short'
  rh.TallHeightThresh = 870; // below this is 'medium', above this is 'tall'
  rh.MediumWidthThresh = 1000; // below this is 'narrow'
  rh.WideWidthThresh = 1350; // below this is 'middle', above this is 'wide'
  var p = rh.prototype;
  p.init = function() {
    this.currentState = "collapsed";
    window.top.addEventListener("resize", this.updateStyles);
    document.addEventListener("DOMContentLoaded", this.updateStyles);
  }
  p.updateMessageEl = function(message) {
    if (!this.messageEl) {
      this.messageEl = document.createElement("P");
      this.messageEl.style.position = "fixed";
      this.messageEl.style.top = "0";
      this.messageEl.style.right = "0";
      this.messageEl.style.color = "white";
      this.messageEl.style.padding = "5px";
      this.messageEl.style.backgroundColor = "rgba(0,0,0,.5)";
      window.top.document.body.appendChild(this.messageEl);
    }
    this.messageEl.innerText = message;
  }
  p.updateStyles = function(state) {
    var me = this;
    if (!me.canUpdate) return;
    var stateIsString = typeof(state) === "string";
    if (stateIsString){
      me.canUpdate = false;
      clearTimeout(me.ref)
      me.ref = setTimeout(function () {
        me.canUpdate = true;
      }, blackoutTime);
    }
    state = !stateIsString ? "collapsed" : state;
    this.currentState = state;
    var topWinHeight = Premium.product.dimensions.top.height;
    var topWinWidth = Premium.product.dimensions.top.width;
    var widthDesc, heightDesc;
    if (topWinWidth > rh.WideWidthThresh) {
      widthDesc = "WIDE";
    } else if (topWinWidth > rh.MediumWidthThresh) {
      widthDesc = "MEDIUM";
    } else {
      widthDesc = "NARROW";
    }
    if (topWinHeight > rh.TallHeightThresh) {
      heightDesc = "TALL";
    } else if (topWinHeight > rh.MediumHeightThresh) {
      heightDesc = "MEDIUM";
    } else {
      heightDesc = "SHORT";
    }
    for (var i = 0; i < this.items.length; i++) {
      var itemObj = this.items[i];
      if (itemObj.state !== "both" && itemObj.state !== state) continue;
      var heightPerc;
      if (itemObj.use_state){
        heightPerc = itemObj.use_state === "collapsed" ? rh.CollapsedPerc : rh.ExpandedPerc;
      } else {
        heightPerc = state === "collapsed" ? rh.CollapsedPerc : rh.ExpandedPerc;
      }
      var cssObj = {};

      // Narrow / default --------------------------------------------------
      if (itemObj.narrow.cssShort){
        for (var v in itemObj.narrow.cssShort) {
          cssObj[v] = itemObj.narrow.cssShort[v];
        }
      }
      if (itemObj.narrow.cssMedium && (heightDesc === "MEDIUM" || heightDesc === "TALL")){
        for (var v in itemObj.narrow.cssMedium) {
          cssObj[v] = itemObj.narrow.cssMedium[v];
        }
      }
      if (itemObj.narrow.cssTall && heightDesc === "TALL"){
        for (var v in itemObj.narrow.cssTall) {
          cssObj[v] = itemObj.narrow.cssTall[v];
        }
      }
      // Medium width ------------------------------------------------------
      if (itemObj.medium && (widthDesc == "MEDIUM" || widthDesc == "WIDE")) {
        if (itemObj.medium.cssShort){
          for (var v in itemObj.medium.cssShort) {
            cssObj[v] = itemObj.medium.cssShort[v];
          }
        }
        if (itemObj.medium.cssMedium && (heightDesc === "MEDIUM" || heightDesc === "TALL")){
          for (var v in itemObj.medium.cssMedium) {
            cssObj[v] = itemObj.medium.cssMedium[v];
          }
        }
        if (itemObj.medium.cssTall && heightDesc === "TALL"){
          for (var v in itemObj.medium.cssTall) {
            cssObj[v] = itemObj.medium.cssTall[v];
          }
        }
      }
      // Wide --------------------------------------------------------------
      if (itemObj.wide && widthDesc === "WIDE") {
        if (itemObj.wide.cssShort){
          for (var v in itemObj.wide.cssShort) {
            cssObj[v] = itemObj.wide.cssShort[v];
          }
        }
        if (itemObj.wide.cssMedium && (heightDesc === "MEDIUM" || heightDesc === "TALL")){
          for (var v in itemObj.wide.cssMedium) {
            cssObj[v] = itemObj.wide.cssMedium[v];
          }
        }
        if (itemObj.wide.cssTall && heightDesc === "TALL"){
          for (var v in itemObj.wide.cssTall) {
            cssObj[v] = itemObj.wide.cssTall[v];
          }
        }
      }
      var selectors = itemObj.selector.split(/,\w?/);
      for (var n = 0; n < selectors.length; n++){
        var els = document.querySelectorAll(selectors[n]);
        if (els.length === 0){
          Premium.utils.debug("ResponsiveHelper: " + itemObj.selector + " not found!");
        }
        for (var j = 0; j < els.length; j++){
          var el = els[j];
          for (var k in cssObj) {
            if (typeof(cssObj[k]) === "string") {
              el.style[k] = cssObj[k];
            } else {
              el.style[k] = cssObj[k] * heightPerc * topWinHeight + "px";
            }
          }
        }
      }


    }
    if (this.onUpate) {
      this.onUpate({ widthDesc: widthDesc, heightDesc: heightDesc, topWinWidth: topWinWidth, topWinHeight: topWinHeight })
    }
    if (Premium && Premium.general.local) {
      var message = "Width: " + topWinWidth + " > " + widthDesc + "\nHeight: " + topWinHeight + " > " + heightDesc;
      // Premium.utils.debug(message);
      this.updateMessageEl(message);
    }
  }
}())
