$(function(){
	/* 上方切換列，該分類所有商品 */
	$(".top_productbox").addClass('owl-carousel').owlCarousel({
		loop : false,
		responsive:{
			0:{
				items : 2
			},
			320:{
				items : 3
			},
			480:{
				items : 6
			},
			660:{
				items : 8
			},
			768:{
				items : 9
			},
			1023:{
				items : 10
			}
		},
		nav : true,
    navText:["",""],
	});
	//猜你喜歡，瀏覽紀錄，其他人也買了
	$("article .recommend_l,article .history_l,article .other_l").addClass('owl-carousel').owlCarousel({
		nav : true,
    navText:["",""],
		responsive:{
			0:{
				items : 2
			},
			480:{
				items : 3
			},
			768:{
				items : 4
			},
			1024:{
				items : 5
			}
		},
	});
	/*評論預覽商品圖*/
	$(".pic-box").on("click",".pic-over",function(){
		var _this = $(this),
			pic_src = _this.find("img").attr('src');
		_this.parents(".pic-box").find(".click").removeClass("click");
		_this.addClass("click");
		_this.parents(".pic-box").find(".pic-viewer").addClass("click")
		.find('img').attr({src: pic_src});
	});
	$('.pic-box').on('click', '.close', function(event) {
		var _this = $(this).parents(".pic-box");
		_this.find(".pic-viewer").removeClass("click");
		_this.find(".click").removeClass("click");
	});
	/* 使用者已選購區塊 */
    var owl_main = $(".mainbox .orderSlide");
    owl_main.addClass('owl-carousel').owlCarousel({
      responsive:{
        0:{
          items : 1
        },
        481:{
          items : 2
        },
        1025:{
          items : 3
        }
      },
        nav : true,
        navText:["",""],
        onRefresh : callback,
    });
    var owl_add = $(".addbox .orderSlide");
    owl_add.addClass('owl-carousel').owlCarousel({
      responsive:{
        0:{
          items : 1
        },
        481:{
          items : 2
        },
        1025:{
          items : 3
        }
      },
        nav : true,
        navText:["",""],
        onRefresh : callback,
    });
    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-big').html(),
			img_id    = $(this).attr("SID"),
			img_num   = img.find('.num-select').val();

		var html = '<div class="hidebox orderProduct '+img_id+'"><img src="'+img_src+'""><div class="title">'+img_title+'<div class="pricebox"><span class="font-red">'+_jsLang.Language_Currency+img_price+'</span></div><a class="delete" del_id="'+img_id+'" add_type="2">'+_jsLang.刪除+'</a></div></div>';
        var smailBox = $('.addbox .orderSlide'),
            smailBox_top = smailBox.offset().top,
            smailBox_left = smailBox.offset().left,
            smailBox_width = smailBox.width()/2,
            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);
    });

	const productImg = $('.productView > .productImg');
	function bigPicCheck() {
		const zoomBoxCheck = $('.owl-item.active > .zoonbox').hasClass('zoom-box');
		const windowSizeCheck = $(window).width() <= 768;

		if (zoomBoxCheck && windowSizeCheck){
			$('#big_picture').removeClass('hidden');
			$('#big_picture').show();
			$('#big_picture + .previewBox').show();
		} else {
			$('#big_picture').addClass('hidden');
			$('#big_picture').hide();
			$('#big_picture + .previewBox').hide();
		}
	}
	if ($(".productImg .picbox ").length > 1){
		let target = productImg.addClass('owl-carousel').owlCarousel({
	        loop : true,
	        items : 1,
	        nav : true,
	        navText : ['','']
	    });
	    target.on('translated.owl.carousel', function(e) {
	    	bigPicCheck();
	    });
	}

	$('.zoonbox').eq(0).addClass('now').parent('.owl-item').addClass('active');
	bigPicCheck();

    var moreview_owl = $('.moreview');
	if($(".moreview .picitem ").length > 5){
        moreview_owl.addClass('owl-carousel').owlCarousel({
 			loop:false,
			items : 5,
			nav : true,
      navText:["",""],
		});
	}else{
		$(".moreview .picitem ").css('width','20%');
	}
    let moreviewStep = 0
	productImg.on('changed.owl.carousel', function(event) {
	    const cloneOffset = Math.ceil(event.item.count / 2)
	    const itemIndex = (event.item.index + event.item.count - cloneOffset) % event.item.count
	    const moreviewPage = Math.floor(itemIndex / 5)

	    if(moreviewPage !== moreviewStep) {
	    	moreviewStep = moreviewPage
	    	moreview_owl.trigger('to.owl.carousel', moreviewPage * 5);
	    }

	    $('.moreview .picitem').removeClass('now').eq(itemIndex).addClass('now');
	});

	productImg.on('translate.owl.carousel', function(e){
	    $('.productView .productImg .owl-item').find('video').each(function(){
	        $(this).get(0).pause();
	    })
	    $('.moreview .video_control').addClass('fa-play').removeClass('fa-pause');
	})
	productImg.on('translated.owl.carousel', function(e){
	    if($('.productView .productImg .owl-item.active').find('video').length > 0){
	        var video = $('.productView .productImg .owl-item.active').find('video').get(0);
	        video.play();
	        moreview_Video(video)
	    }
	})
  $(document).on("click", ".moreview .picitem", function(){
    let _this = $(this),
        pointer = _this.data("pointer")
    
    $('.moreview .picitem').removeClass('now')
    _this.addClass('now');
    $(".productView .productImg").trigger('to.owl.carousel', pointer.replace("prodpic_",""))
  })



