var 
_factor = 1, 
_max_amount = 460, 
_unit = 360/_max_amount ,
_flag = false,
_angle = {'x': 0, 'y': 0};
_anglelast = {'x': 0, 'y': 0};
monthR = ["","Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre"];
;

var faceDeg = {
	'top':		{ 'x': 0, 'y': 0, },
	'bottom':	{ 'x': 0, 'y': 0, },
	'back':		{ 'x': 0, 'y': 180, },
	'front':	{ 'x': 0, 'y': 45, },
	'left':		{ 'x': 0, 'y': 90, },
	'right':	{ 'x': 0, 'y': -90, },
};

// Start when DOM is ready
$(function() {
	initFaces();
	initInfos();		
	initDrag();
});

function initFaces()
{
	// Reset faces	
	$(".container-db .db-cube1 .back").addClass('face-custom-txt');
	$(".container-db .db-cube1 .back").addClass('face-custom-img');
	
	$('#custom_elmts .noms-holder').clone().appendTo(".container-db .db-cube1 .front");
	$('#custom_elmts .noms-holder').clone().appendTo(".container-db .db-cube2 .bottom");
	
	// Doublecube holder
	if (theme == "ivoire" || theme == "tendance" || theme == "champetre" || theme == "uv") {		
		$('#custom_elmts .date-holder').clone().appendTo(".container-db .db-cube1 .left");			
	}
	if (theme == "oriental") {		
		$('#custom_elmts .date-holder').clone().appendTo(".container-db .db-cube2 .top");			
	}
	if(theme == "chocolate" || theme == "cinema" || theme == "oriental" || theme == "fleurs" 
		|| theme == "vintage" || theme == "voyage" || theme == "gourmandise") {
		$('#custom_elmts .date-holder').clone().appendTo(".container-db .db-cube2 .right");
	}
	
	$('.container-db .db-cube1 .top').css({'background-image':'url('+themeImg+'/box/1-TOP.png)'});
	$('.container-db .db-cube1 .bottom').css({'background-image':'url('+themeImg+'/box/1-BOTTOM.png)'});
	$('.container-db .db-cube1 .back').css({'background-image':'url('+themeImg+'/box/1-BACK.png)'});
	$('.container-db .db-cube1 .front').css({'background-image':'url('+themeImg+'/box/1-FRONT.png)'});
	$('.container-db .db-cube1 .left').css({'background-image':'url('+themeImg+'/box/1-LEFT.png)'});
	$('.container-db .db-cube1 .right').css({'background-image':'url('+themeImg+'/box/1-RIGHT.png)'});
	$('.container-db .db-cube2 .top').css({'background-image':'url('+themeImg+'/box/2-TOP.png)'});
	$('.container-db .db-cube2 .bottom').css({'background-image':'url('+themeImg+'/box/2-BOTTOM.png)'});
	$('.container-db .db-cube2 .back').css({'background-image':'url('+themeImg+'/box/2-BACK.png)'});
	$('.container-db .db-cube2 .front').css({'background-image':'url('+themeImg+'/box/2-FRONT.png)'});
	$('.container-db .db-cube2 .left').css({'background-image':'url('+themeImg+'/box/2-LEFT.png)'});
	$('.container-db .db-cube2 .right').css({'background-image':'url('+themeImg+'/box/2-RIGHT.png)'});
	$('.container-db').addClass(theme);
	
	// Chocos holder
	$('#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 background image
	$('.chocos-holder .choco1 .front').css({'background-image':'url('+themeImg+'/chocos/1F.png)'});
	$('.chocos-holder .choco1 .back').css({'background-image':'url('+themeImg+'/chocos/1B.png)'});
	$('.chocos-holder .choco2 .front').css({'background-image':'url('+themeImg+'/chocos/2F.png)'});
	$('.chocos-holder .choco2 .back').css({'background-image':'url('+themeImg+'/chocos/2B.png)'});
	$('.chocos-holder .choco3 .front').css({'background-image':'url('+themeImg+'/chocos/3F.png)'});
	$('.chocos-holder .choco3 .back').css({'background-image':'url('+themeImg+'/chocos/3B.png)'});
	$('.chocos-holder .choco4 .front').css({'background-image':'url('+themeImg+'/chocos/4F.png)'});
	$('.chocos-holder .choco4 .back').css({'background-image':'url('+themeImg+'/chocos/4B.png)'});
	$('.chocos-holder .choco5 .front').css({'background-image':'url('+themeImg+'/chocos/5F.png)'});
	$('.chocos-holder .choco5 .back').css({'background-image':'url('+themeImg+'/chocos/5B.png)'});				
	$('.chocos-holder').addClass(theme);
	
	$('.chocos-holder .flip-container').eq(4).show();
}

//=== Events
$('#NOM1').on('keyup click', function(){
	defNOM1($(this));
	rotateDC(faceDeg['front']['x'],faceDeg['front']['y']);
});

$('#NOM2').on('keyup click', function(){		
	defNOM2($(this));
	rotateDC(faceDeg['front']['x'],faceDeg['front']['y']);
});

$('#PERSOTXT').on('keyup click', function(){
	var txt = $(this).val().replace(/\n/g, "<br />");
	$('.face-custom-img').empty();
	$('.face-custom-txt').html('<div class="freetext-holder"></div>');
	$('.freetext-holder').html(txt).css({'margin-top':-$('.freetext-holder').height()*0.5});
	var face = facename($('.freetext-holder'));		
	// Rotate
	rotateDC(faceDeg[face]['x'],faceDeg[face]['y']);
});

$('#DATEMARIAGE').on('change click', function(e) {
	defDATEMARIAGE($(this));
	var face = facename($('.date-holder'));	
	rotateDC(faceDeg[face]['x'],faceDeg[face]['y']);
});

$('#FACELIBRE').on('change', function(e) {
	defFACELIBRE($(this));
	rotateDC(0,180);
});

$('#EMBALLAGE').on('change', function(e) {
	defEMBALLAGE($(this));
});

$('#PELLICULAGE').on('change', function(e) {
	defPELLICULAGE($(this));
});

$('#DOUBLECUBEIMAGE').on('change', function(e) {
	defDOUBLECUBEIMAGE(this);
	rotateDC(0,135);
});

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)}		
};

