// JavaScript Document
(function($) {
	$.fn.marttabs = function(param) {
		var props = $.extend({
			checkedColor: '#FFF',
			checkedBackgroundColor: '#009900',
			checkedMarkUrl: '../pngs/tabsMark.png',
			css: {
				padding: 8
			},
			titleCss: {
				padding: 8,
				float: 'left',
				margin: '5px 5px 5px 0px',
				fontSize: '12px',
				fontWeight: 'bold',
				color: '#333',
				backgroundColor: '#F2F2F2',
				cursor: 'pointer'
			}
		}, param||{});
		
		return this.each(function() {
			var _this = $(this);
			_this.append('<div class="tabsTitleMark"></div>');
			var titleMark = $('.tabsTitleMark').css({
				position: 'absolute',
				width: 9,
				height: 5,
				fontSize: '0px',
				backgroundImage: 'url(' + props.checkedMarkUrl + ')',
				display: 'none'
			});
			
			_this.children().eq(1).children().css({
				float: 'left',
				width: '100%',
				marginTop: 5
			}).hide();
			
			_this.css(props.css);
			_this.children().eq(0)
			.children().css(props.titleCss)
			.each(function(n) {
				var _n = n;
				$(this)	.click(function() {
					var _that = $(this);
					var offsetObj = _that.offset();
					var left = offsetObj.left + 10;
					var top = offsetObj.top + _that.height() + 11;
					titleMark.css({
								  left: left, 
								  top: top,
								  display: 'block'
					});
					_that.parent().children().css({
						color: props.titleCss.color,
						backgroundColor: props.titleCss.backgroundColor	,
						cursor: 'pointer'
					});
					_that.css({
						color: props.checkedColor,
						backgroundColor: props.checkedBackgroundColor,
						cursor: 'default'
					});
					_this.children().eq(1).children().hide().eq(_n).show();
					top = null;
					left = null;
					offsetObj = null;
					_that = null;
				});   
			}).eq(0).click();
		});
	};	  
})(jQuery);