jQuery( document ).ready( function( $ ){


	$( this ).delegate( '.wpctp-gff-select', 'change', function(){


		var wrap = $(this).closest('.wpctp-gff-wrap');


		var target_option = $(this).find('option[value="'+$(this).val()+'"]');


		var variants = target_option.data('variants').split(',');


		var subsets = target_option.data('subsets').split(',');


		genderCheckbox(variants, 'variant', wrap);


		genderCheckbox(subsets, 'subset', wrap);


		updateGoogleFontData(wrap);


	});


	$( this ).delegate( '.wpctp-gff-variant', 'change', function(){


		var wrap = $(this).closest('.wpctp-gff-wrap');


		if( $( '.wpctp-gff-select' ).val() ){


			updateGoogleFontData( wrap );


		}


	});


	$( this ).delegate( '.wpctp-gff-subset', 'change', function(){


		var wrap = $(this).closest('.wpctp-gff-wrap');


		if( $( '.wpctp-gff-select' ).val() ){


			updateGoogleFontData( wrap );


		}


	});


	function genderCheckbox(data, type, wrap){


		var html = '';


		$.each(data, function( index, value ) {


			html += '<li><label><input class="wpctp-gff-'+type+'" type="checkbox" value="'+value+'">'+value+'</label></li>'


		});


		wrap.find('.wpctp-gff-'+type).html(html);


	}


	function updateGoogleFontData(wrap){


		var data = {};


		data.family = wrap.find('.wpctp-gff-select').val();


		data.category = wrap.find('.wpctp-gff-select option[selected]').data('category');


		data.variants = new Array();


		wrap.find('.wpctp-gff-variant:checked').each(function(){


			data.variants.push($(this).val());


		})


		data.subsets = new Array();


		wrap.find('.wpctp-gff-subset:checked').each(function(){


			data.subsets.push($(this).val());


		})


		wrap.find('.customize-input-google-font').val(JSON.stringify(data)).trigger( 'change');


	}


});