1 /*=====================================================================*\
2 || ###################################################################
4 || # Copyright (c)2002-2010 Blue Static
6 || # This program is free software; you can redistribute it and/or modify
7 || # it under the terms of the GNU General Public License as published by
8 || # the Free Software Foundation; version 2 of the License.
10 || # This program is distributed in the hope that it will be useful, but
11 || # WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
12 || # or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
15 || # You should have received a copy of the GNU General Public License along
16 || # with this program; if not, write to the Free Software Foundation, Inc.,
17 || # 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA
18 || ###################################################################
19 \*=====================================================================*/
28 var backShowing_
= false;
30 // ###################################################################
35 createGenericButton(document
.getElementById("backbutton"), "Done", hide_back
, 0);
36 document
.getElementById("revision").innerHTML
= "(r" + document
.getElementById("revision").innerHTML
.replace(/[^0-9]/g
, "") + ")";
39 // ###################################################################
40 // watches the three RGB fields to make sure they don't go over the limites
41 function rgbwatcher(color
)
43 field
= document
.getElementById(color
+ "input");
46 if (triad
= field
.value
.match(/(rgb
)?\(?([0-9]{1,3}),\s
?([0-9]{1,3}),\s
?([0-9]{1,3})\)?/))
48 document
.getElementById("redinput").value
= triad
[2];
49 document
.getElementById("greeninput").value
= triad
[3];
50 document
.getElementById("blueinput").value
= triad
[4];
58 // sanitize the number
59 var newval
= field
.value
.replace(/[^0-9\-\.]*/g
, "");
60 newval
= Math
.floor(newval
);
62 // make sure we don't go over 255
72 // update the text field
76 colors_
[color] = newval
;
85 // ###################################################################
88 var canvas
= document
.getElementById('wheel');
89 var context
= canvas
.getContext('2d');
90 var radius
= canvas
.width
/ 2 - 3;
91 var center
= [canvas
.width
/ 2, canvas
.height
/ 2];
92 context
.strokeStyle
= 'black';
95 // Draw the sheen gradient.
97 context
.arc(center
[0], center
[1], radius
, 0, Math
.PI
* 2, true);
98 var gradient
= context
.createLinearGradient(0, 0, 0, canvas
.height
);
99 gradient
.addColorStop(0, 'rgb(200, 200, 200)');
100 gradient
.addColorStop(1, 'rgb(0, 0, 0)');
101 context
.fillStyle
= gradient
;
107 // Draw the individual components. Start with red.
109 context
.moveTo(center
[0], center
[1]);
110 context
.arc(canvas
.width
/ 2,
116 context
.lineTo(center
[0], center
[1]);
117 context
.fillStyle
= _GetComponentColorString('red');
123 context
.moveTo(center
[0], center
[1]);
124 context
.arc(canvas
.width
/ 2,
130 context
.lineTo(center
[0], center
[1]);
131 context
.fillStyle
= _GetComponentColorString('green');
137 context
.moveTo(center
[0], center
[1]);
138 context
.arc(canvas
.width
/ 2,
144 context
.lineTo(center
[0], center
[1]);
145 context
.fillStyle
= _GetComponentColorString('blue');
149 // Draw the sheen gradient.
151 context
.arc(center
[0], center
[1], radius
, 0, Math
.PI
* 2, true);
152 var gradient
= context
.createLinearGradient(0, 0, 0, canvas
.height
);
153 gradient
.addColorStop(0, 'rgba(255,255,255,.5)');
154 gradient
.addColorStop(1, 'rgba(0,0,0,0)');
155 context
.fillStyle
= gradient
;
159 // Draw the inner wheel.
161 context
.arc(center
[0], center
[1], canvas
.width
/ 4.75, 0, Math
.PI
* 2, true);
162 context
.fillStyle
= _GetRGBColorString();
164 context
.strokeStyle
= 'black';
169 // ###################################################################
170 // Returns the rgb(,,,) color string.
172 function _GetRGBColorString()
174 return 'rgb(' + colors_
.red
+ ',' + colors_
.green
+ ',' + colors_
.blue
+ ')';
177 // ###################################################################
178 // Returns an individual color component's color string.
180 function _GetComponentColorString(color
)
182 if (color
== 'red') {
183 return 'rgb(' + colors_
.red
+ ',0,0)';
184 } else if (color
== 'green') {
185 return 'rgb(0,' + colors_
.green
+ ',0)';
186 } else if (color
== 'blue') {
187 return 'rgb(0,0,' + colors_
.blue
+ ')';
189 alert('Invalid color ' + color
);
192 // ###################################################################
193 // watches the hex field for updates
194 function hexwatcher()
196 field
= document
.getElementById("hexinput");
199 var newval
= field
.value
.replace(/[^0-9a
-f
]*/gi
, "");
202 var length
= newval
.length
;
204 // make sure we're always 6
207 newval
= newval
.substr(0, 6);
209 else if (length
== 3)
211 newval
= newval
.substr(0, 1) + newval
.substr(0, 1) + newval
.substr(1, 1) + newval
.substr(1, 1) + newval
.substr(2, 1) + newval
.substr(2, 1);
215 for (var i
= length
; i
<= 6; i
++)
217 newval
= "" + newval
+ "0";
222 field
.value
= newval
;
225 colors_
.hex
= newval
;
234 // ###################################################################
235 // update the hex value
236 function update_hex()
238 var hexstr
= dec2hex(colors_
.red
) + dec2hex(colors_
.green
) + dec2hex(colors_
.blue
);
239 colors_
.hex
= hexstr
;
240 document
.getElementById("hexinput").value
= hexstr
;
243 // ###################################################################
244 // update the RGB values
245 function update_rgb()
247 // regex match the bits
248 var bits
= colors_
.hex
.match(/(..)(..)(..)/);
250 colors_
.red
= hex2dec(bits
[1]);
251 colors_
.green
= hex2dec(bits
[2]);
252 colors_
.blue
= hex2dec(bits
[3]);
254 // construct the hex values
255 document
.getElementById("redinput").value
= colors_
.red
;
256 document
.getElementById("greeninput").value
= colors_
.green
;
257 document
.getElementById("blueinput").value
= colors_
.blue
;
260 // ###################################################################
261 // convert a decimal to a hexidecimal
262 function dec2hex(dec
)
264 var hexstr
= "0123456789ABCDEF";
266 var high
= (dec
- low
) / 16;
267 hex
= "" + hexstr
.charAt(high
) + hexstr
.charAt(low
);
269 return hex
.toString();
272 // ###################################################################
273 // converts a hexidecimal to a decimal
274 function hex2dec(hex
)
276 return parseInt(hex
, 16);
279 // ###################################################################
280 // ###################################################################
281 // ###################################################################
289 var front
= document
.getElementById("front");
290 var back
= document
.getElementById("back");
294 widget
.prepareForTransition("ToBack");
297 front
.style
.display
= "none";
298 back
.style
.display
= "block";
302 setTimeout("widget.performTransition();", 0);
305 document
.getElementById("fliprollie").style
.display
= "none";
312 backShowing_
= false;
314 var front
= document
.getElementById("front");
315 var back
= document
.getElementById("back");
319 widget
.prepareForTransition("ToFront");
322 back
.style
.display
= "none";
323 front
.style
.display
= "block";
327 setTimeout("widget.performTransition();", 0);
333 var flipShown
= false;
345 function mousemove(event
)
349 if (animation
.timer
!= null)
351 clearInterval(animation
.timer
);
352 animation
.timer
= null;
355 var starttime
= (new Date
).getTime() - 13;
357 animation
.duration
= 500;
358 animation
.starttime
= starttime
;
359 animation
.firstElement
= document
.getElementById("flip");
360 animation
.timer
= setInterval("animate();", 13);
361 animation
.from
= animation
.now
;
368 function mouseexit(event
)
372 // fade in the flip widget
373 if (animation
.timer
!= null)
375 clearInterval (animation
.timer
);
376 animation
.timer
= null;
379 var starttime
= (new Date
).getTime() - 13;
381 animation
.duration
= 500;
382 animation
.starttime
= starttime
;
383 animation
.firstElement
= document
.getElementById("flip");
384 animation
.timer
= setInterval("animate();", 13);
385 animation
.from
= animation
.now
;
397 var time
= (new Date
).getTime();
399 T
= limit_3(time
- animation
.starttime
, 0, animation
.duration
);
401 if (T
>= animation
.duration
)
403 clearInterval(animation
.timer
);
404 animation
.timer
= null;
405 animation
.now
= animation
.to
;
409 ease
= 0.5 - (0.5 * Math
.cos(Math
.PI
* T
/ animation
.duration
));
410 animation
.now
= compute_next_float(animation
.from
, animation
.to
, ease
);
413 animation
.firstElement
.style
.opacity
= animation
.now
;
416 function limit_3 (a
, b
, c
)
418 return a
< b
? b
: (a
> c
? c
: a
);
421 function compute_next_float(from
, to
, ease
)
423 return from
+ (to
- from
) * ease
;
426 function enterflip(event
)
428 document
.getElementById("fliprollie").style
.display
= "block";
431 function exitflip(event
)
433 document
.getElementById("fliprollie").style
.display
= "none";
436 /*=====================================================================*\
437 || ###################################################################
440 || ###################################################################
441 \*=====================================================================*/