danielebarchiesi@0: 
danielebarchiesi@0: (function ($) {
danielebarchiesi@0:   Drupal.CTools = Drupal.CTools || {};
danielebarchiesi@0:   Drupal.CTools.Stylizer = {};
danielebarchiesi@0: 
danielebarchiesi@0:   Drupal.CTools.Stylizer.addFarbtastic = function(context) {
danielebarchiesi@0:     // This behavior attaches by ID, so is only valid once on a page.
danielebarchiesi@0:     if ($('ctools_stylizer_color_scheme_form .color-form.Stylizer-processed').size()) {
danielebarchiesi@0:       return;
danielebarchiesi@0:     }
danielebarchiesi@0: 
danielebarchiesi@0:     var form = $('.color-form', context);
danielebarchiesi@0:     var inputs = [];
danielebarchiesi@0:     var hooks = [];
danielebarchiesi@0:     var locks = [];
danielebarchiesi@0:     var focused = null;
danielebarchiesi@0: 
danielebarchiesi@0:     // Add Farbtastic
danielebarchiesi@0:     $(form).prepend('<div id="placeholder"></div>').addClass('color-processed');
danielebarchiesi@0:     var farb = $.farbtastic('#placeholder');
danielebarchiesi@0: 
danielebarchiesi@0:     // Decode reference colors to HSL
danielebarchiesi@0:   /*var reference = Drupal.settings.Stylizer.reference.clone();
danielebarchiesi@0:     for (i in reference) {
danielebarchiesi@0:       reference[i] = farb.RGBToHSL(farb.unpack(reference[i]));
danielebarchiesi@0:     } */
danielebarchiesi@0: 
danielebarchiesi@0:     // Set up colorscheme selector
danielebarchiesi@0:     $('#edit-scheme', form).change(function () {
danielebarchiesi@0:       var colors = this.options[this.selectedIndex].value;
danielebarchiesi@0:       if (colors != '') {
danielebarchiesi@0:         colors = colors.split(',');
danielebarchiesi@0:         for (i in colors) {
danielebarchiesi@0:           callback(inputs[i], colors[i], false, true);
danielebarchiesi@0:         }
danielebarchiesi@0:       }
danielebarchiesi@0:     });
danielebarchiesi@0: 
danielebarchiesi@0:     /**
danielebarchiesi@0:      * Shift a given color, using a reference pair (ref in HSL).
danielebarchiesi@0:      *
danielebarchiesi@0:      * This algorithm ensures relative ordering on the saturation and luminance
danielebarchiesi@0:      * axes is preserved, and performs a simple hue shift.
danielebarchiesi@0:      *
danielebarchiesi@0:      * It is also symmetrical. If: shift_color(c, a, b) == d,
danielebarchiesi@0:      *                        then shift_color(d, b, a) == c.
danielebarchiesi@0:      */
danielebarchiesi@0:     function shift_color(given, ref1, ref2) {
danielebarchiesi@0:       // Convert to HSL
danielebarchiesi@0:       given = farb.RGBToHSL(farb.unpack(given));
danielebarchiesi@0: 
danielebarchiesi@0:       // Hue: apply delta
danielebarchiesi@0:       given[0] += ref2[0] - ref1[0];
danielebarchiesi@0: 
danielebarchiesi@0:       // Saturation: interpolate
danielebarchiesi@0:       if (ref1[1] == 0 || ref2[1] == 0) {
danielebarchiesi@0:         given[1] = ref2[1];
danielebarchiesi@0:       }
danielebarchiesi@0:       else {
danielebarchiesi@0:         var d = ref1[1] / ref2[1];
danielebarchiesi@0:         if (d > 1) {
danielebarchiesi@0:           given[1] /= d;
danielebarchiesi@0:         }
danielebarchiesi@0:         else {
danielebarchiesi@0:           given[1] = 1 - (1 - given[1]) * d;
danielebarchiesi@0:         }
danielebarchiesi@0:       }
danielebarchiesi@0: 
danielebarchiesi@0:       // Luminance: interpolate
danielebarchiesi@0:       if (ref1[2] == 0 || ref2[2] == 0) {
danielebarchiesi@0:         given[2] = ref2[2];
danielebarchiesi@0:       }
danielebarchiesi@0:       else {
danielebarchiesi@0:         var d = ref1[2] / ref2[2];
danielebarchiesi@0:         if (d > 1) {
danielebarchiesi@0:           given[2] /= d;
danielebarchiesi@0:         }
danielebarchiesi@0:         else {
danielebarchiesi@0:           given[2] = 1 - (1 - given[2]) * d;
danielebarchiesi@0:         }
danielebarchiesi@0:       }
danielebarchiesi@0: 
danielebarchiesi@0:       return farb.pack(farb.HSLToRGB(given));
danielebarchiesi@0:     }
danielebarchiesi@0: 
danielebarchiesi@0:     /**
danielebarchiesi@0:      * Callback for Farbtastic when a new color is chosen.
danielebarchiesi@0:      */
danielebarchiesi@0:     function callback(input, color, propagate, colorscheme) {
danielebarchiesi@0:       // Set background/foreground color
danielebarchiesi@0:       $(input).css({
danielebarchiesi@0:         backgroundColor: color,
danielebarchiesi@0:         'color': farb.RGBToHSL(farb.unpack(color))[2] > 0.5 ? '#000' : '#fff'
danielebarchiesi@0:       });
danielebarchiesi@0: 
danielebarchiesi@0:       // Change input value
danielebarchiesi@0:       if (input.value && input.value != color) {
danielebarchiesi@0:         input.value = color;
danielebarchiesi@0: 
danielebarchiesi@0:         // Update locked values
danielebarchiesi@0:         if (propagate) {
danielebarchiesi@0:           var i = input.i;
danielebarchiesi@0:           for (j = i + 1; ; ++j) {
danielebarchiesi@0:             if (!locks[j - 1] || $(locks[j - 1]).is('.unlocked')) break;
danielebarchiesi@0:             var matched = shift_color(color, reference[input.key], reference[inputs[j].key]);
danielebarchiesi@0:             callback(inputs[j], matched, false);
danielebarchiesi@0:           }
danielebarchiesi@0:           for (j = i - 1; ; --j) {
danielebarchiesi@0:             if (!locks[j] || $(locks[j]).is('.unlocked')) break;
danielebarchiesi@0:             var matched = shift_color(color, reference[input.key], reference[inputs[j].key]);
danielebarchiesi@0:             callback(inputs[j], matched, false);
danielebarchiesi@0:           }
danielebarchiesi@0: 
danielebarchiesi@0:         }
danielebarchiesi@0: 
danielebarchiesi@0:         // Reset colorscheme selector
danielebarchiesi@0:         if (!colorscheme) {
danielebarchiesi@0:           resetScheme();
danielebarchiesi@0:         }
danielebarchiesi@0:       }
danielebarchiesi@0: 
danielebarchiesi@0:     }
danielebarchiesi@0: 
danielebarchiesi@0:     /**
danielebarchiesi@0:      * Reset the color scheme selector.
danielebarchiesi@0:      */
danielebarchiesi@0:     function resetScheme() {
danielebarchiesi@0:       $('#edit-scheme', form).each(function () {
danielebarchiesi@0:         this.selectedIndex = this.options.length - 1;
danielebarchiesi@0:       });
danielebarchiesi@0:     }
danielebarchiesi@0: 
danielebarchiesi@0:     // Focus the Farbtastic on a particular field.
danielebarchiesi@0:     function focus() {
danielebarchiesi@0:       var input = this;
danielebarchiesi@0:       // Remove old bindings
danielebarchiesi@0:       focused && $(focused).unbind('keyup', farb.updateValue)
danielebarchiesi@0:           .unbind('keyup', resetScheme)
danielebarchiesi@0:           .parent().removeClass('item-selected');
danielebarchiesi@0: 
danielebarchiesi@0:       // Add new bindings
danielebarchiesi@0:       focused = this;
danielebarchiesi@0:       farb.linkTo(function (color) { callback(input, color, true, false); });
danielebarchiesi@0:       farb.setColor(this.value);
danielebarchiesi@0:       $(focused).keyup(farb.updateValue).keyup(resetScheme)
danielebarchiesi@0:         .parent().addClass('item-selected');
danielebarchiesi@0:     }
danielebarchiesi@0: 
danielebarchiesi@0:     // Initialize color fields
danielebarchiesi@0:     $('#palette input.form-text', form)
danielebarchiesi@0:     .each(function () {
danielebarchiesi@0:       // Extract palette field name
danielebarchiesi@0:       this.key = this.id.substring(13);
danielebarchiesi@0: 
danielebarchiesi@0:       // Link to color picker temporarily to initialize.
danielebarchiesi@0:       farb.linkTo(function () {}).setColor('#000').linkTo(this);
danielebarchiesi@0: 
danielebarchiesi@0:       // Add lock
danielebarchiesi@0:       var i = inputs.length;
danielebarchiesi@0:       if (inputs.length) {
danielebarchiesi@0:         var lock = $('<div class="lock"></div>').toggle(
danielebarchiesi@0:           function () {
danielebarchiesi@0:             $(this).addClass('unlocked');
danielebarchiesi@0:             $(hooks[i - 1]).attr('class',
danielebarchiesi@0:               locks[i - 2] && $(locks[i - 2]).is(':not(.unlocked)') ? 'hook up' : 'hook'
danielebarchiesi@0:             );
danielebarchiesi@0:             $(hooks[i]).attr('class',
danielebarchiesi@0:               locks[i] && $(locks[i]).is(':not(.unlocked)') ? 'hook down' : 'hook'
danielebarchiesi@0:             );
danielebarchiesi@0:           },
danielebarchiesi@0:           function () {
danielebarchiesi@0:             $(this).removeClass('unlocked');
danielebarchiesi@0:             $(hooks[i - 1]).attr('class',
danielebarchiesi@0:               locks[i - 2] && $(locks[i - 2]).is(':not(.unlocked)') ? 'hook both' : 'hook down'
danielebarchiesi@0:             );
danielebarchiesi@0:             $(hooks[i]).attr('class',
danielebarchiesi@0:               locks[i] && $(locks[i]).is(':not(.unlocked)') ? 'hook both' : 'hook up'
danielebarchiesi@0:             );
danielebarchiesi@0:           }
danielebarchiesi@0:         );
danielebarchiesi@0:         $(this).after(lock);
danielebarchiesi@0:         locks.push(lock);
danielebarchiesi@0:       };
danielebarchiesi@0: 
danielebarchiesi@0:       // Add hook
danielebarchiesi@0:       var $this = $(this);
danielebarchiesi@0:       var hook = $('<div class="hook"></div>');
danielebarchiesi@0:       $this.after(hook);
danielebarchiesi@0:       hooks.push(hook);
danielebarchiesi@0: 
danielebarchiesi@0:       $this.parent().find('.lock').click();
danielebarchiesi@0:       this.i = i;
danielebarchiesi@0:       inputs.push(this);
danielebarchiesi@0:     })
danielebarchiesi@0:     .focus(focus);
danielebarchiesi@0: 
danielebarchiesi@0:     $('#palette label', form);
danielebarchiesi@0: 
danielebarchiesi@0:     // Focus first color
danielebarchiesi@0:     focus.call(inputs[0]);
danielebarchiesi@0:   };
danielebarchiesi@0: 
danielebarchiesi@0:   Drupal.behaviors.CToolsColorSettings = {
danielebarchiesi@0:     attach: function() {
danielebarchiesi@0:       $('.ctools-stylizer-color-edit:not(.ctools-color-processed)')
danielebarchiesi@0:         .addClass('ctools-color-processed')
danielebarchiesi@0:         .each(function() {
danielebarchiesi@0:           Drupal.CTools.Stylizer.addFarbtastic('#' + $(this).attr('id'));
danielebarchiesi@0:         });
danielebarchiesi@0: 
danielebarchiesi@0:       $('div.form-item div.ctools-style-icon:not(.ctools-color-processed)')
danielebarchiesi@0:         .addClass('ctools-color-processed')
danielebarchiesi@0:         .click(function() {
danielebarchiesi@0:           $widget = $('input', $(this).parent());
danielebarchiesi@0:           // Toggle if a checkbox, turn on if a radio.
danielebarchiesi@0:           $widget.attr('checked', !$widget.attr('checked') || $widget.is('input[type=radio]'));
danielebarchiesi@0:         });
danielebarchiesi@0:     }
danielebarchiesi@0:   }
danielebarchiesi@0: })(jQuery);