

(function($){
	$.fn.extend({
		zoomcustom: function(options){
			options = $.extend({
				width: 350,
				height:262,
				margin:10,
				opacity_bg1: 0.5,
				opacity_bg2: 0.7,
				caption: 'title', // values: title, rel
				event: 'click'
    	}, options || {});
			this.popup = [
				'<div id="zoomcustom">',
					'<div class="zoomcustombg1"></div>',
					'<div class="zoomcustombg2"></div>',
					'<div class="zoomcustomcontent">',
						'<div class="zoomcustom_img"><img src="" /></div>',
						'<div class="zoomcustom_caption"></div>',
					'</div>',
					'<div class="zoomcustom_close"></div>',
				'</div>'
			];
			
			// close function
			var zoomclose = function(){
				$('#zoomcustom .zoomcustom_close, #zoomcustom .zoomcustom_img').click(function(){
					$('#zoomcustom, #zoomcustom .zoomcustom_close').hide();
					$('#zoomcustom .zoomcustom_img').html('<img src="" />');
					$('#zoomcustom .zoomcustom_caption').html('').hide();
					return false;
				});
				$('#zoomcustom .zoomcustom_close').click();
			};
			
			// init function
			this.init = function(){
				if( !$('#zoomcustom').get(0) ){
					$(document.body).append( this.popup.join("\n") );
					$('#zoomcustom').hide();
					$('#zoomcustom').css({
						'position': 'absolute',
						'z-index': 9999,
						'top': 0,
						'left': 0
					})
					$('#zoomcustom .zoomcustombg1').css('opacity', options.opacity_bg1);
					$('#zoomcustom .zoomcustombg2').css('opacity', options.opacity_bg2);
					zoomclose();
				}
				
				// init click events
				$(this).click(function(){
					// close prev
					zoomclose();
					// get pos
					var pos = $(this).offset();
					var dim = {
						width: $(this).width(),
						height: $(this).height()
					}
					var startpos = {
						top: pos.top + dim.width/2,
						left: pos.left + dim.height/2
					}
					var endpos = {
						top: startpos.top -  options.height/2 - options.margin,
						left:startpos.left -  options.width/2 - options.margin
					}
					
					// set start position
					$('#zoomcustom').css( startpos );
					$('#zoomcustom .zoomcustomcontent').css({ width:1, height:1 });
					
					// assign image src
					$('#zoomcustom img').attr('src', $(this).attr('href'));
					
					// assign caption
					var caption = $(this).attr('title');
					if( options.caption == 'rel' ){
					 caption = $( '#' + $(this).attr('rel') ).html();
					}
					
					if(caption != ''){
						$('#zoomcustom .zoomcustom_caption').html( caption ).show();
					}
					
					// show, animate
					$('#zoomcustom').show().animate(endpos, 300);
					$('#zoomcustom .zoomcustomcontent').animate( 
						{width: options.width, height: options.height}, 
						300, '', 
						function(){ $('#zoomcustom .zoomcustom_close').show() } 
					);
					
					return false;
				});
			}
			
			this.init();
			
			return this;
		}
	});
})(jQuery);