const model = require('modules/module.js');
  (function($){
    
    //桌機商品圖彈窗
    model.pcProductPreview()
    
  	/* 回到購買處 */
  	$('.gobuy').on('click',function(){
  		var tol = $(window).height();
  		console.log(tol);
  		var buy = $('.button-line').offset().top-tol+50 ;
  	    $("html,body").scrollTop(buy);
  	});
	/*為JQ添加naturalWidth()和naturalHeight()方法，抓取圖片原始尺寸*/
    var
    props = ['Width', 'Height'],
    prop;


    while (prop = props.pop()) {
    (function (natural, prop) {
      $.fn[natural] = (natural in new Image()) ?
      function () {
      return this[0][natural];
      } :
      function () {
      var
      node = this[0],
      img,
      value;

      if (node.tagName.toLowerCase() === 'img') {
        img = new Image();
        img.src = node.src,
        value = img[prop];
      }
      return value;
      };
    }('natural' + prop, prop.toLowerCase()));
    }

	/*評論預覽商品圖*/
	$(".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");
	});

	/*上方banner廣告圖*/
	$(".top_productbox").owlCarousel({
		loop : false,
		responsive:{
			0:{
				items : 2
			},
			320:{
				items : 3
			},
			480:{
				items : 6
			},
			660:{
				items : 8
			},
			768:{
				items : 9
			},
			1023:{
				items : 10
			}
		},
		nav : true,

	});
    $('#preview').css('display','none');

	//$("article .recommend_l .slideitem,article .history_l .slideitem,article .other_l .slideitem").css('width',"98%");
	$("article .recommend_l,article .history_l,article .other_l").owlCarousel({
    slideBy:'page',
		navText: ['',''],
		responsive:{
			0:{
				items : 2,
				stagePadding: 25,
        margin: 10,
				nav : false
			},
			481:{
				items : 2,
				stagePadding: 40,
        margin: 10,
				nav : false
			},
			769:{
				items : 3,
				stagePadding: 90,
        margin: 20,
				nav : true
			},
			1025:{
				items : 4,
				stagePadding: 105,
        margin: 20,
				nav : true
			},
      1281:{
				items : 4,
				stagePadding: 120,
        margin: 20,
				nav : true
      },
      1441:{
				items : 4,
				stagePadding: 145,
        margin: 20,
				nav : true
      },
      1681:{
				items : 4,
				stagePadding: 172,
        margin: 20,
				nav : true
      }
		}
	});
    setTimeout(function(){
        $("article .recommend_l,article .history_l,article .other_l").fadeIn('slow',function(){
            $(this).css({'opacity':1});
        });
    },1000)

	var _window = $(window);
    var change = 0;
    var change_1023 = 0;
    var moreview = false;

    // ==========================================================
    // 	依寬度判斷行為
    // ==========================================================
    function productSlideMobile() {
		$('.productImg').owlCarousel({
	        loop : true,
	        items : 1,
	        nav : false,
	    });
    }
    function productSlideDesktop() {
		$('.productImg').owlCarousel({
	        loop : false,
	        items : 1,
	        nav : false,
	        dots: false,
	    });
    }

    _window.on('resize',function(){
		if(_window.width() <= 1023 && change_1023 != 1023){
	        change_1023 = 1023;
	    }else if(_window.width() > 1023 && change_1023 != 1200){
	    	change_1023 = 1200;
	    }
        if( _window.width() > 768 && change != 960){
 			 change = 960;
            $('.productView .moreview').removeAttr('style');
			$.get('/products/ajax/detail/productView_pc.php',{sid:$(".wishlist").attr("sid")}, function(data,status){
				$('.productView').html(data);

		        // productSlideDesktop();
		        moreview = true;
		        model.smallPicBox();
				model.videoBox();
				//model.zoomBox();
                

                if($(window).width()>1025){
                    var pic_h = $('.productView').width();
                    var m_h = $('moreview').height();
                    var tihs_h = pic_h - m_h;
                    $('.j-h').css('height',pic_h);

                    // alert($('.j-h').attr('class'));
                }

			});
			$('.item-1').off('click','img');

        }else if(_window.width() <= 768 && change != 768){
            change = 768;
	        $.get('/products/ajax/detail/productView_moblie.php',{sid:$(".wishlist").attr("sid")}, function(data,status){
				$('.productView').html(data);
				productSlideMobile();
				$('.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("style")){
							$("#big_picture").hide();
							document.getElementById("Video").play();
						}else{
							$("#big_picture").show();
							document.getElementById("Video").pause();
						}
					}
				});
			});

        };
    });

