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



	Simple Magnifier v.0.5



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


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

	Init magnifier

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

function initMagnifier() {

	magnifierFlag = 0;

	mainLink = $$('a[rel=simple-magnifier]')[0];						// Main link with first big image, normal image and title.

	if (!mainLink) {
		return;
	}

	magnifierLinks = $$('div.simple-magnifier-links a');
	zoomContainer = $$('div.simple-magnifier-zoom')[0];					// Zoom container
	zoomFrame = '';														// Zoom frame
	magnifierImageTitle = $$('span.simple-magnifier-title')[0];			// Image caption


	normalImages = new Array();
	zoomImages = new Array();

	// Replace small and big images on click
	magnifierLinks.each(function(el, i) {

		normalImages.push(el.rel);
		zoomImages.push(el.href);

		// Select first image
		if (i == 0) {
			el.addClass('selected');
			magnifierImageTitle.set('text', el.title);
		}

		el.addEvents({

			click: function(e) {
				e.stop();

				// If no zoom image, turn "+" off.
				if (el.href.indexOf('.jpg') == -1 && el.href.indexOf('.gif') == -1) {	
					magnifierFlag = 0;
					$('photo-switch').setStyle('opacity', 0);
				} else {
					$('photo-switch').setStyle('opacity', 0.3);
				}


				magnifierLinks.each(function(el2) {
					el2.removeClass('selected');
				});
				el.addClass('selected');

				changeImage(el);
			}

		});

	});


	$('photo-switch').setStyle('opacity', 0.38);

	$('photo-switch').addEvents({

		'click':function(e) {

			e.stop();

			if (magnifierFlag == 0) {

				magnifierFlag = 1;
				mainLink.fireEvent('mouseenter');

			} else {

				mainLink.fireEvent('mouseleave');
				magnifierFlag = 0;

			}


		}

	});


	// If no zoom image, turn "+" off.
	if (mainLink.href.indexOf('.jpg') == -1 && mainLink.href.indexOf('.gif') == -1) {			
		$('photo-switch').setStyle('opacity', 0);
	}



	if (magnifierLinks[0]) {
		if (magnifierLinks[0].href.indexOf('.jpg') == -1 && magnifierLinks[0].href.indexOf('.gif') == -1) {			
			$('photo-switch').setStyle('opacity', 0);
		}
	}


	// Start
	preloadImages();
	doMagnify();

}


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

	Change images

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

function changeImage(el) {

	imageSrc = el.rel;
	imageZoomSrc = el.href;
	imageTitle = el.title;
	
	loader.setStyle('display', 'block');


	normalImage.src = imageSrc;
	normalImage.onload = function() {
		magnifierImageTitle.set('text', imageTitle);
	}

	bigImage.src = imageZoomSrc;
	bigImage.onload = function() {
		loader.setStyle('display', 'none');
	}

}



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

	Preload images

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

function preloadImages() {


	var loader = new Asset.images(normalImages, {

		onProgress: function(counter,index) {
			//progressBar.set((counter + 1) * (100 / images.length));
		},

		onComplete: function() {
			var bigLoader = new Asset.images(zoomImages, {});
		}
	});

}


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

	Create zoom container image

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

function createZoomContainerImage() {
}



function getMagnifierContainerPosition() {

	magnifierContainerPosition = mainLink.getPosition();
	magnifierContainerPositionX = magnifierContainerPosition.x;
	magnifierContainerPositionY = magnifierContainerPosition.y;

}

function createZoomFrame() {

	zoomFrame = new Element('div', {

		'class': 'simple-magnifier-zoom-frame', 
		'styles': {
			'opacity' : 0
		}

	});

	zoomFrame.inject(mainLink);

	loader = new Element('div', {
		'class': 'simple-magnifier-loader'
	});

	loader.injectTop(zoomContainer);


}



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

	Magnifier

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