// === Functions
function initInfos()
{
	defNOM1($('#NOM1'));
	defNOM2($('#NOM2'));
	defDATEMARIAGE($('#DATEMARIAGE'));
	defFACELIBRE($('#FACELIBRE'));
	defPELLICULAGE($('#PELLICULAGE'));
	defEMBALLAGE($('#EMBALLAGE'));
	defDOUBLECUBEIMAGE($('#DOUBLECUBEIMAGE'));	
}

function defDATEMARIAGE(obj){
	var day = obj.val().substring(0,2);
	var month  = obj.val().substring(3,5);
	var year = obj.val().substring(6,10);		
	$('.day').html(day);
	$('.month').html(monthR[parseInt(month)]);
	$('.year').html(year);
}

function defNOM1(obj){
	$('.nom_1').html(obj.val());
	$('.initiale_1').html(obj.val().substring(0,1));
}

function defNOM2(obj){
	$('.nom_2').html(obj.val());
	$('.initiale_2').html(obj.val().substring(0,1));
}

function defFACELIBRE(obj){
	var choice = obj.find('option:selected').text();
	$(".face-custom-txt").empty();
	$('.face-custom-img').empty();
	if (choice == "Aucune") {
		//Nothing
	} else if(choice == "Image") {
		defDOUBLECUBEIMAGE($('#DOUBLECUBEIMAGE'));
	} else if(choice == "Texte") {
		var txt = $('#PERSOTXT').val().replace(/\n/g, "<br/>");
		$('.face-custom-txt').html('<div class="freetext-holder"></div>');
		$('.freetext-holder').html(txt).css({'margin-top':-$('.freetext-holder').height()*0.5});
	} else if(choice == "Initiales") {
		console.log('coucou');
		$('#custom_elmts .initiales-holder').clone().appendTo(".face-custom-txt");
	}
}

function defPELLICULAGE(obj){
	$('.matface').remove();
	var choice = obj.find('option:selected').text();
	if(choice == "Mat") {
		$('.cubeface').append('<div class="matface"></div>')		
	}	
}

function defEMBALLAGE(obj){
	var choice = obj.find('option:selected').text();
	$('.flip-container').removeClass('argent');
	$('.flip-container').removeClass('or');
	if (choice == "Argenté") {
		$('.flip-container').addClass('argent');		
	} else if (choice == "Doré") {
		$('.flip-container').addClass('or');
	}	
}

function defDOUBLECUBEIMAGE(obj){
	if (obj.files && obj.files[0]) {
		$('.face-custom-txt').empty();
		$('.face-custom-img').html('<div class="image-holder"></div>');
	 	var reader = new FileReader();
		reader.onload = function (e) {
			$('.image-holder').css('background-image', 'url('+e.target.result+')');
		}
	  	reader.readAsDataURL(obj.files[0]);
	} else {
		var url = $('input[name='+obj.data('field')+']').data('dl');
		var img = $('input[name='+obj.data('field')+']').val();
		if (img.length > 0) {
			$('.face-custom-txt').empty();
			$('.face-custom-img').html('<div class="image-holder"></div>');
			var request = new XMLHttpRequest();
			request.open('GET', url+'/'+img, true);
			request.responseType = 'blob';
			request.onload = function() {
			    var reader = new FileReader();			    
			    reader.onload =  function(e){
			        $('.image-holder').css('background-image', 'url('+e.target.result+')');
			    };
			    reader.readAsDataURL(request.response);
			};
			request.send();
		}
	}
}

function facename(obj){
	var face = obj.parent('.cubeface');
	if(face.hasClass('top')){
		return 'top';
	} else if(face.hasClass('bottom')){
		return 'bottom';
	} else if(face.hasClass('back')){
		return 'back';
	} else if(face.hasClass('front')){
		return 'front';
	} else if(face.hasClass('left')){
		return 'left';
	} else if(face.hasClass('right')){
		return 'right';
	}
}

function formatDateInput(date)
{
	var day = date.substring(6,8);
	var month = date.substring(4,6);
	var year = date.substring(0,4);
	return year+'-'+month+'-'+day;
}

function todaySimu()
{
	var today = new Date();
	var dd = (today.getDate()).toString();
	var mm = (today.getMonth()+1).toString(); //January is 0!
	var yyyy = (today.getFullYear()).toString();	
	if(dd<10) dd='0'+dd;	
	if(mm<10) mm='0'+mm;
	return yyyy+mm+dd;	
}

function rotateDC(rX,rY)
{
	$('.simu-container').addClass('animated');	
	tmp = 'rotateX(' + rX + 'deg)' + 'rotateY(' + rY + 'deg)';
	$('.simu-container').css({'transform' : tmp});
	_angle = {'x': rX, 'y': rY}
	_anglelast = {'x': rX, 'y': rY}	
}