/*
if($(window).width()>1025){
    var pic_h = $('.productView').width();
    var m_h = $('moreview').height();
    var tihs_h = pic_h - m_h;
    $('.j-h').css('height',pic_h);

    alert($('.j-h').attr('class'));

}
*/



    //關閉跳窗
    $(".inner").on('click','.close',function(){
        $(".selectPopupBox").removeClass('is-show');
    });

    $('article').on('click','.open-preview',function(){
    	var nowitem = $('.productImg .active').prevAll('.owl-item').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.trigger('resize');
		
    // ==========================================================
    // 	推薦穿搭
    // ==========================================================
    $(".wear-suggest").owlCarousel({
      nav:false,
      dots:false,
      responsive:{
        0:{
          margin:10,
          items : 2,
          loop : true,
          stagePadding: 30
        },
        376:{
          margin:10,
          items : 2,
          loop : true,
          stagePadding: 40
        },
        481: {
          margin:15,
          items : 4
        }
      }
    })
    $(".suggest-full-items").owlCarousel({
      items:1,
      nav:true,
      dots:false
    })
    //穿搭跳窗
    $(".suggest-item").on("click", function(){
      let index = $(this).data("index")
      $(".suggest-full").removeClass("suggest-hide").addClass("suggest-show")
      $(".suggest-full-items").trigger("to.owl.carousel", [index, 500, true])
    })
    $(document).on("click",".suggest-closer", function(){
      $(".suggest-full").removeClass("suggest-show").addClass("suggest-hide")
    })
    $(document).on("click",".suggest-full", function(e){
      if($(e.target).hasClass("suggest-full")){
        $(".suggest-full").removeClass("suggest-show").addClass("suggest-hide")
      }
    })
    
    // ==========================================================
    // 	開箱影片
    // ==========================================================
    $(document).on("click", ".video-play", function(){
      let _this = $(this)
      let iframeSrc = _this.data("iframe-src")
      
      if(iframeSrc){
        if(document.body.clientWidth > 768){
          //桌機彈窗
          $(".video-popup-pc").find("iframe").prop("src", iframeSrc)
          $(".video-popup-pc").addClass("open")
        }else{
          _this.next(".videobox").find("iframe").prop("src", iframeSrc)
          _this.hide()
          _this.next(".videobox").show()
        }
      }
    })
    $(document).on("click", ".video-popup-closer", function(){
      $(".video-popup-pc").removeClass("open")
    })
    $(document).on("click", ".video-popup-pc", function(e){
      if($(e.target).hasClass("video-popup-pc")){
        $(".video-popup-pc").removeClass("open")
      }
    })
    

}(jQuery));

$('#Go_Comment').click(function(){
    $('#Go_Comment2').addClass('in-active');
    $('html,body').animate({
        scrollTop:$('#Go_Comment2').offset().top},{duration:500,easing:"swing"});
    return false;
})







// ==========================================================
// 	靜態頁跳窗 ajax
// ==========================================================
$(function() {
	const $wrap = $('body');
	function popupClose() {
		$wrap.find('.popupWrapper').removeClass('in-open');
		$('popupBlock').empty();
		$wrap.removeClass('popupBox-active');
	}
	$wrap.on('click', '.popupLink', function(e) {
		const filter = $(this).data('filter');
		const url = $(this).data('src');
		$.ajax({
			method: "GET",
			url,

		}).done(function(res) {
			let insertData = '';
			
			if(filter === "productSize") {
				console.log($($(res)[0]).children().html());
				$('.popupBlock').html($($(res)[0]).children().html());
			} else if(filter === "fittingReport") {
				console.log($($(res)[2]).children().html());
				$('.popupBlock').html($($(res)[2]).children().html());
			}
			// const insertData = $(res + filter).html();

			// console.log(res);
			// console.log($($(res)[2]).children().html());
			// $('.popupBlock').html(insertData);
			$wrap.find('.popupWrapper').addClass('in-open');
			$wrap.addClass('popupBox-active');
		}).error(function(err) {
			console.log(err)
		})
	})
	$wrap.on('click', '.popupCloser', function(e) {
		popupClose();
	})
	$wrap.on('click', '.popupWrapper', function(e) {
		if(e.target === e.currentTarget) {
			popupClose();
		}
	})
})

