$(document).ready(function() {

	$('.js-color-select').each(function() {
		initColorSelect($(this));
	});

});

function initColorSelect($item) {
	$item.append('<div class="form__item--color-select"></div>');
	$item.find('select option').each(function() {
		$item.find('.form__item--color-select').append('<div class="form__item--color-select__option" data-val="'+$(this).val()+'" style="background-color: '+$(this).html()+';"></div>');
	});
	$item.find('select').hide();
	$item.find('.form__item--color-select__option[data-val="'+$item.find('select').val()+'"]').addClass('selected');
	$item.find('.form__item--color-select__option').click(function() {
		if(!$(this).hasClass('selected')) {
			$item.find('select').val($(this).data('val'));
			$item.find('.selected').removeClass('selected');
			$(this).addClass('selected');
		}
	});
}