/*
	weboMooZoom for mootools v1.0
	(c) 2008 Franz Klammer <klammer@webonaut.com>
	MIT-style license. (http://www.opensource.org/licenses/mit-license.php)

	using a slightly modified version of "reflection.js for mootools v1.4"
	the original copyright and code after my Class.
*/

window.addEvent("domready", function() {
	var useOptions = (typeof weboMooZoomOptions == "object") ? weboMooZoomOptions : {};
	new weboMooZoom(useOptions);
});

var weboMooZoom = new Class({

	Implements: [Options],
	options: {
		transitionLayer: Fx.Transitions.linear,
		transitionImage: Fx.Transitions.linear,
		transitionImageOpacity: Fx.Transitions.linear,
		durationLayer: 200,
		durationImage: 200,
		durationImageOpacity: 350,
		shadow: true,
		reflection: true,
		relfection_options: {
			height: 0.33,
			opacity: 0.5,
			distance: 1
		},
		/* Typo3 Click Enhance */
		zoomClickEnhance: true,
		showMagnifierIcon: true,
		reflectionClickEnhance: false,
		relfection_options_CE: {
			height: 0.33,
			opacity: 0.5,
			distance: 2
		}
	},

	clickedATag: null,
	clickedImage: null,
	zoomLayer: null,
	zoomLayerFX: null,
	zoomImage: null,
	zoomImageFX: null,
	zoomImageOpacityFX: null,
	zoomImageHideFX: null,

	initialize: function(options){
		if(options) this.setOptions(options);
		this.createLayers();
		this.addZoomEvent();
	},


	addZoomEvent: function() {
		if (this.options.zoomClickEnhance) {
			var aTags = $$('a[target=thePicture]');
			if (aTags.length && aTags[0].getElement('img').className.indexOf('webo_zoom_clickenlarge') >= 0) {
				$each(aTags, function (aTag,b,c) {
					var img = aTag.getElement('img');
					if (img.className.indexOf('webo_zoom_clickenlarge') == -1) return;
					hrefParts = aTag.href.split('&');
					newHref = 'index.php?eID=webo_zoom_clickenlarge&';
					while(p = hrefParts.shift()) {
						if (p.indexOf('file=') == 0) {
							newHref += unescape(p);
							break;
						}
					}
					aTagNew = new Element('a', {
						'href': newHref,
						'styles': { }
					}).injectInside(aTag.getParent());

					var img1 = img.clone();
					img1.injectInside(aTagNew);

					if (this.options.showMagnifierIcon) {
						var magdiv = new Element('div').addClass('webo_zoom_magnifier').injectInside(aTagNew);
						var magimg = new Element('img', {
							'src': 'typo3conf/ext/webo_zoomgallery/magnifier.gif',
							'styles': {'opacity': '0.6'}
						}).injectInside(magdiv);
					}

					aTag.destroy();
					this.aTagRewrite(aTagNew, img1, this.options.reflectionClickEnhance, this.options.relfection_options_CE);
				}, this);
			}
		}

		var aTags = $$('a.webo_zoomgallery_link');
		$each(aTags, function (aTag,b,c) {
			var img = aTag.getElement('img');
			this.aTagRewrite(aTag, img, this.options.reflection, this.options.relfection_options);
		}, this);
	},

	aTagRewrite: function(aTag, img, reflect, reflect_options) {
			if (img) {
				aTag.setStyle('display', 'inline-block');
				if (reflect) img.webo_reflect(reflect_options);
				aTag.addEvent('click', function() { 
					aTag.blur();
					this.myClickHandler(aTag);
					return false; 
				}.bind(this));
			}
	},

	startLoadAni: function() {
		var coord = this.clickedImage.getCoordinates();
		var bgPos = parseInt(coord.width/2-16) + "px " + parseInt(coord.height/2-16) + "px";
		// alert(bgPos);
		this.clickedATag.setStyles({
			'backgroundImage': 'url(typo3conf/ext/webo_zoomgallery/load4.gif)',
			'backgroundRepeat': 'no-repeat',
			'backgroundPosition': bgPos
		});
		this.clickedImage.setStyles({
			'opacity': 0.3
		});
	},

	stopLoadAni: function() {
		if (this.clickedImage) {
			this.clickedImage.setStyles({'opacity': 1});
			this.clickedATag.setStyles({
				'backgroundImage': 'url(typo3conf/ext/webo_zoomgallery/null.gif)'
			});
		}
	},

	myClickHandler: function(a) {
		this.stopLoadAni();

		this.clickedATag = a;
		var img = a.getElement('img');
		// var sameImage = (this.clickedImage && this.clickedImage.src.indexOf(img.src) >= 0);

		this.clickedImage = img;

		this.cancelAllFx();

		this.createZoomImage(a);

		this.zoomLayer.setStyles({
			'width': '1px',
			'height': '1px',
			'visibility': 'hidden'

		});

		var coord = this.clickedImage.getCoordinates();

		// Opera-Hack: http://mootools.lighthouseapp.com/projects/2706/tickets/23-getposition-returns-wrong-values-in-opera
		if (Browser.Engine.presto925) {
			this.zoomImage.src = ' ';
			this.clickedImage.getPosition = function(relative){
				var offset = this.getOffsets(), scroll = this.getScrolls();
				var position = {x: offset.x - scroll.x, y: offset.y - scroll.y};
				var relativePosition = (relative && (relative = $(relative))) ? relative.getPosition() : {x: 0, y: 0};
				if (Browser.Engine.presto925) {
		 			var position = {x: offset.x, y: offset.y};
				}
				return {x: position.x - relativePosition.x, y: position.y - relativePosition.y};
			}
			var c2 = this.clickedImage.getPosition();
			coord.top = c2.y;
			coord.left = c2.x;
		}

		this.zoomImage.setStyles({
			'display': '',
			'width': null,
			'height': null
		});

		this.zoomLayer.setStyles({
			'top': coord.top,
			'left': coord.left,
			'width': coord.width,
			'height': coord.height
		});
		this.zoomImage.src = a.href;
		// if (!sameImage) 
		this.startLoadAni();
	},

	createLayers: function() {
		this.zoomLayer = new Element('div', {
			'id': 'weboZoomLayer',
			'styles': {
				'position': 'absolute',
				'zIndex': '5000',
				'display': 'block',
				'top': '0',
				'left': '0',
				'width': '1px',
				'height': '1px',
				'overflow': 'hidden',
				'visibility': 'hidden'
			},
			'events': {
				'click': function(e) {
					this.cancelAllFx(true);
					this.stopLoadAni();
					this.zoomImageHideFX.start({
						'opacity': [0.75,0]
					});
				}.bind(this)
			}
		}).injectInside(document.body);

		this.zoomLayerFX = new Fx.Morph(this.zoomLayer, {
			duration: this.options.durationLayer,
			transition: this.options.transitionLayer
		});

		this.zoomBorder = new Element('div', {
			'id': 'weboZoomBorder'
		}).injectInside(this.zoomLayer);


		if (this.options.shadow) {
			if (typeof this.zoomBorder.style.MozBoxShadow != "undefined") {
				this.zoomBorder.setStyle('MozBoxShadow', '5px 5px 10px rgba(0, 0, 0, 0.9)');
			} else if (typeof this.zoomBorder.style.webkitBoxShadow != "undefined") {
				this.zoomBorder.setStyle('webkitBoxShadow', '5px 5px 10px rgba(0, 0, 0, 0.9)');
			} else if (typeof this.zoomBorder.style.boxShadow != "undefined") {
				this.zoomBorder.setStyle('boxShadow', '5px 5px 10px rgba(0, 0, 0, 0.9)');
			} else {
				this.options.shadow = false; // no native shadow support - so decative it 
			}
		}

		// this.createZoomImage();

	},


	createZoomImage: function(a) {

		if (this.zoomImage) this.zoomImage.destroy();

		this.zoomImage = null;
		this.zoomImage = new Element('img', {
			'src': a.href,
			'styles': {
				'opacity': '0',
				'position': 'relative'
			}
		}).injectInside(this.zoomBorder);

		this.zoomImageFX = new Fx.Morph(this.zoomImage, {
			duration: this.options.durationImage,
			transition: this.options.transitionImage
		});

		this.zoomImageHideFX = new Fx.Morph(this.zoomImage, {
			duration: 150,
			transition: Fx.Transitions.linear
		});
		this.zoomImageHideFX.addEvent('complete', function() {
			this.cancelAllFx();
			this.zoomLayer.setStyles({
				'visibility': 'hidden'
			});

			this.zoomImage.setStyles({
				'opacity': '0',
				'display': 'none',
				'width': null,
				'height': null
			});
		}.bind(this));


		this.zoomImageOpacityFX = new Fx.Morph(this.zoomImage, {
			duration: this.options.durationImageOpacity,
			transition: this.options.transitionImageOpacity
		});

 		this.zoomImageOpacityFX.addEvent('complete', function() {
			this.stopLoadAni();
 		}.bind(this));

		this.zoomImage.addEvent('load', function(a){
			var coord = this.zoomLayer.getCoordinates();
			var bigCoords = this.zoomImage.getCoordinates();
			var doboCoords = $(document.body).getCoordinates();
			var doboScroll = $(document.body).getScroll();

			this.zoomLayer.setStyles({
				'width': null,
				'height': null,
				'visibility': 'visible'
			});

			this.zoomImage.setStyles({
				'opacity': '0',
				'width': coord.width,
				'height': coord.height,
				'visibility': 'visible'
			});

			var newX = ((doboCoords.width - bigCoords.width) / 2) + doboScroll.x;
			var newY = ((doboCoords.height - bigCoords.height) / 2) + doboScroll.y;

			var shadowSpace = (this.options.shadow) ? 15 : 0;

			var newX = (this.options.shadow) ? newX + shadowSpace : newX

			this.zoomLayerFX.start({
				'top': [coord.top, newY],
				'left': [coord.left, newX],
				'paddingRight': [0, shadowSpace],
				'paddingBottom': [0, shadowSpace]
			});

			this.zoomImageFX.start({
				'width': [coord.width, bigCoords.width],
				'height': [coord.height, bigCoords.height]
			});

			this.zoomImageOpacityFX.start({
				'opacity': [0.2,1]
			});

		}.bind(this));

	},

	cancelAllFx: function(keepStyles) {
		if (this.zoomImageHideFX) this.zoomImageHideFX.cancel();
		if (this.zoomImageFX) this.zoomImageFX.cancel();
		if (this.zoomImageOpacityFX) this.zoomImageOpacityFX.cancel();
		if (this.zoomLayerFX) this.zoomLayerFX.cancel();
		if (!keepStyles) {
			this.zoomLayer.setStyles({
				'top': '0',
				'left': '0',
				'width': '1px',
				'height': '1px'
			});
		}
	}

});

