$(function(){
	function owlOptions(amount) {
		const owl_options = {
			responsive:{
				0:{
					items : 2
				},
				481:{
					items: 3
				},
				1000:{
					items: 4
				},
				1151:{
					items: (5 - amount)
				}
			},
			dots: false,
			nav : true,
			onRefresh : callback,
		}

		return owl_options
	}
	function callback(event){
		setTimeout(function(){
			$('.hidebox').animate({'opacity':1}).removeClass('hidebox');
		}, 300);
	}
	var box_n=0;
	var owl_red = {},
		owl_green = {},
		owl_blue = {},
		owl_orange = {};
	if($('.fourbox').length>0){
		box_n = 4;
		var owl_red = $(".fourbox .redBox");
		owl_red.find('.orderSlideRGP').owlCarousel(owlOptions(4));
		var owl_green = $(".fourbox .greenBox");
		owl_green.find('.orderSlideRGP').owlCarousel(owlOptions(4));
		var owl_orange = $(".fourbox .orangeBox");
		owl_orange.find('.orderSlideRGP').owlCarousel(owlOptions(4));
		//標籤3
		var owl_blue = $(".fourbox .blueBox");
		owl_blue.find('.orderSlideRGP').owlCarousel(owlOptions(4));

		owl_orange.on('click','.orderSlideRGP .delete',function(){
			var delitem = $(this).parents('.owl-item');
			delitem.find('.title').remove();
			delitem.animate({'opacity':0},300).animate({'width':0},300);
			setTimeout(function(){
				owl_orange.find('.orderSlideRGP').trigger('remove.owl.carousel',delitem.index())
					.trigger('refresh.owl.carousel');
				if(owl_orange.find('.owl-item').length==0){
					var html = '<div class="pic-bg"></div>';
					owl_orange.find('.orderSlideRGP').trigger('to.owl.carousel',[0,0,true])
						.trigger('add.owl.carousel',[$(html),0])
						.trigger('refresh.owl.carousel');
				}
			}, 700);
		});
	}else if($('.twobox').length>0){
		box_n = 4;
		var owl_red = $(".twobox .redBox");
		owl_red.find('.orderSlideRGP').owlCarousel(owlOptions(2));
		var owl_green = $(".twobox .greenBox");
		owl_green.find('.orderSlideRGP').owlCarousel(owlOptions(2));
		//標籤3
		var owl_blue = $(".twobox .blueBox");
		owl_blue.find('.orderSlideRGP').owlCarousel(owlOptions(2));
	}else{
		box_n = 3;
		var owl_red = $(".threebox .redBox");
		owl_red.find('.orderSlideRGP').owlCarousel(owlOptions(3));
		var owl_green = $(".threebox .greenBox");
		owl_green.find('.orderSlideRGP').owlCarousel(owlOptions(3));
		var owl_orange = $(".threebox .orangeBox");
		owl_orange.find('.orderSlideRGP').owlCarousel(owlOptions(3));
		//標籤3
		var owl_blue = $(".threebox .blueBox");
		owl_blue.find('.orderSlideRGP').owlCarousel(owlOptions(3));

		owl_orange.on('click','.orderSlideRGP .delete',function(){
			var delitem = $(this).parents('.owl-item');
			delitem.find('.title').remove();
			delitem.animate({'opacity':0},300).animate({'width':0},300);
			setTimeout(function(){
				owl_orange.find('.orderSlideRGP').trigger('remove.owl.carousel',delitem.index())
					.trigger('refresh.owl.carousel');
				if(owl_orange.find('.owl-item').length==0){
					var html = '<div class="pic-bg"></div>';
					owl_orange.find('.orderSlideRGP').trigger('to.owl.carousel',[0,0,true])
						.trigger('add.owl.carousel',[$(html),0])
						.trigger('refresh.owl.carousel');
				}
			}, 700);
		});
	};
	owl_red.on('click','.orderSlideRGP .delete',function(){
		var delitem = $(this).parents('.owl-item');
		delitem.find('.title').remove();
		delitem.animate({'opacity':0},300).animate({'width':0},300);
		setTimeout(function(){
			owl_red.find('.orderSlideRGP').trigger('remove.owl.carousel',delitem.index())
				.trigger('refresh.owl.carousel');
			if(owl_red.find('.owl-item').length==0){
				var html = '<div class="pic-bg"></div>';
				owl_red.find('.orderSlideRGP').trigger('to.owl.carousel',[0,0,true])
					.trigger('add.owl.carousel',[$(html),0])
					.trigger('refresh.owl.carousel');
			}
		}, 700);
	});
	owl_green.on('click','.orderSlideRGP .delete',function(){
		var delitem = $(this).parents('.owl-item');
		delitem.find('.title').remove();
		delitem.animate({'opacity':0},300).animate({'width':0},300);
		setTimeout(function(){
			owl_green.find('.orderSlideRGP').trigger('remove.owl.carousel',delitem.index())
				.trigger('refresh.owl.carousel');
			if(owl_green.find('.owl-item').length==0){
				var html = '<div class="pic-bg"></div>';
				owl_green.find('.orderSlideRGP').trigger('to.owl.carousel',[0,0,true])
					.trigger('add.owl.carousel',[$(html),0])
					.trigger('refresh.owl.carousel');
			}
		}, 700);
	});
	//標籤3
	owl_blue.on('click','.orderSlideRGP .delete',function(){
		var delitem = $(this).parents('.owl-item');
		delitem.find('.title').remove();
		delitem.animate({'opacity':0},300).animate({'width':0},300);
		setTimeout(function(){
			owl_blue.find('.orderSlideRGP').trigger('remove.owl.carousel',delitem.index())
				.trigger('refresh.owl.carousel');
			if(owl_blue.find('.owl-item').length==0){
				var html = '<div class="pic-bg"></div>';
				owl_blue.find('.orderSlideRGP').trigger('to.owl.carousel',[0,0,true])
					.trigger('add.owl.carousel',[$(html),0])
					.trigger('refresh.owl.carousel');
			}
		}, 700);
	});

	$('article').on('click','.button5',function(){
		$('.user-orderBox').removeClass('none');
		var sid = $(this).attr('sid'),
			img = $(this).parents('.productBox'),
			img_src = img.find('.productImg').find('img').attr('src'),
			img_title = img.find('.productTitle').find('.title').html(),
			img_price = img.find('.productTitle').find('.font-big').html(),
			img_amount= img.find('.num-select').val(),
			add_array = new Array();
		add_array[0] = 0;

		switch($(this).parents('.productBox').attr('class').substring(11)){
			case "redBox":
				var _pair = 1;
				break;
			case "greenBox":
				var _pair = 2;
				break;
			case "blueBox":
				var _pair = 3;
				break;
			case "orangeBox":
				var _pair = 4;
				break;
		}
		// $(".delete[pair="+_pair+"]").each(function(){
		//    add_array.push(parseInt($(this).attr("del_id")));
		// });
		// var img_index = Math.max.apply(null,add_array);

		if($(this).parents('.redBox').length != 0){
			if($('.redBox .pic-bg').length == 1){
				owl_red.find('.orderSlideRGP').trigger('remove.owl.carousel',$('.redBox .pic-bg').parents('.owl-item').index())
					.trigger('refresh.owl.carousel');
			}
			var smailBox = $('.user-orderBox .redBox .owl-stage-outer'),
				smailBox_top = smailBox.offset().top,
				smailBox_left = smailBox.offset().left+20,
				smailBox_width = smailBox.width()/box_n,
			smailBox_height = smailBox.height();
			var same = false;
			$(".delete").each(function(){
			  var o_sid = $(this).attr('sid');
			  if(o_sid == sid){
				same = true;
				$(this).prev('.pricebox').find('.font-red').html(_jsLang.Language_Currency+img_price+' x '+img_amount+'件');
			  }
			});
			// for($i=0;$i<img_amount;$i++){
			if(same == false){
				var html = '<div class="orderProduct hidebox"><img src="'+img_src+'""><div class="title">'+img_title+'<div class="pricebox"><span class="font-red">'+_jsLang.Language_Currency+img_price+' x '+img_amount+'件'+'</span></div><a class="delete" sid="'+sid+'" pair="'+_pair+'">'+_jsLang.刪除+'</a></div></div>';
				owl_red.find('.orderSlideRGP').trigger('to.owl.carousel',[0,0,true])
				.trigger('add.owl.carousel',[$(html),0])
				.trigger('refresh.owl.carousel');
			}
			var choseImg =  $(this).parents('.productBox').find('.productImg'),
				Img_html = choseImg.clone().addClass('moveImg'),
				choseImg_top = choseImg.offset().top,
				choseImg_left = choseImg.offset().left,
				choseImg_width = choseImg.width(),
				choseImg_height = choseImg.height();
			$('body').append(Img_html);
			$('.moveImg').css({'top':choseImg_top,'left':choseImg_left,'width':choseImg_width,'height':choseImg_height})
				.animate({
				'top': smailBox_top,
				'left': smailBox_left,
				'width': smailBox_width,
				'height': smailBox_height
			},350, function() {
				$(this).remove();
			});

		}else if($(this).parents('.greenBox').length != 0){
			if($('.greenBox .pic-bg').length == 1){
				owl_green.find('.orderSlideRGP').trigger('remove.owl.carousel',$('.greenBox .pic-bg').parents('.owl-item').index())
					.trigger('refresh.owl.carousel');
			}
			var smailBox = $('.user-orderBox .greenBox .owl-stage-outer'),
				smailBox_top = smailBox.offset().top,
				smailBox_left = smailBox.offset().left+20,
				smailBox_width = smailBox.width()/box_n,
			smailBox_height = smailBox.height();
			var same = false;
			$(".delete").each(function(){
			  var o_sid = $(this).attr('sid');
			  if(o_sid == sid){
				same = true;
				$(this).prev('.pricebox').find('.font-red').html(_jsLang.Language_Currency+img_price+' x '+img_amount+'件');
			  }
			});

			// for($i=0;$i<img_amount;$i++){
			if(same == false){
				var html = '<div class="orderProduct hidebox"><img src="'+img_src+'""><div class="title">'+img_title+'<div class="pricebox"><span class="font-red">'+_jsLang.Language_Currency+img_price+' x '+img_amount+'件'+'</span></div><a class="delete" sid="'+sid+'" pair="'+_pair+'">'+_jsLang.刪除+'</a></div></div>';
				owl_green.find('.orderSlideRGP').trigger('to.owl.carousel',[0,0,true])
					.trigger('add.owl.carousel',[$(html),0])
					.trigger('refresh.owl.carousel');
			}
			var choseImg =  $(this).parents('.productBox').find('.productImg'),
				Img_html = choseImg.clone().addClass('moveImg'),
				choseImg_top = choseImg.offset().top,
				choseImg_left = choseImg.offset().left,
				choseImg_width = choseImg.width(),
				choseImg_height = choseImg.height();
			$('body').append(Img_html);
			$('.moveImg').css({'top':choseImg_top,'left':choseImg_left,'width':choseImg_width,'height':choseImg_height})
				.animate({
				'top': smailBox_top,
				'left': smailBox_left,
				'width': smailBox_width,
				'height': smailBox_height
			},350, function() {
				$(this).remove();
			});
		}else if($(this).parents('.orangeBox').length != 0){
			if($('.orangeBox .pic-bg').length == 1){
				owl_orange.find('.orderSlideRGP').trigger('remove.owl.carousel',$('.orangeBox .pic-bg').parents('.owl-item').index())
					.trigger('refresh.owl.carousel');
			}
			var smailBox = $('.user-orderBox .orangeBox .owl-stage-outer'),
				smailBox_top = smailBox.offset().top,
				smailBox_left = smailBox.offset().left+20,
				smailBox_width = smailBox.width()/box_n,
			smailBox_height = smailBox.height();
			var same = false;
			$(".delete").each(function(){
			  var o_sid = $(this).attr('sid');
			  if(o_sid == sid){
				same = true;
				$(this).prev('.pricebox').find('.font-red').html(_jsLang.Language_Currency+img_price+' x '+img_amount+'件');
			  }
			});
			// for($i=0;$i<img_amount;$i++){
			if(same == false){
				var html = '<div class="orderProduct hidebox"><img src="'+img_src+'""><div class="title">'+img_title+'<div class="pricebox"><span class="font-red">'+_jsLang.Language_Currency+img_price+' x '+img_amount+'件'+'</span></div><a class="delete" sid="'+sid+'" pair="'+_pair+'">'+_jsLang.刪除+'</a></div></div>';
				owl_orange.find('.orderSlideRGP').trigger('to.owl.carousel',[0,0,true])
					.trigger('add.owl.carousel',[$(html),0])
					.trigger('refresh.owl.carousel');
			}
			var choseImg =  $(this).parents('.productBox').find('.productImg'),
				Img_html = choseImg.clone().addClass('moveImg'),
				choseImg_top = choseImg.offset().top,
				choseImg_left = choseImg.offset().left,
				choseImg_width = choseImg.width(),
				choseImg_height = choseImg.height();
			$('body').append(Img_html);
			$('.moveImg').css({'top':choseImg_top,'left':choseImg_left,'width':choseImg_width,'height':choseImg_height})
				.animate({
				'top': smailBox_top,
				'left': smailBox_left,
				'width': smailBox_width,
				'height': smailBox_height
			},350, function() {
				$(this).remove();
			});
		}else if($(this).parents('.blueBox').length != 0){
			//標籤3
			if($('.blueBox .pic-bg').length == 1){
				owl_blue.find('.orderSlideRGP').trigger('remove.owl.carousel',$('.blueBox .pic-bg').parents('.owl-item').index())
					.trigger('refresh.owl.carousel');
			}
			var smailBox = $('.user-orderBox .blueBox .owl-stage-outer'),
				smailBox_top = smailBox.offset().top,
				smailBox_left = smailBox.offset().left+20,
				smailBox_width = smailBox.width()/box_n,
			smailBox_height = smailBox.height();
			var same = false;
			$(".delete").each(function(){
			  var o_sid = $(this).attr('sid');
			  if(o_sid == sid){
				same = true;
				$(this).prev('.pricebox').find('.font-red').html(_jsLang.Language_Currency+img_price+' x '+img_amount+'件');
			  }
			});

			// for($i=0;$i<img_amount;$i++){
			if(same == false){
				var html = '<div class="orderProduct hidebox"><img src="'+img_src+'""><div class="title">'+img_title+'<div class="pricebox"><span class="font-red">'+_jsLang.Language_Currency+img_price+' x '+img_amount+'件'+'</span></div><a class="delete" sid="'+sid+'" pair="'+_pair+'">'+_jsLang.刪除+'</a></div></div>';
				owl_blue.find('.orderSlideRGP').trigger('to.owl.carousel',[0,0,true])
					.trigger('add.owl.carousel',[$(html),0])
					.trigger('refresh.owl.carousel');
			}
			var choseImg =  $(this).parents('.productBox').find('.productImg'),
				Img_html = choseImg.clone().addClass('moveImg'),
				choseImg_top = choseImg.offset().top,
				choseImg_left = choseImg.offset().left,
				choseImg_width = choseImg.width(),
				choseImg_height = choseImg.height();
			$('body').append(Img_html);
			$('.moveImg').css({'top':choseImg_top,'left':choseImg_left,'width':choseImg_width,'height':choseImg_height})
				.animate({
				'top': smailBox_top,
				'left': smailBox_left,
				'width': smailBox_width,
				'height': smailBox_height
			},350, function() {
				$(this).remove();
			});
		};
		callback();
	});
});






