var CurrentPopup;
var PopupWindow = Class.create({
  initialize: function(template, product) {
    if(CurrentPopup) CurrentPopup.close();
    CurrentPopup = this;
    
    this.cover = new Element('div');
    this.cover.setStyle({position: 'absolute', background: 'white', top: '0px', left: '0px', right: '0px', bottom: '0px', zIndex: 10, display: 'none'});
    document.body.appendChild(this.cover);
    new Effect.Appear(this.cover,
      { duration: 0.25, 
        transition: Effect.Transitions.linear, 
        from: 0.0, to: 0.5 });    
      
      this.element = new Element('div', {id: 'popup'});
      this.element.setStyle({position: 'absolute', width: '305px', top: '0px', left: '0px', display: 'none', zIndex: 20});
      this.element.innerHTML = template.gsub(/\$\{(.*?)\}/, function(match) {
        return product[match[1]];
      });    
      
      this.element.addClassName('popup')
      
      document.body.appendChild(this.element);
      
      this.element.select('.value').each(function(vEl) {
        if(vEl.innerHTML.length == 0) vEl.up().hide();
      });
      
      Event.observe(this.element.down('.close'), 'click', function(e) {
        this.close(); Event.stop(e);
      }.bindAsEventListener(this));
      
      this.center();
      this.image = this.element.select('.image').last();
      
      if(product.image) {
        var size = preloads[product.image];
        this.image.setStyle({overflow: 'hidden', width: '283px', height: '10px'});
        
        if(size) {
          this.attachImage(product.image, size);
        } else {
          this.attachImage('/images/indicator.gif', {width: 16, height: 16});
          document.observe('image:loaded', function(e) {
            if(e.memo.url == product.image) {
              this.attachImage(e.memo.url, e.memo);
          }
        }.bindAsEventListener(this));
      }
    }
    
    this.element.show();
    this.shim();
    
    Event.observe(window, 'scroll', function(e) { this.center(false); }.bindAsEventListener(this));
  },
  attachImage: function(url, size) {    
    var doAttach = function() {
      img = new Element('img', {src: url, width: size.width, height: size.height});
      this.image.innerHTML = '';
      this.image.insert(img);
      this.image.show();
      this.center(this.element.visible());
    }.bindAsEventListener(this);
    
    if(this.element.visible())
      new Effect.Morph(this.image, {style: {height: size.height + 'px'}, duration: 0.5, afterFinish: doAttach});
    else {
      this.image.setStyle({height: size.height + 'px'});
      doAttach();
    }
  },
  center: function(animate) {
    var view = Object.extend(document.viewport.getDimensions(), document.viewport.getScrollOffsets());
    var top = (view.height/2)-(this.element.getHeight()/2) + view.top;
    var left = (view.width/2) - (this.element.getWidth()/2) + view.left;
    
    if(animate) {
      new Effect.Morph(this.element, {style: {left: left + 'px', top: top + 'px'}, duration: 0.5, afterFinish: this.shim.bindAsEventListener(this)});
    } else {
    this.element.setStyle({left: left + 'px', top: top + 'px'});
    this.cover.setStyle({left: view.left + 'px', top: view.top + 'px'});
    
    this.shim();
  }
},
shim: function() {
  if(Prototype.Browser.IE) {
    if(this.iframe) this.iframe.remove();
    this['iframe'] = new Element('iframe', {src: 'about:blank', frameBorder: 0, scrolling: 'no'});
    this.iframe.setStyle({position: 'absolute', zIndex: 19});
    document.body.appendChild(this.iframe);
    Position.clone(this.element, this.iframe);
  }
},
close: function() {
  CurrentPopup = null;
  this.element.remove();
  this.cover.remove();
  if(this.iframe) this.iframe.remove();
}
});