/********************************************************************

	FOREX.COM - CAROUSEL
	
	=========================================
	Author: Chris Erwin (chris@teehanlax.com)
	Agency: teehan+lax
	=========================================
	
	Public Methods
	-------------------------------------------------------------
	init
		Arguments: none
		Returns: null
		
	zoom
		Arguments:
			- thumbID (string) : the id of the thumbnail image
			- fullsizeImagePath (string) : the path the fullsize version of the image
		
	
	Internal 'Private' Methods
	-------------------------------------------------------------
	loadImage 
		Description: loads the fullsize image and then calls the show image function when it's ready
		Arguments: none		
		Returns: null
	
	showImage
		Description: positions the fullsize image to match the thumbnail and then animates it to the calculated fullsize position (middle of the screen)
		Arguments: none		
		Returns: null
		
	showShadow
		Description: after the image animates to the fullsize position the shadow container and the black background fade in
		Arguments: none		
		Returns: null
		
	closeImage
		Description: the fullsize image animates to it's thumbnail position and size
		Arguments: none		
		Returns: null
	
	resetSize
		Desciption: once the fullsize image is no longer visible we return it to it's default size
		Arguments: none		
		Returns: null
	
	
	Dependencies
	-------------------------------------------------------------
	- MooTools 1.2
	
	
	HTML Markup Sample
	-------------------------------------------------------------
	_widget_samples/image_zoom.html
	
*********************************************************************/

