var ImagePrewiev = {
	holder: null,
	overlay: null,
	content: null,
	shadow: null,
	title: null,
	loader: null,
	delay: 800,
	inited: false,

	show: function(src, title, evt) {
		evt = window.event || evt;
		var elt = evt.srcElement||evt.target;
		var startPos = {left: evt.clientX, top: (evt.clientY + document.documentElement.scrollTop), width: 0, height: 0};
		if( elt ){
			var pos = elt.style.position;
			elt.style.position = "relative";
			startPos.left = elt.offsetLeft;
			startPos.top = elt.offsetTop;
			startPos.width = elt.clientWidth || elt.offsetWidth;
			startPos.height = elt.clientHeight || elt.offsetHeight;
			elt.style.position = pos;
		}
		var eltHtml = document.body.parentNode;
		var objHolderStyle = { "position": "absolute", "left": "0px", "top": "0px", "width": eltHtml.clientWidth + "px", "height": Math.max(document.body.clientHeight,eltHtml.clientHeight) + "px", "z-index": 1 };
		this.holder.show();
		this.clear();
		this.holder.css(objHolderStyle);
		this.overlay.css({ "position": "absolute", "left": startPos.left + "px", "top": startPos.top + "px", "z-index": 2 });
		this.content.css({ "width": startPos.width+"px", "height": startPos.height+"px" });
		this.shadow.css(objHolderStyle);
		this.shadow.css({ "background-color": "black" });
		this.title.html(title || " ");
		var img = new Image();
		img.onload = this.loadComplete.bind(this, img);
		img.src = src;
		return false;
	},

	close: function() {
		this.holder.hide();
		this.clear();
		return false;
	},

	clear: function() {
		this.content.html("");
		this.content.hide();
		this.loader.show();
		this.shadow.fadeTo(0, 0);
		this.overlay.stop(true);
		this.content.stop(true);
		this.shadow.stop(true);
	},

	loadComplete: function(img) {
		var eltHtml = document.body.parentNode;
		this.content.html((['<img src="', img.src, '" width="', img.width, '" height="', img.height, '"/>']).join(""));
		this.loader.hide();
		this.content.show();
		this.content.animate({
			"width": img.width + "px",
			"height": img.height + "px"
		}, this.delay);
		this.overlay.animate({
			"left": ((eltHtml.clientWidth - img.width) / 2) + "px",
			"top": (((eltHtml.clientHeight - img.height) / 2) + document.documentElement.scrollTop) + "px"
		}, this.delay);
		this.shadow.fadeTo(this.delay, 0.6);
	},

	init: function() {
		document.write(([
			'<div id="overlayHolder" class="imagePreview" style="display: none;">',
			'	<div class="overlayShadow" id="overlayShadow">&nbsp;</div>',
			'	<div class="overlay" id="imgPreview">',
			'<table cellpadding="0" cellspacing="0" border="0"><tr><td>',
			'		<div class="overlayTitle">',
			'			<div class="titleLeft">',
			'				<div class="titleRight">',
			'					<div class="titleCenter"><div class="titleText" id="titleText"></div><a class="closeBtn" href="#" onclick="return ImagePrewiev.close();">&nbsp;</a><div class="clearFloat"></div></div>',
			'				</div>',
			'			</div>',
			'		</div>',
			'		<div class="overlayContent">',
			'			<div class="contentLeft">',
			'				<div class="contentRight">',
			'					<div class="contentCenter" id="overlayContent">',
			'					</div>',
			'					<div class="contentCenter" id="overlayloader"><img src="/images/loading.gif" width="60" height="60" alt=""/></div>',
			'				</div>',
			'			</div>',
			'		</div>',
			'		<div class="overlayFooter">',
			'			<div class="footerLeft"><div class="footerRight"><div class="footerCenter">&nbsp;</div></div></div>',
			'		</div>',
			'</td></tr></table>',
			'	</div>',
			'</div>'
		]).join("\r"));
		this.holder = $("#overlayHolder");
		this.content = $("#overlayContent");
		this.loader = $("#overlayloader");
		this.overlay = $("#imgPreview");
		this.shadow = $("#overlayShadow");
		this.title = $("#titleText");
		this.inited = true;
	}

};

Function.prototype["bind"] = function(obj) {
	var args = $.makeArray(arguments).slice(1);
	var fn = this;
	return function() {
		args.concat($.makeArray(arguments));
		fn.apply(obj, args);
	}
}
ImagePrewiev.init();