function doMagnify() {

	normalImageWidth = 0;
	normalImageHeight = 0;
	bigImageWidth = 0;
	bigImageHeight = 0;

	magnifierContainerPositionX = 0;
	magnifierContainerPositionY = 0;
	ratioX = 0;
	ratioY = 0;





	mainLink.addClass('simple-magnifier');
	zoomContainer.setStyles({'opacity' : 0, 'display' : 'block'});


	// Normal image
	normalImage = mainLink.getElement('img');
	normalImageWidth = normalImage.getSize().x;
	normalImageHeight = normalImage.getSize().y;


	// Create zoom frame and inject it into mainLink
	createZoomFrame();


	// Get magnifier position
	getMagnifierContainerPosition();

	window.addEvents({
		resize:function() {
			getMagnifierContainerPosition();
		}
	});

	bigImageSource = mainLink.href;

	bigImage = new Element('img', {
		'events': {
			load: function() {
				bigImageWidth = this.getSize().x;
				bigImageHeight = this.getSize().y;

				ratioX = bigImageWidth / normalImageWidth;
				ratioY = bigImageHeight / normalImageHeight;

				loader.setStyle('display', 'none');
			}
		}, 
		'class': 'simple-magnifier-zoom-image',
		'src': bigImageSource
	});

	bigImage.injectInside(zoomContainer);



	// Zoom container
	zoomContainerWidth = zoomContainer.getSize().x;
	zoomContainerHeight = zoomContainer.getSize().y;
	zoomContainerWidthHalf = zoomContainerWidth / 2;
	zoomContainerHeightHalf = zoomContainerHeight / 2;


	// Zoom frame calculations
	zoomFrameWidth = zoomFrame.getSize().x;
	zoomFrameHeight = zoomFrame.getSize().y;
	zoomFrameWidthHalf = zoomFrameWidth / 2;
	zoomFrameHeightHalf = zoomFrameHeight / 2;

	zoomFrameMoveToXMax = normalImageWidth - zoomFrameWidth;
	zoomFrameMoveToYMax = normalImageHeight - zoomFrameHeight;

	// Add new events to mainLink

	mainLink.addEvents({

		click: function(e) {
			e.stop();

			if (magnifierFlag) {

				this.fireEvent('mouseleave');
				magnifierFlag = 0;

			}

		}, 

		mouseleave:function() {

			if (!magnifierFlag) {return;}
			zoomFrame.setStyle('opacity', 0);
			zoomContainer.set('tween', {duration: 200}).tween('opacity', 0);
		},

		mouseenter:function() {

			if (!magnifierFlag) {return;}
			zoomFrame.setStyle('opacity', 0.38);
			zoomContainer.set('tween', {duration: 200}).tween('opacity', 1);
		},

		mousemove:function(e) {

			mouseCurrentX = e.page.x;
			mouseCurrentY = e.page.y;


			zoomFrameMoveToX = mouseCurrentX - magnifierContainerPositionX - zoomFrameWidthHalf;
			zoomFrameMoveToY = mouseCurrentY - magnifierContainerPositionY - zoomFrameHeightHalf;

			zoomFrame.setStyles({
				'left' : zoomFrameMoveToX.limit(0, zoomFrameMoveToXMax), 
				'top' : zoomFrameMoveToY.limit(0, zoomFrameMoveToYMax)
			});


			// Move big image
			moveToX = ((mouseCurrentX * ratioX) - zoomContainerWidthHalf - (magnifierContainerPositionX * ratioX));
			moveToY = ((mouseCurrentY * ratioY) - zoomContainerHeightHalf - (magnifierContainerPositionY * ratioY));

			moveToXMax = bigImageWidth - zoomContainerWidth;
			moveToYMax = bigImageHeight - zoomContainerHeight;

			bigImage.setStyles({
				'left' : -moveToX.limit(0, moveToXMax), 
				'top' : -moveToY.limit(0, moveToYMax)
			});

		}

	});


}

window.addEvent('domready',function() {

	initMagnifier();

});