/*====================================================================


 ■　index.js


--------------------------------------------------------------------*/

(function($) {
$(function(){


/*====================================================================

 □　Main Visual Gallery

--------------------------------------------------------------------*/

/****************************************************

	Setting

*****************************************************/

/*--------------------------------------------
	customize
--------------------------------------------*/

	var _targetIndex = 0;	// startVisual
	var _fadeSpeed = 1200;	// fadeSpeed
	var _slideSpeed = 6000;	// slideSpeed
	var _thumbSpeed = 600; //thumbnails click Speed
	var _carouselSpeed = 350; //carouselSpeed

	var thumbHeight = 45 //thumb Item Height( thumb height + margin + padding + border )
	
	


/*--------------------------------------------
	define
--------------------------------------------*/

	var visualBoxParent = '.promotion_area';
	var visualBox;
	var thumbBox = '#thumbBox';
	var thumbBoxli = '#thumbBox li';
	var thumbClassCur = 'thumbCur';
	var thumbClassOn = 'thumbOn';
	var _timer;



/*--------------------------------------------
	json
--------------------------------------------*/

	$.getJSON(
		'./js/promotion.json',
		function(json)
		{
			_dataJson = json;
			setup();
		}
	);



/*--------------------------------------------
	setup
--------------------------------------------*/

	function setup()
	{
		// itemLength
		itemNum = _dataJson.data.length;
		
		// VisualBox
		visualBox = '#visualBox';
		
		for(i=0; i<itemNum; i++){
			var itemID =  ("0" + (i+1)).slice(-2);
			var self = $("<li><img></li>");
			
			$(visualBox).append(self);
			
			$("li", visualBox).eq(i).attr({ 'id': 'mainID_'+itemID })
				.find('img').attr({ 'src': _dataJson.data[i].mainImage, 'alt': _dataJson.data[i].alt });
			
			if(_dataJson.data[i].href != ''){
				self.find('img').wrap('<a></a>').end()
					.find('a').attr({ 'href': _dataJson.data[i].href, 'target': _dataJson.data[i].target });
			}
		}
		visualBox = {
			_li:'#visualBox li',
			_length:$('#visualBox li').length	// == itemNum
		};
		
		// Thumbnail
		_createThumbnails();
		
		// gallery Start
		$('#visualBox li:eq('+_targetIndex+')').fadeIn(_fadeSpeed,function(){
			$(visualBoxParent).css('background','none');
		});
		_timer = setInterval(onTimer,_slideSpeed);
		
		// Click Action Check
		$(thumbBoxli).bind('click', thumbClick);
		$('.promotion_area_arrow_bottom').bind('click', { name: "bottom" }, onTimer);
		$('.promotion_area_arrow_top').bind('click', { name: "top" }, onTimer);	

	}



/*--------------------------------------------
	create Thumbnails
--------------------------------------------*/

	function _createThumbnails()
	{
		$('#promotion_thumb').append('<ul id="thumbBox"></ul>');
	
		// create ThumbnailList + cloneList*2
		for(j=0; j<3; j++)
		{
			for(i=0; i<visualBox._length; i++)
			{
				var thumbNum = targetIndexExchangeID(i);	// 2 -> 03
				var appendTxt = '<li id="thumbID_'+thumbNum+'"><img src="'+_dataJson.data[i].thumbImage+'" alt="" /></li>';
				$(thumbBox).append(appendTxt);
			}
		}
		
		// start Position
		$(thumbBox).css('top',-thumbHeight*(visualBox._length+_targetIndex));
		var thumbStartID = targetIndexExchangeID(_targetIndex);
		for(i=0; i<visualBox._length*3;i++){
			if($(thumbBoxli).eq(i).attr('id') == 'thumbID_'+thumbStartID){
				$(thumbBoxli).eq(i).addClass(thumbClassCur);
			}
		}
		thumbHoverAction();
	}




/****************************************************

	Function

*****************************************************/

/*--------------------------------------------
	gallery function
--------------------------------------------*/
	
	function onTimer(event)
	{
		var _oldIndex = _targetIndex;
		var _name = event && event.data != undefined ? event.data.name : null;
		
		if(_name == "top")
		{
			 prevFunc();
			 _targetIndex = --_targetIndex % visualBox._length;
		}
		else if(_name == "bottom" || _name == null) 
		{
			nextFunc();
			_targetIndex = ++_targetIndex % visualBox._length;
		}
		
		if(_targetIndex >= visualBox._length) _targetIndex = 0;
		if(_targetIndex < 0) _targetIndex = visualBox._length - 1;
		
		visualSlide(_oldIndex,_targetIndex);
	}


	function visualSlide(_oldIndex,_targetIndex){
		
		if(_oldIndex==_targetIndex) return false;
		
		var _targetListIndex = targetIndexExchangeID(_targetIndex);
		$('#thumbBox li').removeClass(thumbClassCur);
		$('#thumbBox li[id = thumbID_'+_targetListIndex+']').addClass(thumbClassCur);
		
		$(visualBox._li).eq(_oldIndex).stop(true,true).fadeOut(_fadeSpeed);
		$(visualBox._li).eq(_targetIndex).stop(true,true).fadeIn(_fadeSpeed);
	}



/*--------------------------------------------
	click Thumbnails
--------------------------------------------*/

	function thumbClick(event)
	{
		_clickUnBind();
		clearInterval(_timer);
		
		var _thumbIndex = $(this).attr('id').slice(-2);
		var _nowImgIndex = $('#thumbBox li.'+thumbClassCur).attr('id').slice(-2);
		
		_targetIndex = eval(_thumbIndex)-1;
		_oldIndex = eval(_nowImgIndex)-1;
		visualSlide(_oldIndex,_targetIndex);
		
		//thumbnails carousel
		for(i=0; i<visualBox._length;i++){
			if(i==_targetIndex){
				
				var listIndex = $(thumbBoxli).index(this);
				
				if(listIndex >= visualBox._length*2){	//last cloneList
					$(thumbBox).animate({//moveCarousel
						top: -thumbHeight*(visualBox._length*2+i)
					}, _thumbSpeed, "easeOutCubic", function() {// Animation complete.
						for(j=0; j<visualBox._length;j++){
							$(thumbBoxli).eq(j).insertAfter($(thumbBoxli).eq(visualBox._length*3));//insertList
						}
						$(thumbBox).css('top',-thumbHeight*(visualBox._length+_targetIndex));
						_clickBind();
					});		
				}
				else{
					$(thumbBox).animate({//moveCarousel
						top: -thumbHeight*(visualBox._length+i)
					}, _thumbSpeed, "easeOutCubic", function() {// Animation complete.
						_clickBind();
					});	
				}
			}
		}

		_timer = setInterval(onTimer,_slideSpeed);
	}




/*--------------------------------------------
	carousel
--------------------------------------------*/

	function nextFunc(event)
	{
		_clickUnBind();
		clearInterval(_timer);

		$(thumbBox).stop().animate({//moveCarousel
			top: '-='+thumbHeight
		}, _carouselSpeed, function() {// Animation complete.
			
			if($(thumbBox).css('top') == (-thumbHeight)*visualBox._length*2+'px'){//insertList
				for(i=0; i<visualBox._length;i++){
					$(thumbBoxli).eq(i).insertAfter($(thumbBoxli).eq(visualBox._length*3));
				}
				$(thumbBox).css('top',-thumbHeight*(visualBox._length));
			}
			
			_clickBind();
			_timer = setInterval(onTimer,_slideSpeed);
		});

	}
	
	function prevFunc(event)
	{
		_clickUnBind();
		clearInterval(_timer);

		$(thumbBox).stop().animate({//moveCarousel
			top: '+='+thumbHeight
		}, _carouselSpeed, function() {// Animation complete.
		
			if($(thumbBox).css('top') == "0px"){//insertList
				for(i=visualBox._length*3-1; i>=visualBox._length*2;i--){
					$(thumbBoxli).eq(visualBox._length*3-1).insertBefore($(thumbBoxli).eq(0));
				}
				$(thumbBox).css('top',-thumbHeight*(visualBox._length)*2);
			}
			
			_clickBind();
			_timer = setInterval(onTimer,_slideSpeed);
		});

	}



/*--------------------------------------------
	click Action
--------------------------------------------*/

	function _clickBind()
	{
		$(thumbBoxli).bind('click', thumbClick)
		$('.promotion_area_arrow_bottom').bind('click', { name: "bottom" }, onTimer);
		$('.promotion_area_arrow_top').bind('click', { name: "top" }, onTimer);
	}

	function _clickUnBind()
	{
		$(thumbBoxli).unbind('click', thumbClick);
		$('.promotion_area_arrow_bottom').unbind('click', onTimer);
		$('.promotion_area_arrow_top').unbind('click', onTimer);
	}
	

	
/*--------------------------------------------
	targetIndex -> ID
--------------------------------------------*/

	function targetIndexExchangeID(_targetIndex){
		_targetIndex = _targetIndex % visualBox._length;
		var _targetID = ("0" + (_targetIndex+1)).slice(-2);	// 2 -> 03
		return _targetID;
	}


	
/*--------------------------------------------
	thumbnails Hover Setting
--------------------------------------------*/

	function thumbHoverAction()
	{
		$(thumbBoxli).hover(
			function(){
				$(this).addClass(thumbClassOn);
			},
			function(){
				$(this).removeClass(thumbClassOn);
			}
		);
	}



});
})(jQuery);