// JavaScript Document

var displaying = null;
var hiding = false;
var popId = null;
var imageId = null;
var fade, w, h, wt, wh, l, t;

function displayImage(imId, dX, dY, pId) {	
	if(hiding) return false;
	if((imId == imageId) && displaying) return false;
	imageId = imId;

	if(displaying) {
		hideFullImage(true);	
		return false;
	}

	if(!pId) {
		popId = "imgPop";	
		var popWidth = 32;
		var popHeight = 32;
	} else {
		popId = pId;
		var popWidth = 32;
		var popHeight = 32;
	}
	
	var popup = $(popId);
	var tag = $(imageId);

	var popupDisp = $(popId + "Disp");
	if(tag && popup && popupDisp) {
		if(tag.src) {
			var fullSrc = tag.src.replace("-t.", ".");
			var thumbDim = tag.getCoordinates( );
			
			if(thumbDim.left == 0 &&thumbDim.top == 0&&thumbDim.width == 0&&thumbDim.height == 0) {
				thumbDim = $('container').getCoordinates( );
			
			}
			
			var popX = thumbDim.left + (thumbDim.width / 2) - (popWidth / 2);
			var popY = thumbDim.top + (thumbDim.height / 2) - (popHeight / 2);
			
			var fade = new Fx.Style(popup, 'opacity', {
				duration: 200, 
				transition: Fx.Transitions.quartInOut,
				'onComplete': function( ) {
					loadImage(tag, popupDisp, fullSrc, dX, dY, popup);
				}
			});
			popup.setStyle("display", "block");
			popup.setStyle("left", popX);
			popup.setStyle("top",  popY);
			fade.start(0,0.85);				

			
			return false;
		}
	}
	
	return true;
}

function cancelAnimations( ) {

}

function hideFullImage(redisplay) {
	if(hiding||!displaying) return;
	cancelAnimations( );
	hiding = true;

	var full = $(popId + "Disp");

	var func = null;
	
	if(full) {
		var imgs = full.getChildren( );
		var img = imgs[0];
		
		if(redisplay) {
			func = 	function( ) {
				hiding = false;
				displaying = false;
				displayImage(imageId, popId);
			}
		} else {
			func = 	function( ) {
				hiding = false;
				displaying = false;
				
			}			
		}
		
		var fade = new Fx.Style(full, 'opacity', {
			duration: 500, 
			transition: Fx.Transitions.quartInOut,
			onComplete: func
		});	

		fade.start(1, 0);
	}
}

function displayFullImage(thumb, tag, img, dX, dY) {
	displaying = true;
	
	var dims = tag.getCoordinates( );
	var imDims = (dX && dY) ? {'width': dX, 'height': dY} : { 'width': img.width, 'height': img.height };
	var tDims = thumb.getCoordinates( );
	
	tag.setStyle('left', tDims.left);
	tag.setStyle('top', tDims.top);
	
	tag.setStyle('width', tDims.width);
	tag.setStyle('height', tDims.height);
	tag.setStyle('display', "block");
	
	img.setStyle('width', tDims.width);
	img.setStyle('height', tDims.height);	
	img.setStyle('display', "block");
	
	fade = new Fx.Style(tag, 'opacity', {
		duration: 500, 
		transition: Fx.Transitions.quartInOut,
		onComplete: function( ) {
			$$('body').addEvent('click', function( ) { hideFullImage(false); });	
		}
	});	
	var midX = (Window.getWidth( ) / 2) + Window.getScrollLeft( );
	var midY = (Window.getHeight( ) / 2) + Window.getScrollTop( );
	var xPos = midX - (imDims.width / 2) > 0 ? midX - (imDims.width / 2) : 0;
	var yPos = midY - (imDims.height / 2) > 0 ? midY - (imDims.height / 2) : 0;	

	w = new Fx.Style(img, 'width', {
		duration: 500, 
		transition: Fx.Transitions.quartInOut
	});		
	h = new Fx.Style(img, 'height', {
		duration: 500, 
		transition: Fx.Transitions.quartInOut
	});		
	wt = new Fx.Style(tag, 'width', {
		duration: 500, 
		transition: Fx.Transitions.quartInOut
	});		
	ht = new Fx.Style(tag, 'height', {
		duration: 500, 
		transition: Fx.Transitions.quartInOut
	});		
	l = new Fx.Style(tag, 'left', {
		duration: 500, 
		transition: Fx.Transitions.quartInOut
	});		
	t = new Fx.Style(tag, 'top', {
		duration: 500, 
		transition: Fx.Transitions.quartInOut
	});	
	
	fade.start(0, 1);
	w.start(tDims.width, imDims.width);
	h.start(tDims.height, imDims.height);
	wt.start(imDims.width);
	ht.start(imDims.height);
	l.start(xPos);
	t.start(yPos);
}

function loadImage(thumbTag, fullTag, imUrl, dX, dY, popupTag) {
	var newImg = new Element(
			'img', {
				'id': fullTag.id+'Img'
			}
		);

	var children = fullTag.getChildren( );
	for(var i = 0; i<children.length; i++) {
			children[i].remove( );
	}
	
	fullTag.adopt(newImg);
	newImg.addEvent('load', function() {
			displayFullImage(thumbTag, fullTag, newImg, dX, dY);
			var fade = new Fx.Style(popupTag, 'opacity', {
				duration: 500, 
				transition: Fx.Transitions.quartInOut,
				onComplete: function() { popupTag.setStyle('display', 'none'); }
			});
			fade.start(0);
		}
	);
	newImg.src = imUrl;
}