From b27a1f725af0479531a3483bd3ff776605fa5521 Mon Sep 17 00:00:00 2001
From: Robert Kaiser <kairo@kairo.at>
Date: Sun, 4 Nov 2012 21:50:14 +0100
Subject: [PATCH] make outer background dark, make sure the image is loaded
 before we draw it to the canvas, fix setting prefs in setVal() so that
 zooming works again, check proportional by default

---
 index.html           |  3 ++-
 js/mandelbrot.js     | 18 +++++++++---------
 manifest.appcache    |  1 +
 style/mandelbrot.css | 13 ++++++++++++-
 4 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/index.html b/index.html
index bd31f68..f5c42dc 100644
--- a/index.html
+++ b/index.html
@@ -54,7 +54,8 @@ Scale:
 Height:
 <input id="image_height" value="300" maxlength="4" size="4" type="number"
        onchange="checkISValue(this, 'dim'); recalcCoord('Cr', 'scale');">
-<input type="checkbox" id="proportional" onchange="checkProportions();">
+<input type="checkbox" id="proportional" checked="true"
+       onchange="checkProportions();">
 <label for="proportional">proportional</label>
 
 <br><br>Maximum of iterations:
diff --git a/js/mandelbrot.js b/js/mandelbrot.js
index fad3013..f90abca 100644
--- a/js/mandelbrot.js
+++ b/js/mandelbrot.js
@@ -29,7 +29,7 @@ function Startup() {
 
   var initTile = new Image();
   initTile.src = "style/initial-overview.png";
-  gMainContext.drawImage(initTile, 0, 0);
+  initTile.onload = function() { gMainContext.drawImage(initTile, 0, 0); };
 }
 
 function initDB() {
@@ -160,18 +160,18 @@ function setVal(aName, aValue) {
   switch (aName) {
     case "image.width":
     case "image.height":
-      gPrefs.set(aName, value);
-      document.getElementById(aName.replace(".", "_")).value = value;
+      gPrefs.set(aName, aValue);
+      document.getElementById(aName.replace(".", "_")).value = aValue;
       break;
     case "last_image.Cr_*":
-      gPrefs.set("Cr_min", Cr_min);
-      gPrefs.set("Cr_max", Cr_max);
+      gPrefs.set("Cr_min", aValue.Cr_min);
+      gPrefs.set("Cr_max", aValue.Cr_max);
       document.getElementById("Cr_min").value = aValue.Cr_min;
       document.getElementById("Cr_max").value = aValue.Cr_max;
       break;
     case "last_image.Ci_*":
-      gPrefs.set("Ci_min", Ci_min);
-      gPrefs.set("Ci_max", Ci_max);
+      gPrefs.set("Ci_min", aValue.Ci_min);
+      gPrefs.set("Ci_max", aValue.Ci_max);
       document.getElementById("Ci_min").value = aValue.Ci_min;
       document.getElementById("Ci_max").value = aValue.Ci_max;
       break;
@@ -182,10 +182,10 @@ function setVal(aName, aValue) {
       setAlgorithm(aValue);
       break;
    case "color_palette":
-      setPalette(valueaValue);
+      setPalette(aValue);
       break;
    case "syncProportions":
-      gPrefs.set(aName, value);
+      gPrefs.set(aName, aValue);
       document.getElementById("proportional").value = aValue;
       break;
   }
diff --git a/manifest.appcache b/manifest.appcache
index 1a6d09f..1f1ceb0 100644
--- a/manifest.appcache
+++ b/manifest.appcache
@@ -11,3 +11,4 @@ style/mandelbrotIcon32.png
 style/plain-overview.png
 
 NETWORK:
+
diff --git a/style/mandelbrot.css b/style/mandelbrot.css
index 4c0af96..339ad55 100644
--- a/style/mandelbrot.css
+++ b/style/mandelbrot.css
@@ -4,6 +4,8 @@
 
 body {
   font-family: sans-serif;
+  background-color: #222222;
+  color: #FFFFFF;
 }
 
 h1 {
@@ -26,6 +28,15 @@ h1 {
 #settings {
   display: none;
   background-color: rgba(255, 255, 255, .8);
+  color: #000000;
+  border-radius: 3px;
+  border: 1px solid #FFFFFF;
+}
+
+#settings > legend {
+  background-color: #FFFFFF;
+  color: #000000;
+  border-radius: 3px;
 }
 
 #mainArea {
@@ -34,7 +45,7 @@ h1 {
 }
 
 #mbrotImage {
-  background-color: lightblue;
+  background-color: #444444;
 }
 
 @media screen and (max-width: 500px) {
-- 
2.35.3