$(function()
{
	/* ------------------------------
		variable
	------------------------------ */
	
	var TAB_MENU_NUM = 6;
	var TAB_MENU_ROW = 3;
	var TAB_MENU_EXPLAIN_ROW = [6, 4, 3, 4, 5, 3];
	
	var _arrowAlignList = [".tab-left-arrow img", ".tab-center-arrow img", ".tab-right-arrow img"];
	
	var _lineCheck = [];
	
	/* ------------------------------
		instance
	------------------------------ */
	
	var _timer;
	
	/* ------------------------------
		flag
	------------------------------ */
	
	var IS_OLD_BROWSER = false;
	
	var _isTabOver = false;
	var _isTabExplainOver = false;
	var _isTabExplainShow = false;
	
	/* ------------------------------
		method
	------------------------------ */
	
	/**
	 * browser check
	 */
	function _browserCheck()
	{
		if(jQuery.support.noCloneChecked || jQuery.support.cssFloat) IS_OLD_BROWSER = false;
		else IS_OLD_BROWSER = true;
	}
	
	/**
	 * init
	 */
	function _init()
	{
		var line = 0;
		var row = 0;
		
		jQuery.each($(".tab-explain-line"), function(i)
		{
			jQuery.each($("li", this), function(j)
			{
				var _class = $(this).attr("class") != undefined ? $(this).attr("class") : "";
				
				if(j != 0 && (j + 1) % TAB_MENU_EXPLAIN_ROW[i] == 0) $(this).attr({ "class": "imghover last " + _class });
				else $(this).attr({ "class": "imghover " + _class });
			});
			
			if(row == TAB_MENU_ROW)
			{
				++line;
				row = 0;
			}
			else ++row;
			
			$("li", ".tab-menu-list").eq(i).bind("mouseenter", { id: i, li: line }, _tabMouseOver);
			$("li", ".tab-menu-list").eq(i).bind("mouseleave", { id: i, li: line }, _tabMouseOut);
			
			if(!IS_OLD_BROWSER) $(".arrow", ".tab-menu-list").css({ "opacity": "0" });
			else $(".arrow", ".tab-menu-list").css({ "display": "none" });
			
			$(".tab-explain-line").eq(i).bind("mouseenter", { id: i }, _tabExplainMouseOver);
			$(".tab-explain-line").eq(i).bind("mouseleave", { id: i }, _tabExplainMouseOut);
			
			$(".tab-explain-line").css({ "display": "none" });
		});
	}
	
	_browserCheck();
	_init();
	
	/* ------------------------------
		simple mouseover
	------------------------------ */
	
	function _onMouseOver(event)
	{
		$(this).stop().animate({ "opacity": "0.6" }, 600, "easeOutExpo");
	}
	
	function _onMouseOut(event)
	{
		$(this).stop().animate({ "opacity": "1" }, 600, "easeOutExpo");
	}
	$(".imghover").bind("mouseenter", _onMouseOver);
	$(".imghover").bind("mouseleave", _onMouseOut);
	
	/* ------------------------------
		tab menu
	------------------------------ */
	
	/**
	 * tab mouseover
	 */
	function _tabMouseOver(event)
	{
		var id = event.data.id;
		var lineId = event.data.li;
		
		_lineCheck.push(lineId);
		if (_lineCheck.length >= 3) _lineCheck.shift();
		
		if(_isTabExplainShow && _lineCheck[0] != _lineCheck[1]) _tabExplainClose(id);
		
		clearTimeout(_timer);
		_timer = setTimeout(function()
		{
			if(!_isTabExplainShow)
			{
				if(_lineCheck.length != 1)
				{
					if(_lineCheck[0] != _lineCheck[1])
					{
						_tabExplainClose(id);
						_tabExplainOpen(lineId, false);
					}
					else
					{
						if (_isTabExplainShow) _tabExplainOpen(lineId, true);
						else _tabExplainOpen(lineId, false);
					}
				}
				else _tabExplainOpen(lineId, false);
			}
			else if(_isTabExplainShow && _lineCheck[0] != _lineCheck[1])
			{
				_tabExplainClose(id);
				_tabExplainOpen(lineId, true);
			}
			
		}, 150);
		
		_tabExplainChange(false, id);
		
		$(".tab-img", this).stop().animate({ "opacity": "0.6" }, 300, "easeOutExpo");
		$(".tab-dispriction").stop().animate({ "top": "189px" }, 600, "easeOutCubic");
		$(".tab-dispriction", this).stop().animate({ "top": "141px" }, 300, "easeOutCubic");
		
		if(!IS_OLD_BROWSER)
		{
			$(".arrow").stop(true, false).animate({ "opacity": "0" }, 300, "easeOutCubic");
			$(".arrow", this).stop(true, false).delay(100).animate({ "opacity": "1" }, 500, "easeOutExpo");
		}
		else
		{
			$(".arrow").css({ "display": "none" });
			$(".arrow", this).css({ "display": "block" });
		}
		
		_isTabOver = true;
		_isTabExplainOver = false;
	}
	
	/**
	 * tab mouseout
	 */
	function _tabMouseOut(event)
	{
		var id = event.data.id;
		
		clearTimeout(_timer);
		
		if(!_isTabExplainShow)
		{
			_tabExplainClose(id);
			$(".tab-dispriction").stop().animate({ "top": "189px" }, 600, "easeOutCubic");
			
			if(!IS_OLD_BROWSER) $(".arrow").stop(true, false).animate({ "opacity": "0" }, 300, "easeOutCubic");
  			else $(".arrow").css({ "display": "none" });
		}
		else
		{
			_timer = setTimeout(function()
			{
				if(!_isTabExplainOver && !_isTabOver)
				{
					_tabExplainClose(id);
				
					_isTabExplainShow = false;
					_lineCheck.length = 0;
					
					$(".tab-dispriction").stop().animate({ "top": "189px" }, 600, "easeOutCubic");
					
					if(!IS_OLD_BROWSER) $(".arrow").stop().animate({ "opacity": "0" }, 300, "easeOutCubic");
					else $(".arrow").css({ "display": "none" });
				}
				
			}, 300);
		}
		
		$(".tab-img", this).stop().animate({ "opacity": "1" }, 300, "easeOutExpo");
		
		_isTabOver = false;
	}
	
	/**
	 * tab explain mouseover
	 */
	function _tabExplainMouseOver(event)
	{
		_isTabOver = false;
		_isTabExplainOver = true;
	}
	
	/**
	 * tab explain mouseout
	 */
	function _tabExplainMouseOut(event)
	{
		var id = event.data.id;
		
		clearTimeout(_timer);
		_timer = setTimeout(function()
		{
			if(!_isTabExplainOver && !_isTabOver)
			{
				_tabExplainClose(id);
				_lineCheck.length = 0;
				
				$(".tab-dispriction").stop().animate({ "top": "189px" }, 600, "easeOutCubic");
				
				if(!IS_OLD_BROWSER) $(".arrow").stop().animate({ "opacity": "0" }, 300, "easeOutCubic");
				else $(".arrow").css({ "display": "none" });
			}
			
		}, 500);
		
		_isTabExplainOver = false;
	}
	
	/**
	 * tab explain change
	 */
	function _tabExplainChange(isSkip, id)
	{
		var line = id < TAB_MENU_ROW ? 0 : 1;
		
		for(var i = 0; i < TAB_MENU_NUM; ++i)
		{
			if(i != id) $(".tab-explain-line").eq(i).stop().animate({ "height": "0" }, isSkip ? 0 : 300, "easeOutCubic", function(){ $(this).css({ "display": "none" }) });
			if(i != id % TAB_MENU_ROW) $(_arrowAlignList[i], ".tab-explain-line").eq(line).stop().animate({ "top": "-18px" }, 400, "easeOutCubic");
		}
		$(".tab-explain-line").eq(id).css({ "display": "block", "height": "0" }).stop().animate({ "height": "90px" }, isSkip ? 0 : 600, "easeOutCubic");
		$(_arrowAlignList[id % TAB_MENU_ROW], ".tab-explain-line").eq(line).stop().animate({ "top": "0" }, 200, "easeOutCubic");
	}
	
	/**
	 * tab explain open
	 */
	function _tabExplainOpen(id, isSkip)
	{
		$(".tab-explain-wrap").eq(id).stop(true, false).animate({ "height": "89px" }, isSkip ? 0 : 400, "easeOutCubic");
		_isTabExplainShow = true;
	}
	
	/**
	 * tab explain hide
	 */
	function _tabExplainClose(id)
	{
		var line = id < TAB_MENU_ROW ? 0 : 1;
		
		if(_isTabExplainShow) $(_arrowAlignList[id % TAB_MENU_ROW], ".tab-explain-line").eq(line).stop().animate({ "top": "-18px" }, 200, "easeOutCubic");
		
		$(".tab-explain-wrap").stop(true, false).animate({ "height": "0" }, 400, "easeOutCubic");
		
		_isTabExplainShow = false;
	}
});