var throbber = new Image();
throbber.loaded = false;
throbber.onload = function() {
	this.loaded = true;
}

function loadPopupThrobber( src ) {
	throbber.src = src;
}

function popupImage( thumbId, url, align, valign ) {
	popupImageAlignTo( thumbId, url, thumbId, align, thumbId, valign );
}

function popupImageHAlignTo( thumbId, url, alignId, align, valign ) {
	popupImageAlignTo( thumbId, url, alignId, align, thumbId, valign );
}

function popupImageVAlignTo( thumbId, url, align, valignId, valign ) {
	popupImageAlignTo( thumbId, url, thumbId, align, valignId, valign );
}

function popupImageAlignTo( thumbId, url, alignId, align, valignId, valign ) {
	popupImagePrivate( thumbId, url, alignId, align, valignId, valign );
}

function popupImagePrivate( thumbId, url, alignId, align, valignId, valign ) {
	var img = new Image();
	var thumb = YAHOO.util.Dom.get( thumbId );

	var throbberEl = 0;
	if (throbber.loaded) {
		//Create a throbber
		throbberEl = document.createElement('img');
		throbberEl.style.display = 'block';
		throbberEl.style.position = 'absolute';
		throbberEl.style.visibility = 'visible';
		document.body.appendChild( throbberEl );

		var positionThrobber = function() {
			YAHOO.util.Dom.setY(throbberEl, YAHOO.util.Dom.getY(thumbId) - (throbberEl.height - thumb.clientHeight)/2);
			YAHOO.util.Dom.setX(throbberEl, YAHOO.util.Dom.getX(thumbId) - (throbberEl.width - thumb.clientWidth)/2);
		}
		throbberEl.onload = positionThrobber;
		throbberEl.src = throbber.src;
	}

	var startAnimation = function() {
		var alignEl = YAHOO.util.Dom.get( alignId );
		var valignEl = YAHOO.util.Dom.get( valignId );

		// Build our resize-parameters
		var attributes = {};
		attributes.width = {to: img.width};
		attributes.height = {to: img.height};
		if (align == 'right') {
			attributes.left = {to: YAHOO.util.Dom.getX(alignEl) - (img.width - alignEl.clientWidth)};
		} else if (align == 'center') {
			attributes.left = {to: YAHOO.util.Dom.getX(alignEl) - (img.width - alignEl.clientWidth)/2}
		}
		if (valign == 'bottom') {
			attributes.top = {to: YAHOO.util.Dom.getY(valignEl) - (img.height - valignEl.clientHeight)};
		} else if (valign == 'middle') {
			attributes.top = {to: YAHOO.util.Dom.getY(valignEl) - (img.height - valignEl.clientHeight)/2}
		}

		if ((align == 'right' || align == 'center') && attributes.left.to > YAHOO.util.Dom.getX(thumb)) {
			attributes.left.to = YAHOO.util.Dom.getX(thumb);
		}
		if ((valign == 'bottom' || valign == 'middle') && attributes.top.to > YAHOO.util.Dom.getY(thumb)) {
			attributes.top.to = YAHOO.util.Dom.getY(thumb);
		}

		// Make the big image small
		img.style.width = thumb.clientWidth + 'px';
		img.style.height = thumb.clientHeight + 'px';

		// "Switch" images
		img.style.visibility = 'visible';
		thumb.style.visibility = 'hidden';

		// Animate
		var anim = new YAHOO.util.Anim(img, attributes );
		anim.method = YAHOO.util.Easing.backIn;
		anim.duration = 0.2;
		if (throbberEl) {
			document.body.removeChild( throbberEl ); //Remove throbber
		}
		anim.animate();
	}

	img.onload = startAnimation;
	img.thumb = thumb;
	YAHOO.util.Dom.setStyle(img, 'visibility', 'hidden');
	YAHOO.util.Dom.setStyle(img, 'position', 'absolute');
	YAHOO.util.Dom.setStyle(img, 'cursor', 'pointer');
	YAHOO.util.Event.addListener(img, 'click', hideImage);
	document.body.appendChild(img);

	YAHOO.util.Dom.setY(img, YAHOO.util.Dom.getY(thumb));
	YAHOO.util.Dom.setX(img, YAHOO.util.Dom.getX(thumb));

	img.src = url;
}

function hideImage() {
	var hideElement = function(ev, attrs, el) {
		YAHOO.util.Dom.setStyle(el.thumb, 'visibility', 'visible');
		document.body.removeChild( el ); //Remove big image
	}

	var attributes = {
		width: {to: this.thumb.clientWidth},
		height: {to: this.thumb.clientHeight},
		left: {to: YAHOO.util.Dom.getX(this.thumb)},
		top: {to: YAHOO.util.Dom.getY(this.thumb)}
	};

	var anim = new YAHOO.util.Anim(this, attributes );
	anim.onComplete.subscribe( hideElement, this );
	anim.duration = 0.2;
	anim.method = YAHOO.util.Easing.backOut;

	anim.animate();
}