$.fn.attachImage = function(str, cls) {
	var self = this[0], w = self.width, h = self.height, lt = this.offset();
	var img = new Image;
	if (!cls) cls = 'attachImage';

	var loading = $('<div>Loading ...</div>').appendTo('body').hide();
	var timer = setTimeout(function(){
		loading.css({
			background: '#fff',
			opacity: 0.7,
			color: '#333',
			fontSize: '11px',
			position: 'absolute',
			left: lt.left + 'px',
			top: lt.top + 'px',
			lineHeight: h + 'px',
			width: w + 'px',
			textAlign: 'center'
		}).show();
	}, 20);

	img.onload = function() {
		clearTimeout(timer);
		loading.remove();

		var el = $(), w2 = this.width, h2 = this.height;
		var l = lt.left - (w2-w)/2, t = lt.top - (h2-h)/2;
		var sl = el.scrollLeft(), st = el.scrollTop();
		l = Math.max(l, sl), t = Math.max(t, st);


		$(img).css({
			position: 'absolute',
			left: lt.left + 'px',
			top: lt.top + 'px',
			width: w + 'px',
			height: h + 'px',
			cursor: 'pointer'
		}).appendTo(document.body).addClass(cls).click(function(){
			$(this).animate({
				left: lt.left + 'px',
				top: lt.top + 'px',
				width: w + 'px',
				height: h + 'px'
			}, 'fast', function(){
				$(this).remove();
			});
		}).animate({
			left: l + 'px',
			top: t + 'px',
			width: w2 + 'px',
			height: h2 + 'px'
		}, 'fast');
	};
	img.onerror = function() {};
	img.src = str;
};
