var BLWidget;
if(BLWidget == undefined) {
  BLWidget = {};
}
 
if(!BLWidget.initialized) {
  
  BLWidget.gId = function(id) {
    return document.getElementById(id);
  };

  BLWidget.hasClassName = function(element, className) {
    var elementClassName = element.className;

    return (elementClassName.length > 0 && (elementClassName == className ||
      new RegExp("(^|\\s)" + className + "(\\s|$)").test(elementClassName)));
  };

  BLWidget.addClassName = function(element, className) {
    if (!BLWidget.hasClassName(element, className))
      element.className += (element.className ? ' ' : '') + className;
    return element;
  };

  BLWidget.removeClassName = function(element, className) {
    var newClass = BLWidget.strip(element.className.replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), ' '));
    element.className = newClass;
    return element;
  };

  BLWidget.strip = function(string) {
    return string.replace(/^\s+/, '').replace(/\s+$/, '');
  };
  
  BLWidget.add_css = function(css_content) {
    var head = document.getElementsByTagName('head')[0];
    var style = document.createElement('style');
    style.type = 'text/css';
    
    if(style.styleSheet) {
      style.styleSheet.cssText = css_content;
    } else {
      rules = document.createTextNode(css_content);
      style.appendChild(rules);
    }
    head.appendChild(style);
  }

  BLWidget.initialized = true;
}

BLWidget.widget = function(options) {
  this.options = options;

  if (!this.options.bracket_text) this.options.bracket_text = "HILFE";

  this.widget_base_url = this.local_base_url;
  this.asset_base_url = this.local_base_url;
  this.widget_url = "http:\/\/" + this.options.company_domain + "/" + "widget";
  
  this.iframe_html = '<iframe id="blw_iframe" scrolling="no" frameborder="0" class="loading"' +
                     ' src="'    + this.widget_url + '"' +
                     ' width="680"' +
                     ' height="600"' +
                     '></iframe>';
                     
  this.button_html = '<a href="#" id="blw_button" class="blw_button_'+this.options.button_placement+'" style="background-color:'+this.options.button_color+'">'+this.options.bracket_text+'</a>';
  this.overlay_html = '<div id="blw_overlay" style="display:none;">' +
                        '<div id="blw_container" style="margin:0 auto;">' +
                          '<a href="#" id="blw_close"></a>' +
                          this.iframe_html +
                        '</div>' +
                        '<div id="blw_screen"></div>' +
                      '</div>';
                      
  css = "html, body { min-height: 100%; }\n\n" +
        "#blw_overlay {\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  z-index: 1000;\n  position: absolute; }\n\n" +
        "#blw_screen {\n  top: 0;\n  left: 0;\n  z-index: 1;\n  width: 100%;\n position: absolute;\n  background-color: #000;\n  opacity: 0.45;\n  -moz-opacity: 0.45;\n  filter: alpha(opacity=45); }\n\n" +
        "#blw_container {\n  width: 680px;\n  height: 600px;\n  margin: 0 auto;\n  z-index: 2;\n  position: relative;\n border: 4px solid #666; }\n  #blw_container iframe {\n    width: 100%;\n    height: 100%;\n background: #fff; }\n\n" +
        "a#blw_button {\n "+
        "top: 50%;\n left: 0;\n color: #FFF;\n  cursor: pointer;\n  overflow: hidden;\n  position: fixed;\n  z-index: 100000;\n  _position: absolute;\n font-family: Arial;\n font-size: 16px;\n padding: 10px 20px;\n text-decoration: none;\n "+
        "transform: rotate(-90deg);\n transform-origin: left top;\n -moz-transform: rotate(-90deg);\n -moz-transform-origin: left top;\n -webkit-transform: rotate(-90deg);\n -webkit-transform-origin: left top;\n "+
        "}\n\n"+
        "a#blw_button:hover {\n    padding-top: 14px; }\n\n" +
        "a#blw_button.blw_button_right {\n"+
        "background-position: 11px 26px !important;\n right: 0 !important;\n  left: auto !important;\n  margin-right: 0 !important;\n  margin-left: auto !important;\n"+
        "transform: rotate(90deg);\n transform-origin: right top;\n -moz-transform: rotate(90deg);\n -moz-transform-origin: right top;\n -webkit-transform: rotate(90deg);\n -webkit-transform-origin: right top;\n "+
        "}\n\n" +
        "a#blw_button.blw_button_right:hover {\n    padding-top: 14px; }\n\n" +
        "a#blw_button.blw_button_hidden {\n  display: none !important; }\n\n" +
        "a#blw_close {\n  position: absolute;\n  cursor: pointer;\n  outline: none;\n  top: 0;\n  right: 0;\n  z-index: 4;\n  width: 12px;\n  height: 12px;\n  overflow: hidden;\n  background-image: url(http:\/\/brandslisten.com\/images\/widget-close.png);\n  _background: none;\n  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http:\/\/brandslisten.com\/images\/widget-close.png', sizingMethod='crop'); }\n\n"
        ".widget_button_on embed, .widget_button_on select, .widget_button_on object {\n  visibility: hidden; }\n";

  ie_filter = "\
    <!--[if IE]><style>\n\
      a#blw_button { \n filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); \n }\n\n\
      a#blw_button.blw_button_right { \n filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); \n }\n\n\
    </style><![endif]-->"
  BLWidget.add_css(css);
  document.write(ie_filter);

  if(this.options.container) {
    var container_el = GSFN.gId(this.options.container); 
    container_el.innerHTML = this.button_html + this.overlay_html;
  } else {
    document.write(this.button_html);
    document.write(this.overlay_html);
  }
  
  var widget_obj = this;
  BLWidget.gId('blw_button').onclick = function() {widget_obj.show();return false;}
  BLWidget.gId('blw_close').onclick = function() {widget_obj.hide();return false;}
  BLWidget.gId('blw_screen').onclick = function() {widget_obj.hide();return false;}
  BLWidget.gId('blw_iframe').setAttribute("src", this.empty_url());
};