// ==========================================================
// 	客製化文字跳窗 ajax
// ==========================================================
$(function() {
    let customWrapper = $(".custom-wrapper")
    
    //開啟
    
    $(document).on("click", ".custom-trigger", function(){
        let sid = $(this).attr("sid"),
            pid = $(this).attr("pid")
        //第一次點擊時取得彈窗
        if($(".custom-content").length <= 0){
            $.ajax({
                url:'/products/ajax/detail/ajax_custom_popup.php',
                type:"POST",
                cache:false,
                async:true,
                data:{
                    sid:sid,
                    pid:pid
                },
                error:function(d){
                    alert('網路連線過慢，網頁請重新整理');
                },
                success:function(d){
                    $(".custom-wrapper").html(d);
                }
            })
        }else{
            redrawCanvas()
        }
        customWrapper.addClass("in-active")
    })
    
    //關閉
    $(document).on("click", ".custom-wrapper", function(e){
        if(e.target == e.currentTarget){
            customWrapper.removeClass("in-active")
        }
    })
    $(document).on("click", ".custom-closer", function(){
        customWrapper.removeClass("in-active")
    })
    
    //字體
    $(document).on("change", ".custom-select", function(){
        let _this = $(this),
            val = _this.val()
        _this.find("option[value="+val+"]").css("font-family", val)
        $(".setting-fontfamily ").css("font-family", val)
        redrawCanvas()
    })
    
    //顏色
    $(document).on("change", ".color-radio[name=customColor]", function(){
        let _this = $(this),
            val = _this.val()
        $(".setting-color").css("color", val)
        redrawCanvas()
    })
    
    //文字
    $(document).on("input", ".custom-input", redrawCanvas)
    
    function redrawCanvas(){
        let image = new Image(),
            canvas = $("#customCanvas"),
            canvasWidth = canvas[0].width,
            canvasHeight = canvas[0].height,
            context = canvas[0].getContext('2d'),
            textBoxWidth = canvasWidth * (parseInt(canvas.data("width")) / 100 ), //文本框寬度
            positionX = canvasWidth * (parseInt(canvas.data("left")) / 100 ), //文本框X軸位置
            positionXoffset = positionX, //最後運算的文本框X軸位置
            positionY = canvasHeight * (parseInt(canvas.data("top")) / 100 ), //文本框Y軸位置
            fontSize = parseInt(canvas.data("font-size")), //字體大小
            fontColor = $(".color-radio[name=customColor]:checked").val(), //顏色
            fontFamily = $(".custom-select").val(), //字型
            textAlign = canvas.data("text-align"), //對齊
            rotate = parseFloat(canvas.data("rotate")), //旋轉角度
            centerX = positionX + (textBoxWidth / 2), //文字框中心X座標
            centerY = 0 - (positionY + (fontSize / 2)) //文字框中心Y座標
        
        let tips = $(".input-tips"),
            textInput = $(".custom-input")
            text = textInput.val(),
            maxlength = parseInt(textInput.data("maxlength"))
        
        $(".input-length-now").text(text.length)
        
        if(text.length > maxlength){
            tips.removeClass("hide")
            textInput.addClass("theme-alert")
        }else{
            tips.addClass("hide")
            textInput.removeClass("theme-alert")
            
            //開始繪製
            image.src = canvas.data("src") //圖片
            
            //判斷text-align
            if(textAlign == 'center'){
                positionXoffset = positionX + (textBoxWidth / 2)
            }else if(textAlign == 'right'){
                positionXoffset = positionX + textBoxWidth
                
            }
            
            //清除畫布準備重繪
            //context.clearRect(0, 0, canvasWidth, canvasHeight)
            
            image.onload = function(){
                context.drawImage(image, 0, 0, canvasWidth, canvasHeight)
                
                
                
                //文本樣式
                context.textAlign = textAlign
                context.font = fontSize + 'px ' + fontFamily
                
                context.save()
                
                if(rotate){
                    let radius = Math.sqrt(Math.pow(centerX, 2) + Math.pow(centerY, 2)), //半徑
                        radians = -rotate * Math.PI / 180 //弧度
                        theta = Math.atan2(centerY, centerX),
                        thetaNew = theta + radians
                    
                    
                    
                    //旋轉支點為左上
                    rotationX = centerX - radius * Math.cos(thetaNew)
                    rotationY = centerY - radius * Math.sin(thetaNew)
                    
                    context.translate(rotationX , -rotationY)
                    context.rotate(rotate * Math.PI / 180)
                    
                }
                
                //文字框位置 除錯用
                //context.fillStyle = "rgba(0,0,0,.1)"
                //context.fillRect(positionX, positionY, textBoxWidth, fontSize)
                
                context.fillStyle = fontColor
                context.fillText(text, positionXoffset, positionY + fontSize)
                
                context.restore()
            }
        }
    }
    
    //保存/取消
    $(document).on("click", ".custom-btn", function(){
        let _this = $(this),
            sid = _this.attr("sid"),
            pid = _this.attr("pid"),
            type = "save",
            fontSelect = $(".custom-select"),
            colorRadio = $(".color-radio[name=customColor]"),
            textInput = $(".custom-input"),
            customFont = fontSelect.val(),
            customFontFile = $("#customFontFile").val(),
            customFontName = $("#customFontName").val(),
            customColor = $(".color-radio[name=customColor]:checked").val(),
            customColorName = $("#Color_Text").val(),
            customText = textInput.val()
        
        if(_this.hasClass("custom-cancel")){
            type = "cancel"
        }
        
        if(!customFont){
            alert(fontSelect.data("alert"))
            return false
        }
        
        if(!customColor){
            alert($(".custom-color").data("alert"))
            return false
        }
        
        if(!customText){
            alert(textInput.data("alert"))
            return false
        }
        
        if(customText.length > textInput.data("maxlength")){
            alert(textInput.data("toolong"))
            return false
        }
        
        
        $.ajax({
            url:'/products/ajax/detail/ajax_custom_change.php',
            type:"POST",
            cache:false,
            dataType: "JSON",
            async:true,
            data:{
                sid:sid,
                pid:pid,
                type:type,
                customFont: customFont,
                customColor: customColor,
                customColorName: customColorName,
                customText: customText,
                customFontFile: customFontFile,
                customFontName: customFontName
            },
            error:function(d){
                alert('網路連線過慢，網頁請重新整理');
            },
            success:function(d){
                //$(".custom-wrapper").html(d);
                $(".PopupBtn2").html(d.PopupBtn2)
                
                if(type == "save"){
                    let canvas_Img = $("#customCanvas")[0].toDataURL('image/jpeg', .9)
                    
                    $.ajax({
                        url:"/products/ajax/detail/ajax_canvas_saveImage.php",
                        type:"POST",
                        data: {
                                imgBase64: canvas_Img,
                                sid:sid,
                                pid:pid,
                                chk: true
                              },
                        cache:false,
                        success:function(d){
                        },
                        error:function(d){
                            alert('網路連線錯誤');
                        }
                    })
        
                    $(".custom-additional-charge").html(d.additionalCharge)
                    $(".selectPopupBox-custom").html(`
                        <div class="hide" id="Custom_Set">${d.Custom_Set}</div>
                        <div class="custom-text">${customText}</div>
                        <div class="custom-btnbox">
                            <button class="custom-trigger" type="button" pid="${pid}" sid="${sid}">更改</button>/<button class="custom-btn custom-cancel" type="button" pid="${pid}" sid="${sid}">刪除</button>
                        </div>
                    `).removeClass("hide")
                }else{
                    $(".custom-additional-charge").text('')
                    $(".selectPopupBox-custom").empty().addClass("hide")
                }
                
                customWrapper.removeClass("in-active")
            }
        })
    })
})