var Guestcompass = Guestcompass || {};
Guestcompass.booking = {
	fileCount : 0

}

Guestcompass.booking.init = function (aPage){

	$(".reservationform").submit(function(e)
	{
		e.preventDefault();
		
		if(!Guestcompass.validateRequiredFields($(this))) return	
		

		//als er plaatjes zijn moeten die eerst geupload worden om deze aan de data var te kunnen toevoegen
		if($(this).find('input[type=file]').length > 0)
		{
			var oFormData = new FormData($(this).get(0));

			oFormData.append('file', {});			

			var sendFile =  [];

			if($(this).find('input[type=file]').length)
			var fileData = new FormData();
			fileInput = $(this).find('input[type=file]');		
			
			// hier komt de loader we moeten nog even kijken hoe dat gaat bij meerdre bestanden
			for(var i= 0; i < fileInput.length; i++)
			{

				file = fileInput[i].files[0];
				if( file == undefined || $(fileInput[i]).val() == ''  )
				{
					continue;
				}

				sendFile.push(file);
			}

			if(sendFile.length == 0)
			{

				var data = $(this).serialize();
				$.getJSON(Guestcompass.sCMSLocation+'interface/save-reservation/h/'+iHotelID+'/?callback=?', data);
			}
			else
			{
				$(this).html('');
				$(this).append('<div class="progress-container" data-file="'+fileName+'">'+file.name+'\
									<div class="progressbox">\
										<div class="progressbar"></div>\
									</div>\
									<div class="statustxt"></div>\
								</div>');

				// hier wordt hele ding geupload
				Guestcompass.booking.preprocessForm(sendFile, oFormData);
			}
		}
		else
		{	
			var data = $(this).serialize();
			$(this).html('');
			$.getJSON(Guestcompass.sCMSLocation+'interface/save-reservation/h/'+iHotelID+'/?callback=?', data);
		}

		// naar de top van het blog element scrollen 
		var pos = $(this).offset();
		$('body').animate({ scrollTop: pos.top });

		$(this).append('<div class="spinner"></div>');		
	});

	Guestcompass.booking.rating();
	Guestcompass.booking.showFile();
}

Guestcompass.booking.showFile = function()
{
	$(".reservationform .fileUpload input").change(function(){

		// even file name er uit halen 
		var fnSplit = $(this).val().split(/[\/\\]/);
		fileName = fnSplit[fnSplit.length - 1];
		$(this).prev('.file').html(fileName);
	});
}

Guestcompass.booking.preprocessForm = function(files, oFormData)
{
	Guestcompass.booking.fileCount = files.length;

	for(var index in files)
   	{
   		// hier moeten we  chekken of het een ites anders is dan image of bestand 
   		Guestcompass.booking.resizeBlob(files[index], oFormData);
   	}
}

Guestcompass.booking.sendForm = function(oFormData)
{	
	// dit wordt na sucess vol toevoegen van bestand aan geroepen dus hier word de fileCount bij gewerkt
	Guestcompass.booking.fileCount--;
 	if(Guestcompass.booking.fileCount == 0)
    {
		$.ajax({
			url: Guestcompass.sCMSLocation+'interface/save-file/h/'+iHotelID,
			type: 'POST',               
			crossDomain: true,
			data: oFormData, 
			xhr: function() {               
				var myXhr = $.ajaxSettings.xhr();  
				if(myXhr.upload){                       
					
					myXhr.upload.target = fileName;
					myXhr.upload.addEventListener('progress',Guestcompass.booking.progress, false);                      
				}
				return myXhr;
			},
			contentType: false,
			processData: false,                     
			success: function(dataupl) {
				//  hier kunnen we 
				//	var json = JSON.parse(dataupl);
				//	$('#uploadername').html(json.success);  
				Guestcompass.booking.send();            
			},
			error: function (xhr, ajaxOptions, thrownError) {
                console.log("Guestcompass.booking.sendForm ERROR:");
		        console.log(xhr.status);
		        console.log(thrownError);
		    }
		});
	}
}

