$.fn.gallery = function() {
	
	// get args
	var o = this;	
	var args = arguments[0] || {};	
	
	o.find('*').css({ // set everything margin 0 padding 0 border 0
		'margin':'0px',
		'padding':'0px',
		'border':'none'
	});
	
	
	// parse args
	args.width		= args.width	|| o.css('width');	
	args.height		= args.height	|| o.css('height');
	args.speed		= args.speed	|| 1;
	args.width		= args.width.replace('px','');
	args.height		= args.height.replace('px','');
	args.length		= o.find('li').length;
	
	
	
	// properties
	var list = []; // gallery list
	var loading = $('<div/>');
	var content = $('<div/>').addClass('wongallery-content');
	var nav = $('<div/>').addClass('wongallery-nav');		
	var navbg = $('<div/>');
	
	// define functions
	
	loading.on = function() {
		this.addClass('wongallery-loading');	
		return this;
	}
	
	loading.off = function() {
		this.removeClass('wongallery-loading');
		return this;
	}
	
	var readlist = function() { // read list and thumbnail and save it to list array
		var l = [];
		o.find('li').each(function() {
			l.push({
				content : $(this).html(),
				thumb : $(this).attr('thumb')
			});
		});
		return l;
	}
	
	nav.get_thumbs = function(list) {
		for (var i in list) {
			var img = $('<img />').attr('src', list[i].thumb).css('opacity',0);
			var a = $('<a></a>').attr('href', '#'+i).css({'width':'50px', 'height':'50px','display':'inline-block', 'line-height':'0px'});
			a.append(img).appendTo(nav);
		}
	}
	
	nav.show = function() {
		var i = 0;			
		nav.find('img').each(function(){
			$(this).stop(true).delay(500).delay(i+=50).animate({'opacity':.5},500);
		})
		content.stop(true).show('#0',2000);
	}
	
	content.show = function(id, delay) {
		id = id.replace('#','');
		delay = delay || 0;
		content.css('opacity',0).html(list[id].content);
		content.stop(true).delay(delay).animate({'opacity':1}, args.speed*1000)
	}
	
	
	
	// set structures
		
	o.css({
		'position'	: 'relative'		
	});
	
	content.css({
		'overflow' : 'hidden'
	});
	
	nav.css({
		
	});	
	
	navbg.css({
		'width':'40px',
		'height':'40px',
		'border':'5px solid #fff',
		'position':'absolute',			
		'opacity':0,
		'top':-1,	
	});

	
	list = readlist();
		
	var imgs = []; // Preload Images	
	o.find('img').each(function(){
		imgs.push($(this).attr('src'));
	});	
	o.find('li').each(function(){
		if ($(this).attr('thumb') != '') {
			imgs.push($(this).attr('thumb'));
		}
	});
	
	o.html(''); // empty 
	o.append(loading);	
	loading.on();
	nav.append(navbg);
	nav.get_thumbs(list);
	o.append(nav);
	o.append(content);	
	
		
	
	$.loadImages(imgs, function(){ 
		loading.off();
		nav.show();			
	});
	
	
	
	
	
	// events
	nav.find('a').each(function() {		
			
		$(this).hover(	// when over				
			function(){
				var xto = $(this).position().left;
				var yto = $(this).position().top;
				if (navbg.css('top')=='-1px') navbg.css({'top':yto,'left':xto});
				navbg.stop(true).animate({'top':yto, 'left':xto, 'opacity':1}, 300, 'easeOutQuad');
				$(this).find('img').stop(true).animate({'opacity':.8}, 200);
			},
		
			function(){
				navbg.stop(true).animate({'opacity':0}, 500);
				$(this).find('img').stop(true).animate({'opacity':.5}, 200);
			}
		);	
		
		
		$(this).click(function(){				
			content.show($(this).attr('href'));
			return false;
		});			
		
	});
	
	
}