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

var 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': 0, },
	'front':	{ 'x': 0, 'y': 45, },
	'left':		{ 'x': 0, 'y': 0, },
	'right':	{ 'x': 0, 'y': 0, },
};

var color1 = 'anis';
var colorRGB = 
{
	anis: '#B5DC10',
	argent: '#C2C2C2',
	blanc: '#FFFFFF',
	bleuf: '#10147E',
	bordeaux: '#7F0700',
	framboise: '#C42B68',
	fuschia: '#F0037F',
	grisf: '#766546',
	ivoire: '#FFFAD7',
	marron: '#3C1503',
	noir: '#000000',
	or: '#FFC211',
	orange: '#E37222',
	parme: '#D198CA',
	rose: '#F88CC4',
	rouge: '#F50003',
	taupe: '#CCC6AB',
	turquoise: '#7FCDD0',
	vert: '#159033',
	violet: '#6B1687',
}

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

function initFaces()
{
	// 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 .cubeface').html($('#temp-exclu .excluface').contents().clone());
	$('.chocos-holder .flipper .front').html($('#temp-exclu .excluface').contents().clone()).css({'background' : 'url('+themeImg+'face.jpg)'})
	$('.chocos-holder .flipper .back').html($('#temp-exclu .excluface').contents().clone()).css({'background' : 'url('+themeImg+'face.jpg)'})
	
	// DC
	$.each(['1', '2'], function(iCube, cube){
		$.each(faceDeg, function(i, v) {
			img = ''; color = ''; txt = ''; font = '';
			type = $('#CUBE'+cube+'-'+i.toUpperCase()+'TYPE').val();
			if (type == 'IMAGE') {
				var url = $('#DOUBLECUBEIMAGE').data('dl');
				var ref = 'CUBE'+cube+'-'+i.toUpperCase()+'IMG';
				var img = $('#'+ref).val();
				console.log(url+'/'+ref+'/'+img);
				if (img.length > 0) {
					var request = new XMLHttpRequest();
					request.open('GET', url+'/'+ref+'/'+img, true);
					request.responseType = 'blob';
					request.onload = function() {
					    var reader = new FileReader();			    
					    reader.onload =  function(e){					    	
					        $('.db-cube'+cube+' .cubeface.'+i+' .imgface').css('background-image', 'url('+e.target.result+')');
					    };
					    reader.readAsDataURL(request.response);
					};
					request.send();
				}
				
			} else {
				if (type == 'TEXT') {
					color = $('#CUBE'+cube+'-'+i.toUpperCase()+'COLOR').val();				
					font = $('#CUBE'+cube+'-'+i.toUpperCase()+'FONT').val();
					txt = $('#CUBE'+cube+'-'+i.toUpperCase()+'TEXT').val();
					$('.db-cube'+cube+' .cubeface.'+i+' .txtface').html('<div class="freetext-holder">'+txt+'</div>');
					$('.db-cube'+cube+' .cubeface.'+i+' .txtface .freetext-holder').css({'margin-top':-$('.db-cube'+cube+' .cubeface.'+i+' .txtface .freetext-holder').height()*0.5});				
				} else if (type == 'INITIALE') {
					color = $('#CUBE'+cube+'-'+i.toUpperCase()+'COLOR').val();				
					font = $('#CUBE'+cube+'-'+i.toUpperCase()+'FONT').val();
					$('.db-cube'+cube+' .cubeface.'+i+' .txtface').html($('#custom_elmts .initiales-holder').clone());
				}
				$('.db-cube'+cube+' .cubeface.'+i+' .txtface').addClass(font);
				if (color == '' || typeof(color) == 'undefined') {
					$('.db-cube'+cube+' .cubeface.'+i+' .imgface').css('background', 'url('+themeImg+'face.jpg)');
				} else {
					$('.db-cube'+cube+' .cubeface.'+i+' .imgface').css('background', '').addClass('b-'+color);
				}
			}
		});
	});
		
	// Chocos
	$('.choco1 .front').html($('.db-cube1 .cubeface.front').clone().contents());
	$('.choco2 .front').html($('.db-cube1 .cubeface.top').clone().contents());
	$('.choco3 .front').html($('.db-cube1 .cubeface.right').clone().contents());
	$('.choco4 .front').html($('.db-cube2 .cubeface.top').clone().contents());
	$('.choco5 .front').html($('.db-cube2 .cubeface.back').clone().contents());
	
	// Init
	var cubeSelected = $('input[name=item]').val();
	var faceSelected = $('input[name=face]').val().toLowerCase();
	var url = $('.configurator-opt-file').data('url')+'CUBE'+cubeSelected+'-'+faceSelected+'IMG';
	$('.configurator-opt-file').data('url', url);
	$('.db-cube'+cubeSelected+' .'+faceSelected+' .imgface').addClass('actif');	
}