Guestcompass.booking.resizeBlob = function(file, oFormData)
{
	var val = file.name.toLowerCase();
	var regex = new RegExp("(.*?)\.(jpg|jpeg|bmp|gif|png)$");
 	if(!(regex.test(val))) 
 	{
 		var name = 'file'+Guestcompass.booking.fileCount;
 		oFormData.append(name, file);
 		Guestcompass.booking.sendForm(oFormData);
 	}
 	else
 	{
		var reader = new FileReader();
		reader.onloadend = function()
		{
		 	// dit is het formulier 
		    var tempImg = new Image();
		    tempImg.src = reader.result;
		    tempImg.onload = function() {

		        var MAX_WIDTH = 1200;
		        var MAX_HEIGHT = 1200;
		        var tempW = tempImg.width;
		        var tempH = tempImg.height;
		        if (tempW > tempH) {
		            if (tempW > MAX_WIDTH) {
		               tempH *= MAX_WIDTH / tempW;
		               tempW = MAX_WIDTH;
		            }
		        } else {
		            if (tempH > MAX_HEIGHT) {
		               tempW *= MAX_HEIGHT / tempH;
		               tempH = MAX_HEIGHT;
		            }
		        }
		 
		       //	console.log(files.length);
		       //	return
		        var canvas = document.createElement('canvas');
		        canvas.width = tempW;
		        canvas.height = tempH;
		        var ctx = canvas.getContext("2d");
		        ctx.drawImage(this, 0, 0, tempW, tempH);
		        var dataURL = canvas.toDataURL("image/jpeg");

		        var d = new Date();
				var fileName = d.getTime()+''+file.name;
		        //to blop
		        blob = Guestcompass.booking.dataURLToBlob(dataURL);

		        var name = 'file'+Guestcompass.booking.fileCount;
		        oFormData.append(name, blob, fileName);

		        Guestcompass.booking.sendForm(oFormData);	
		    }
	   	}
	    reader.readAsDataURL(file);	
	}
}

Guestcompass.booking.dataURLToBlob = function(dataURI) 
{
	var binary = atob(dataURI.split(',')[1]);
    var array = [];
    for(var i = 0; i < binary.length; i++) {
        array.push(binary.charCodeAt(i));
    }
    return new Blob([new Uint8Array(array)], {type: 'image/jpeg'});
}


Guestcompass.booking.progress = function(e)
{
	if(e.lengthComputable){
		var progressContainer = $('.progress-container');

		var progressbox     = $(progressContainer).find('.progressbox');
		var progressbar     = $(progressContainer).find('.progressbar');
		var statustxt       = $(progressContainer).find('.statustxt');
		var completed       = '0%';
		progressbox.show(250);

		var max = e.total;
		var current = e.loaded;
		var Percentage = Math.floor((current * 100)/max);

		//Progress bar
		progressbar.width(Percentage + '%') //update progressbar percent complete
		statustxt.html(Percentage + '%'); //update status text
		if(Percentage>55)
		{
			statustxt.css('color','#fff'); //change status text to white after 50%
		}
		//console.log(Percentage);
		if(Percentage >= 100) {
		//       progressbox.hide(250);
		}
	}
}

Guestcompass.booking.send = function ()
{
	$(".reservationform .spinner").parent('.reservationform').append('<div class="title return" style="width:500px;">'+Guestcompass.aTranslations['your_reservation_has_been_sent_successfully']+'</div>');
	$(".reservationform .spinner").remove();
}

Guestcompass.booking.rating = function()
{
	$(".reservationform .rating div").click(function()
	{
		$(this).parent().find("div").removeClass("active");
		var iIndex = $(this).index() + 1;
		
		//console.log($(this).parents('.field'));	

		$(this).parents('.field').find('input').val(Array(iIndex+1).join("*"));	
	
		for(var j = 1; j <= iIndex; j++)
		{
			$(this).parent().find('div:nth-child('+j+')').addClass("active");
		}
	});
}

Guestcompass.booking.checkbox =  function(element){
	var html = '<div class="field-checkbox">\
		<label for="'+element.fieldname+'" class="title">'+(typeof element.title != 'undefined' ? element.title : '')+'</label>\
		'+(typeof element.subtext != 'undefined' ? element.subtext : '');
	
	if(typeof element.options != 'undefined' )
	{
		$.each(element.options.split(/\r?\n/), function(index, value){
			html += '<div class="checkbox-container"><input type="checkbox" class="checkbox" name="'+element.fieldname+'[]" value="'+value+'"  id="'+element.fieldname+value+'" /><label for="'+element.fieldname+value+'">'+value+'</label></div>'; 
		});
	}
	html +='</div>';
	return html;
}

