var rooturl = '';

function setupMorph(eElement, sDisplayStyle)
{
	if(!$defined(sDisplayStyle)) sDisplayStyle = 'block';
	eElement = $(eElement);
	eElement.setStyle('opacity', 0);
	eElement.get('morph').addEvents({
		'onStart': function(e){var show = true; $try(function(){show = this.to.opacity[0].value != 0;}.bind(this)); if(e.getStyle('opacity') == 0 && show) e.setStyle('display', sDisplayStyle);},
		'onComplete': function(e){if(e.getStyle('opacity') == 0) e.setStyle('display', 'none');}
	});
}


//Fix some IE6 issues
if(Browser.Engine.trident4){
	if (document.all && document.styleSheets && document.styleSheets[0] && document.styleSheets[0].addRule){
		document.styleSheets[0].addRule('div', 'behavior: url('+rooturl+'css/pngfix.htc)');
		document.styleSheets[0].addRule('img', 'behavior: url('+rooturl+'css/pngfix.htc)');
		document.styleSheets[0].addRule('input', 'behavior: url('+rooturl+'css/pngfix.htc)');
		document.styleSheets[0].addRule('li', 'behavior: url('+rooturl+'css/pngfix.htc)');
	}
}
window.addEvent('domready', function(){

  var imgs = $$('img.thumbnail');
  $each(imgs, function(img, i){
    var previewDiv = new Element('div', {
      'id': 'preview'+i,
	  'class': 'popupThumbOuter',
      'styles': {
        'display': 'none',
        'position': 'absolute',
        'top': img.getCoordinates().top + img.getCoordinates().height / 2,
        'left': img.getCoordinates().left + img.getCoordinates().width / 2
      }
    });
    previewDiv.inject(document.body);
    
    setupMorph(previewDiv);
    
    var holdingDiv = new Element('div', {
	  'class': 'popupThumbInner',
      'styles': {
        'width': 32,
        'height': 32,
        'display': 'block',
      }
    }).inject(previewDiv);
    
    loader = new Element('img', {
      'src': rooturl+'images/thumbloading.gif',
      'width': 32,
      'height': 32,
      'alt': 'Loading'
    }).inject(holdingDiv);
    setupMorph(loader);
    loader.setStyle('opacity', 1);
    
    var largeURL = img.getParent('a').getProperty('href');
    img.replaces(img.getParent('a'));
    img.store('id', i);
    img.addEvents({
      'mouseenter': function(e){
        var previewDiv = $('preview'+e.target.retrieve('id'));
        previewDiv.morph({'opacity': 1})
        if(previewDiv.getElement('div').getElement('img').getProperty('alt') == 'Loading' && previewDiv.retrieve('loading', false) != true){
          previewDiv.store('loading', true);
          var newimg = new Asset.image(largeURL, {onload: function(e){
              previewDiv.getElement('img').morph({'opacity': 0});
              previewDiv.getElement('div').morph({'width': e.width, 'height': e.height});
              var addImg = function(){
                e.inject(previewDiv.getElement('div'));
              }.bind(this);
              addImg.delay(500);
            }.bind(this)
          });
        }
      },
      'mouseleave': function(e){
        previewDiv.morph({'opacity': 0})
      }
    });
  });  
});