jQuery(function($){
	$.fn.thumblist = function(opt){
		var setting = {
			category: null,
			x: 25,
			y: 28,
			num: 5,
			ani: true
		}
		$.extend(setting,opt);
		
		return this.each(function(){
			var _this = $(this),last_top,
				$thumb = $('li',this),
				thumbsize = [parseInt($thumb.width())+setting.x, parseInt($thumb.height())+setting.y];
			$thumb.css({
				'position':'absolute',
				'left':410,
				'top':200
			}).delay(250).each(function(idx){
				var left_idx = parseInt( parseInt( idx )%setting.num );
				var top_idx = parseInt( parseInt( idx )/setting.num );
				$(this).animate({'left': ( thumbsize[0] * left_idx ) , 'top': ( thumbsize[1] * top_idx ) },'normal');
			});
		
			if(setting.category){
				$(setting.category).click(function(){
					var rel = $(this).attr('rel'),
						cate = rel=='all' ? '' : rel,
						$index =cate ? $('li.' + cate,_this) : $thumb;;
					if(cate){
						$('li:not(.' + cate + ')',_this).fadeOut();
					}
					$index.each(function(idx){
						var left_idx = parseInt( parseInt( idx )%setting.num );
						var top_idx = parseInt( parseInt( idx )/setting.num );
						if(setting.ani){
							$(this).fadeIn();
							$(this).animate({'left': ( thumbsize[0] * left_idx ) , 'top': ( thumbsize[1] * top_idx ) },'slow');
						}else{
							$(this).css({'left': ( thumbsize[0] * left_idx ) , 'top': ( thumbsize[1] * top_idx ) });
						}
					});
					return false;
				});
			}
		});
	}
	$('.workslist').each(function(){
		$('ul',this).css({marginLeft:0,height:$(this).height()}).thumblist({category:'#nav h1 a,ul.menu li a'});
		$('ul li',this).css({margin:0});
	});
});