(function($){
	
	$.fn.recent = function( options )
	{
		var elements = this;
		
		var w;
		var h;
		
		var defaults = {
			minW: 1024,
			minH: 768
		};
		
		var options = $.extend( {}, defaults, options );
		
		this.cont = undefined;
		this.bg = undefined;
		this.body = undefined;
		this.btClose = undefined;
		
		this.isShow = false;
		
		/**
		 * initialize
		 */
		this.init = function()
		{
			this.css({
				position	: 'absolute',
				left			: 0,
				padding		: 0
			});
			
			// container
			this.cont = $( 'h3', elements ).bind( 'click', onMouseUp );
			
			// background
			this.bg = $( '<div class="bg" />' )
				.prependTo( this.cont )
				.fadeTo( 0, .8 )
				.css({
					position				: 'absolute',
					backgroundColor	: '#ffffff'
				});
			
			// panel
			this.body = $( '.panel', this )
				.fadeTo( 0, 0 )
				.css( 'display', 'none' );
			
			// close button
			this.btClose = $( 'img#btClose', this )
				.fadeTo( 0, 0 )
				.css( 'display', 'none' )
				.bind( 'click', onMouseUp );
			
			$( 'dl', elements.body ).each( function()
			{
				$( this ).recentPanel();
			});
			
			$( window ).bind( 'resize orientationchange', onResize );
			$( window ).bind( 'load', function(){ elements.bg.css( 'height', elements.height()); });
		}
		
		/**
		 * show
		 */
		function show()
		{
			elements.isShow = true;
			
			elements.bg
				.stop()
				.animate( { left: 0 }, 400, 'easeOutExpo', function()
				{
					elements.btClose
						.stop()
						.css( 'display', 'block' )
						.animate( { opacity: 1 }, 200, 'easeOutQuad' );
						
					elements.body
						.stop()
						.show()
						.animate( { opacity: 1 }, 400, 'easeOutQuad' );
				});
		};
		
		/**
		 * hide
		 */
		function hide()
		{
			elements.isShow = false;
			
			elements.body
				.stop()
				.css( 'display', 'block' )
				.animate( { opacity: 0 }, 200, 'easeOutQuad', function()
				{
					elements.body.css( 'display', 'none' );
					
					elements.bg
						.stop()
						.animate( { left: -( elements.bg.width() - 30 ) }, 400, 'easeOutExpo' );
				});
				
			elements.btClose
				.stop()
				.animate( { opacity: 0 }, 200, 'easeOutQuad', function(){ elements.btClose.css( 'display', 'none' ); } )
		};
		
		/**
		 * resize
		 */
		function onResize( e )
		{
			w = Math.max( options.minW, $( window ).width() );
			h = Math.max( options.minH, $( window ).height() );
			
			elements.css( 'top', h - 180 );
						
			// background
			elements.bg.css( 'width', w );
			if ( !elements.isShow ) elements.bg.css( 'left', -( w - 30 ) );
			
			// close button
			elements.btClose.css( 'left', w - elements.btClose.width() );
		}
		
		/**
		 * mouse click
		 */
		function onMouseUp( e )
		{
			if ( !elements.isShow ) show();
			else hide();
		};
		
		elements.each( function()
		{
			elements.init();
		});
		
		return this;
	};

})(jQuery);




(function($)
{
	
	$.fn.recentPanel = function( options )
	{
		var elements = this;
		
		var defaults = {};
		
		var options = $.extend( {}, defaults, options );
		
		this.img = undefined;
		this.cover = undefined;
		
		/**
		 * initialize
		 */
		this.init = function()
		{
			if ( $( this ).is( ':last-child' ) ) $( this ).css( 'marginRight', 0 );
			
			this.img = $( 'img', this ).fadeTo( 0, 1 );
			
			this.cover = $( '<div class="cover" />' )
				.prependTo( this )
				.fadeTo( 0, .5 )
				.css({
					position				: 'absolute',
					top							: 0,
					left						: 0,
					width						: this.img.attr( 'width' ),
					height					: this.img.attr( 'height' ),
					backgroundColor	: '#000000'
				});
			
			this
				.bind( 'mouseenter', onMouseEnter )
				.bind( 'mouseleave', onMouseLeave );
		}
		
		/**
		 * mouse enter
		 */
		function onMouseEnter( e )
		{
			elements.cover
				.stop()
				.animate( { opacity: 0 }, 200, 'easeOutQuad' );
		}
		
		/**
		 * mouse leave
		 */
		function onMouseLeave( e )
		{
			elements.cover
				.stop()
				.animate( { opacity: .5 }, 200, 'easeOutQuad' );
		};
		
		elements.each( function()
		{
			elements.init();
		});
		
		return this;
	}
	
})(jQuery);