function updateFaces()
{
	// reset faces
	$('.container-db').find('.noms-holder').remove();
	$('.container-db').find('.date-holder').remove();	 
	$('.chocos-holder').find('.noms-holder').remove();
	$('.chocos-holder').find('.date-holder').remove();	
	$('.face-custom-txt').removeClass('face-custom-txt');
	$('.face-custom-img').removeClass('face-custom-img');	
	$(".container-db").empty()
	$(".chocos-holder").empty()
	$(".container-db").html($('#temp-base .doublecube').contents().clone());
	$(".chocos-holder").html($('#temp-base .chocos').contents().clone());
	$(".container-db .db-cube1 .back").addClass('face-custom-txt');
	$(".container-db .db-cube1 .back").addClass('face-custom-img');
	
	//DOUBLECUBE
	
	// 4 8 5		
	if(theme == "ivoire" || theme == "tendance" || theme == "champetre" || theme == "uv")
	{
		$('#custom_elmts .noms-holder').clone().appendTo(".container-db .db-cube1 .front")
		$('#custom_elmts .noms-holder').clone().appendTo(".container-db .db-cube2 .bottom")
		$('#custom_elmts .date-holder').clone().appendTo(".container-db .db-cube1 .left")			
	}
	// 4 8 7
	if(theme == "oriental")
	{
		$('#custom_elmts .noms-holder').clone().appendTo(".container-db .db-cube1 .front")
		$('#custom_elmts .noms-holder').clone().appendTo(".container-db .db-cube2 .bottom")
		$('#custom_elmts .date-holder').clone().appendTo(".container-db .db-cube2 .top")			
	}
	// 4 8 12		
	else if(theme == "chocolate" || theme == "cinema" || theme == "oriental" || theme == "fleurs" 
		|| theme == "vintage" || theme == "voyage" || theme == "gourmandise")
	{
		$('#custom_elmts .noms-holder').clone().appendTo(".container-db .db-cube1 .front")
		$('#custom_elmts .noms-holder').clone().appendTo(".container-db .db-cube2 .bottom")
		$('#custom_elmts .date-holder').clone().appendTo(".container-db .db-cube2 .right")
	}
	
	$('.container-db .db-cube1 .top').css({'background-image':'url('+themeImg+'/contenant/01.png)'})
	$('.container-db .db-cube1 .bottom').css({'background-image':'url('+themeImg+'/contenant/02.png)'})
	$('.container-db .db-cube1 .back').css({'background-image':'url('+themeImg+'/contenant/03.png)'})
	$('.container-db .db-cube1 .front').css({'background-image':'url('+themeImg+'/contenant/04.png)'})
	$('.container-db .db-cube1 .left').css({'background-image':'url('+themeImg+'/contenant/05.png)'})
	$('.container-db .db-cube1 .right').css({'background-image':'url('+themeImg+'/contenant/06.png)'})
	$('.container-db .db-cube2 .top').css({'background-image':'url('+themeImg+'/contenant/07.png)'})
	$('.container-db .db-cube2 .bottom').css({'background-image':'url('+themeImg+'/contenant/08.png)'})
	$('.container-db .db-cube2 .back').css({'background-image':'url('+themeImg+'/contenant/09.png)'})
	$('.container-db .db-cube2 .front').css({'background-image':'url('+themeImg+'/contenant/10.png)'})
	$('.container-db .db-cube2 .left').css({'background-image':'url('+themeImg+'/contenant/11.png)'})
	$('.container-db .db-cube2 .right').css({'background-image':'url('+themeImg+'/contenant/12.png)'})

	//CHOCOS
	$('#custom_elmts .noms-holder').clone().appendTo(".chocos-holder .choco1 .front")
	$('#custom_elmts .noms-holder').clone().appendTo(".chocos-holder .choco4 .front")
	$('#custom_elmts .date-holder').clone().appendTo(".chocos-holder .choco2 .front")
	
	$('.chocos-holder .choco1 .front').css({'background-image':'url('+themeImg+'/chocos/01.png)'})
	$('.chocos-holder .choco1 .back').css({'background-image':'url('+themeImg+'/chocos/02.png)'})
	$('.chocos-holder .choco2 .front').css({'background-image':'url('+themeImg+'/chocos/03.png)'})
	$('.chocos-holder .choco2 .back').css({'background-image':'url('+themeImg+'/chocos/04.png)'})
	$('.chocos-holder .choco3 .front').css({'background-image':'url('+themeImg+'/chocos/05.png)'})
	$('.chocos-holder .choco3 .back').css({'background-image':'url('+themeImg+'/chocos/06.png)'})
	$('.chocos-holder .choco4 .front').css({'background-image':'url('+themeImg+'/chocos/07.png)'})
	$('.chocos-holder .choco4 .back').css({'background-image':'url('+themeImg+'/chocos/08.png)'})
	$('.chocos-holder .choco5 .front').css({'background-image':'url('+themeImg+'/chocos/09.png)'})
	$('.chocos-holder .choco5 .back').css({'background-image':'url('+themeImg+'/chocos/10.png)'})			
	
	$('.chocos-holder .flip-container').eq(4).show();
}