// ==========================================================
//  水平滑動功能
// ==========================================================
;(function($) {
	let mouseStart = null
	const initObj = {
		nav: '.dropmove-nav',
		prev: '.nav-prev',
		next: '.nav-next',
		parent: '.dropmove-wrapper',
		target: '.dropmove-list',
		move: 500,
		delay: 750,
	}
	let fullChildWidth
	$(window).on('resize', function(e) {
		fullChildWidth = 0
		$(initObj.target).children().each(function(i, item) {
			fullChildWidth += $(item).outerWidth(true)
		})
		arrowCheck({}, fullChildWidth)

	}).trigger('resize')
	
	
	function arrowCheck(obj, fullWidth) {
		const setting = (obj)? $.extend({}, initObj, obj): $.extend({}, initObj)
		
		if($(setting.target).scrollLeft() >= fullWidth - $(setting.target).width()) {
			$(setting.next).addClass('in-disable')
		} else {
			$(setting.next).removeClass('in-disable')

		}
		if($(setting.target).scrollLeft() <= 0) {
			$(setting.prev).addClass('in-disable')
		} else {
			$(setting.prev).removeClass('in-disable')
		}
		// console.log($(setting.target).scrollLeft(), fullWidth - $(setting.target).width())
	}
	function clickMove(obj) {
		const setting = (obj)? $.extend({}, initObj, obj): $.extend({}, initObj)
		
		
		if($(setting.target).width() < fullChildWidth) {
			$(setting.nav).removeClass('in-disable')
		} else {
			$(setting.nav).addClass('in-disable')
		}
		
		arrowCheck(obj, fullChildWidth)
		
		$(setting.prev).on('click', function(e) {
			const targetItem = $(this).parents(setting.parent).find(setting.target)
			targetItem.stop(true, false)
			
			let scrollTarget
			if(targetItem.scrollLeft() - setting.move <= 0) {
				scrollTarget = 0
				$(setting.prev).addClass('in-disable')
				$(setting.next).removeClass('in-disable')
			} else {
				scrollTarget = targetItem.scrollLeft() - setting.move
				$(setting.next).removeClass('in-disable')
			}
			
			targetItem.animate({
				scrollLeft: scrollTarget
			}, setting.delay)
		})
		
		$(setting.next).on('click', function(e) {
			const targetItem = $(this).parents(setting.parent).find(setting.target)
			targetItem.stop(true, false)
			
			let scrollTarget
			if(targetItem.scrollLeft() + setting.move >= fullChildWidth - targetItem.width()) {
				scrollTarget = fullChildWidth - targetItem.width()
				$(setting.next).addClass('in-disable')
				$(setting.prev).removeClass('in-disable')
			} else {
				scrollTarget = targetItem.scrollLeft() + setting.move
				$(setting.prev).removeClass('in-disable')
			}
			
			targetItem.animate({
				scrollLeft: scrollTarget
			}, setting.delay)
		})
	}
	
	// mouse event
	$('.dropmove-list').on('mousedown', function(e) {
		e.preventDefault()
		mouseStart = e.screenX
	})
	$('.dropmove-list').on('mouseup', function(e) {
		e.preventDefault()
		mouseStart = null
	})
	
	$('.dropmove-list').on('mousemove', function(e) {
		e.preventDefault()
		if(mouseStart !== null) {
			$('.dropmove-list').scrollLeft($('.dropmove-list').scrollLeft()+(mouseStart - e.screenX))
			mouseStart = e.screenX
			
			arrowCheck({}, fullChildWidth)
		}
	})
	
	// touch event
	$('.dropmove-list').on('touchstart', function(e) {
		const touchEvent = e.originalEvent.touches[0]
		// e.preventDefault()
		mouseStart = touchEvent.clientX
	})
	$('.dropmove-list').on('touchend', function(e) {
		// e.preventDefault()
		mouseStart = null
	})
	
	$('.dropmove-list').on('touchmove', function(e) {
		const touchEvent = e.originalEvent.touches[0]
		// e.preventDefault()
		if(mouseStart !== null) {
			$('.dropmove-list').scrollLeft($('.dropmove-list').scrollLeft()+(mouseStart - touchEvent.clientX))
			mouseStart = touchEvent.clientX
			
			arrowCheck({}, fullChildWidth)
		}
	})

	clickMove({
		move: 200,
		delay: 250,
	})
})($)