$.ImageBox = {
	options : {
		border				: 10,
		
		overlayOpacity		: 0.8,
		textImage			: 'Showing image',
		textImageFrom		: 'from',
		fadeDuration		: 400
	},
	imageLoaded : false,
	firstResize : false,
	
	animationInProgress : false,
	opened : false,
	init : function(options)
	{
		if (options)
			$.extend($.ImageBox.options, options);
		
		$('#wlist a').each(
			function()
			{
				el 			= jQuery(this);
				hrefAttr 		= el.attr('href')||'';
				el.bind('click', jQuery.ImageBox.start);
			}
		);
		overlay	= document.createElement('div');
		$(overlay)
			.attr('id', 'ImageBoxOverlay')
			.css(
				{
					position	: 'absolute',
					display		: 'none',
					top			: '0',
					left		: '0',
					opacity		: 0
				}
			)
			.append(document.createTextNode(' '))
			.bind('click', $.ImageBox.hideImage);
		
	
			
	
			
		closeEl = document.createElement('a');
		$(closeEl)
			.attr(
				{
					id			: 'ImageBoxClose',
					href		: '#'
				}
			)
			.css(
				{
					position	: 'absolute',
					right		: $.ImageBox.options.border + 'px',
					top		:  $.ImageBox.options.border + 'px',
					display		:"none"
				}
			)
			.append($.ImageBox.options.closeHTML)
			.bind('click', $.ImageBox.hideImage);
	
		
		loader = document.createElement('img');
		loader.src = $.ImageBox.options.loaderSRC;
		$(loader)
			.attr('id', 'ImageBoxLoader')
			.css(
				{
					position	: 'absolute'
				}
			);
			
		prevImage = document.createElement('a');
		$(prevImage)
			.attr(
				{
					id			: 'ImageBoxPrevImage',
					href		: '#'
				}
			)
			.css(
				{
					position		: 'absolute',
					display			: 'none',
					overflow		: 'hidden',
					textDecoration	: 'none'
				}
			)
			.append(document.createTextNode(' '));
			
		nextImage = document.createElement('a');
		$(nextImage)
			.attr(
				{
					id			: 'ImageBoxNextImage',
					href		: '#'
				}
			)
			.css(
				{
					position		: 'absolute',
					overflow		: 'hidden',
					textDecoration	: 'none'
				}
			)
			.append(document.createTextNode(' '));
		
		container = document.createElement('div');
		$(container)
			.attr('id', 'ImageBoxContainer')
			.css(
				{
					display		: 'none',
					position	: 'relative',
					overflow	: 'hidden',
					textAlign	: 'left',
					margin		: '0 auto',
					top			: '0',
					left		: '0',
					zIndex		: 2
				}
			)
			.append([loader, prevImage, nextImage,closeEl]);
		
		outerContainer = document.createElement('div');
		$(outerContainer)
			.attr('id', 'ImageBoxOuterContainer')
			.css(
				{
					display		: 'none',
					position	: 'absolute',
					overflow	: 'hidden',
					top		: '0',
					left		: '0',
					textAlign	: 'center',
					backgroundColor : 'transparent',
					lineHeigt	: '0'
				}
			)
			.append(container);
		
		$('body')
			.append(overlay)
			.append(outerContainer);
	},
	
	start : function(e, elm)
	{
		el = elm ? $(elm) : $(this);
		linkRel =  el.attr('rel');
		var  iteration, prevImage, nextImage;
		gallery = $('#wlist a');
		iteration = gallery.index(elm ? elm : this);
		prevImage = gallery.get(iteration - 1);
		nextImage = gallery.get(iteration + 1);
		//alert(iteration)
		imageSrc =  el.attr('href');
		overlay = $('#ImageBoxOverlay');
		if (!$.ImageBox.opened) {
			$.ImageBox.opened = true;
			overlay
				.css ('height', $().height() + 'px')
				.css ('width', $().width() + 'px')
				.show()
				.fadeTo( 
					300,
					$.ImageBox.options.overlayOpacity,
					function()
					{
						$.ImageBox.loadImage(
							imageSrc, 
							iteration,
							prevImage,
							nextImage
						);
					}
				);
			$('#ImageBoxOuterContainer').css ('width', $().width()  + 'px');
		} else {
			$('#ImageBoxPrevImage')[0].onclick = null;
			$('#ImageBoxNextImage')[0].onclick = null;
			$.ImageBox.loadImage(
				imageSrc, 
				iteration,
				prevImage,
				nextImage
			);
		}
		return false;
	},
		
	loadImage : function(imageSrc,  iteration, prevImage, nextImage)
	{	
		$("#ImageBoxClose").hide();
		$('#ImageBoxCurrentImage').fadeOut(200,function(){
								$('#ImageBoxCurrentImage').remove();
								})
		
		prevImageEl = $('#ImageBoxPrevImage');
		prevImageEl.hide();
		nextImageEl = $('#ImageBoxNextImage');
		nextImageEl.hide();
		loader = $('#ImageBoxLoader');
		container = $('#ImageBoxContainer');
		outerContainer = $('#ImageBoxOuterContainer');
		$.ImageBox.animationInProgress = true;
		if (prevImage) {
			prevImageEl[0].onclick = function()
			{
				this.blur();
				$.ImageBox.start(null, prevImage);
				return false;
			};
		}
		if (nextImage) {
			nextImageEl[0].onclick =function()
			{
				this.blur();
				$.ImageBox.start(null, nextImage);
				return false;
			};
		}
		loader.show();
		
		containerW = container[0].offsetWidth;
		containerH = container[0].offsetHeight;
		loader
			.css(
				{
					left	: (containerW - loader[0].width)/2 + 'px',
					top		: (containerH - loader[0].height)/2 + 'px'
				}
			);
		container
			.css(
				{
					width	: containerW + 'px',
					height	: containerH + 'px'
				}
			)
			.show();
		
		outerContainer
			.css('top', $().scrollTop()+38+'px');
		if (outerContainer.css('display') == 'none') {
			outerContainer
				.show()
				.fadeIn(
					100
				);
		}
		imageEl = new Image;
		$(imageEl)
			.attr('id', 'ImageBoxCurrentImage')
			.bind('load', 
			function()
			{
				containerW = imageEl.width + $.ImageBox.options.border * 2;
				containerH = imageEl.height + $.ImageBox.options.border * 2;
				loader.hide();
				if(imageEl.height>660) overlay.height(1000+$().scrollTop());
				container.animate(
					{
						height		: containerH
					},
					30 ,
					function()
					{
						container.animate(
							{
								width		: containerW
							},
							439 ,
							function()
							{
								container.prepend(imageEl);
								$(imageEl)
									.css(
										{
											position	: 'absolute',
											left		: $.ImageBox.options.border + 'px',
											top		: $.ImageBox.options.border + 'px',
											display		: "none"
										}
									)
									.fadeIn(
										350,
										function()
										{	
											$("#ImageBoxClose").show();
											if (prevImage) {
												prevImageEl
													.css(
														{
															left	: $.ImageBox.options.border + 'px',
															top	: $.ImageBox.options.border +50+ 'px',
															width	: containerW/2 - $.ImageBox.options.border * 3 + 'px',
															outline:"none",
															
															height	: containerH - $.ImageBox.options.border * 2 -50+ 'px'
														}
													)
													.show();
											}
											if (nextImage) {
												nextImageEl
													.css(
														{
															left	: containerW/2 + $.ImageBox.options.border * 2 + 'px',
															outline:"none",
															top	: $.ImageBox.options.border +50+ 'px',
															width	: containerW/2 - $.ImageBox.options.border * 3 + 'px',
															height	: containerH - $.ImageBox.options.border * 2-50 + 'px'
														}
													)
													.show();
											}
											
										}
									);
							}
						);
					}
				);
			}
		);
		imageEl.src = imageSrc;
			
	},
	
	hideImage : function()
	{
		$("#ImageBoxClose").hide();
		$('#ImageBoxOuterContainer').hide();
		$('#ImageBoxCurrentImage').remove();
		$('#ImageBoxOverlay').fadeTo(
			600, 
			0, 
			function(){$(this).hide();}
		);
		$('#ImageBoxPrevImage')[0].onclick = null;
		$('#ImageBoxNextImage')[0].onclick = null;
		$.ImageBox.opened = false;
		$.ImageBox.animationInProgress = false;
		return false;
	}
};