//=== Events
$('.container-db').on('click', '.cubeface', function(e){
	$('.imgface').removeClass('actif');
	$(this).find('.imgface').addClass('actif');	
	if ($(this).parent('.cube').hasClass('db-cube1')){
		var cubeSelected = 1;
	} else {
		var cubeSelected = 2;
	}	
	$('input[name=item]').val(cubeSelected);
	$('input[name=face]').val($(this).data('id'));	
	var faceSelected = $(this).data('id');
	if ($('#CUBE'+faceSelected+'TYPE').length && $('#CUBE'+faceSelected+'TYPE').val() != '') {
		$('select[name=select-custom]').val($('#CUBE'+faceSelected+'TYPE').val());
		$('textarea[name=select-txt]').val($('#CUBE'+faceSelected+'TEXT').val());
		$('select[name=select-font]').val($('#CUBE'+faceSelected+'FONT').val());
		$('#colorpicker1').simplecolorpicker('selectColor', colorRGB[$('#CUBE'+faceSelected+'COLOR').val()]);
	}
	
	defCUSTOM($(this).find('.imgface'));
	$('.color1text').html($('#colorpicker1 option:selected').text());
});

$('#NOM1').on('keyup click', function(){
	defNOM1($(this));
});

$('#NOM2').on('keyup click', function(){
	defNOM2($(this));
});

$('#DATEMARIAGE').on('change click', function(e) {
	defDATEMARIAGE($(this));
});

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

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

$('#colorpicker1').simplecolorpicker({picker: true, theme: 'glyphicons'})
.on('change', function() {
	color1 = $('#colorpicker1 option:selected').data('id');
	$('.color1text').html($('#colorpicker1 option:selected').text());
	defCUSTOM($('.imgface.actif'));
	initFaces();
});

$('select[name=select-custom]').on('change', function(e){
	e.preventDefault();
	defCUSTOM($('.imgface.actif'));
	initFaces();	
});

$('select[name=select-font]').on('change', function(e){
	e.preventDefault();
	defCUSTOM($('.imgface.actif'));
	initFaces();
});

$('textarea[name=select-txt]').on('keyup click', function(e){
	e.preventDefault();
	$('select[name=select-custom]').val('TEXT').trigger('change');
	defCUSTOM($('.imgface.actif'));
	initFaces();
});

$('span#response-optgroup-exclusif').on('change', function(e){	
	e.preventDefault();
	$('select[name=select-custom]').val('IMAGE').trigger('change');
	defCUSTOM($('.imgface.actif'));
	initFaces();
});

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'));
	defPELLICULAGE($('#PELLICULAGE'));
	defEMBALLAGE($('#EMBALLAGE'));
	defDATEMARIAGE($('#DATEMARIAGE'));
	$('#colorpicker1').simplecolorpicker('selectColor', colorRGB[color1]);
	$('.color1text').html($('#colorpicker1 option:selected').text());
}

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 defCUSTOM(obj){
	item = obj.parent().data('id');
	console.log(item);
	$('#CUBE'+item+'TYPE').val($('select[name=select-custom]').val());
	$('#CUBE'+item+'TEXT').val($('textarea[name=select-txt]').val().replace(/\n/g, "<br/>"));
	$('#CUBE'+item+'COLOR').val($('#colorpicker1 option:selected').data('id'));
	$('#CUBE'+item+'FONT').val($('select[name=select-font]').val());
	$('#CUBE'+item+'IMG').val($('input[name=optgroup-exclusif]').val());
}

function defPELLICULAGE(obj){
	$('.matface').remove();
	if(obj.find('option:selected').text() == "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 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 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}	
}

$.fn.clearForm = function() {
	  return this.each(function() {
	    var type = this.type, tag = this.tagName.toLowerCase();
	    if (tag == 'form')
	      return $(':input',this).clearForm();
	    if (type == 'text' || type == 'password' || tag == 'textarea')
	      this.value = '';
	    else if (type == 'checkbox' || type == 'radio')
	      this.checked = false;
	    else if (tag == 'select')
	      this.selectedIndex = -1;
	  });
};