$(function(){
	const orderSetting = {
		responsive:{
			0:{
				items : 1
			},
			480:{
				items : 2
			},
			800:{
				items : 3
			}
		},
        nav : true,
        onRefresh : callback,
        margin: 10,
    }

	/* 使用者已選購區塊 */
    var owl_main = $(".mainbox .orderSlide");
    owl_main.owlCarousel(orderSetting);
    var owl_add = $(".addbox .orderSlide");
    owl_add.owlCarousel(orderSetting);
    function callback(event){
      setTimeout(function(){
        $('.hidebox').animate({'opacity':1}).removeClass('hidebox');
      }, 300);
    }
    /* 加購商品選購效果 */
    $('article > .content-add ').on('click','.button1',function(){

        var img = $(this).parents('.productBox'),
            img_src = img.find('img').attr('src'),
            img_title = img.find('.title').html(),
            img_price = img.find('.font-red').html(),
			img_id    = $(this).attr("SID"),
			img_num   = img.find('.amountBox').val();
	    if(img_num == '無庫存'){
	      return false;
	    }
		var html = '<div class="hidebox orderProduct '+img_id+'"><img src="'+img_src+'""><div class="title"><div class="name">'+img_title+'</div><div class="pricebox"><span class="font-red">'+img_price+'</span></div><a class="delete" del_id="'+img_id+'" add_type="2">刪除</a></div></div>';
        var smailBox = $('.addbox .orderSlide'),
            smailBox_top = smailBox.offset().top,
            smailBox_left = smailBox.offset().left,
            smailBox_width = smailBox.width()/4,
            smailBox_height = smailBox.height()-20;
		for(var i=0;i<img_num;i++){
			owl_add.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();
        // console.log(choseImg_left);
        $('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();
    });
/* 使用者已選購區塊刪除功能 */
    owl_add.on('click','.delete',function(){
      var delitem = $(this).parents('.owl-item');
      delitem.find('.title').remove();
      delitem.animate({'opacity':0},300).animate({'width':0},300);
      setTimeout(function(){
        owl_add.trigger('remove.owl.carousel',delitem.index())
            .trigger('refresh.owl.carousel');
      }, 700);
    });
    owl_main.on('click','.delete',function(){
		var delitem = $(this).parents('.owl-item');
		delitem.find('.title').remove();
		delitem.animate({'opacity':0},300).animate({'width':0},300);
		setTimeout(function(){
			owl_main.trigger('remove.owl.carousel',delitem.index())
		    	.trigger('refresh.owl.carousel');
		}, 700);
    });

/* 主商品選購效果 */
	$('.select_num').on('change',function(){
		var n = parseInt($(this).val());
		if($(this).val()=='數量'){n=0;}

        var img = $('.zoonbox:first-child .picbox'),
            img_src = img.find('img').attr('src'),
            img_title = $('.productTitle .nameBox').html(),
            img_price = $('.productTitle .font-big').html(),
            img_class = $(this).parents('p').attr('group'),
			img_id    = $(this).attr("sid");
		if($(window).width()<=768){
			img = $('.productView .productImg .picbox').first();
			img_src = img.find('img').attr('src');
		}
		var html = '<div class="orderProduct '+img_class+'"><img src="'+img_src+'""><div class="title"><div class="name">'+img_title+'</div><div class="pricebox"><span class="font-red">NT$'+img_price+'</span></div><a class="delete" del_id="'+img_id+'" add_type="1">刪除</a></div></div>';		var now_order = $('.mainbox .'+ img_class);

        var change_n = n-now_order.length;
		if(change_n>0){
	        for(var i=0;i<change_n;i++){
		        owl_main.trigger('to.owl.carousel',[0,0,true])
		        .trigger('add.owl.carousel',[$(html),0])
		        .trigger('refresh.owl.carousel');
	        }
	        var smailBox = $('.mainbox .orderSlide'),
	            smailBox_top = smailBox.offset().top,
	            smailBox_left = smailBox.offset().left+20,
	            smailBox_width = (smailBox.width()-40)/2,
	            smailBox_height = smailBox.height()-20;

	        var choseImg =  $('.zoonbox:first-child .picbox'),
	            Img_html = choseImg.clone().addClass('moveImg'),
	            choseImg_top = choseImg.offset().top,
	            choseImg_left = choseImg.offset().left,
	            choseImg_width = choseImg.width(),
	            choseImg_height = choseImg.height();
	        // console.log(choseImg_left);
	        $('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(change_n<0){
			var _class = new Array();
			$('.orderProduct').each(function(){
				_class.push($(this).attr('class').substring(13));
			});
			var delitem = $('.mainbox .'+ img_class+':lt('+-change_n+')');
			var _first  = jQuery.inArray(img_class,_class);
			delitem.find('.title').remove();
			delitem.animate({'opacity':0},300).animate({'width':0},300);
			setTimeout(function(){
	        	for(var i=0;i<delitem.length;i++){
					owl_main.trigger('remove.owl.carousel',delitem.eq(i).index()+_first)
				    .trigger('refresh.owl.carousel');
				}
			}, 700);
        }
		callback();
	});
	// var _window = $(window);

 //    var change = 0;
 //    var moreview = false;
 //    if(_window.width() > 769 && change!=960 ){
	// 		change = 960;
	// 		moreview = true;
	// 		smallPicBox();
	// 		// zoonbox();
	// 		videoBox();
 //    }else if(_window.width() <= 768 && change!= 768){
 //        change = 768;
 //        var this_sid = $(".colorbox").eq(0).attr("sid");
 //       	if(!this_sid){
 //       		this_sid = $(".act5_to_cart").attr("sid");
 //       	}
	// 	$.get('/activities/ajax/activitiesView_moblie.php',{sid:this_sid}, function(data,status){
	// 		$('.productView').html(data)
	// 		$('.productImg').owlCarousel({
	// 	         loop : false,
	// 	        items : 1,
	// 	        nav : true,
	// 	    });
	// 		$('.productImg').on('changed.owl.carousel',function(e){
	// 			var num  = e.item.index;
	// 			if(document.getElementById("Video")){
	// 				if($(".productView").find(".owl-item").eq(num).find("#Video").attr("class")){
	// 					$("#big_picture").hide();
	// 					document.getElementById("Video").play();
	// 				}else{
	// 					$("#big_picture").show();
	// 					document.getElementById("Video").pause();
	// 				}
	// 			}
	// 		});
	// 	});
 //    };
  //   $('article').on('click','.open-preview',function(){
  //   	var nowitem = $('.productImg .active').prevAll('.owl-item').length-2;


  //   	$('article .previewbox').css('display','block')
		// .find('img').eq(nowitem).css('display','block');
  //   });
  //   $('article').on('click','.close',function(){
  //   	$('article .previewbox').removeAttr('style')
		// .find('img').removeAttr('style');
  //   });
   //  _window.on('resize',function(){
   //      if(_window.width() > 768 && change != 960){

   //          change = 960;
			// $('.productView .moreview').removeAttr('style');
			// $.get('/activities/ajax/activitiesView_pc.php',{sid:$(".colorbox").eq(0).attr("sid")}, function(data,status){
			// 	$('.productView').html(data);
		 //        change = 960;
		 //        moreview = true;
		 //        smallPicBox();
   //          	// zoonbox();
			// 	videoBox();
			// });
   //      }else if(_window.width() <= 768 && change != 768){

   //          change = 768;
	  //       var this_sid = $(".colorbox").eq(0).attr("sid");
	  //      	if(!this_sid){
	  //      		this_sid = $(".act5_to_cart").attr("sid");
	  //      	}
	  //       $.get('/activities/ajax/activitiesView_moblie.php',{sid:this_sid}, function(data,status){
			// 	$('.productView').html(data)
			// 	$('.productImg').owlCarousel({
			//          loop : false,
			//         items : 1,
			//         nav : true,
			//     });
			// });
			// $('.productImg').on('changed.owl.carousel',function(e){
			// 	var num  = e.item.index;
			// 	if(document.getElementById("Video")){
			// 		if($(".productView").find(".owl-item").eq(num).find("#Video").attr("class")){
			// 			$("#big_picture").hide();
			// 			document.getElementById("Video").play();
			// 		}else{
			// 			$("#big_picture").show();
			// 			document.getElementById("Video").pause();
			// 		}
			// 	}
			// });
   //      };
   //  });
});
;(function($) {
    let productStep = ''

    $(window).on('resize', function(e) {
    	
    	// ==========================================================
    	// 	商品圖片展示區塊
    	// ==========================================================
		const mainWrap = $(".productView")
		const previewWrap = $('.productImg')

    	if($(this).width() > 1024 && productStep !== 'desktop') {
    		productStep = 'desktop'

    		if(previewWrap.data('owl.carousel')) {
    			previewWrap.data('owl.carousel').destroy()
    		}

	        if($(".moreview .picitem").length > 5){
		        mainWrap.find(".moreview").addClass('with-padding').owlCarousel({
		 			loop:false,
					items: 5,
					nav: true,
					dots: false,
					margin: 7,
				}).on('mouseenter','.owl-item', function(e) {
	                thumbnailChange(this, mainWrap)
				}).on('click','.owl-item', function(e) {
					thumbnailChange(this, mainWrap)
	            })
			}else{
				mainWrap.find(".moreview").on('mouseenter','.picitem', function() {
					thumbnailChange(this, mainWrap)
				}).on('click','.picitem', function() {
					thumbnailChange(this, mainWrap)
				})
			}
    	} else if($(this).width() <= 1024 && productStep !== 'tablet') {
    		productStep = 'tablet'

    		if(mainWrap.find(".moreview").data('owl.carousel')) {
    			mainWrap.find(".moreview").data('owl.carousel').destroy()
    		}

    		previewWrap.owlCarousel({
    			items: 1,
    			margin: 10,
    			nav: true,
    			dots: false,
    		}).on('translated.owl.carousel', function(e) {
    			const itemIndex = $(this).find('.owl-item.active').index()
    			
    			$(this).find('.picbox').removeClass('now')
    			$($(this).find('.picbox')[itemIndex]).addClass('now')
    			//zoomPictureCheck(this)
    		})
    	}

    	
    	
    	
    	
    	// ==========================================================
    	// 	商品放大鏡位置調整
    	// ==========================================================
    	if($(this).width() > 1024) {
    		const offsetValue = $('.productView').width() - $('.open-preview').height() - 10
    		$('.open-preview').css('top', offsetValue)
    	} else {
    		$('.open-preview').removeAttr('style')
    	}
    })


      //===========================================================
      // 放大鏡預覽可換頁 start
      //===========================================================
      $('.previewbox .preview-content').owlCarousel({
        items: 1,
        nav: true,
        dots: false
      })
      //===========================================================
      // 放大鏡預覽可換頁 end
      //===========================================================
    	
      
      
      //===========================================================
      // 放大鏡預覽翻頁到目前點選 start
      //===========================================================
      function zoomPictureSwitch(){
        let bodyWidth = document.body.clientWidth
        let activeIndex = 0
        if(bodyWidth > 1024){
          activeIndex = $('.productImg .now').index()
        }else{
          activeIndex = $('.productImg .active').index()
        }
        $('.previewbox .preview-content').trigger('to.owl.carousel',[activeIndex,0,true])
      }
      //===========================================================
      // 放大鏡預覽翻頁到目前點選 end
      //===========================================================
    $(window).trigger('resize')

    // 放大圖開關
    $('article').on('click','.open-preview',function(){
      zoomPictureSwitch()
      overflowTop = $(window).scrollTop()
      $('#wrapper').addClass('overflow-hidden').scrollTop(overflowTop - ($('body').innerHeight() - $('body').height()))
    	$('article .previewbox').css('display', 'block')
    });
    $('article').on('click','.close',function(){
    	$('article .previewbox').removeAttr('style')
    	$('#wrapper').removeClass('overflow-hidden').scrollTop(0)
    	$(window).scrollTop(overflowTop)
    });

    // 放大圖切換
    function zoomPictureCheck(checkObj) {
		const activeItem = $(checkObj).find('.picbox.now')[0]
		const newAry = []
		$(checkObj).find('.picbox').each(function(index, item) {
			newAry.push(item)
		});
		const activeIndex = newAry.indexOf(activeItem)
		$('.previewbox').children('img').eq(activeIndex).css('display', 'block').siblings('img').removeAttr('style')
    }

    // 縮圖對應大圖展示
	function thumbnailChange(thisItem, mainWrap) {
		const nowIndex = $(thisItem).index();

		mainWrap.find('.picbox').eq(nowIndex).addClass('now').siblings('.picbox').removeClass('now')
		mainWrap.find('.picitem').removeClass('now')
		$(mainWrap.find('.picitem')[nowIndex]).addClass('now')
		//zoomPictureCheck(mainWrap)
	}
})($)
    
 /*影片效果*/
function videoBox(){
	//影片控制
	$(".moreview").on('click','.video_control',function(){
	  var video = document.getElementById("Video");
	  if(video.paused){
		  $(this).addClass('fa-pause').removeClass('fa-play');
		  video.play();
	  }else{
		  $(this).addClass('fa-play').removeClass('fa-pause');
		  video.pause();
	  }
	});
	//影片預覽圖
	if(document.getElementById("Video")){
		document.getElementById("Video").oncanplay=function(){
			var video = $("#Video").get(0);
			var canvas = document.getElementById("video_review");
				canvas.getContext('2d').drawImage(video, 0, 0, 66, 92);
		};
	}
}