$.fn.dpanel = function(option) {
	var opt = {
		'align': 'left'
	};
	$.extend(true, opt, option);
	return this.each(function() {
		var me = $(this).addClass('dpanel');
		var trigger = me.find('.dpanel-trigger:first');
		var target = me.find('.dpanel-target:first').hide();

		/* my style */
		switch (me.css('position')) {
		case 'absolute':
		case 'relative':
			break;
		default:
			me.css('position', 'relative');
			break;
		}

		/* trigger style */
		switch (trigger.css('position')) {
		case 'absolute':
		case 'relative':
			break;
		default:
			trigger.css('position', 'relative');
			break;
		}
		trigger.css('z-index', '11');
		trigger.html($('<span>'+trigger.html()+'</span>')
				.addClass('dpanel-trigger-inner'));

		/* target style */
		target.css({
			'position': 'absolute',
			'z-index': '10'
		});

		/* trigger click */
		trigger.click(function() {
			if (target.is(':visible')) {
				$('html').click();
				return false;
			}
			trigger.addClass('dpanel-active');

			var css = {};

			/* left */
			css.left = '0';
			switch (opt.align) {
			case 'left':
				css.left = trigger.offset().left - me.offset().left;
				break;
			case 'center':
				css.left = (trigger.offset().left - me.offset().left) +
					(trigger.outerWidth() / 2 - target.outerWidth() / 2);
				break;
			case 'right':
				css.left = (trigger.offset().left - me.offset().left) +
					(trigger.outerWidth() - target.outerWidth());
				break;
			}
			css.left += 'px';

			/* top */
			css.top = (
				(trigger.offset().top - me.offset().top) +
				trigger.outerHeight() - (
					(target.outerHeight() -
					 target.height() -
					 parseInt(target.css('padding-top')) -
					 parseInt(target.css('padding-bottom'))) / 2
				)
			) + 'px';

			target.show().css(css);
			return false;
		});

		/* outside click */
		$('html').click(function(e) {
			if (!target.is(':visible'))
				return true;
			if (e.pageX == 0 && e.pageY == 0) {
				/* fix for webkit */
				return true;
			}
			if (e.pageX >= target.offset().left &&
				e.pageX <= target.offset().left +
					target.outerWidth() &&
				e.pageY >= target.offset().top &&
				e.pageY <= target.offset().top +
					target.outerHeight())
				return true;
			trigger.removeClass('dpanel-active');
			target.hide();
			return true;
		});
	});
};