/* 主商品選購效果 */
	$('.addButton').on('click',function(){
		var n = parseInt($('.select_num').val()) + parseInt($('#Left_Total').val());
		if($('.select_num').val()=='數量'){n=0;}
        if(n>5){
            alert('主商品最多5件');
            n=5;
        }

        var img = $('.zoonbox:eq(2) .picbox'),
            img_src = img.find('img').attr('src'),
            img_title = $('.prodBox .productTitle .nameBox').html(),
            img_price = $('.prodBox .productTitle .font-big').html(),
            img_class = $('.select_num').parents('p').attr('group'),
			img_id    = $('.select_num').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">'+_jsLang.Language_Currency+img_price+'</span></div><a class="delete" del_id="'+img_id+'" add_type="1">'+_jsLang.刪除+'</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;

		$('.productView').on('mouseenter', '.zoom-box', function(e) {
			let big_pic = $(this).attr('big-pic');
			$(this).zoom({
				url: "/tw/upload_files/fonlego-rwd/prodpic/" + big_pic,
				magnify: 1
			});
		});
    }else if(_window.width() <= 768 && change!= 768){
        change = 768;
    };
    $('article').on('click','.open-preview',function(){
    	var nowitem = $('.productImg .active').prevAll('.owl-item:not(".cloned")').length;


    	$('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').on('mouseenter', '.zoonbox', function(e) {
				let big_pic = $(this).attr('big-pic');
				$(this).zoom({
					url: "/tw/upload_files/fonlego-rwd/prodpic/" + big_pic,
					magnify: 1
				});
			});
        }else if(_window.width() <= 768 && change != 768){
            change = 768;
        };
    });
});

    function smallPicBox(){
		 /* 小圖hover效果及切換功能 */
        $(".productTitle .moreview").addClass('owl-carousel').owlCarousel({
 			items : 5,
			nav : true,
      navText:["",""],
		})
		.on('mouseleave','.owl-stage-outer', function() {
			$(".productView .zoonbox").removeAttr('style');
		})
		.on('click','.owl-item', function() {
			var now = $(this).index();
			$(".productTitle .owl-item").not(this).find('.picitem').removeClass('now');
			$(this).find('.picitem').addClass('now');
			$(".productView .zoonbox").removeClass('now').eq(now).addClass('now');
			})
		.on('mouseenter','.owl-item', function() {
			var now = $(this).index();
			//var nowbox = $('.productImg .now').index();
			//console.log(nowbox );
			$(".productView .zoonbox").css('display','none').eq(now).css('display','block');
			 	//$('.productImg .now').css('display','none');
		})
		.on('mouseleave','.owl-item', function() {
			var now = $(this).index();
			$(".productView .zoonbox").eq(now).css('display','none');
		});
    }
     	/* 放大鏡效果 */
	 function zoonbox(){
		var ImgBox,ImgBox_h,ImgBox_w,viewbox,viewbox_h,viewbox_w,viewbox_b,viewbox_r,preview,preview_img,scale_h,scale_w
			preview_str= '<div class="preview">';
			$('.productView').off('mouseenter mousemove mouseleave','.picbox');
		$('.productView').on('mouseenter','.picbox',function(){
			ImgBox=$('.productImg .now').offset();

			var zoonbox_now = $(this).parents('.zoonbox'),
			big_pic = zoonbox_now.attr('big-pic');
			var _this = $(this);
				viewbox = _this.find('.viewbox');
		   var image = new Image();
		    image.src = "/upload_files/fonlego-rwd/prodpic/"+big_pic;
		    image.onload = function() {
		    	ImgBox_h = image.height;
		    	ImgBox_w = image.width;
		    	scale_h = _this.height()/ImgBox_h;
		    	scale_w = _this.width()/ImgBox_w;
				viewbox_h = _this.height()*(scale_h);
				viewbox_w = _this.width()*(scale_w);
				viewbox_b = _this.height()-viewbox_h;
				viewbox_r = _this.width()-viewbox_w;

				viewbox.css({
					'opacity':1,
					'height':viewbox_h,
					'width':viewbox_w,
				});
				preview_str += '<img src="/tw/upload_files/fonlego-rwd/prodpic/'+big_pic+'" style="max-width:none;max-height:none;max-width:initial;width:auto;width:'+ImgBox_w+'px;" ></div>';
				zoonbox_now.append(preview_str);
				preview = zoonbox_now.find('.preview');
				preview_img = preview.find('img');
			}
		})
		.on('mousemove','.picbox',function(e){
			if(ImgBox.top){
				var bigpicTop = e.pageY-ImgBox.top,
					bigpicLeft = e.pageX-ImgBox.left;
				if(bigpicTop-(viewbox_h/2) > 0 && bigpicTop-(viewbox_h/2) < viewbox_b ){
					viewbox.css({
						'top':bigpicTop-(viewbox_h/2),
					});
					preview_img.css({
						'top':(-bigpicTop+(viewbox_h/2))/scale_h,
					});
				}else if(bigpicTop-(viewbox_h/2) < 0 ){
					viewbox.css({
						'top':0,
					});
					preview_img.css({
						'top':0,
					});
				}else if(bigpicTop-(viewbox_h/2) > viewbox_b ){
					viewbox.css({
						'top': viewbox_b,
					});
					preview_img.css({
						'top':-viewbox_b/scale_h,
					});
				}
				if( bigpicLeft-(viewbox_w/2) > 0 && bigpicLeft-(viewbox_w/2)< viewbox_r  ){
					viewbox.css({
						'left':bigpicLeft-(viewbox_w/2),
					});
					preview_img.css({
						'left':(-bigpicLeft+(viewbox_w/2))/scale_w,
					});
				}else if( bigpicLeft-(viewbox_w/2) < 0 ){
					viewbox.css({
						'left':0,
					});
					preview_img.css({
						'left':0,
					});
				}else if( bigpicLeft-(viewbox_w/2) > viewbox_r ){
					viewbox.css({
						'left':viewbox_r,
					});
					preview_img.css({
						'left':-viewbox_r/scale_w,
					});
				}
			}
		})
		.on('mouseleave','.picbox',function(){
			$('.productImg .viewbox').css({
				'opacity':0,
			});
			$('.productImg .preview').remove();
			preview_str= '<div class="preview">'
		});
	 }
	 /*影片效果*/
	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);
			};
		}
	}