// 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<3 ? currentID+1 : 0;
					var moveX = -666 * 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>3 ? 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 = -666 * 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>3 ? 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/-666)+1 : Math.ceil(objX/-666)-1;
								if(nextID<0){ nextID = 0}
								if(nextID>3){ nextID = 3}
								moveX = -666 * 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:8000});
});

// (Goods)LINE UP ITEMS Area LoadingContents & Operation
(function($){
	$.fn.classTabs = function(options){
		var element = this;
		var conf = $.extend({
			animate: 			"show",
			speed: 				"",
			activeClass: 		"active",
			hoverClass: 		"hover"
		}, options);
		// Default
		$("#tabFeaturing").html("<p style='height:677px;'></p>");
		$("#tabFeaturing").load("../include_html/buyers_pick.html",function(){$("#tabFeaturing ul li a",element).tooltip({effect: "slide",fadeInSpeed: 200,fadeOutSpeed: 200,relative: true});});
		$(".tabBox",element).not(":first").hide();
		$(".tabs li:first",element).addClass(conf.activeClass);
		// hover Event
		$(".tabs li a",element).hover(function(){
			if(!$(this).parent().hasClass(conf.activeClass)){
				$(this).parent().addClass(conf.hoverClass).stop().animate({opacity: 0.4}, 0).animate({opacity: 1}, 800);
			}
		}, function(){
			$(this).parent().removeClass(conf.hoverClass);
		});
		// Click Event
		$(".tabs .newarri a",element).one("click", function(){
			$("#tabNewarri").html("<p style='height:677px;'></p>");
			$("#tabNewarri").load("../include_html/new_arrival.html",function(){$("#tabNewarri ul li a",element).tooltip({effect: "slide",fadeInSpeed: 200,fadeOutSpeed: 200,relative: true});});
		});
		$(".tabs .ranking a",element).one("click", function(){
			$("#tabRanking").html("<p style='height:677px;'></p>");
			$("#tabRanking").load("../include_html/ranking.html",function(){$("#tabRanking ul li a",element).tooltip({effect: "slide",fadeInSpeed: 200,fadeOutSpeed: 200,relative: true});});
		});
//		$(".tabs .featuring a",element).one("click", function(){
//			$("#tabFeaturing").html("<p style='height:677px;'></p>");
//			$("#tabFeaturing").load("../include_html/buyers_pick.html",function(){$("#tabFeaturing ul li a",element).tooltip({effect: "slide",fadeInSpeed: 200,fadeOutSpeed: 200,relative: true});});
//		});
		$(".tabs .rearri a",element).one("click", function(){
			$("#tabRearri").html("<p style='height:677px;'></p>");
			$("#tabRearri").load("../include_html/re_arrival.html",function(){$("#tabRearri ul li a",element).tooltip({effect: "slide",fadeInSpeed: 200,fadeOutSpeed: 200,relative: true});});
		});
		$(".tabs .lastone a",element).one("click", function(){
			$("#tabLastone").html("<p style='height:677px;'></p>");
			$("#tabLastone").load("../include_html/last_1.html",function(){$("#tabLastone ul li a",element).tooltip({effect: "slide",fadeInSpeed: 200,fadeOutSpeed: 200,relative: true});});
		});
		$(".tabs .lastone_s a",element).one("click", function(){
			$("#tabLastone_s").html("<p style='height:677px;'></p>");
			$("#tabLastone_s").load("../include_html/last_1_s.html",function(){$("#tabLastone_s ul li a",element).tooltip({effect: "slide",fadeInSpeed: 200,fadeOutSpeed: 200,relative: true});});
		});
		$(".tabs li a",element).bind("click", function(){
			if(!$(this).parent().hasClass(conf.activeClass)){
				// tabクラスの切替
				$(this).parent().addClass(conf.activeClass).siblings().removeClass(conf.activeClass);
				// tabBox表示の切替
				var currentTab = $(this).attr("href");
				$(".tabBox:visible",element).stop(true, true).hide();
				$(currentTab)[conf.animate](conf.speed,function(){
					if($.browser.msie){
						this.style.removeAttribute("filter");
					}
				});
			}
			return false;
		});
	}
})(jQuery);
$(function(){
	$("#imageTabs").classTabs({animate: "fadeIn"});
});

// BRAND MOVIE Area LoadingContents
$(function(){
	$("#brandMovie").load("../include_html/brand_movie.html");
});
