/*
 * Navigation Setting
 * 
 ******************************************** */
(function($) {
	jQuery.easing.easeInOutQuart = function (x, t, b, c, d) {
		if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
		return -c/2 * ((t-=2)*t*t*t - 2) + b;
	};


	$.fn.setNavigation = function(setting){
		var NaviArea = $(this);

		var setVal = $.extend({
			//ScrollPos:'#GUIDE_NAVI_1'
		},setting || {});


		// Init Vars
		var naviPos = 0;

		var NaviChildElm = NaviArea.children("div");
		var NaviChildElmLen = NaviChildElm.length;

		var lrgIconAreaID = NaviChildElm.eq(0).attr("id");
		var mdlIconAreaID = NaviChildElm.eq(1).attr("id");
		var smlTopIconAreaID = NaviChildElm.eq(2).attr("id");
		var smlBtmIconAreaID = NaviChildElm.eq(3).attr("id");

		var naviMainHeight = $('#'+lrgIconAreaID).height();
		var naviMaskHeight = $('#'+mdlIconAreaID).height();

		$('#'+mdlIconAreaID).append('<div class="handle"></div>');
		var NaviHandle = $('#'+mdlIconAreaID+' .handle');

		var naviMaskSmlHeight = $('#'+smlTopIconAreaID).height();

		var mdlIconAreaSlider = $('#'+mdlIconAreaID+' .handle');


		$('#'+smlTopIconAreaID).append('<div class="navi_arr_top"></div>');
		$('#'+smlTopIconAreaID).append('<div class="sml_navi_box"></div>');
		var smlNaviSlideTop = $('#'+smlTopIconAreaID+' .sml_navi_box');

		$('#'+smlBtmIconAreaID).append('<div class="navi_arr_btm"></div>');
		$('#'+smlBtmIconAreaID).append('<div class="sml_navi_box"></div>');
		var smlNaviSlideBtm = $('#'+smlBtmIconAreaID+' .sml_navi_box');


		// Main Navi State Set
		var lrgIconList = $('#'+lrgIconAreaID+' li', this);
		var lrgIconListLen = lrgIconList.length;

		var ClassNameArray = new Array();


		// Create Empty Elments
		for(var i=0; i<lrgIconListLen; i++){
			ClassNameArray[i] = lrgIconList.eq(i).attr("class");

			NaviHandle.append('<div class='+ClassNameArray[i]+'></div>');
			smlNaviSlideTop.append('<div class='+ClassNameArray[i]+'></div>');
			smlNaviSlideBtm.append('<div class='+ClassNameArray[i]+'></div>');
		}


		// Click Enable
		function handler(e){
			e.preventDefault();
		}
		for(var i=1; i<lrgIconListLen; i++){
			lrgIconList.eq(i).bind("click", handler);
		}


		// Navi Click Action Top
		$('#'+smlTopIconAreaID).hover(
			function () {
				if(naviPos<lrgIconListLen-1){
					$('#'+smlTopIconAreaID+' .navi_arr_top').css("background-position","0 -9px");
					$(this).css("cursor","pointer");
				} else {
					$(this).css("cursor","default");
				}
			},
			function () {
				$('#'+smlTopIconAreaID+' .navi_arr_top').css("background-position","0 0");

				if(naviPos<lrgIconListLen-1){
					$(this).css("cursor","default");
				} else {
					$(this).css("cursor","default");
				}
			}
		);
		$('#'+smlTopIconAreaID).click(function() {
			if(naviPos<lrgIconListLen-1){
				lrgIconList.eq(naviPos).addClass("hide")
									.css('top',naviMainHeight+'px')
									.css("opacity", 0)
									.bind("click", handler);

				lrgIconList.eq(naviPos+1).removeClass("hide")
									.css('top','0px')
									.css("opacity", 1)
									.unbind("click", handler);

				/*lrgIconList.eq(naviPos).fadeTo(300, 0, function(){
						$(this).addClass("hide");
						$(this).bind("click", handler);
					});
				lrgIconList.eq(naviPos+1).fadeTo(0, 1, function(){
						$(this).removeClass("hide");
						$(this).unbind("click", handler);
					});*/

				mdlIconAreaSlider.animate({ 'top': '-='+naviMaskHeight+'px' }, 300, 'easeInOutQuart');
				smlNaviSlideTop.animate({ 'top': '-='+naviMaskSmlHeight+'px' }, 300, 'easeInOutQuart');
				smlNaviSlideBtm.animate({ 'top': '-='+naviMaskSmlHeight+'px' }, 300, 'easeInOutQuart');

				naviPos++;
			} else {
				return false;
			}
		});


		// Navi Click Action Bottom
		$('#'+smlBtmIconAreaID).hover(
			function () {
				if(naviPos>0){
					$('#'+smlBtmIconAreaID+' .navi_arr_btm').css("background-position","0 -9px");
					$(this).css("cursor","pointer");
				} else {
					$(this).css("cursor","default");
				}
			},
			function () {
				$('#'+smlBtmIconAreaID+' .navi_arr_btm').css("background-position","0 0");

				if(naviPos>0){
					$(this).css("cursor","default");
				} else {
					$(this).css("cursor","default");
				}
			}
		);
		$('#'+smlBtmIconAreaID).click(function() {
			if(naviPos>0){
				lrgIconList.eq(naviPos).addClass("hide")
									.css('top',naviMainHeight+'px')
									.css("opacity", 0)
									.bind("click", handler);
				lrgIconList.eq(naviPos-1).removeClass("hide")
									.css('top','0px')
									.css("opacity", 1)
									.unbind("click", handler);

				/*lrgIconList.eq(naviPos-1).fadeTo(0, 1.0, function(){
						$(this).removeClass("hide");
						$(this).unbind("click", handler);
					});
				lrgIconList.eq(naviPos).fadeTo(200, 0, function(){
						$(this).addClass("hide");
						$(this).bind("click", handler);
					});*/

				mdlIconAreaSlider.animate({ 'top': '+='+naviMaskHeight+'px' }, 300, 'easeInOutQuart');
				smlNaviSlideTop.animate({ 'top': '+='+naviMaskSmlHeight+'px' }, 300, 'easeInOutQuart');
				smlNaviSlideBtm.animate({ 'top': '+='+naviMaskSmlHeight+'px' }, 300, 'easeInOutQuart');

				naviPos--;
			} else {
				return false;
			}
		});




		var slideNavi = new Dragdealer(mdlIconAreaID,
		{
			vertical: true,
			steps: lrgIconListLen,
			loose: true,
			animationCallback: function(x, y)
			{
				var top = NaviHandle.css("top");
				var topLen = top.length;
				top = parseInt(top.substring(0, topLen-2));

				var absTop = Math.abs(top);

				naviPos = parseInt(absTop/naviMaskHeight);

				var CurrAlpha = 1 - (Math.round(absTop - naviPos*naviMaskHeight) / naviMaskHeight);
				var TrgAlpha = (absTop - naviPos*naviMaskHeight) / naviMaskHeight;

				var slideLen = Math.round((absTop * naviMaskSmlHeight)/naviMaskHeight);


				if(top<=0){
					// Last Element Click Canceller
					lrgIconList.eq(naviPos).css('top','0px');
					lrgIconList.eq(naviPos+1).css('top','0px');

					// Large Icon Fade Animation
					lrgIconList.eq(naviPos).css('opacity',CurrAlpha);
					lrgIconList.eq(naviPos+1).css('opacity',TrgAlpha);

					if(absTop == naviPos*naviMaskHeight) {
						for(var i=0; i<lrgIconListLen; i++){
							if(i != naviPos){
								lrgIconList.eq(i).fadeTo(0, 0, function(){
									$(this).addClass("hide");
									$(this).css('top',naviMainHeight+'px');
									$(this).bind("click", handler);
									});
							}
						}
					} else {
						for(var i=0; i<lrgIconListLen; i++){
							lrgIconList.eq(i).removeClass("hide");
							lrgIconList.eq(i).unbind("click", handler);
						}
					}

					// Small Icon Scroll Animation
					smlNaviSlideTop.css('top', -slideLen + naviMaskSmlHeight);
					smlNaviSlideBtm.css('top', -slideLen - naviMaskSmlHeight);
				} else {
					// Small Icon Scroll Animation
					smlNaviSlideTop.css('top', slideLen + naviMaskSmlHeight);
					smlNaviSlideBtm.css('top', slideLen - naviMaskSmlHeight);
				}

			}
			
		});

	}
})(jQuery);