function initDrag()
{	
	 $('#simu-box').on(events.start, function(e) {				
		if (hasTouchSupport) {
			var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
			p0 = { 'x': touch.pageX, 'y': touch.pageY };
		} else {
			p0 = { 'x': e.clientX, 'y': e.clientY };
		}		
				
		_flag = true;
		$(document).on(events.move, drag);	
		$('.simu-container').removeClass('animated');
		e.preventDefault();	  
	});
	
	$(document).on(events.end, function(e) {	
		var p1;
		if (hasTouchSupport) {
			var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
			p1 = { 'x': touch.pageX, 'y': touch.pageY }; 
		} else {
			p1 = { 'x': e.clientX, 'y': e.clientY }; 
		}
		
		_flag = false;  
		$(document).off(events.move, drag);
		_angle = {'x': _anglelast.x, 'y': _anglelast.y}			
	});
}

function drag(e) {
	/* distance and angle values since starting to drag */
	var p1;
	if(hasTouchSupport) {
		var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
		p1 = { 'x': touch.pageX - p0.x, 'y': touch.pageY - p0.y }
	} else {
		p1 = { 'x': e.clientX - p0.x, 'y': e.clientY - p0.y }
	}
	
	var angle = {'x': -p1.y*_unit, 'y': p1.x*_unit};
	tmp = 'rotateX(' + (_angle.x + angle.x) + 'deg)' + 'rotateY(' + (_angle.y + angle.y) + 'deg) scale(.92)';
	$('.simu-container').css({'-webkit-transform' : tmp , 'transform' : tmp});
	_anglelast = {'x': (_angle.x + angle.x), 'y': (_angle.y + angle.y)}		
};



var 
_factor = 1, 
_max_amount = 460, 
_unit = 360/_max_amount ,
_flag = false,
_angle = {'x': 0, 'y': 0};
_anglelast = {'x': 0, 'y': 0};
;

var _custom =
{
	'face_custom' : 
	{
		'image' : null,
		'text' : '',
		'is_initials' : false	
	},
	'faces_dc_exclu' : 
	{
		
	},
	'faces_chocos_exclu' : 
	{
			
	}
}

var face_exclu = 
{
	'index' : 0,
	'image' : null,
	'color' : '',
	'color_text' : '',
	'text' : '',
	'font' : '',
	'is_initials' : false,
	'is_custom' : false
}


var rotateR = 
[
	null,
	[-90,0],
	[90,0],
	[0,180],
	[0,0],
	[0,100],
	[0,-20],
	[-90,0],
	[90,0],
	[0,180],
	[0,0],
	[0,20],
	[0,-100]
]

// Start when DOM is ready
$(function() {
	console.log('INIT DOUBLE CUBE');
	updateFaces();	
	initDrag();
});