CSS3 Generator / widget.js

window.addEventListener("load", function(){
  try {
  // WidgetPad.log("Start widget.");
    // WidgetPad.noscroll(true);
    
    var menus = [ "Rounded Corner", "Opacity", "Box Shadow", "Text Shadow", "Reflection", "Text Stroke", "Transform" ];
    var styles = [ "-webkit-border-radius", "opacity", "-webkit-box-shadow", "text-shadow", "-webkit-box-reflect", "-webkit-text-stroke", "-webkit-transform" ];
    var props = [ "WebkitBorderRadius", "opacity", "WebkitBoxShadow", "textShadow", "WebkitBoxReflect", "WebkitTextStroke", "WebkitTransform" ];
    var values =[["", "10px"], ["", "0.5"], ["","5px 5px 5px rgba(0,0,0,0.5)"], ["","3px 3px 1px rgba(0,0,0,0.3)"], 
    ["", "below 5px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white))"],
    ["","2px #006600"], ["", "rotateZ(15deg)"]];
    var switches = [];
    var menubar = document.getElementById("menubar");
    for (var i in menus) {
       var div = document.createElement("div");
       div.className = "menuitem";
       div.innerHTML = menus[i]+"";
       div.id = i;
       div.onclick = function(e) {
         var i = this.id;
         switches[i] = 1-switches[i];
         this.className = "menuitem" + (switches[i] ? " checked" : "");
         var script = "var f = function() { this.style." + props[i] + "='" + values[i][switches[i]] + "'; };";
         eval(script);
         var sample = document.getElementById("sample");
         f.call(sample);
         var output = "";
         for (var j in styles) {
           var value = values[j][switches[j]];
           if (value.length>0) {
             output += styles[j] + ": " + value + ";<br/>";
           }
         }
         document.getElementById("template").innerHTML = output;
       };
       menubar.appendChild(div);
       switches[i] = 0;
    }
  }
  catch (e) {
    WidgetPad.error(e);
  }
}, false);