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

var seebox = function(){

	var options;
	var dBody;

	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(){
				
					dBody = $(document.body);

					var minSize = getImageSize(el.src);

					var miniWidth = minSize.width;
					var miniHeight = minSize.height;
					var miniPos = el.getPosition();
					var elWidth = el.offsetWidth;
					var elHeight = el.offsetHeight;

					if(elWidth > miniWidth){ miniPos.x += Math.round((elWidth - miniWidth) / 2); }
					if(elHeight > miniHeight){ miniPos.y += Math.round((elHeight - miniHeight) / 2); }
				
					if(window.ie6){
						miniPos.y -= 150;
					}

					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);
					
					//utworzenie linka zamknij
					var closeme = $(document.createElement('div'));
					closeme.innerHTML = 'x zamknij okno';
					closeme.addClass('closeme');
					closeme.setStyle('display', 'none');
					seebox.appendChild(closeme);

					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(!window.ie6){
						// 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.setStyles({
							'margin-top': descriptionbox.offsetHeight * -1, 
							'left': 15,
							'top': 45
						});
					}

					// 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(window.ie6){
								//var descriptionFx = new Fx.Style(descriptionbox, 'margin-top', {duration: 300});
								var descriptionFx = new Fx.Elements([descriptionbox, seebox], {duration: 300});
							}else{
								var descriptionFx = new Fx.Elements([descriptionbox, seebox, shadow1, shadow2], {duration: 300});
							}
						}

						// animating zoom in
						if(window.ie6){
							var elements = [seebox, elAbsolute];
						}else{
							var elements = [seebox, elAbsolute, shadow1, shadow2, shadow3, shadow4];
						}
						var zoomFx = new Fx.Elements(elements, {transition: Fx.Transitions.quadIn, onComplete: function(){
							if(zoomed){
								if(description){
									descriptionbox.setStyles({
										'visibility': 'visible',
										'width': size.width-20
									});
									if(window.ie6){
										descriptionFx.start({
											'0': {
												'margin-top': [descriptionbox.offsetHeight * -1, 0]
											},
											'1': {
												'height': seebox.offsetHeight + descriptionbox.offsetHeight
											}
										});
										//descriptionbox.offsetHeight * -1, 0);
									}else{
										descriptionFx.start({
											'0': {
												'margin-top': [descriptionbox.offsetHeight * -1, 0]
											},
											'1': {
												'height': seebox.offsetHeight + descriptionbox.offsetHeight
											},
											'2': {
												'height': shadow1.offsetHeight + descriptionbox.offsetHeight
											},
											'3': {
												'height': shadow2.offsetHeight + descriptionbox.offsetHeight
											}
										});
									}
								}
								
								closeme.setStyle('display', 'block');
								
								function zoomItOut() {
									options = {
										'0': {
											'width': [size.width + 30, minSize.width],
											'height': [size.height + 60, minSize.height],
											'left': miniPos.x,
											'top': miniPos.y
										},
										'1': {
											'width': miniWidth,
											'height': miniHeight,
											'left': 0,
											'top': 0
										}
									};
									if(!window.ie6){
										// 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(!window.ie6){
											// resetting shadows to dimensions without the description
											shadow1.setStyle('height', shadow1.offsetHeight - descriptionbox.offsetHeight);
											shadow2.setStyle('height', shadow2.offsetHeight - descriptionbox.offsetHeight);
											seebox.setStyle('height', seebox.offsetHeight - descriptionbox.offsetHeight);
										}
										descriptionbox.setStyle('display', 'none');
										descriptionFx.stop();
									}
									closeme.setStyle('display', 'none');
									zoomFx.start(options);
									zoomed = false;
								}
								
								elAbsolute.setStyle('cursor', 'pointer');
								elAbsolute.onclick = function(){
									// zooming out
									elAbsolute.onclick = function(){}
									zoomItOut();
								}
								closeme.setStyle('cursor', 'pointer');
								closeme.onclick = function(){
									// zooming out
									closeme.onclick = function(){}
									zoomItOut();
								}
							}else{
								dBody.removeChild(seebox);
								link.setStyle('visibility', 'visible');
							}
						}});

						// getting window dimensions
						var clientWidth = window.getWidth();
						var clientHeight = window.innerHeight;
						var clientScrollTop = window.getScrollTop();
						if(window.ie){
							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': {
								'width': [minSize.width, size.width + 30],
								'height': [minSize.height, size.height + 60],
								'left': Math.round((clientWidth - size.width)/2) -15,
								'top': Math.round((clientHeight - size.height)/2) + clientScrollTop - topOffset - 45
							},
							'1': {
								'width': size.width,
								'height': size.height,
								'left': [0, 15],
								'top': [0, 45]
							}
						}
						if(!window.ie6){
							// shadow animations for non IE6 browsers
							options['2'] = { 'width': size.width+29, 'height': size.height+59 };
							options['3'] = { 'height': size.height+59 };
							options['4'] = { 'width': size.width+29 };
						}

						zoomFx.start(options);
				
					}});

					return false;
				}
			}
		}
	}	

}();

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

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