Draw a black gradient when the back side is showing.

git-svn-id: svn://depot/macosx/RGBConverter/trunk@635 ad1dcce9-c9fe-0310-b82b-83ea1733dbb0

diff --git a/RGB Converter.wdgt/Widget.js b/RGB Converter.wdgt/Widget.js
index 3697027ab46723bfdf6b104805b2097c43f3e305..246a95869ef948e0e62bfc0b2937cf584b0d9b9a 100644 (file)
--- a/RGB Converter.wdgt/Widget.js
+++ b/RGB Converter.wdgt/Widget.js
@@ -25,6 +25,8 @@ var colors_ = {
   hex   : '3C3C3C'
 };
 
+var backShowing_ = false;
+
 // ###################################################################
 // widget init
 function setup()
@@ -89,6 +91,19 @@ function Draw()
   var center  = [canvas.width / 2, canvas.height / 2];
   context.strokeStyle = 'black';
 
+  if (backShowing_) {
+    // Draw the sheen gradient.
+    context.beginPath();
+    context.arc(center[0], center[1], radius, 0, Math.PI * 2, true);
+    var gradient = context.createLinearGradient(0, 0, 0, canvas.height);
+    gradient.addColorStop(0, 'rgb(200, 200, 200)');
+    gradient.addColorStop(1, 'rgb(0, 0, 0)');
+    context.fillStyle = gradient;
+    context.fill();
+    context.closePath();
+    return;
+  }
+
   // Draw the individual components. Start with red.
   context.beginPath();
   context.moveTo(center[0], center[1]);
@@ -269,6 +284,8 @@ function hex2dec(hex)
 
 function show_back()
 {
+  backShowing_ = true;
+
   var front = document.getElementById("front");
   var back = document.getElementById("back");
   
@@ -286,10 +303,14 @@ function show_back()
   }
   
   document.getElementById("fliprollie").style.display = "none";
+
+  Draw();
 }
 
 function hide_back()
 {
+  backShowing_ = false;
+
   var front = document.getElementById("front");
   var back = document.getElementById("back");
   
@@ -305,6 +326,8 @@ function hide_back()
   {
     setTimeout("widget.performTransition();", 0);
   }
+
+  Draw();
 }
 
 var flipShown = false;