Guestcompass.booking.textarea =  function(element){
	var html = '<div class="field-textarea">\
		<label for="'+element.fieldname+'" class="title">'+(typeof element.title != 'undefined' ? element.title : '')+'</label>\
		'+(typeof element.subtext != 'undefined' ? element.subtext : '')+'\
		<textarea name="'+element.fieldname+'" id="'+element.fieldname+'" placeholder="'+(typeof element.prefilled_value != 'undefined' ? element.prefilled_value : '')+'" ></textarea>\
		</div>';
	return html;
}

Guestcompass.booking.select =  function(element){
	var html = '<div class="field">\
		<label for="'+element.fieldname+'" class="title">'+(typeof element.title != 'undefined' ? element.title : '')+'</label>\
		'+(typeof element.subtext != 'undefined' ? element.subtext : '')+'\
		<select name="'+element.fieldname+'" id="'+element.fieldname+'" >';
		
		if(typeof element.options != 'undefined' )
		{
			$.each(element.options.split(/\r?\n/), function(index, value){
				html += '<option>'+value+'</option>';
			});
		}
		html +='</select>\
		</div>';
		
	return html;
}

Guestcompass.booking.radio =  function(element){
	var html = '<div class="field-textarea">\
		<label for="'+element.fieldname+'" class="title">'+(typeof element.title != 'undefined' ? element.title : '')+'</label>\
		'+(typeof element.subtext != 'undefined' ? element.subtext : '');
	
	if(typeof element.options != 'undefined' )
	{
		$.each(element.options.split(/\r?\n/), function(index, value){
			html += '<input type="radio" name="'+element.fieldname+'" value="'+value+'" id="'+element.fieldname+value+'" /><label for="'+element.fieldname+value+'"><div></div></label><label for="'+element.fieldname+value+'">'+value+'</label><br/>';
		});
	}
	html +='<div class="clear"></div>';
	html +='</div>';
	return html;
}

Guestcompass.booking.text = function(element){

	var html = '<div class="field">\
		<label for="'+element.fieldname+'" class="title">'+(typeof element.title != 'undefined' ? element.title : '')+'</label>\
		'+(typeof element.subtext != 'undefined' ? element.subtext : '')+'\
		<input type="'+element.element+'" name="'+element.fieldname+'" placeholder="'+(typeof element.prefilled_value != 'undefined' ? element.prefilled_value : '')+'" id="'+element.fieldname+'" />\
		</div>';
	return html;
}


Guestcompass.booking.date = function(element){
/*
	werkt niet in android 

	var html = '<div class="field">\
		<label for="'+element.fieldname+'" class="title">'+(typeof element.title != 'undefined' ? element.title : '')+'</label>\
		'+(typeof element.subtext != 'undefined' ? element.subtext : '')+'\
		<input class="date" type="text" name="'+element.fieldname+'" id="'+element.fieldname+'" readonly />\
		</div>';
	return html;
*/

}

Guestcompass.booking.widget = function (ofields){

	sWidgetHtml = '<div class="reservation">';
	sWidgetHtml += '<h2></h2>';
	sWidgetHtml += '<form class="reservationform" >';
	

	var title = '';

	$.each(ofields, function(index, value){
		
		switch(value.element)
		{
			case 'checkbox' :
				sWidgetHtml += Guestcompass.booking.checkbox(value);
				sWidgetHtml += '<div class="clear"></div>';
			break;
			case 'textarea' :
				sWidgetHtml += Guestcompass.booking.textarea(value);
				sWidgetHtml += '<div class="clear"></div>';
			break;
			case 'select':
				sWidgetHtml += Guestcompass.booking.select(value);
				sWidgetHtml += '<div class="clear"></div>';
			break;
			case 'radio' :
				sWidgetHtml += Guestcompass.booking.radio(value);
				sWidgetHtml += '<div class="clear"></div>';
			break;
			case 'datetime-local' :
				sWidgetHtml += Guestcompass.booking.date(value);
				sWidgetHtml += '<div class="clear"></div>';
			break;
			case 'main' :
				title = value.title;
				
			break;
			default:
				sWidgetHtml += Guestcompass.booking.text(value)
				sWidgetHtml += '<div class="clear"></div>';
		}
	});

	var sKamernummer = "";
	var sAchternaam = "";

	if(window.localStorage.hasOwnProperty('kamernummer') && typeof window.localStorage.getItem('kamernummer') != 'undefined'){
		sKamernummer = window.localStorage.getItem('kamernummer');
	}
	if(window.localStorage.hasOwnProperty('achternaam')){
		sAchternaam = window.localStorage.getItem('achternaam');	
	}

	sWidgetHtml += '<div class="field"><div class="title">'+Guestcompass.aTranslations['your_last_name']+'</div>\
	<input type="text" name="achternaam" id="formachternaam" value="'+sAchternaam+'" required /></div>\
	<div class="field"><div class="title">'+Guestcompass.aTranslations['your_room_number']+'</div>\
	<input type="text" name="kamernummer" id="formkamernummer" value="'+sKamernummer+'" required /></div>';
						

	sWidgetHtml += '<input type="hidden" name="mail_title" value="'+title+'" />';
	sWidgetHtml += '<div class="submit"><input type="submit" value="'+Guestcompass.aTranslations['send_inquiry']+'" /></div>\
	</form></div><div class="clear"></div>';

	sWidgetHtml = sWidgetHtml.replace('<h2></h2>', '<h2>'+title+'</h2>')

	return sWidgetHtml ;
}



