$(function(){
	var owl_options = {
		responsive:{
			0:{
				items : 2
			},
			481:{
				items : 3
			},
			660:{
				items : 4
			},
			960:{
				items : 2
			}
		},
        nav : true,
        onRefresh : callback,
    }, owl_options2 = {
		responsive:{
			0:{
				items : 2
			},
			481:{
				items : 3
			},
			768:{
				items : 4
			},
			960:{
				items : 3
			},
			1210:{
				items : 4
			}
		},
        nav : true,
        onRefresh : callback,
    };
    function callback(event){
      setTimeout(function(){
        $('.hidebox').animate({'opacity':1}).removeClass('hidebox');
      }, 300);
    }
    var box_n=0;
    if($('.threebox').length==0){
    	box_n=4;
	    var owl_red = $(".twobox .redBox");
	    owl_red.find('.orderSlideRGP').owlCarousel(owl_options2);
	    var owl_green = $(".twobox .greenBox");
	    owl_green.find('.orderSlideRGP').owlCarousel(owl_options2);
    }else{
    	box_n=3;
	    var owl_red = $(".threebox .redBox");
	    owl_red.find('.orderSlideRGP').owlCarousel(owl_options);
	    var owl_green = $(".threebox .greenBox");
	    owl_green.find('.orderSlideRGP').owlCarousel(owl_options);
	    var owl_orange = $(".threebox .orangeBox");
	    owl_orange.find('.orderSlideRGP').owlCarousel(owl_options);
	    owl_orange.on('click','.orderSlideRGP .delete',function(){
	    	var delitem = $(this).parents('.owl-item');
	    	delitem.find('.title').remove();
	    	delitem.animate({'opacity':0},300).animate({'width':0},300);
	    	setTimeout(function(){
	        	owl_orange.find('.orderSlideRGP').trigger('remove.owl.carousel',delitem.index())
	            	.trigger('refresh.owl.carousel');
	            if(owl_orange.find('.owl-item').length==0){
	            	var html = '<div class="pic-bg"></div>';
			      	owl_orange.find('.orderSlideRGP').trigger('to.owl.carousel',[0,0,true])
			      		.trigger('add.owl.carousel',[$(html),0])
			      		.trigger('refresh.owl.carousel');
		        }
	      	}, 700);
	    });
    };
    owl_red.on('click','.orderSlideRGP .delete',function(){
    	var delitem = $(this).parents('.owl-item');
    	delitem.find('.title').remove();
    	delitem.animate({'opacity':0},300).animate({'width':0},300);
    	setTimeout(function(){
        	owl_red.find('.orderSlideRGP').trigger('remove.owl.carousel',delitem.index())
            	.trigger('refresh.owl.carousel');
            if(owl_red.find('.owl-item').length==0){
            	var html = '<div class="pic-bg"></div>';
		      	owl_red.find('.orderSlideRGP').trigger('to.owl.carousel',[0,0,true])
		      		.trigger('add.owl.carousel',[$(html),0])
		      		.trigger('refresh.owl.carousel');
	        }
      	}, 700);
    });
    owl_green.on('click','.orderSlideRGP .delete',function(){
    	var delitem = $(this).parents('.owl-item');
    	delitem.find('.title').remove();
    	delitem.animate({'opacity':0},300).animate({'width':0},300);
    	setTimeout(function(){
        	owl_green.find('.orderSlideRGP').trigger('remove.owl.carousel',delitem.index())
            	.trigger('refresh.owl.carousel');
            if(owl_green.find('.owl-item').length==0){
            	var html = '<div class="pic-bg"></div>';
		      	owl_green.find('.orderSlideRGP').trigger('to.owl.carousel',[0,0,true])
		      		.trigger('add.owl.carousel',[$(html),0])
		      		.trigger('refresh.owl.carousel');
	        }
      	}, 700);
    });


    $('article').on('click','.button5',function(){
    	$('.user-orderBox').removeClass('none');
		var img = $(this).parents('.productBox'),
			img_src = img.find('.productImg').find('img').attr('src'),
			img_title = img.find('.productTitle').find('.title').html(),
			img_price = img.find('.productTitle').find('.font-big').html(),
			img_amount= img.find('.num-select').val(),
			add_array = new Array();
		add_array[0] = 0;

		switch($(this).parents('.productBox').attr('class').substring(11)){
			case "redBox":
				var _pair = 1;
				break;
			case "greenBox":
				var _pair = 2;
				break;
			case "orangeBox":
				var _pair = 3;
				break;
		}
		$(".delete[pair="+_pair+"]").each(function(){
		   add_array.push(parseInt($(this).attr("del_id")));
		});
		var img_index = Math.max.apply(null,add_array);

		if($(this).parents('.redBox').length != 0){
			if($('.redBox .pic-bg').length == 1){
	       		owl_red.find('.orderSlideRGP').trigger('remove.owl.carousel',$('.redBox .pic-bg').parents('.owl-item').index())
            		.trigger('refresh.owl.carousel');
			}
	    	var smailBox = $('.user-orderBox .redBox .owl-stage-outer'),
	        	smailBox_top = smailBox.offset().top,
	        	smailBox_left = smailBox.offset().left+20,
	        	smailBox_width = smailBox.width()/box_n,
            smailBox_height = smailBox.height();
			for($i=0;$i<img_amount;$i++){
				var html = '<div class="orderProduct hidebox"><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_index+1+$i)+'" pair="'+_pair+'">刪除</a></div></div>';
				owl_red.find('.orderSlideRGP').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($(this).parents('.greenBox').length != 0){
			if($('.greenBox .pic-bg').length == 1){
	       		owl_green.find('.orderSlideRGP').trigger('remove.owl.carousel',$('.greenBox .pic-bg').parents('.owl-item').index())
            		.trigger('refresh.owl.carousel');
			}
	    	var smailBox = $('.user-orderBox .greenBox .owl-stage-outer'),
	        	smailBox_top = smailBox.offset().top,
	        	smailBox_left = smailBox.offset().left+20,
	        	smailBox_width = smailBox.width()/box_n,
            smailBox_height = smailBox.height();

			for($i=0;$i<img_amount;$i++){
				var html = '<div class="orderProduct hidebox"><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_index+1+$i)+'" pair="'+_pair+'">刪除</a></div></div>';
	      		owl_green.find('.orderSlideRGP').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($(this).parents('.orangeBox').length != 0){
			if($('.orangeBox .pic-bg').length == 1){
	       		owl_orange.find('.orderSlideRGP').trigger('remove.owl.carousel',$('.orangeBox .pic-bg').parents('.owl-item').index())
            		.trigger('refresh.owl.carousel');
			}
	    	var smailBox = $('.user-orderBox .orangeBox .owl-stage-outer'),
	        	smailBox_top = smailBox.offset().top,
	        	smailBox_left = smailBox.offset().left+20,
	        	smailBox_width = smailBox.width()/box_n,
            smailBox_height = smailBox.height();
			for($i=0;$i<img_amount;$i++){
				var html = '<div class="orderProduct hidebox"><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_index+1+$i)+'" pair="'+_pair+'">刪除</a></div></div>';
	      		owl_orange.find('.orderSlideRGP').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();
    });
});