/*
	weboMooZoom for mootools v1.1
	(c) 2008-2009 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.
*/
var webo_gallery;

var _is_FF2_ = (Browser.Engine.gecko && Browser.Engine.version < 19);
var _is_IE_  = Browser.Engine.trident;
var _is_IE6_ = (Browser.Engine.trident && Browser.Engine.version < 5);
var _is_IE7_ = (Browser.Engine.trident && Browser.Engine.version <= 5);
var _is_Opera_ = Browser.Engine.presto;


var webo_gallery_startup = function(webo_gallery_images) {
	var useOptions = (typeof weboMooZoomOptions == "object") ? weboMooZoomOptions : {};
	webo_gallery = new webo_gallery_class(webo_gallery_images);
	try {
		webo_gallery.scrollToActiveThumb(true);
	} catch(e) {
		/* alert(e.description); */
	}
};

// window.addEvent("domready", webo_gallery_startup);

function webo_show_image(thumb_obj, img_med, img_big) {
	webo_gallery.show(thumb_obj, img_med, img_big);
}

var webo_gallery_class = new Class({
	active_thumb_obj: null,
	active_thumb_idx: -1,
	all_entries: [],
	entry_count: 0,
	slide_on: false,
	ani_timeout: null,
	popupWins: null,
	shadow: true,
	imgStillLoaded: [],
	mouse_in_list: false,

	initialize: function(webo_gallery_images) {
		this.images = webo_gallery_images;
		this.medContainer = $("contentLeftInner");	
		this.tmbContainer = $("contentRight");
		this.image_title_container = $("webo_image_title_container");
		this.gallery_container = $(document.body);
		window.addEvent("resize", this.big_pos.bind(this));
		new Element("div", { 'id': 'webo_gallery_med_container' }).injectInside(this.medContainer);
		this.thumbnail_list_container = $("webo_thumbnail_list_container").addEvents({
			'mouseenter': function(e) {
				this.thumbnail_list_container.setStyle("overflow", "auto");
				this.mouse_in_list = true;
			}.bind(this),
			'mouseleave': function(e) {
				this.thumbnail_list_container.setStyle("overflow", "hidden");
				this.mouse_in_list = false;
				this.scrollToActiveThumb();
			}.bind(this)
		});

		this.initSlideshow();
		this.slideStart();
	},

	show: function(thumb_nr) {
		if (this.active_thumb_obj) {
			this.active_thumb_obj.removeClass("active");
		}
		this.active_thumb_idx = thumb_nr;
		this.img_med = this.images[thumb_nr][0];
		this.img_big = this.images[thumb_nr][1];
		this.medW = this.images[thumb_nr][2];
		this.medH = this.images[thumb_nr][3];
		this.bigW = this.images[thumb_nr][4];
		this.bigH = this.images[thumb_nr][5];
		this.imgTitle = this.images[thumb_nr][6];

		if (this.imgTitle == "") this.imgTitle = "&nbsp;";
		this.image_title_container.set("html", this.imgTitle);

		var thumb_obj = $("webo_thumb_" + thumb_nr); // .getElement("img");
		thumb_obj.addClass("active");
		this.active_thumb_obj = thumb_obj;
		var oldEl = $("webo_gallery_med_container");
		var container = new Element("div", {
			'id': 'webo_gallery_med_container',
			'styles': {
				'width': this.medW,
				'height': this.medH,
				'position': 'relative',
				'overflow': 'visible',
				'cursor': 'pointer',
				'text-align': 'center'
			}
		}).replaces(oldEl);

		var _img_med = new Element("img", {
			'src': this.img_med,
			'events': {
				'click': function() {
					if (this.ani_timeout) window.clearTimeout(this.ani_timeout);
					var oldContainer = $("webo_gallery_big_container");
					if (oldContainer)  oldContainer.dispose();
					var oldContainer = $("webo_gallery_big_bg");
					if (oldContainer)  oldContainer.dispose();
					var shadow = new Element("div", {
						'id': 'webo_gallery_big_bg',
						'styles': {
							'position': 'absolute',
							'top': 0,
							'left': 0,
							'width': '100%',
							'height': '100%',
							'opacity': 0.60,
							'background-color': '#000'
						},
						'events': {
							'click': function(e) {
								try { $("webo_gallery_big_container").dispose(); } catch(e) {}
								try { $("webo_gallery_big_bg").dispose(); } catch(e) {}
							}.bind(this)
						}
					}).injectInside(this.gallery_container);
					var sC = this.gallery_container.getCoordinates();
					var _t = (sC.height - this.bigH) / 2;
					_t -= 6; // border width + 1px extra
					var _l = (sC.width - this.bigW) / 2;
					if (_t < 0) _t = 0;
					if (_l < 0) _l = 0;
					var img_container = new Element("div", {
						'id': 'webo_gallery_big_container',
						'styles': {
							'position': 'absolute',
							'border': '4px solid #A7CF19',
							'top': _t,
							'left': _l,
							'width': this.bigW,
							'height': this.bigH,
							'background-color': '#000000',
							'background-image': 'url(typo3conf/ext/webo_zoomgallery/load_big_ani.gif)',
							'background-repeat': 'no-repeat',
							'background-position': 'center center',
							'cursor': 'crosshair'
						},
						'events': {
							'click': function(e) {
								try { $("webo_gallery_big_container").dispose(); } catch(e) {}
								try { $("webo_gallery_big_bg").dispose(); } catch(e) {}
								if (this.slide_on) this.slideStart();
							}.bind(this)
						}
					}).injectInside(this.gallery_container);

					var img = new Element("img", {
						'id': 'webo_gallery_big_img_' + thumb_nr,
						'styles': {
							'opacity': 0.0
						},
						'events': {
							'load': function(e) {
								if (!this.loaded) {
									this.loaded = this.set("morph", {duration: 250}).morph({'opacity': 1}); 
								}
							},
							'domready': function() {
								// Browser.Engine.webkit
								if (_is_Opera_)  {
									this.fireEvent('load');
								}
							}
						}
					}).injectInside(img_container);

					img.setProperty("src", this.img_big);

					/*
					if (this.imgStillLoaded[thumb_nr]) {
						img.fireEvent("load");
					} else {
						this.imgStillLoaded[thumb_nr] = true;
					}
					*/

					this.add_shadow(img_container);
				}.bind(this)
			}
		}).injectInside(container);
		this.add_shadow(_img_med);
	},


	add_shadow: function(shadow_obj) {
		// Pier 17 gruen: rgb(167, 207, 25)
		if (this.shadow) {
			if (typeof shadow_obj.style.MozBoxShadow != "undefined") {
				shadow_obj.setStyle('MozBoxShadow', '5px 5px 10px rgba(0, 0, 0, 0.9)');
			} else if (typeof shadow_obj.style.webkitBoxShadow != "undefined") {
				shadow_obj.setStyle('webkitBoxShadow', '5px 5px 10px rgba(0, 0, 0, 0.9)');
			} else if (typeof shadow_obj.style.boxShadow != "undefined") {
				shadow_obj.setStyle('boxShadow', '5px 5px 10px rgba(167, 207, 25, 0.9)');
			} else {
				this.shadow = false; // no native shadow support - so decative it 
			}
			this.big_pos();
		}
	},

	big_pos: function() {
		var o = $("webo_gallery_big_container");
		if (o) {
			var sC = this.gallery_container.getCoordinates();
			var _t = (sC.height - this.bigH) / 2;
			_t -= 6; // border width + 1px extra
			var _l = (sC.width - this.bigW) / 2;
			if (_t < 0) _t = 0;
			if (_l < 0) _l = 0;
			if (this.shadow) _t = (_t > 5) ? _t-5 : 0;
			o.setStyles({
				top: _t,
				left: _l
			});
		}
	},

	showImgTitle: function(idx) {
		this.image_title_container.set("html", this.images[idx][6]);
	},

	initSlideshow: function() {
		$$("li.webo_thumb").each(function(o, idx) {
			this.images[idx].img = o.getElement("img");
			this.images[idx].ulObj = o;
			this.images[idx].coords = o.getCoordinates();
			if (idx == 0) this.show(0);
			var idx = o.id.split("_")[2];
			this.all_entries[idx] = o;
			this.entry_count++;
			o.getElement("img").addEvents({
				'click': this.slideStop.bind(this),
				'mouseenter': function() {
					this.images[idx].img.setStyle("opacity", 0.5);
				}.bind(this),
				'mouseleave': function() {
					this.images[idx].img.setStyle("opacity", 1);
				}.bind(this) 
			}).setStyle("background-color", "gainsboro");
		}.bind(this));
	},

	toggleAniState: function() {
		if (this.slide_on) {
			this.slideStop();
		} else {
			this.slideStart();
			this.scrollToActiveThumb();
		}
	},

	slideStart: function() {
		this.slide_on = true;
		var timeO = (this.active_thumb_idx == -1) ? 50 : 3000;
		this.ani_timeout = window.setTimeout(this.slideShow.bind(this), timeO);
		$("webo_gallery_slide_toggle").set("html", "<strong style=\"color:#dd0000;\">stop slide</strong>");
	},

	slideStop: function() {
		if (this.ani_timeout) window.clearTimeout(this.ani_timeout);
		this.slide_on = false;
		$("webo_gallery_slide_toggle").set("html", "<strong style=\"color:green;\">start slide</strong>");
	},

	slideShow: function() {
		if (!this.slide_on) return;
		if (!$("webo_gallery_big_container")) { 
			this.active_thumb_idx += 1;
			if (this.active_thumb_idx > this.entry_count - 1) {
				this.active_thumb_idx = 0;
			}
			this.all_entries[this.active_thumb_idx].onclick();
			if (!this.mouse_in_list) this.scrollToActiveThumb();
			if (this.slide_on) this.slideStart();
		}
	},


	scrollToActiveThumb: function(forced) {
		if (!forced && !this.slide_on) return;
		if (_is_IE_) {
			this._scrollToActiveThumb(forced);
		} else {
			this._scrollToActiveThumb(forced);
			// this.XX_scrollToActiveThumb(forced);
		}	
	},

	_scrollToActiveThumb: function(forced) {
		var listCrds  = this.thumbnail_list_container.getCoordinates(); 
		var cScroll   = this.thumbnail_list_container.getScroll();
		var tmbCrds   = this.images[this.active_thumb_idx].ulObj.getCoordinates(this.thumbnail_list_container);
		var midPos    = listCrds.height/2 - tmbCrds.height/2;
		var newTop    = (tmbCrds.top - midPos);
		if (_is_IE_) newTop += cScroll.y;
		this.thumbnail_list_container.scrollTo(0, newTop);
	},
	
	IE7_scrollToActiveThumb: function(forced) {
		var mScroll   = $("main").getScroll();
		var cScroll   = this.thumbnail_list_container.getScroll();
		var listCrds  = this.thumbnail_list_container.getCoordinates(); 
		var coords    = this.images[this.active_thumb_idx].ulObj.getCoordinates();
		var midPos    = listCrds.height/2 - coords.height/2;
		var newTop    = (coords.top-listCrds.top -midPos - cScroll.y);
		// if (_is_IE7_) {
			newTop -= mScroll.y*2;
		// }
		document.title = coords.top +"/" +mScroll.y+"/"+cScroll.y+"/"+newTop;
		this.thumbnail_list_container.scrollTo(0, newTop);
	},
	
	XX_scrollToActiveThumb: function(forced) {
		var listCrds  = this.thumbnail_list_container.getCoordinates(); 
		var tmbCrds   = this.all_entries[this.active_thumb_idx].getCoordinates(); // getPosition
		var cScroll   = this.thumbnail_list_container.getScroll();
		var cPos      = this.thumbnail_list_container.getPosition();
		var tPos      = this.all_entries[this.active_thumb_idx].getPosition();
		var midPos    = listCrds.height/2 - this.images[this.active_thumb_idx].coords.height/2;
		var newTop    = tPos.y - cPos.y;
		newTop = (newTop > midPos) ? newTop -midPos : 0;
		this.thumbnail_list_container.scrollTo(0, newTop);
	}
});


