var ProductList = {
  setup: function() {
    $$('.product .thumbnail').each(function(thumb) {
      thumb.observe('mouseover', ProductList.mouseoverThumb)
      thumb.observe('mouseout', ProductList.mouseoutThumb)
    })
    
    $$('.product .popup').each(function(popup) {
      popup.observe('mouseover', ProductList.mouseoverPopup, true)
      popup.observe('mouseout', ProductList.mouseoutPopup)
      
      // popup.descendants().each(function(element) {
      //   element.observe('mouseover', ProductList.mouseoverPopup, true)
      //   element.observe('mouseout', ProductList.mouseoutPopup)
      // }) 
    })
  }, 
    
  mouseoverThumb: function(event) {
    var thumb = event.element(); 
    var popup = thumb.next('.popup');
    
    popup.setStyle({
      margin: '-50px 0 0 54px'
    })
    
    if (Prototype.Browser.IE) {
      popup.setStyle({
        marginLeft: '-14px'
      })      
    }

    popup.show();
  }, 
  
  mouseoutThumb: function(event) {
    var thumb = event.element(); 
    var popup = thumb.next('.popup');
    
    popup.hide();
  }, 
  
  mouseoverPopup: function(event) {
    var popup = event.element().up('.product').down('.popup'); 
    popup.show(); 
  },  
  
  mouseoutPopup: function(event) {
    var popup = event.element().up('.product').down('.popup'); 

    if (!Position.within(popup, event.pointerX(), event.pointerY())) {
      popup.hide();  
    }      
  }
  
}

Event.observe(window, 'load', function() { ProductList.setup() })