var imageZoom = {
	
	imgFullSize : null,
	imgThumb : null,
	zoomShadow : null,

	fullSizePath : null,
	animation: null,
	shadowAnimation: null,
	fadeAnimation: null,
	animating: false,
	
	thumbCoords : null,
	fullSizeCoords : null,
	fullSizeTopPos : null,
	fullSizeLeftPos : null,
	
	init : function() {
		imageZoom.imgFullSize = $('ZoomImage');
		imageZoom.zoomShadow = $('ZoomShadow');
		imageZoom.zoomFade = $('ZoomFade');
		
		imageZoom.animation = new Fx.Morph(imageZoom.imgFullSize, {duration: 500, transition: Fx.Transitions.Quad.easeOut});
		imageZoom.shadowAnimation = new Fx.Morph(imageZoom.zoomShadow, {duration: 500, transition: Fx.Transitions.Quad.easeOut});
		imageZoom.fadeAnimation = new Fx.Morph(imageZoom.zoomFade, {duration: 500, transition: Fx.Transitions.Quad.easeOut});
		
		imageZoom.animation.addEvent('start', function() {imageZoom.animating = true});
		imageZoom.animation.addEvent('complete', function() {imageZoom.animating = false});
		
		imageZoom.shadowAnimation.addEvent('start', function() {imageZoom.animating = true});
		imageZoom.shadowAnimation.addEvent('complete', function() {imageZoom.animating = false});
		
		imageZoom.fadeAnimation.addEvent('start', function() {imageZoom.animating = true});
		imageZoom.fadeAnimation.addEvent('complete', function() {imageZoom.animating = false});
		
		imageZoom.imgFullSize.addEvent('click', imageZoom.closeImage);
	},
	
	zoom : function(thumbID, fullsizeImagePath) {
		if (! imageZoom.animating) {
			imageZoom.imgThumb = $(thumbID);
			imageZoom.fullSizePath = fullsizeImagePath;
			imageZoom.loadImage();
		}
	},
	
	loadImage : function() {
		var fullsizeLoader = new Asset.image(imageZoom.fullSizePath, {onload: imageZoom.showImage});
	},
	
	showImage : function() {
				
		//imageZoom.zoomShadow.setStyle('opacity', 0);
		
		var windowSize = (Browser.Engine.trident4) ? $('iefix').getSize() : window.getSize();
		var windowScrollPos = (Browser.Engine.trident4) ? $('iefix').getScroll() : window.getScroll();
		
		imageZoom.imgFullSize.src = imageZoom.fullSizePath;
		
		imageZoom.thumbCoords = (Browser.Engine.trident4) ? imageZoom.imgThumb.getCoordinates('iefix') : imageZoom.imgThumb.getCoordinates();			
		imageZoom.fullSizeCoords = imageZoom.imgFullSize.getCoordinates();		
		
		// calculate the open position of the fullsize image
		imageZoom.fullSizeTopPos = (windowSize.y / 2) - (imageZoom.fullSizeCoords.height / 2);
		imageZoom.fullSizeTopPos = (imageZoom.fullSizeTopPos < 30) ? 30 : imageZoom.fullSizeTopPos;
		imageZoom.fullSizeTopPos = imageZoom.fullSizeTopPos + windowScrollPos.y;
		
		imageZoom.fullSizeLeftPos = (windowSize.x / 2) - (imageZoom.fullSizeCoords.width / 2);
		imageZoom.fullSizeLeftPos = (imageZoom.fullSizeLeftPos < 30) ? 30 : imageZoom.fullSizeLeftPos;
		
		// move the fullsize image to the thumbnail size and position
		imageZoom.imgFullSize.setStyles({
			'width' : imageZoom.thumbCoords.width,
			'height' : imageZoom.thumbCoords.height,
			'top' : imageZoom.thumbCoords.top,
			'left' : imageZoom.thumbCoords.left,
			'opacity' : 0,
			'visibility' : 'visible'
		});
		
		// animate the fullsize image the fullsize size and position
		imageZoom.animation.start({
			'height' : imageZoom.fullSizeCoords.height, 
			'width' : imageZoom.fullSizeCoords.width,
			'top' : imageZoom.fullSizeTopPos + 26,
			'left' : imageZoom.fullSizeLeftPos,
			'opacity' : 1
		}).chain(
			imageZoom.showShadow
		);

		imageZoom.zoomFade.setStyles({
			'height' :  (Browser.Engine.trident4) ? $('iefix').getScrollSize().y : window.getScrollSize().y,
			'width' : windowSize.x,
			'opacity' : 0,
			'visibility' : 'visible'
		});
	},
	
	showShadow : function() {
		imageZoom.zoomShadow.setStyles({
			'height' : imageZoom.fullSizeCoords.height + 54, 
			'width' : imageZoom.fullSizeCoords.width + 54,
			'top' : imageZoom.fullSizeTopPos - 20,
			'left' : imageZoom.fullSizeLeftPos - 27,	
			'opacity' : 0
		});
		
		$('ZoomShadowSpacer').setStyles({
			'height' : imageZoom.fullSizeCoords.height,
			'width' : imageZoom.fullSizeCoords.width
		});
		
		imageZoom.shadowAnimation.start({
			'opacity': 1					
		});
		
		imageZoom.fadeAnimation.start({
			'opacity': 0.6					
		});
	},
	
	closeImage : function() {
		if (! imageZoom.animating) {
			imageZoom.zoomShadow.setStyle('opacity', 0);
			
			$('ZoomShadowSpacer').setStyles({
				'height' :'',
				'width' : ''
			});
			
			// animate the fullsize image the fullsize size and position
			imageZoom.animation.start({
				'height' : imageZoom.thumbCoords.height, 
				'width' : imageZoom.thumbCoords.width,
				'top' : imageZoom.thumbCoords.top,
				'left' : imageZoom.thumbCoords.left,
				'opacity' : 0
			}).chain(
				imageZoom.resetSize
			);
			
			imageZoom.fadeAnimation.start({
				'opacity': 0				
			});
			
			imageZoom.thumbCoords = null,
			imageZoom.fullSizeCoords = null
		}		
	},
	
	resetSize : function() {
		imageZoom.imgFullSize.setStyles({
			'width' : '',
			'height' : '',
			'top' : '-1000000px',
			'left' : '-1000000px'
		});
		
	}
	
};