/*
				if(file.type.match(/image.*//*)) {
					
					 console.log('An image has been loaded');
*/
					// Load the image
/*
					var reader = new FileReader();
					reader.onload = function (readerEvent) {
						var image = new Image();
						image.onload = function (imageEvent) {

							// Resize the image
							var canvas = document.createElement('canvas'),
								max_size = 1200,
								width = image.width,
								height = image.height;
							if (width > height) {
								if (width > max_size) {
									height *= max_size / width;
									width = max_size;
								}
							} else {
								if (height > max_size) {
									width *= max_size / height;
									height = max_size;
								}
							}
							canvas.width = width;
							canvas.height = height;
							canvas.getContext('2d').drawImage(image, 0, 0, width, height);
							var dataUrl = canvas.toDataURL('image/jpeg');
							//var resizedImage = dataURLToBlob(dataUrl);
						
							fileData.append('image_data', dataUrl);
	//						console.log(resizedImage);


							console.log('send save file ');
							console.log(fileData);

							$.ajax({
								url: Guestcompass.sCMSLocation+'interface/save-file/h/'+iHotelID,
								type: 'POST',               
								crossDomain: true,
								data: fileData, 
								cache: false,       
								xhr: function() {               
									var myXhr = $.ajaxSettings.xhr();  
									if(myXhr.upload){                       
										
										myXhr.upload.target = fileName;

										myXhr.upload.addEventListener('progress',progress, false);                      
									}
									return myXhr;
								},
								contentType: false,
								processData: false,                     
								success: function(dataupl) {
									console.log('success');
									//  hier kunnen we 
									//	var json = JSON.parse(dataupl);
									//	$('#uploadername').html(json.success);              
								}
							});

						}
						image.src = readerEvent.target.result;
					}
					reader.readAsDataURL(file);
			//	}
			//	else
			//	{
					
					/// hier moeten we nog maar eens naar kijken 
					//alert('kunnen nog geen bestanden uploaden');
					// gaat niet werken maar ja 
				$.each(file, function(key, value){
					console.log(key);
					console.log(value);	

					fileData.append(key, value);
				});
				//}

				var d = new Date();
				var fileName = d.getTime()+''+file[0].name;
				console.log(fileName)

				fileData.append('fileName',fileName);
				
	
				

				console.log(fileData);

				$.ajax({
					url: Guestcompass.sCMSLocation+'interface/save-file/h/'+iHotelID,
					type: 'POST',               
					crossDomain: true,
					data: fileData, 
					cache: false,       
					xhr: function() {               
						var myXhr = $.ajaxSettings.xhr();  
						if(myXhr.upload){                       
							
							myXhr.upload.target = fileName;

							myXhr.upload.addEventListener('progress',progress, false);                      
						}
						return myXhr;
					},
					contentType: false,
					processData: false,                     
					success: function(dataupl) {
						console.log('success');
						//  hier kunnen we 
						//	var json = JSON.parse(dataupl);
						//	$('#uploadername').html(json.success);              
					}
				});

				
				// verstuur bestand zou kunnen dat dit in een call back moet
			}

	/*
				
				
			}
	*/