$(function(){
	$("a.gallery").click(function(){
		var g = this.rel || false;
		gallery.show(this.href, g);
		this.blur();
		return false;
	});
});

gallery = {
	id: 'gallery',

	init: function() {
		$('a.preview').click(function(){
			var group = this.rel || false;
			gallery.show(this.href, group);
			this.blur();
			return false;
		});
	},

	show: function(url, group) {
		try {
			var type = /\.jpg|\.jpeg|\.png|\.gif/g;
			type = url.toLowerCase().match(type);
					
			if (type == '.jpg' || type == '.jpeg' || type == '.png' || type == '.gif') {
				var self = this;
				
				this.navigator(url, group);	
				
				preloader = new Image();
				preloader.onload = function(){
					preloader.onload = null;
					
					var w = preloader.width;
					var h = preloader.height;
					
					$('body').append('<div id="' + self.id + '" class="modal"><table class="overlay overlay-scrollable"><tr><td id="' + self.id + '_overlay" class="overlay"><table id="' + self.id + '_container" class="modal modal-gallery"><tr><td class="modal-11 png"><div></div></td><td class="modal-12 pngscale"><div></div></td><td class="modal-13 png"><div></div></td></tr><tr><td class="modal-21 pngscale"><div></div></td><td class="modal-22"><div class="modal-close"><a class="png" href="#close" onclick="gallery.remove(\'' + self.id +'\'); this.blur; return false;"></a></div><div id="' + self.id + '_content" class="modal-content modal-preloader"><img id="' + self.id +'_image" class="modal-image" style="visibility:hidden;" src="' + url + '" alt="" width="60px" height="60px" />' + ( group ? '<div id="' + self.id + '_navigator"></div>' : '') + '</div></td><td class="modal-23 pngscale"><div></div></td></tr><tr><td class="modal-31 png"><div></div></td><td class="modal-32 pngscale"><div></div></td><td class="modal-33 png"><div></div></td></tr></table></td></tr></table><div class="overlay"></div><iframe class="overlay"></iframe></div>');
					
					var $navigator = $('#' + self.id + '_navigator');
					var $img = $('#' + self.id + '_image');
					
					if (self.next) $navigator.append(self.next);
					if (self.prev) $navigator.append(self.prev);
					
					self.animate($img, w, h);

					$('#' + self.id + '_container').click(function(e){
						e.stopPropagation();
					});					

					$('#' + self.id + '_overlay').click(function(){
						self.remove(self.id);
					});					
				}
				preloader.src = url;
			}
		} catch(e) {
			alert( e );
		}
	},
	
	animate: function($img, w, h) {
		var self = this;
		$img.animate(
			{ width:w + 'px', height:h + 'px' },
			1000,
			'',
			function() {
				$img.css({ visibility:'visible' });
				$('#' + self.id + ' a.modal-next').css({ visibility:'visible' });
				$('#' + self.id + ' a.modal-prev').css({ visibility:'visible' });
			}
		);
		
	},
	
	navigator: function(url, group) {
		this.prev = null;
		this.next = null;
	
		if (group) {
			var self = this;
			var flag = 0;
			var tmp = $('a[rel=' + group + ']').get();
			
			for (i = 0; ((i < tmp.length) && (this.next == null)); i++) {
				if (!(tmp[i].href == url)) {
					if (flag == 1) {
						this.next	=	$('<a></a>')
											.addClass('modal-next')
											.attr('href', tmp[i].href)
											.click(
												function() {
													self.navigate(this.href, group);
													this.blur();
													return false;
												}
											);
					} else {
						this.prev	=	$('<a></a>')
											.addClass('modal-prev')
											.attr('href', tmp[i].href)
											.click(
												function() {
													self.navigate(this.href, group);
													this.blur();
													return false;
												}
											);
					}
				} else {
					flag = 1;
				}
			}
		}
	},
	
	navigate: function(url, group) {
		var type = /\.jpg|\.jpeg|\.png|\.gif/g;
		type = url.toLowerCase().match(type);
				
		if (type == '.jpg' || type == '.jpeg' || type == '.png' || type == '.gif') {
			var self = this;
			var $img = $('#' + this.id + '_image');
			
			$('#' + this.id + ' a.modal-next').remove();
			$('#' + this.id + ' a.modal-prev').remove();
			
			$img.css({ visibility:'hidden' });
			
			this.navigator(url, group);	
		
			preloader = new Image();
			preloader.onload = function(){
				preloader.onload = null;
				
				var $navigator = $('#' + self.id + '_navigator');
				var w = preloader.width;
				var h = preloader.height;
				
				$img.attr('src', url);
				
				if (self.next) $navigator.append(self.next);
				if (self.prev) $navigator.append(self.prev);
				
				self.animate($img, w, h);
			}
			preloader.src = url;
		}
	},
	
	remove: function(id) {
		$('#' + id + ' div.modal-close').remove();
		$('#' + id + '_navigator').remove();
		$('#' + id +'_image')
			.css({ visibility:'hidden' })
			.animate(
				{ width:0, height:0 },
				1000,
				'',
				function() {
					$('#' + id).remove();
				}
			);
	}
};