msPropelObjectFilter = Class.create({

  initialize: function(container, url) {
    this.container = container;
    this.url = url;
    this.previous_hash = '';
    this.insertLoader();
    this.pollinterval = setInterval(this.poll.bind(this), 1000);
    Event.observe(window, 'unload', function() {
      clearInterval(this.pollinterval);
    }.bind(this));
    this.stop_poll = false;
  },

  insertLoader: function() {
    this.loadertimeout = false;
    this.loaderdiv = $(document.createElement('div'));
    this.loaderdiv.setStyle({
      backgroundColor: '#fff',
      display: 'none',
      filter: 'alpha(opacity=40)',
      left: '0',
      opacity: '.4',
      position: 'absolute',
      top: '0',
      visibility: 'hidden'
    });
    this.loaderdiv.id = 'loaderdiv';
    document.body.appendChild(this.loaderdiv);

    this.loadercontent = $(document.createElement('div'));
    this.loadercontent.setStyle({
      backgroundColor: '#fff',
      display: 'none',
      position: 'absolute',
      visibility: 'hidden'
    });
    this.loadercontent.id = 'loadercontent';
    this.fillLoadercontent(this.loadercontent);
    document.body.appendChild(this.loadercontent);
  },

  fillLoadercontent: function(element) {
    //<img class="animation" src="/sfLightWindowPlugin/images/ajax-loading.gif" alt="loading">
    //<span>Loading ...</span>
    element.setStyle({
      backgroundColor: '#F0F0F0',
      height: '30px',
      padding: '10px',
      width: '150px'
    });
    var anim = $(document.createElement('img'));
    anim.src = '/sfLightWindowPlugin/images/ajax-loading.gif';
    anim.alt = 'Laden';
    anim.setStyle({
      verticalAlign: 'middle',
      marginRight: '10px'
    });
    element.appendChild(anim);
    var text = $(document.createElement('span'));
    text.appendChild(document.createTextNode('Laden...'));
    element.appendChild(text);
  },

  showLoader: function() {
    //set a timeout so the loader will eventually close, even if there is a problem in the AJAX request
    this.loadertimeout = setTimeout(this.hideLoader.bind(this), 30000);
    this.loaderdiv.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.loadercontent.setStyle({
      display: 'block',
      left: (Math.round((document.viewport.getWidth() - (this.loadercontent.getWidth())) / 2)) + 'px',
      top: (Math.round((document.viewport.getHeight() - (this.loadercontent.getHeight())) / 2)) + 'px',
      visibility: 'visible'
    });
    this.open = true;
  },

  hideLoader: function() {
    if (this.loadertimeout) {
      clearTimeout(this.loadertimeout);
    }
    this.open = false;
    this.loaderdiv.setStyle({
      display: 'none',
      visibility: 'hidden'
    });

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

  poll: function() {
    var hash = window.location.hash;
    if (!this.stop_poll && (this.previous_hash != hash)) {
      this.previous_hash = hash;
      var parameters = hash.substr(1);
      this.update(parameters);
    }
  },

  update: function(parameters) {
    this.showLoader();
    new Ajax.Updater(this.container, this.url, {
      parameters: parameters,
      evalScripts: true,
      onComplete: this.hideLoader.bind(this)
    });
  },

  setHashVariable: function(variable, value) {
    this.stop_poll = true;
    var hash = window.location.hash;
    var processed = false;
    var parameters = new Array();
    if (hash.length > 0) {
      parameters = hash.substr(1).split('&');
      var param;
      for (var i = 0; i < parameters.length; i++) {
        param = parameters[i].split('=');
        if (param.length == 2) {
          if (param[0] == variable) {
            parameters[i] = variable + '=' + value;
            processed = true;
          }
        }
      }
    }
    if (!processed) {
      parameters.length++;
      parameters[parameters.length - 1] = variable + '=' + value;
      processed = true;
    }

    hash = '#' + parameters.join('&');
    window.location.hash = hash;
    //prevent de poller from reloading ajax
    this.previous_hash = hash;

    this.stop_poll = false;
  }

});

