$(function(){
	/* 上方切換列，該分類所有商品 */
	$(".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,

	});
	//猜你喜歡，瀏覽紀錄，其他人也買了
	$("article .recommend_l,article .history_l,article .other_l").owlCarousel({
		nav : true,
		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.owlCarousel({
      responsive:{
        0:{
          items : 1
        },
        481:{
          items : 2
        }
      },
        nav : true,
        onRefresh : callback,
    });
    var owl_add = $(".addbox .orderSlide");
    owl_add.owlCarousel({
      responsive:{
        0:{
          items : 1
        },
        481:{
          items : 2
        }
      },
        nav : true,
        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');
        if(smailBox.offset()){
            var 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);
        if(smailBox.offset()){
            $('.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);
    });

/* 主商品選購效果 */
	$('.amount-input').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">'+_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');
            if(smailBox.offset()){
                var 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;
      $('.productView .moreview').removeAttr('style');
      $.get('/activities/ajax/activitiesView_pc.php',{sid:$('.btn-submit.click').attr("sid")}, function(data,status){
      $('.productView').html(data);
          change = 960;
          moreview = false;
          videoBox();
          zoomBox();
          verticalBx('.moreview')
          smallPicBox();
      });
    }else if(_window.width() <= 768 && change!= 768){
        change = 768;
		$.get('/activities/ajax/activitiesView_moblie.php',{sid:$('.btn-submit.click').attr("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 = 0
    	if($(window).width() <= 768) {
	    	nowitem = $('.productImg .active').prevAll('.owl-item').length;
    	} else {
    		nowitem = $('.moreview .picitem.now').index()
    	}
		

    	$('article .previewbox').css('display','block')
		$('article .previewbox').children().eq(nowitem).css('display','block');
		
		//取得圖片寬度減去頁面寬度除以2進行位移 
		var picWidth = $('.previewbox .pic').width()
		var pageWidth = document.body.clientWidth
		$('.previewbox').scrollLeft((picWidth - pageWidth) / 2)
		
		$('body').addClass('overflow-hidden')
    });
    $('article').on('click','.close',function(){
    	$('article .previewbox').removeAttr('style')
		.find('img').removeAttr('style');
		$('body').removeClass('overflow-hidden')
    });
    
    _window.on('resize',function(){
        if(_window.width() > 768 && change != 960){
          change = 960;
          $('.productView .moreview').removeAttr('style');
          $.get('/activities/ajax/activitiesView_pc.php',{sid:$('.btn-submit.click').attr("sid")}, function(data,status){
          $('.productView').html(data);
              change = 960;
              moreview = false;
              videoBox();
              zoomBox();
              verticalBx('.moreview')
              smallPicBox();
          });
        }else if(_window.width() <= 768 && change != 768){

            change = 768;
	        $.get('/activities/ajax/activitiesView_moblie.php',{sid:$('.btn-submit.click').attr("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();
					}
				}
			});
        };
    });
		
  $(document).on("specChangeSlider", function(){
    verticalBx('.moreview')
  })
});


// ==========================================================
// 	moreview 直向slide
// ==========================================================
var bxSlide
function verticalBx(selector) {
	//系列小圖套件
  if(bxSlide){
    bxSlide.destroySlider()
  }
	bxSlide = $(selector).bxSlider({
	    mode: 'vertical',
	    minSlides: 4,
	    slideWidth: 100,
	    infiniteLoop: false,
	    hideControlOnEnd: true,
	    slideMargin: 7,
	    speed: 100,
	    pager: false,
	});

  bxSlide.reloadSlider();
}