
jQuery.fn.navigation = function(settings)
{
	settings = jQuery.extend(
	{
		skin : 'default',
		control : true,
		controlinfo : 
			{
				previous : true,
				next : true,
				play : true
			},
		navigation : true,
		intervaltime : 3000,
		changetime : 1000,
		canvastag : null,
		listtag : null,
		changetype : 'slide',	// type : slide, overlay
		showcount : 1
	}, settings);

	return this.each(function(index1)
	{
		var container = jQuery(this),
			canvas = (settings.canvastag) ? container.find(settings.canvastag) : container;

		container.addClass('navigation-skin-' + settings.skin);
		canvas.each(function(index2)
		{
			var screen = jQuery(this),
				childs = canvas.find(settings.listtag || 'li'),
				length = childs.length,
				width = screen.width(),
				height = screen.height(),
				html,
				navigations,
				controls;

			var navigation_isStop = true,
				navigation_isPause = false,
				navigation_index = 0,
				navigation_time = 0;

			//screen.height(childs.height());

			if(screen.css('position') != 'relative')
				screen.css({'position' : 'relative'});

			if(settings.changetype == 'slide')
			{
				var buf = screen.parent();
				screen.after('<div class="navigation-inscreen"></div>');
				screen.parent().find('.navigation-inscreen').css({'position' : 'relative', 'overflow' : 'hidden'}).append(screen);

				screen = buf.find('.navigation-inscreen');

				childs.css({'float' : 'left'});

				var childWidth = 0;
				for(var i=0; i<length; i++)
					childWidth += childs.eq(i).outerWidth();

				canvas.width(childWidth + 1000).css({'position' : 'relative'});
			}
			else if(settings.changetype == 'overlay')
			{
				childs.css({'position' : 'absolute', 'z-index' : 1, 'left' : 0, 'top' : 0});
			}

			// control buttons
			if(settings.control && (settings.controlinfo.previous || settings.controlinfo.next || settings.controlinfo.play))
			{
				html = '';
				html += '<div class="navigation-ctrl">';
				html += '	<ul>';

				if(settings.controlinfo.previous)
					html += '		<li><a class="previous" href="#previous" title="이전"><span>&lt;&lt;</span></a></li>';
				if(settings.controlinfo.play)
				{
					html += '		<li><a class="playstop play" href="#play" title="시작"><span>▶</span></a></li>';
					//html += '		<li><a class="play" href="#play"><span>▶</span></a></li>';
					//html += '		<li><a class="stop" href="#stop"><span>■</span></a></li>';
				}
				if(settings.controlinfo.next)
					html += '		<li><a class="next" href="#next" title="다음"><span>&gt;&gt;</span></a></li>';

				html += '	</ul>';
				html += '</div>';

				container.append(html);
			}

			controls = screen.find('div.navigation-ctrl > ul > li > a');

			container.find('.navigation-ctrl > ul > li > .previous').click(function(e){ navigation_index = navigation_timer_process(navigation_index, navigation_index - 1); e.preventDefault(); });
			container.find('.navigation-ctrl > ul > li > .next').click(function(e){ navigation_index = navigation_timer_process(navigation_index, navigation_index + 1); e.preventDefault(); });
			container.find('.navigation-ctrl > ul > li > .playstop').click(function(e)
			{
				var t = $(this);
				if(navigation_isStop)
					t.removeClass('stop').addClass('play').attr('title', '중지').find('span').html('■');
				else
					t.removeClass('play').addClass('stop').attr('title', '시작').find('span').html('▶');

				navigation_isStop = !navigation_isStop;

				e.preventDefault();
			});

			// navigation
			if(settings.navigation)
			{
				html = '';
				html += '<div class="navigation-nav">';
				html += '	<ul>';
				for(var i=0; i<childs.length; i++)
				{
					html += '		<li><a class="navigation-nav-child" href="#nav'+ i +'"><span>'+ (i < 9 ? '0' : '') + (i+1) +'</span></a></li>';
				}
				html += '	</ul>';
				html += '</div>';

				container.append(html);
			}

			navigations = container.find('div.navigation-nav > ul > li > a');
			navigations.each(function(idx)
			{
				jQuery(this).click(function(e)
				{
					navigation_index = navigation_timer_process(navigation_index, idx);
					e.preventDefault();
				});
			});

			screen.find('*').hover(function(){ navigation_isPause = true; }, function(){ navigation_isPause = false; });
			controls.hover(function(){ navigation_isPause = true; }, function(){ navigation_isPause = false; });
			navigations.hover(function(){ navigation_isPause = true; }, function(){ navigation_isPause = false; });

			function navigation_timer_process(preidx, idx)
			{
				preidx = !isNaN(preidx) ? preidx : (length - 1);
				idx = !isNaN(idx) ? (idx >= length ? 0 : (idx < 0 ? length + idx : idx)) : 0;

				if(settings.changetype == 'overlay')
				{
					childs.css('z-index', 1).hide();
					childs.eq(preidx).css('z-index', 2).show();
					childs.eq(idx).css('z-index', 3).fadeIn(settings.changetime);
				}
				else if(settings.changetype == 'slide')
				{
					var left = 0,
						n = (length - idx) <= settings.showcount ? length - settings.showcount : idx;
					for(var i=0; i<n; i++)
						left += childs.eq(i).outerWidth();

					canvas.animate({ left : -(left) }, settings.changetime);
				}

				navigation_time = new Date();

				navigations.removeClass('active');
				navigations.eq(idx).addClass('active');
				return idx;
			}

			function navigation_timer()
			{
				var preidx = navigation_index,
					idx = preidx + 1;

				if(navigation_isStop || navigation_isPause) return;

				if((new Date()) - navigation_time < settings.intervaltime) return;

				navigation_index = navigation_timer_process(preidx, idx);
			}

			if(length > settings.showcount)
			{
				navigation_isStop = false;
				container.find('.navigation-ctrl > ul > li > .playstop').removeClass('stop').addClass('play').attr('title', '중지').find('span').html('■');
				navigation_timer_process(null, 0);
				setInterval(navigation_timer, settings.intervaltime);
			}
		});
	});
}