BLWidget.widget.prototype = {
  local_base_url: "http:\/\/brandslisten.com",
  
  asset_url: function(asset) {
    return this.asset_base_url + asset;
  },
  
  empty_url: function() {
    return this.asset_url("/images/spinner_indicator.gif");
  },
  
  set_position: function() {
    this.scroll_top = document.documentElement.scrollTop || document.body.scrollTop;
    this.scroll_height = document.documentElement.scrollHeight;
    this.client_height = window.innerHeight || document.documentElement.clientHeight;
    
    BLWidget.gId('blw_screen').style.height = this.scroll_height+"px";
    BLWidget.gId('blw_container').style.top = this.scroll_top+(this.client_height*0.1)+"px";
  },
  
  show: function() {
    BLWidget.gId('blw_iframe').setAttribute("src", this.widget_url);
    if (BLWidget.gId('blw_iframe').addEventListener) {
      BLWidget.gId('blw_iframe').addEventListener("load", this.loaded, false);
    } else if (BLWidget.gId('blw_iframe').attachEvent) {
      BLWidget.gId('blw_iframe').attachEvent("onload", this.loaded);
    }
    this.set_position();

    BLWidget.addClassName(document.getElementsByTagName('html')[0], 'widget_button_on');
    BLWidget.gId('blw_overlay').style.display = "block";
  },
  
  hide: function() {
    if (BLWidget.gId('blw_iframe').addEventListener) {
      BLWidget.gId('blw_iframe').removeEventListener("load", this.loaded, false);
    } else if (BLWidget.gId('blw_iframe').attachEvent) {
      BLWidget.gId('blw_iframe').detachEvent("onload", this.loaded);
    }
    
    BLWidget.gId('blw_overlay').style.display = "none";
    BLWidget.gId('blw_iframe').setAttribute("src", this.empty_url());
    BLWidget.gId('blw_iframe').className = "loading";

    BLWidget.removeClassName(document.getElementsByTagName('html')[0], 'widget_button_on');
  },
  
  loaded: function() {
    BLWidget.gId('blw_iframe').className = "loaded";
  }
};