var myLayerpopup = null;

var Layerpopup = Class.create({

  padding: 10,

  open: false,

  initialize: function(config) {

    Object.extend(this, config || {});

    $$('.layerpopup').each(function(element) {
      element.setStyle({
        display: 'none',
        visibility: 'hidden'
      });
    });

    this.layerdiv = $(document.createElement('div'));
    this.layerdiv.setStyle({
      backgroundColor: '#000',
      display: 'none',
      filter: 'alpha(opacity=60)',
      left: '0',
      opacity: '.6',
      position: 'absolute',
      top: '0',
      visibility: 'hidden'
    });
    this.layerdiv.id = 'layerdiv';
    document.body.appendChild(this.layerdiv);

    this.layercontent = $(document.createElement('div'));
    this.layercontent.setStyle({
      backgroundColor: '#fff',
      display: 'none',
      height: '350px',
      padding: this.padding + 'px',
      position: 'fixed',
      visibility: 'hidden',
      width: '500px'
    });
    this.layercontent.id = 'layercontent';
    document.body.appendChild(this.layercontent);

    this.layerdiv.observe('click', this.close.bind(this));
		Event.observe(window, 'unload', this.hide.bind(this));
    $$('.layerpopuplink').each(function(element) {
      element.observe('click', this.showlink.bind(this));
      element.onclick = function() {
        return false;
      };
    }.bind(this));

    this.ie6 = false;
    if (Prototype.Browser.IE) {
      if (parseInt(navigator.userAgent.substring(navigator.userAgent.indexOf("MSIE")+5), 10) <= 6) {
        this.ie6 = true;
        this.layercontent.setStyle({
          position: 'absolute'
        });
        Event.observe(window, 'scroll', this.fixscroll.bind(this));
      }
    }
  },

  fixscroll: function() {
    if (this.ie6 && (this.layercontent.style.display == 'block')) {
      var scrolloffsets = document.viewport.getScrollOffsets();
      this.layercontent.setStyle({
        left: (Math.round((document.viewport.getWidth() - (this.layercontent.getWidth())) / 2) + scrolloffsets['left']) + 'px',
        top: (Math.round((document.viewport.getHeight() - (this.layercontent.getHeight())) / 2) + scrolloffsets['top']) + 'px'
      });
    }
  },

  show: function() {
    this.layerdiv.setStyle({
      display: 'block',
      height: Math.max(document.viewport.getHeight(), document.body.getHeight()) + 'px',
      visibility: 'visible',
      width: Math.max(document.viewport.getWidth(), document.body.getWidth()) + 'px'
    });

    this.layercontent.setStyle({
      display: 'block',
      left: (Math.round((document.viewport.getWidth() - (this.layercontent.getWidth())) / 2)) + 'px',
      top: (Math.round((document.viewport.getHeight() - (this.layercontent.getHeight())) / 2)) + 'px',
      visibility: 'visible'
    });
    this.fixscroll();
    this.hideElements();
    this.open = true;
  },

  hide: function() {
    this.open = false;
    this.showElements();
    this.layerdiv.setStyle({
      display: 'none',
      visibility: 'hidden'
    });

    this.layercontent.setStyle({
      display: 'none',
      visibility: 'hidden'
    });
  },

  close: function() {
    this.hide();
    if (typeof this.onhide == 'function') {
      this.onhide();
    }
  },

  hideElements: function() {
    if (this.ie6) {
      $$('select').each(function(element) {
        element.setStyle({
          visibility: 'hidden'
        });
      });
    }
  },

  showElements: function() {
    if (this.ie6) {
      $$('select').each(function(element) {
        element.setStyle({
          visibility: 'visible'
        });
      });
    }
  },

  setContent: function(content) {
    this.layercontent.innerHTML = content;
  },

  copyContent: function(element) {
    if ($(element)) {
      this.layercontent.innerHTML = $(element).innerHTML;
    }
  },

  showlink: function(event) {
    var href = event.element().href;
    this.copyContent(href.substr(href.indexOf('#') + 1));
    this.show();
  }

});