$(function(){
    var breadcrumb_on =0;
    $('#breadcrumb .inline-block').on('click',function(){
      if(breadcrumb_on==0){
        $(this).addClass('on');
        breadcrumb_on++;
      }else{
        $(this).removeClass('on');
        breadcrumb_on=0;
      }

    });
    $(".owl-carousel").owlCarousel({
        loop : true,
        items : 1,
        nav : true,
        navText : ['',''],
    });


  if($("#picSlides .picItem").length>1){
      $("#picSlides").owlCarousel({
          loop : true,
          items : 1,
          nav : true,
          navText : ['',''],
          autoplay:true,
          autoplayTimeout:5000,
      });
   }

   var clickbutton=0;
   $('.filter-button,.filterbox .close').on('click',function(){
      clickbutton++;
      if(clickbutton==1){
        $('.filterbox').css({'top':'10%'});
      }
      if(clickbutton==2){
        $('.filterbox').css({'top':'-100%'});
        clickbutton=0;
      }
    });

    $('#viewMode .view-three').on('click',function(){
      $('#viewMode .view-three').addClass('now');
      $('#viewMode .view-four').removeClass('now');
      $('.content').removeClass('view-four').addClass('view-three hide-back');
      setTimeout(function(){
        $('.content').removeClass('hide-back');
      },380);
    });
    $('#viewMode .view-four').on('click',function(){
      $('#viewMode .view-four').addClass('now');
      $('#viewMode .view-three').removeClass('now');
      $('.content').removeClass('view-three').addClass('view-four hide-back');
      setTimeout(function(){
        $('.content').removeClass('hide-back');
      },380);
    });

    var owl6 = $(".user-list6 .orderSlide");
    owl6.owlCarousel({
      responsive:{
        0:{
          items : 2
        },
        480:{
          items : 3
        },
        660:{
          items : 4
        },
        960:{
          items : 5
        },
        1023:{
          items : 6
        }
      },
        nav : true,
        navText : ['',''],
        onRefresh : callback,
    });
    var owl5 = $(".user-list5 .orderSlide");
    owl5.owlCarousel({
      responsive:{
        0:{
          items : 2
        },
        481:{
          items : 3
        },
        960:{
          items : 4
        },
        1023:{
          items : 5
        }
      },
        nav : true,
        navText : ['',''],
        onRefresh : callback,
    });
    var addowl = $(".userBox .addBox");
    addowl.owlCarousel({
      responsive:{
        0:{
          items : 2
        },
        481:{
          items : 3
        },
        661:{
          items : 1
        }
      },
        nav : true,
        navText : ['',''],
        onRefresh : callback,
    });
    function callback(event){
      setTimeout(function(){
        $('.hidebox').animate({'opacity':1}).removeClass('hidebox');
      }, 300);
    }
    $('article > .content ').on('click','.button-primary',function(e){
      if($(this).attr("class").indexOf('add_to_cart') !=-1){
  			return false;
  		}

  		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_amount= img.find('.num-select').val(),
  			add_array = new Array();

	   add_array[0] = 0;
	   if($(this).parents('.content').attr('class').substring(11,13) == '02'){
	   		var add_type  = 2
	   }else{
	   		var add_type  = 1;
	   }
	   $(".delete[add_type="+add_type+"]").each(function(){
		   add_array.push(parseInt($(this).attr("del_id")));
	   });
	   var img_index = Math.max.apply(null,add_array);

		var	html = '<div class="orderProduct "><img src="'+img_src+'""><div class="title">'+img_title+'<div class="pricebox"><span class="font-red">NT$'+img_price+'</span></div><a class="delete" del_id="'+(img_index+1)+'" add_type="'+add_type+'">刪除</a></div></div>';
      if($(this).parents('.content').attr('class').substring(11,13) == '02'){
        if($('.addBox .pic-bg').length == 1){
              addowl.trigger('remove.owl.carousel',$('.addBox .pic-bg').parents('.owl-item').index())
                  .trigger('refresh.owl.carousel');
        }

       var smailBox = $('.user-orderBox .addBox'),
            smailBox_top = smailBox.offset().top,
            smailBox_left = smailBox.offset().left,
            smailBox_width = smailBox.width()/6,
            smailBox_height = smailBox.height()-20;
    		for($i=0;$i<img_amount;$i++){
    			var	html = '<div class="orderProduct "><img src="'+img_src+'""><div class="title">'+img_title+'<div class="pricebox"><span class="font-red">NT$'+img_price+'</span></div><a class="delete" del_id="'+(img_index+1+$i)+'" add_type="'+add_type+'">刪除</a></div></div>';

    			addowl.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($('.user-list5 > .orderSlide .pic-bg').length == 1){
              owl5.trigger('remove.owl.carousel',$('.user-list5 > .orderSlide .pic-bg').parents('.owl-item').index())
                  .trigger('refresh.owl.carousel');
        }
        var smailBox = $('.user-orderBox'),
            smailBox_top = smailBox.offset().top,
            smailBox_left = smailBox.offset().left,
            smailBox_width = smailBox.width()/6,
            smailBox_height = smailBox.height()-20;
    		for($i=0;$i<img_amount;$i++){

    			var	html = '<div class="orderProduct "><img src="'+img_src+'""><div class="title">'+img_title+'<div class="pricebox"><span class="font-red">NT$'+img_price+'</span></div><a class="delete" del_id="'+(img_index+1+$i)+'" add_type="'+add_type+'">刪除</a></div></div>';

    			owl6.trigger('to.owl.carousel',[0,0,true])
    			.trigger('add.owl.carousel',[$(html),0])
    			.trigger('refresh.owl.carousel');
    			owl5.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();
    });
    owl6.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(){
        owl6.trigger('remove.owl.carousel',delitem.index())
            .trigger('refresh.owl.carousel');
      }, 700);
    });
    owl5.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(){
        owl5.trigger('remove.owl.carousel',delitem.index())
            .trigger('refresh.owl.carousel');
          if(owl5.find('.owl-item').length==0){
              var html = '<div class="pic-bg"></div>';
            owl5.trigger('to.owl.carousel',[0,0,true])
              .trigger('add.owl.carousel',[$(html),0])
              .trigger('refresh.owl.carousel');
          }
      }, 700);
    });
    addowl.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(){
        addowl.trigger('remove.owl.carousel',delitem.index())
            .trigger('refresh.owl.carousel');
          if(addowl.find('.owl-item').length==0){
              var html = '<div class="pic-bg"></div>';
            addowl.trigger('to.owl.carousel',[0,0,true])
              .trigger('add.owl.carousel',[$(html),0])
              .trigger('refresh.owl.carousel');
          }
      }, 700);
    });
});