/*
  **** slightly modified version ****
  ORIGINAL COPYRIGHT:
     reflection.js for mootools v1.4
     (c) 2006-2008 Christophe Beyls <http://www.digitalia.be>
     MIT-style license.
*/
Element.implement({
	webo_reflect: function(options) {
		var img = this;
		if (img.get("tag") != "img") return;

		options = $extend({
			height: 0.33,
			opacity: 0.5,
			distance: 0
		}, options);

		function doReflect() {
			img.webo_unreflect();
			var reflection, reflectionHeight = Math.floor(img.height * options.height), wrapper, context, gradient;

			if (Browser.Engine.trident) {
				reflection = new Element("img", {src: img.src, styles: {
					width: img.width,
					height: img.height,
					marginBottom: -img.height + reflectionHeight,
					filter: "flipv progid:DXImageTransform.Microsoft.Alpha(opacity=" + (options.opacity * 100) + ", style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=" + (options.height * 100) + ")"
				}});
			} else {
				reflection = new Element("canvas");
				if (!reflection.getContext) return;
			}
			// reflection.setStyles({display: "block", border: 0, marginTop: options.distance});
			reflection.setStyles({display: "block", marginTop: options.distance}); /* XXX_removed:  border: 0 */

			wrapper = new Element(($(img.parentNode).get("tag") == "a") ? "span" : "div").injectAfter(img).adopt(img, reflection);
			wrapper.className = img.className;
			img.store("reflected", wrapper.style.cssText = img.style.cssText);
			wrapper.setStyles({width: img.width, height: img.height + reflectionHeight + options.distance, overflow: "hidden"});
			img.style.cssText = "display: block;"; /* XXX_removed:  border:0px; */
			img.className = "";
			if (!Browser.Engine.trident) {
				context = reflection.setProperties({width: img.width, height: reflectionHeight}).getContext("2d");
				context.save();
				context.translate(0, img.height-1);
				context.scale(1, -1);
				context.drawImage(img, 0, 0, img.width, img.height);
				context.restore();
				context.globalCompositeOperation = "destination-out";

				gradient = context.createLinearGradient(0, 0, 0, reflectionHeight);
				gradient.addColorStop(0, "rgba(255, 255, 255, " + (1 - options.opacity) + ")");
				gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");
				context.fillStyle = gradient;
				context.rect(0, 0, img.width, reflectionHeight);
				context.fill();
			}
		}

		if (img.complete) {
			img.webo_unreflect();
			doReflect();
		}
		else img.onload = doReflect;

		return img;
	},
	webo_unreflect: function() {
		var img = this, reflected = this.retrieve("reflected"), wrapper;
		img.onload = $empty;

		if (reflected !== null) {
			wrapper = img.parentNode;
			img.className = wrapper.className;
			img.style.cssText = reflected;
			img.store("reflected", null);
			wrapper.parentNode.replaceChild(img, wrapper);
		}

		return img;
	}
});