← Back to branch summary

~ubuntu-branches/ubuntu/trusty/phpmyadmin/trusty

« back to all changes in this revision

Viewing changes to js/mooRainbow/mooRainbow.js

  • Committer: Bazaar Package Importer
  • Author(s): Thijs Kinkhorst
  • Date: 2009-02-16 17:58:28 UTC
  • mfrom: (13.1.4 jaunty)
  • Revision ID: james.westby@ubuntu.com-20090216175828-d2dllrukk9kecv4k
Tags: 4:3.1.2-2
http://bugs.debian.org/513690
* Upload to unstable.
* [INTL:es] Spanish debconf template update (Closes: #513690).

Show diffs side-by-side

added added

removed removed

Lines of Context:
js/mooRainbow/mooRainbow.js
 
1
/***
 
2
 * MooRainbow
 
3
 *
 
4
 * @version             1.2b1
 
5
 * @license             MIT-style license
 
6
 * @author              Djamil Legato (w00fz) - < w00fzIT [at] gmail.com >
 
7
 * @infos               http://moorainbow.woolly-sheep.net
 
8
 * @copyright   Author
 
9
 * 
 
10
 * includes a fix for mootools 1.2 by Piotr Przybylski
 
11
 */
 
12
 
 
13
var MooRainbow = new Class({
 
14
        Implements: [Options, Events],
 
15
        options: {
 
16
                id: 'mooRainbow',
 
17
                prefix: 'moor-',
 
18
                imgPath: 'images/',
 
19
                startColor: [255, 0, 0],
 
20
                wheel: false,
 
21
                onComplete: Class.empty,
 
22
                onChange: Class.empty,
 
23
                selectText: 'Select'
 
24
        },
 
25
        
 
26
        initialize: function(el, options) {
 
27
                this.element = $(el); if (!this.element) return;
 
28
                this.setOptions(options);
 
29
                
 
30
                this.sliderPos = 0;
 
31
                this.pickerPos = {x: 0, y: 0};
 
32
                this.backupColor = this.options.startColor;
 
33
                this.currentColor = this.options.startColor;
 
34
                this.sets = {
 
35
                        rgb: [],
 
36
                        hsb: [],
 
37
                        hex: [] 
 
38
                };
 
39
                this.pickerClick = this.sliderClick  = false;
 
40
                if (!this.layout) this.doLayout();
 
41
                this.OverlayEvents();
 
42
                this.sliderEvents();
 
43
                this.backupEvent();
 
44
                if (this.options.wheel) this.wheelEvents();
 
45
                this.element.addEvent('click', function(e) { this.toggle(e); }.bind(this));
 
46
                                
 
47
                this.layout.overlay.setStyle('background-color', this.options.startColor.rgbToHex());
 
48
                this.layout.backup.setStyle('background-color', this.backupColor.rgbToHex());
 
49
 
 
50
                this.pickerPos.x = this.snippet('curPos').l + this.snippet('curSize', 'int').w;
 
51
                this.pickerPos.y = this.snippet('curPos').t + this.snippet('curSize', 'int').h;
 
52
                
 
53
                this.manualSet(this.options.startColor);
 
54
                
 
55
                this.pickerPos.x = this.snippet('curPos').l + this.snippet('curSize', 'int').w;
 
56
                this.pickerPos.y = this.snippet('curPos').t + this.snippet('curSize', 'int').h;
 
57
                this.sliderPos = this.snippet('arrPos') - this.snippet('arrSize', 'int');
 
58
 
 
59
                if (Browser.Engine.webkit) this.hide();
 
60
        },
 
61
        
 
62
        toggle: function() {
 
63
                this[this.visible ? 'hide' : 'show']()
 
64
        },
 
65
        
 
66
        show: function() {
 
67
                this.rePosition();
 
68
                this.layout.setStyle('display', 'block');
 
69
                this.visible = true;
 
70
        },
 
71
        
 
72
        hide: function() {
 
73
                this.layout.setStyles({'display': 'none'});
 
74
                this.visible = false;
 
75
        },
 
76
        
 
77
        manualSet: function(color, type) {
 
78
                if (!type || (type != 'hsb' && type != 'hex')) type = 'rgb';
 
79
                var rgb, hsb, hex;
 
80
 
 
81
                if (type == 'rgb') { rgb = color; hsb = color.rgbToHsb(); hex = color.rgbToHex(); } 
 
82
                else if (type == 'hsb') { hsb = color; rgb = color.hsbToRgb(); hex = rgb.rgbToHex(); }
 
83
                else { hex = color; rgb = color.hexToRgb(true); hsb = rgb.rgbToHsb(); }
 
84
                
 
85
                this.setMooRainbow(rgb);
 
86
                this.autoSet(hsb);
 
87
        },
 
88
        
 
89
        autoSet: function(hsb) {
 
90
                var curH = this.snippet('curSize', 'int').h;
 
91
                var curW = this.snippet('curSize', 'int').w;
 
92
                var oveH = this.layout.overlay.height;
 
93
                var oveW = this.layout.overlay.width;
 
94
                var sliH = this.layout.slider.height;
 
95
                var arwH = this.snippet('arrSize', 'int');
 
96
                var hue;
 
97
                
 
98
                var posx = Math.round(((oveW * hsb[1]) / 100) - curW);
 
99
                var posy = Math.round(- ((oveH * hsb[2]) / 100) + oveH - curH);
 
100
 
 
101
                var c = Math.round(((sliH * hsb[0]) / 360)); c = (c == 360) ? 0 : c;
 
102
                var position = sliH - c + this.snippet('slider') - arwH;
 
103
                hue = [this.sets.hsb[0], 100, 100].hsbToRgb().rgbToHex();
 
104
                
 
105
                this.layout.cursor.setStyles({'top': posy, 'left': posx});
 
106
                this.layout.arrows.setStyle('top', position);
 
107
                this.layout.overlay.setStyle('background-color', hue);
 
108
                this.sliderPos = this.snippet('arrPos') - arwH;
 
109
                this.pickerPos.x = this.snippet('curPos').l + curW;
 
110
                this.pickerPos.y = this.snippet('curPos').t + curH;
 
111
        },
 
112
        
 
113
        setMooRainbow: function(color, type) {
 
114
                if (!type || (type != 'hsb' && type != 'hex')) type = 'rgb';
 
115
                var rgb, hsb, hex;
 
116
 
 
117
                if (type == 'rgb') { rgb = color; hsb = color.rgbToHsb(); hex = color.rgbToHex(); } 
 
118
                else if (type == 'hsb') { hsb = color; rgb = color.hsbToRgb(); hex = rgb.rgbToHex(); }
 
119
                else { hex = color; rgb = color.hexToRgb(); hsb = rgb.rgbToHsb(); }
 
120
 
 
121
                this.sets = {
 
122
                        rgb: rgb,
 
123
                        hsb: hsb,
 
124
                        hex: hex
 
125
                };
 
126
 
 
127
                if (!$chk(this.pickerPos.x))
 
128
                        this.autoSet(hsb);              
 
129
 
 
130
                this.RedInput.value = rgb[0];
 
131
                this.GreenInput.value = rgb[1];
 
132
                this.BlueInput.value = rgb[2];
 
133
                this.HueInput.value = hsb[0];
 
134
                this.SatuInput.value =  hsb[1];
 
135
                this.BrighInput.value = hsb[2];
 
136
                this.hexInput.value = hex;
 
137
                
 
138
                this.currentColor = rgb;
 
139
 
 
140
                this.chooseColor.setStyle('background-color', rgb.rgbToHex());
 
141
        },
 
142
        
 
143
        parseColors: function(x, y, z) {
 
144
                var s = Math.round((x * 100) / this.layout.overlay.width);
 
145
                var b = 100 - Math.round((y * 100) / this.layout.overlay.height);
 
146
                var h = 360 - Math.round((z * 360) / this.layout.slider.height) + this.snippet('slider') - this.snippet('arrSize', 'int');
 
147
                h -= this.snippet('arrSize', 'int');
 
148
                h = (h >= 360) ? 0 : (h < 0) ? 0 : h;
 
149
                s = (s > 100) ? 100 : (s < 0) ? 0 : s;
 
150
                b = (b > 100) ? 100 : (b < 0) ? 0 : b;
 
151
 
 
152
                return [h, s, b];
 
153
        },
 
154
        
 
155
        OverlayEvents: function() {
 
156
                var lim, curH, curW, inputs;
 
157
                curH = this.snippet('curSize', 'int').h;
 
158
                curW = this.snippet('curSize', 'int').w;
 
159
                inputs = $A(this.arrRGB).concat(this.arrHSB, this.hexInput);
 
160
 
 
161
                document.addEvent('click', function() { 
 
162
                        if(this.visible) this.hide(this.layout); 
 
163
                }.bind(this));
 
164
 
 
165
                inputs.each(function(el) {
 
166
                        if(el) {
 
167
                                el.addEvent('keydown', this.eventKeydown.bindWithEvent(this, el));
 
168
                                el.addEvent('keyup', this.eventKeyup.bindWithEvent(this, el));
 
169
                        }
 
170
                }, this);
 
171
                [this.element, this.layout].each(function(el) {
 
172
                        el.addEvents({
 
173
                                'click': function(e) { new Event(e).stop();},
 
174
                                'keyup': function(e) {
 
175
                                        e = new Event(e);
 
176
                                        if(e.key == 'esc' && this.visible) this.hide(this.layout);
 
177
                                }.bind(this)
 
178
                        }, this);
 
179
                }, this);
 
180
                
 
181
                lim = {
 
182
                        x: [0 - curW, (this.layout.overlay.width - curW)],
 
183
                        y: [0 - curH, (this.layout.overlay.height - curH)]
 
184
                };
 
185
 
 
186
                this.layout.drag = new Drag(this.layout.cursor, {
 
187
                        limit: lim,
 
188
                        onStart: this.overlayDrag.bind(this),
 
189
                        onDrag: this.overlayDrag.bind(this),
 
190
                        snap: 0
 
191
                });     
 
192
                
 
193
                this.layout.overlay2.addEvent('mousedown', function(e){
 
194
                        e = new Event(e);
 
195
                        this.layout.cursor.setStyles({
 
196
                                'top': e.page.y - this.layout.overlay.getPosition().y - curH,
 
197
                                'left': e.page.x - this.layout.overlay.getPosition().x - curW
 
198
                        });
 
199
                        this.overlayDrag();
 
200
                        this.layout.drag.start(e);
 
201
                }.bind(this));
 
202
                
 
203
                this.okButton.addEvent('click', function() {
 
204
                        if(this.currentColor == this.options.startColor) {
 
205
                                this.hide();
 
206
                                this.fireEvent('onComplete', [this.sets, this]);
 
207
                        }
 
208
                        else {
 
209
                                this.backupColor = this.currentColor;
 
210
                                this.layout.backup.setStyle('background-color', this.backupColor.rgbToHex());
 
211
                                this.hide();
 
212
                                this.fireEvent('onComplete', [this.sets, this]);
 
213
                        }
 
214
                }.bind(this));
 
215
        },
 
216
        
 
217
        overlayDrag: function() {
 
218
                var curH = this.snippet('curSize', 'int').h;
 
219
                var curW = this.snippet('curSize', 'int').w;
 
220
                this.pickerPos.x = this.snippet('curPos').l + curW;
 
221
                this.pickerPos.y = this.snippet('curPos').t + curH;
 
222
                
 
223
                this.setMooRainbow(this.parseColors(this.pickerPos.x, this.pickerPos.y, this.sliderPos), 'hsb');
 
224
                this.fireEvent('onChange', [this.sets, this]);
 
225
        },
 
226
        
 
227
        sliderEvents: function() {
 
228
                var arwH = this.snippet('arrSize', 'int'), lim;
 
229
 
 
230
                lim = [0 + this.snippet('slider') - arwH, this.layout.slider.height - arwH + this.snippet('slider')];
 
231
                this.layout.sliderDrag = new Drag(this.layout.arrows, {
 
232
                        limit: {y: lim},
 
233
                        modifiers: {x: false},
 
234
                        onStart: this.sliderDrag.bind(this),
 
235
                        onDrag: this.sliderDrag.bind(this),
 
236
                        snap: 0
 
237
                });     
 
238
        
 
239
                this.layout.slider.addEvent('mousedown', function(e){
 
240
                        e = new Event(e);
 
241
 
 
242
                        this.layout.arrows.setStyle(
 
243
                                'top', e.page.y - this.layout.slider.getPosition().y + this.snippet('slider') - arwH
 
244
                        );
 
245
                        this.sliderDrag();
 
246
                        this.layout.sliderDrag.start(e);
 
247
                }.bind(this));
 
248
        },
 
249
 
 
250
        sliderDrag: function() {
 
251
                var arwH = this.snippet('arrSize', 'int'), hue;
 
252
                
 
253
                this.sliderPos = this.snippet('arrPos') - arwH;
 
254
                this.setMooRainbow(this.parseColors(this.pickerPos.x, this.pickerPos.y, this.sliderPos), 'hsb');
 
255
                hue = [this.sets.hsb[0], 100, 100].hsbToRgb().rgbToHex();
 
256
                this.layout.overlay.setStyle('background-color', hue);
 
257
                this.fireEvent('onChange', [this.sets, this]);
 
258
        },
 
259
        
 
260
        backupEvent: function() {
 
261
                this.layout.backup.addEvent('click', function() {
 
262
                        this.manualSet(this.backupColor);
 
263
                        this.fireEvent('onChange', [this.sets, this]);
 
264
                }.bind(this));
 
265
        },
 
266
        
 
267
        wheelEvents: function() {
 
268
                var arrColors = $A(this.arrRGB).extend(this.arrHSB);
 
269
 
 
270
                arrColors.each(function(el) {
 
271
                        el.addEvents({
 
272
                                'mousewheel': this.eventKeys.bindWithEvent(this, el),
 
273
                                'keydown': this.eventKeys.bindWithEvent(this, el)
 
274
                        });
 
275
                }, this);
 
276
                
 
277
                [this.layout.arrows, this.layout.slider].each(function(el) {
 
278
                        el.addEvents({
 
279
                                'mousewheel': this.eventKeys.bindWithEvent(this, [this.arrHSB[0], 'slider']),
 
280
                                'keydown': this.eventKeys.bindWithEvent(this, [this.arrHSB[0], 'slider'])
 
281
                        });
 
282
                }, this);
 
283
        },
 
284
        
 
285
        eventKeys: function(e, el, id) {
 
286
                var wheel, type;
 
287
                id = (!id) ? el.id : this.arrHSB[0];
 
288
 
 
289
                if (e.type == 'keydown') {
 
290
                        if (e.key == 'up') wheel = 1;
 
291
                        else if (e.key == 'down') wheel = -1;
 
292
                        else return;
 
293
                } else if (e.type == Element.Events.mousewheel.base) wheel = (e.wheel > 0) ? 1 : -1;
 
294
                
 
295
                if (this.arrRGB.contains(el)) type = 'rgb';
 
296
                else if (this.arrHSB.contains(el)) type = 'hsb';
 
297
                else type = 'hsb';
 
298
 
 
299
                if (type == 'rgb') {
 
300
                        var rgb = this.sets.rgb, hsb = this.sets.hsb, prefix = this.options.prefix, pass;
 
301
                        var value = (el.value.toInt() || 0) + wheel;
 
302
                        value = (value > 255) ? 255 : (value < 0) ? 0 : value;
 
303
 
 
304
                        switch(el.className) {
 
305
                                case prefix + 'rInput': pass = [value, rgb[1], rgb[2]]; break;
 
306
                                case prefix + 'gInput': pass = [rgb[0], value, rgb[2]]; break;
 
307
                                case prefix + 'bInput': pass = [rgb[0], rgb[1], value]; break;
 
308
                                default : pass = rgb;
 
309
                        }
 
310
                        this.manualSet(pass);
 
311
                        this.fireEvent('onChange', [this.sets, this]);
 
312
                } else {
 
313
                        var rgb = this.sets.rgb, hsb = this.sets.hsb, prefix = this.options.prefix, pass;
 
314
                        var value = (el.value.toInt() || 0) + wheel;
 
315
 
 
316
                        if (el.className.test(/(HueInput)/)) value = (value > 359) ? 0 : (value < 0) ? 0 : value;
 
317
                        else value = (value > 100) ? 100 : (value < 0) ? 0 : value;
 
318
                        
 
319
                        switch(el.className) {
 
320
                                case prefix + 'HueInput': pass = [value, hsb[1], hsb[2]]; break;
 
321
                                case prefix + 'SatuInput': pass = [hsb[0], value, hsb[2]]; break;
 
322
                                case prefix + 'BrighInput':     pass = [hsb[0], hsb[1], value]; break;
 
323
                                default : pass = hsb;
 
324
                        }
 
325
                        
 
326
                        this.manualSet(pass, 'hsb');
 
327
                        this.fireEvent('onChange', [this.sets, this]);
 
328
                }
 
329
                e.stop();
 
330
        },
 
331
        
 
332
        eventKeydown: function(e, el) {
 
333
                var n = e.code, k = e.key;
 
334
 
 
335
                if      ((!el.className.test(/hexInput/) && !(n >= 48 && n <= 57)) &&
 
336
                        (k!='backspace' && k!='tab' && k !='delete' && k!='left' && k!='right'))
 
337
                e.stop();
 
338
        },
 
339
        
 
340
        eventKeyup: function(e, el) {
 
341
                var n = e.code, k = e.key, pass, prefix, chr = el.value.charAt(0);
 
342
 
 
343
                if (!$chk(el.value)) return;
 
344
                if (el.className.test(/hexInput/)) {
 
345
                        if (chr != "#" && el.value.length != 6) return;
 
346
                        if (chr == '#' && el.value.length != 7) return;
 
347
                } else {
 
348
                        if (!(n >= 48 && n <= 57) && (!['backspace', 'tab', 'delete', 'left', 'right'].contains(k)) && el.value.length > 3) return;
 
349
                }
 
350
                
 
351
                prefix = this.options.prefix;
 
352
 
 
353
                if (el.className.test(/(rInput|gInput|bInput)/)) {
 
354
                        if (el.value  < 0 || el.value > 255) return;
 
355
                        switch(el.className){
 
356
                                case prefix + 'rInput': pass = [el.value, this.sets.rgb[1], this.sets.rgb[2]]; break;
 
357
                                case prefix + 'gInput': pass = [this.sets.rgb[0], el.value, this.sets.rgb[2]]; break;
 
358
                                case prefix + 'bInput': pass = [this.sets.rgb[0], this.sets.rgb[1], el.value]; break;
 
359
                                default : pass = this.sets.rgb;
 
360
                        }
 
361
                        this.manualSet(pass);
 
362
                        this.fireEvent('onChange', [this.sets, this]);
 
363
                }
 
364
                else if (!el.className.test(/hexInput/)) {
 
365
                        if (el.className.test(/HueInput/) && el.value  < 0 || el.value > 360) return;
 
366
                        else if (el.className.test(/HueInput/) && el.value == 360) el.value = 0;
 
367
                        else if (el.className.test(/(SatuInput|BrighInput)/) && el.value  < 0 || el.value > 100) return;
 
368
                        switch(el.className){
 
369
                                case prefix + 'HueInput': pass = [el.value, this.sets.hsb[1], this.sets.hsb[2]]; break;
 
370
                                case prefix + 'SatuInput': pass = [this.sets.hsb[0], el.value, this.sets.hsb[2]]; break;
 
371
                                case prefix + 'BrighInput': pass = [this.sets.hsb[0], this.sets.hsb[1], el.value]; break;
 
372
                                default : pass = this.sets.hsb;
 
373
                        }
 
374
                        this.manualSet(pass, 'hsb');
 
375
                        this.fireEvent('onChange', [this.sets, this]);
 
376
                } else {
 
377
                        pass = el.value.hexToRgb(true);
 
378
                        if (isNaN(pass[0])||isNaN(pass[1])||isNaN(pass[2])) return;
 
379
 
 
380
                        if ($chk(pass)) {
 
381
                                this.manualSet(pass);
 
382
                                this.fireEvent('onChange', [this.sets, this]);
 
383
                        }
 
384
                }
 
385
                        
 
386
        },
 
387
                        
 
388
        doLayout: function() {
 
389
                var id = this.options.id, prefix = this.options.prefix;
 
390
                var idPrefix = id + ' .' + prefix;
 
391
 
 
392
                this.layout = new Element('div', {
 
393
                        'styles': {'display': 'block', 'position': 'absolute'},
 
394
                        'id': id
 
395
                }).inject(document.body);
 
396
 
 
397
                var box = new Element('div', {
 
398
                        'styles':  {'position': 'relative'},
 
399
                        'class': prefix + 'box'
 
400
                }).inject(this.layout);
 
401
                        
 
402
                var div = new Element('div', {
 
403
                        'styles': {'position': 'absolute', 'overflow': 'hidden'},
 
404
                        'class': prefix + 'overlayBox'
 
405
                }).inject(box);
 
406
                
 
407
                var ar = new Element('div', {
 
408
                        'styles': {'position': 'absolute', 'zIndex': 1},
 
409
                        'class': prefix + 'arrows'
 
410
                }).inject(box);
 
411
                ar.width = ar.getStyle('width').toInt();
 
412
                ar.height = ar.getStyle('height').toInt();
 
413
                
 
414
                var ov = new Element('img', {
 
415
                        'styles': {'background-color': '#fff', 'position': 'relative', 'zIndex': 2},
 
416
                        'src': this.options.imgPath + 'moor_woverlay.png',
 
417
                        'class': prefix + 'overlay'
 
418
                }).inject(div);
 
419
                
 
420
                var ov2 = new Element('img', {
 
421
                        'styles': {'position': 'absolute', 'top': 0, 'left': 0, 'zIndex': 2},
 
422
                        'src': this.options.imgPath + 'moor_boverlay.png',
 
423
                        'class': prefix + 'overlay'
 
424
                }).inject(div);
 
425
                
 
426
                if (Browser.Engine.trident4) {
 
427
                        div.setStyle('overflow', '');
 
428
                        var src = ov.src;
 
429
                        ov.src = this.options.imgPath + 'blank.gif';
 
430
                        ov.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')";
 
431
                        src = ov2.src;
 
432
                        ov2.src = this.options.imgPath + 'blank.gif';
 
433
                        ov2.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')";
 
434
                }
 
435
                ov.width = ov2.width = div.getStyle('width').toInt();
 
436
                ov.height = ov2.height = div.getStyle('height').toInt();
 
437
 
 
438
                var cr = new Element('div', {
 
439
                        'styles': {'overflow': 'hidden', 'position': 'absolute', 'zIndex': 2},
 
440
                        'class': prefix + 'cursor'      
 
441
                }).inject(div);
 
442
                cr.width = cr.getStyle('width').toInt();
 
443
                cr.height = cr.getStyle('height').toInt();
 
444
                
 
445
                var sl = new Element('img', {
 
446
                        'styles': {'position': 'absolute', 'z-index': 2},
 
447
                        'src': this.options.imgPath + 'moor_slider.png',
 
448
                        'class': prefix + 'slider'
 
449
                }).inject(box);
 
450
                this.layout.slider = sl;
 
451
                sl.width = sl.getStyle('width').toInt();
 
452
                sl.height = sl.getStyle('height').toInt();
 
453
 
 
454
                new Element('div', {
 
455
                        'styles': {'position': 'absolute'},
 
456
                        'class': prefix + 'colorBox'
 
457
                }).inject(box);
 
458
 
 
459
                new Element('div', {
 
460
                        'styles': {'zIndex': 2, 'position': 'absolute'},
 
461
                        'class': prefix + 'chooseColor'
 
462
                }).inject(box);
 
463
                        
 
464
                this.layout.backup = new Element('div', {
 
465
                        'styles': {'zIndex': 2, 'position': 'absolute', 'cursor': 'pointer'},
 
466
                        'class': prefix + 'currentColor'
 
467
                }).inject(box);
 
468
                
 
469
                var R = new Element('label').inject(box).setStyle('position', 'absolute');
 
470
                var G = R.clone().inject(box).addClass(prefix + 'gLabel').set('html', 'G: ');
 
471
                var B = R.clone().inject(box).addClass(prefix + 'bLabel').set('html', 'B: ');
 
472
                R.set('html', 'R: ').addClass(prefix + 'rLabel');
 
473
                
 
474
                var inputR = new Element('input');
 
475
                var inputG = inputR.clone().inject(G).addClass(prefix + 'gInput');
 
476
                var inputB = inputR.clone().inject(B).addClass(prefix + 'bInput');
 
477
                inputR.inject(R).addClass(prefix + 'rInput');
 
478
                
 
479
                var HU = new Element('label').inject(box).setStyle('position', 'absolute');
 
480
                var SA = HU.clone().inject(box).addClass(prefix + 'SatuLabel').set('html', 'S: ');
 
481
                var BR = HU.clone().inject(box).addClass(prefix + 'BrighLabel').set('html', 'B: ');
 
482
                HU.set('html', 'H: ').addClass(prefix + 'HueLabel');
 
483
 
 
484
                var inputHU = new Element('input');
 
485
                var inputSA = inputHU.clone().inject(SA).addClass(prefix + 'SatuInput');
 
486
                var inputBR = inputHU.clone().inject(BR).addClass(prefix + 'BrighInput');
 
487
                inputHU.inject(HU).addClass(prefix + 'HueInput');
 
488
                SA.innerHTML += " %"; BR.innerHTML += " %";
 
489
                SP = new Element('span', {'styles': {'position': 'absolute'}, 'class': prefix + 'ballino'})
 
490
                SP.innerHTML = " &deg;"
 
491
                SP.inject(HU,'after');
 
492
 
 
493
                var hex = new Element('label').inject(box).setStyle('position', 'absolute').addClass(prefix + 'hexLabel').set('html', '#hex: ').adopt(new Element('input').addClass(prefix + 'hexInput'));
 
494
                
 
495
                var ok = new Element('input', {
 
496
                        'styles': {'position': 'absolute'},
 
497
                        'type': 'button',
 
498
                        'value': this.options.selectText,
 
499
                        'class': prefix + 'okButton'
 
500
                }).inject(box);
 
501
                
 
502
                this.rePosition();
 
503
 
 
504
                var overlays = $$('#' + id + ' .' + prefix + 'overlay');
 
505
                this.layout.overlay = overlays[0];
 
506
                this.layout.overlay2 = overlays[1];
 
507
                this.layout.cursor = cr;
 
508
                this.layout.arrows = ar;
 
509
                this.chooseColor = this.layout.getElement('.' + prefix + 'chooseColor');
 
510
                this.RedInput = inputR;
 
511
                this.GreenInput = inputG;
 
512
                this.BlueInput = inputB;
 
513
                this.HueInput = inputHU;
 
514
                this.SatuInput = this.layout.getElement('.' + prefix + 'SatuInput');
 
515
                this.BrighInput = this.layout.getElement('.' + prefix + 'BrighInput');
 
516
                this.hexInput = this.layout.getElement('.' + prefix + 'hexInput');;
 
517
 
 
518
                this.arrRGB = [this.RedInput, this.GreenInput, this.BlueInput];
 
519
                this.arrHSB = [this.HueInput, this.SatuInput, this.BrighInput];
 
520
                this.okButton = ok;
 
521
                
 
522
                if (!Browser.Engine.webkit419) this.hide();
 
523
        },
 
524
        rePosition: function() {
 
525
                var coords = this.element.getCoordinates();
 
526
                this.layout.setStyles({
 
527
                        'left': coords.left,
 
528
                        'top': coords.top + coords.height + 1
 
529
                });
 
530
        },
 
531
        
 
532
        snippet: function(mode, type) {
 
533
                var size; type = (type) ? type : 'none';
 
534
 
 
535
                switch(mode) {
 
536
                        case 'arrPos':
 
537
                                var t = this.layout.arrows.getStyle('top').toInt();
 
538
                                size = t;
 
539
                                break;
 
540
                        case 'arrSize': 
 
541
                                var h = this.layout.arrows.height;
 
542
                                h = (type == 'int') ? (h/2).toInt() : h;
 
543
                                size = h;
 
544
                                break;          
 
545
                        case 'curPos':
 
546
                                var l = this.layout.cursor.getStyle('left').toInt();
 
547
                                var t = this.layout.cursor.getStyle('top').toInt();
 
548
                                size = {'l': l, 't': t};
 
549
                                break;
 
550
                        case 'slider':
 
551
                                var t = this.layout.slider.getStyle('marginTop').toInt();
 
552
                                size = t;
 
553
                                break;
 
554
                        default :
 
555
                                var h = this.layout.cursor.height;
 
556
                                var w = this.layout.cursor.width;
 
557
                                h = (type == 'int') ? (h/2).toInt() : h;
 
558
                                w = (type == 'int') ? (w/2).toInt() : w;
 
559
                                size = {w: w, h: h};
 
560
                };
 
561
                return size;
 
562
        }
 
563
});