Cacher is the code snippet organizer for pro developers

<?php
/**
 * @copyright   Copyright (C) 2012 Roberto Segura. All rights reserved.
 * @license     GNU General Public License version 3; see LICENSE.txt
 */

defined('JPATH_BASE') or die;
jimport('joomla.form.formfield');

class JFormFieldGooglefonts extends JFormField {
    
    protected $type = 'googlefonts';
    
    const GOOGLE_API_KEY = 'AIzaSyAgKobHKihymUghuE3Z_ZHMzKI1MOKOLE8';
    
    function getInput(){
        // Initialize variables.
        $options = array();
        $fontsJson = null;
        $jsonResponse = 'https://www.googleapis.com/webfonts/v1/webfonts?key=' . self::GOOGLE_API_KEY;
     
        $ch = curl_init();
        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
        curl_setopt($ch, CURLOPT_HEADER, false);
        curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
        curl_setopt($ch, CURLOPT_URL, $jsonResponse);
        curl_setopt($ch, CURLOPT_REFERER, $jsonResponse);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
        $jsonResponse = curl_exec($ch);
        curl_close($ch);
       
        if ($jsonResponse) {
            $document = JFactory::getDocument();
            $decodedResponse = json_decode($jsonResponse);
            
            if (isset($decodedResponse->items)) {
                $fontsJson = "{";
                $options[] = JHtml::_('select.option', '', '- Select font -');
                $j = 0;
                foreach ($decodedResponse->items as $font) {
                    // replace spaces with + in option value
                    $value = str_replace(' ', '+', $font->family);
                    
                    if ($j != 0) {
                        $fontsJson .= ",";
                    }
                    
                    $fontsJson .= '"'.$value.'":';
                    
                    if ( $font->variants) {
                        $i = 0;
                        $fontsJson .= '"';
                        foreach ($font->variants as $variant) {
                            if ($i != 0) {
                                $fontsJson .= ',';
                            }
                            $fontsJson .= $variant;
                            $i++;
                        }
                        $fontsJson .= '"';
                    }
                    $j++;
                    $options[] = JHtml::_('select.option', $value, $font->family);
                }
                $fontsJson .= "}";
                $fieldCssId = str_replace(' ', '_', trim(str_replace(array('][','[',']','-'), array(' ',' ',' ','_'), $this->name)));
                
                $css = "
                #multifont-selected {
                    font-weight: bold;
                    display: inline;
                    margin-right: 10px;
                }
                .multifont-btn, .multifont-btn:visited {
                    -webkit-border-radius: 5px;
                    -moz-border-radius: 5px;
                    border-radius: 5px;
                    background-color: #0088cc;
                    color: #FFFFFF;
                    padding: 3px 8px;
                }";
                $document->addStyleDeclaration($css);  
                $js = "
                    var j = jQuery.noConflict();
                    var fontsJson = {$fontsJson};
                    var multifont1 = '#multifont1';
                    var multifont2 = '#multifont2';
                    var hiddenField = '#{$fieldCssId}';
                    function updateMultifont2() {
                        var key = j(multifont1).val();
                         if (key) {
                            var vals = fontsJson[key].split(',');
                            console.log(vals);
                            var secondChoice = j(multifont2);
                            secondChoice.empty();     
                            j.each(vals, function(index, value) {
                                secondChoice.append('<option value=\"' + value + '\" >' + value + '</option>');
                            });
                         secondChoice.trigger('liszt:updated');
                        }
                    }
                    function updateHidden() {
                        var value = j(multifont1).val() + ':' + j(multifont2).val();
                        j(hiddenField).val(value);
                        j('#multifont-selected').text(value);
                        j('#multiremove').parent().css('display','block');
                        j('#multiadd').parent().css('display','none');
                        return false;
                    }
                    function clearHidden() {
                        j(hiddenField).val('');
                        j('#multiadd').parent().css('display','block');
                        j('#multiremove').parent().css('display','none');
                        return false;
                    }
                    j(function() {
                        updateMultifont2();
                        j(multifont1).change(function() {
                            updateMultifont2();
                        });
                        if (j(hiddenField).val() != '') {
                         // updateHidden();
                         j('#multifont-selected').text(j(hiddenField).val());
                         var hiddenvals = j(hiddenField).val().split(':');
                         j(multifont1).val(hiddenvals[0]);
                         j(multifont2).append('<option selected value=\"' + hiddenvals[1] + '\" >' + hiddenvals[1] + '</option>');
                          j('#multiremove').parent().css('display','block');
                        j('#multiadd').parent().css('display','none');
                         j(multifont1).trigger('liszt:updated');
                         j(multifont2).trigger('liszt:updated');
                        } else {
                            clearHidden();
                        }
                        j('#multiadd').click(function(){
                            updateHidden();
                        });
                        j('#multiremove').click(function(){
                            clearHidden();
                        });
                   });
                ";
                JHtml::_('jquery.framework');
                $document->addScriptDeclaration($js);
            } else{
                $options[] = JHtml::_('select.option', '', 'ERROR: None or bad JSON received');
            }
        } else {
            $options[] = JHtml::_('select.option', '', 'ERROR: Wrong URL or google API KEY?');
        }
        $output = '<div id="multifont-add">';
        $output .= JHTML::_('select.genericlist',  $options, 'multifont1', 'class="inputbox"', 'value', 'text', $this->value);
        $output .= JHTML::_('select.genericlist',  array(), 'multifont2', 'class="inputbox"', 'value', 'text', null);
        $output .= '<a href="#" id="multiadd" class="multifont-btn">Add</a>';
        $output .= '</div>';
        $output .= '<div id="multifont-remove">';
        $output .= '<p id="multifont-selected"></p>';
        $output .= '<a href="#" id="multiremove" class="multifont-btn">Remove</a>';
        $output .= '</div>';
        $output .= '<input type="hidden" id="'.$fieldCssId.'" name="'.$this->name.'" value="'.$this->value.'" />';
        return $output;
    }
}