/*
 * SeeBox - dynamic image zoom
 * ===========================
 * 
 * Author: Maciej 'nea' Hirsz
 * Contanct: maciej (dot) hirsz (at) gmail (dot) com
 *
 * www.seenet.pl
 *
 * Mootools 1.2 version
 *
 */

var seebox = function(){

	var options;
	var dBody = $(document.body);

	function getImageSize(url){
		var img = $(document.createElement('img'));
		img.src = url;
		img.setStyles({
			'position': 'absolute',
			'visibility': 'hidden',
			'left': -10000,
			'top': -10000
		});
		document.body.appendChild(img);
		var size = {}
		size.width = img.offsetWidth;
		size.height = img.offsetHeight;
		document.body.removeChild(img);
		return size;
	}

	return {
		'apply': function(el){
		
			if(el.parentNode.href){
				var link = $(el.parentNode);
				link.onclick = function(){

					var minSize = getImageSize(el.src);

					var miniWidth = minSize.width;
					var miniHeight = minSize.height;
					var miniPos = el.getPosition();

					var seebox = $(document.createElement('div'));
					var elAbsolute = $(document.createElement('img'));
					elAbsolute.src = el.src;
					
					elAbsolute.setStyles({
						'width': miniWidth,
						'height': miniHeight
					});

					seebox.setStyles({
						'left': miniPos.x,
						'top': miniPos.y
					});

					seebox.addClass('seeboxDiv');

					link.setStyle('visibility', 'hidden');
					seebox.appendChild(elAbsolute);

					var description;
					if(description = link.title){
						// does the element have a description?
						var descriptionbox = $(document.createElement('div'));
						descriptionbox.innerHTML = description;
						descriptionbox.addClass('description');
						seebox.appendChild(descriptionbox);
					}

					if(!Browser.Engine.trident4){
						// adding shadows for modern browsers...
						var shadow1 = $(document.createElement('div'));
						shadow1.id = "shadow1";
						shadow1.setStyles({ 'width': miniWidth-1, 'height': miniHeight-1 });
						seebox.appendChild(shadow1);
						var shadow2 = $(document.createElement('div'));
						shadow2.id = "shadow2";
						shadow2.setStyles({ 'height': miniHeight-1 });
						seebox.appendChild(shadow2);
						var shadow3 = $(document.createElement('div'));
						shadow3.id = "shadow3";
						shadow3.setStyles({ 'width': miniWidth-1 });
						seebox.appendChild(shadow3);
						var shadow4 = $(document.createElement('div'));
						shadow4.id = "shadow4";
						seebox.appendChild(shadow4);
					}else{
						// ...or 1px black border for IE6
						miniPos.x -= 1;
						miniPos.y -= 1;
						seebox.setStyles({
							'border-style': 'solid',
							'border-color': '#000',
							'border-width': '1px',
							'left': miniPos.x,
							'top': miniPos.y
						});
					}

					// adding seebox to the DOM
					dBody.appendChild(seebox);

					if(description){
						// hiding the description under the image
						descriptionbox.setStyle('margin-top', descriptionbox.offsetHeight * -1);
					}

					// preloading big image
					new Asset.images([link.href], {onComplete: function(){

						var size = getImageSize(link.href);
						var zoomed = true;
						// changing small image to the big one
						elAbsolute.src = link.href;

						// scrolling description out
						if(description){
							if(Browser.Engine.trident4){
								var descriptionFx = new Fx.Tween(descriptionbox, {duration: 300, property: 'margin-top'});
							}else{
								var descriptionFx = new Fx.Elements([descriptionbox, shadow1, shadow2], {duration: 300});
							}
						}

						// animating zoom in
						if(Browser.Engine.trident4){
							var elements = [seebox, elAbsolute];
						}else{
							var elements = [seebox, elAbsolute, shadow1, shadow2, shadow3, shadow4];
						}
						var zoomFx = new Fx.Elements(elements, {onComplete: function(){
							if(zoomed){
								if(description){
									descriptionbox.setStyles({
										'visibility': 'visible',
										'width': size.width-20
									});
									if(Browser.Engine.trident4){
										descriptionFx.start(descriptionbox.offsetHeight * -1, 0);
									}else{
										descriptionFx.start({
											'0': {
												'margin-top': [descriptionbox.offsetHeight * -1, 0]
											},
											'1': {
												'height': size.height-1+descriptionbox.offsetHeight
											},
											'2': {
												'height': size.height-1+descriptionbox.offsetHeight
											}
										});
									}
								}
								elAbsolute.setStyle('cursor', 'pointer');
								elAbsolute.onclick = function(){
									// zooming out
									elAbsolute.onclick = function(){}
									options = {
										'0': {
											'left': miniPos.x,
											'top': miniPos.y
										},
										'1': {
											'width': miniWidth,
											'height': miniHeight
										}
									};
									if(!Browser.Engine.trident4){
										// shadow animations for non IE6 browsers
										options['2'] = { 'width': miniWidth-1, 'height': miniHeight-1 };
										options['3'] = { 'height': miniHeight-1 };
										options['4'] = { 'width': miniWidth-1 };
									}
									if(description){
										if(!Browser.Engine.trident4){
											// resetting shadows to dimensions without the description
											shadow1.setStyle('height', size.height-1);
											shadow2.setStyle('height', size.height-1);
										}
										descriptionbox.setStyle('display', 'none');
										descriptionFx.cancel();
									}
									zoomFx.start(options);
									zoomed = false;
								}
							}else{
								dBody.removeChild(seebox);
								link.setStyle('visibility', 'visible');
							}
						}});

						// getting window dimensions
						var clientWidth = window.getWidth();
						var clientHeight = window.innerHeight;
						var clientScrollTop = window.getScrollTop();
						if(Browser.Engine.trident){
							clientWidth = document.documentElement.clientWidth;
							clientHeight = document.documentElement.clientHeight;
							clientScrollTop = document.documentElement.scrollTop;
						}

						// description should shift the vertical position
						var topOffset = 0;
						if(description){
							topOffset = Math.round(descriptionbox.offsetHeight/2);
							//size.height += descriptionbox.offsetHeight;
						}
						
						options = {
							'0': {
								'left': Math.round((clientWidth - size.width)/2),
								'top': Math.round((clientHeight - size.height)/2) + clientScrollTop - topOffset
							},
							'1': {
								'width': size.width,
								'height': size.height
							}
						}
						if(!Browser.Engine.trident4){
							// shadow animations for non IE6 browsers
							options['2'] = { 'width': size.width-1, 'height': size.height-1 };
							options['3'] = { 'height': size.height-1 };
							options['4'] = { 'width': size.width-1 };
						}

						zoomFx.start(options);
					}});

					return false;
				}
			}
		}
	}	

}();

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

	var imgs = $$('a[rel^=seebox] img');
	imgs.each(function(el){
		seebox.apply(el);
	});
});

window.fireEvent('pageready');