var weboMooZoom = new Class({

	Implements: [Options],
	options: {
		transitionLayer: Fx.Transitions.linear,
		transitionImage: Fx.Transitions.linear,
		durationLayer: 200,
		durationImage: 200,
		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,
	zoomImageHideFX: null,

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

	init_thumbs: function() {
		// $$("li.webo_thumb").earch(
	},

	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);


		// this.toggleBorder(true);

		// this.createZoomImage();

	},

	toggleBorder: function(show) {
		if (this.options.shadow && show) {
			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 
			}
		} else {
			if (typeof this.zoomBorder.style.MozBoxShadow != "undefined") {
				this.zoomBorder.setStyle('MozBoxShadow', '5px 5px 10px rgba(0, 0, 0, 0.9)');
				this.zoomBorder.setStyle('MozBoxShadow', 'none');
			} else if (typeof this.zoomBorder.style.webkitBoxShadow != "undefined") {
				this.zoomBorder.setStyle('webkitBoxShadow', '5px 5px 10px rgba(0, 0, 0, 0.9)');
				this.zoomBorder.setStyle('webkitBoxShadow', 'none');
			} else if (typeof this.zoomBorder.style.boxShadow != "undefined") {
				this.zoomBorder.setStyle('boxShadow', '5px 5px 10px rgba(0, 0, 0, 0.9)');
				this.zoomBorder.setStyle('boxShadow', 'none');
			} else {
				this.options.shadow = false; // no native shadow support - so decative it 
			}
		}
	},

	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.zoomImageFX.addEvent('complete', function() {
			this.toggleBorder(true);
			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();
			var zoomBorderTW = this.zoomBorder.getStyle("borderTopWidth").toInt();
			var zoomBorderRW = this.zoomBorder.getStyle("borderRightWidth").toInt();
			var zoomBorderBW = this.zoomBorder.getStyle("borderBottomWidth").toInt();
			var zoomBorderLW = this.zoomBorder.getStyle("borderLeftWidth").toInt();

			this.toggleBorder(false);

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

			this.zoomImage.setStyles({
				'opacity': '1',
				'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


			var extra_X = zoomBorderRW+zoomBorderLW;
			var extra_Y = zoomBorderTW+zoomBorderBW;


			this.zoomLayerFX.start({
				'top': [coord.top, newY],
				'left': [coord.left, newX],
				'paddingRight': [0, shadowSpace],
				'paddingBottom': [0, shadowSpace],
				'width': [coord.width+extra_X, bigCoords.width+extra_X],
				'height': [coord.height+extra_Y, bigCoords.height+extra_Y]
			});

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

		}.bind(this));

	},

	cancelAllFx: function(keepStyles) {
		if (this.zoomImageHideFX) this.zoomImageHideFX.cancel();
		if (this.zoomImageFX) this.zoomImageFX.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;
	}
});