// MAIN PROMOTION Area Operation
$(function(){
	$.fn.mainImageFunc = function(settings){
		//settings
		var settings = $.extend({
			lotateTime:5000,//ms
			scrollSpeed:800,
			dataFile:''//url
		},settings);
		//define
		var mainImageArea = $(this);
		var mainImages = $('#mainImages', mainImageArea);
		var mainThumbs = $('#mainThumbs', mainImageArea);
		var mainImagesBox = mainImages.children('ul');
		var mainImage = mainImages.contents().find('li');
		var mainThumb = mainThumbs.contents().find('li');
		var currentID = 0;
		var nextID;
		var count = 1;
		var lockFlag = 0;
		var iphoneFlag = 0;
		var strUA = navigator.userAgent.toLowerCase();
		//if iphone or ipad , iphoneflag = 1
		if(strUA.indexOf('iphone')!=-1 || strUA.indexOf('ipad')!=-1){
			iphoneFlag = 1;
		}
		//init
		//$(mainImage[0]).fadeTo('0',0);
		$(mainThumb[0]).addClass('active');//.fadeTo('200',0.5);
		//mainImages.removeClass('mainImageInit');
		//after window loaded
		//$.event.add(window, "load", function(){
			//init
			//$(mainImage[0]).fadeTo('500',1.0);
			function lotation(){
				//slide
				if(count>0 && lockFlag == 0){
					nextID = currentID<2 ? currentID+1 : 0;
					var moveX = -970 * currentID;
					mainThumbs.contents().find('[class=active]').removeClass('active');//.fadeTo('200',1.0);
					$(mainThumb[currentID]).addClass('active');//.fadeTo('200',0.5);
					mainImagesBox.stop().animate({left:moveX},1200,'easeOutCirc');
					currentID++;
					currentID = currentID>2 ? 0 : currentID;
				}
				//loop
				setTimeout(lotation,settings.lotateTime);
				count = 1;
			}
			//mouseover and mouseout event
			mainThumb.mouseover(function(){
				lockFlag = 1;
				nextID = Number($(this).attr('id').replace('mainThumb',''));
				var moveX = -970 * nextID;
				mainThumbs.contents().find('[class=active]').removeClass('active');//.fadeTo('200',1.0);
				$(mainThumb[nextID]).addClass('active');//.fadeTo('200',0.5);
				mainImagesBox.stop().animate({left:moveX},1200,'easeOutCirc');
				currentID = nextID + 1;
				currentID = currentID>2 ? 0 : currentID;
			}).mouseout(function(){
				nextID = Number($(this).attr('id').replace('mainThumb',''));
				//$(mainThumb[nextID]).removeClass('active');//.fadeTo('200',1.0);
				lockFlag = 0;
			});
			mainImage.mouseover(function(){
				lockFlag = 1;
			}).mouseout(function(){
				lockFlag = 0;
			});
			//iphone touch event
			if(iphoneFlag == 1){
				//define method
				$.fn.flick = function(settings){
					var target = $(this).get(0);
					//event listener
					var touchHandler = getTouchHandler(target);
					target.addEventListener("touchstart", touchHandler, false);
					target.addEventListener("touchmove", touchHandler, false);
					target.addEventListener("touchend", touchHandler, false);
					//define method
					function getTouchHandler(obj){
						var objX;
						var startX = 0;//touchstart X
						var diffX = 0;//diff X
						var moveX = 0;
						var sTime = 0;
						var moveFlag =0;
						return function(e){
							//type of touch
							var touch = e.touches[0];
							if (e.type == "touchstart"){
								//slide lock
								lockFlag = 1;
								//set startX
								startX = touch.pageX;
								//object X
								objX = $(obj).css('left').replace('px','');
								sTime = (new Date()).getTime();
							}
							else if (e.type == "touchmove"){
								e.preventDefault();
								lockFlag = 1;
								diffX = touch.pageX - startX;
								nextID = diffX < 0 ? Math.ceil(objX/-545)+1 : Math.ceil(objX/-970)-1;
								if(nextID<0){ nextID = 0}
								if(nextID>2){ nextID = 2}
								moveX = -970 * nextID;
							}
							else if (e.type == "touchend"){
								var t = (new Date()).getTime() - sTime;
								if (t < 300 && diffX > 20){
									mainThumbs.contents().find('[class=active]').removeClass('active');//.fadeTo('200',1.0);
									mainImagesBox.stop().animate({left:moveX},800,'easeOutSine');
								} else if (t < 300 && diffX < -20){
									mainThumbs.contents().find('[class=active]').removeClass('active');//.fadeTo('200',1.0);
									mainImagesBox.stop().animate({left:moveX},800,'easeOutSine');
								}
								//e.preventDefault();
								lockFlag = 0;
								if(nextID != undefined){
									currentID = nextID;
									$(mainThumb[nextID]).addClass('active');//.fadeTo('200',0.5);
								}
							}
						}//return
					}
				}//define method
				//attach touch event
				mainImagesBox.flick();
			}
			lotation();
		//});
	}
	//run method
	//$('#mainImageArea').load("../include_html/main_promotion.html",function(){$('#mainImageArea').mainImageFunc({lotateTime:4000});});
	$('#mainImageArea').mainImageFunc({lotateTime:6500});
});