Fixed Button Editor not working on Touch devices

Fixed button editor not working on Touch enabled devices such as smartphones.

studio/button-editor/css/colorpicker.css

@@ -0,0 +1,164 @@
+.colorpicker * {
+       -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+.colorpicker {
+	width: 356px;
+	height: 176px;
+	overflow: hidden;
+	position: absolute;
+	background: url(../images/colorpicker_background.png);
+	font-family: Arial, Helvetica, sans-serif;
+	display: none;
+}
+.colorpicker_color {
+	width: 150px;
+	height: 150px;
+	left: 14px;
+	top: 13px;
+	position: absolute;
+	background: #f00;
+	overflow: hidden;
+	cursor: crosshair;
+}
+.colorpicker_color div {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 150px;
+	height: 150px;
+	background: url(../images/colorpicker_overlay.png);
+}
+.colorpicker_color div div {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 11px;
+	height: 11px;
+	overflow: hidden;
+	background: url(../images/colorpicker_select.gif);
+	margin: -5px 0 0 -5px;
+}
+.colorpicker_hue {
+	position: absolute;
+	top: 13px;
+	left: 171px;
+	width: 35px;
+	height: 150px;
+	cursor: n-resize;
+}
+.colorpicker_hue div {
+	position: absolute;
+	width: 35px;
+	height: 9px;
+	overflow: hidden;
+	background: url(../images/colorpicker_indic.gif) left top;
+	margin: -4px 0 0 0;
+	left: 0px;
+}
+.colorpicker_new_color {
+	position: absolute;
+	width: 60px;
+	height: 30px;
+	left: 213px;
+	top: 13px;
+	background: #f00;
+}
+.colorpicker_current_color {
+	position: absolute;
+	width: 60px;
+	height: 30px;
+	left: 283px;
+	top: 13px;
+	background: #f00;
+}
+.colorpicker input {
+	background-color: transparent;
+	border: 1px solid transparent;
+	position: absolute;
+	font-size: 10px;
+	font-family: Arial, Helvetica, sans-serif;
+	color: #898989;
+	top: 4px;
+	right: 11px;
+	text-align: right;
+	margin: 0;
+	padding: 0;
+	height: 11px;
+}
+.colorpicker_hex {
+	position: absolute;
+	width: 72px;
+	height: 22px;
+	background: url(../images/colorpicker_hex.png) top;
+	left: 212px;
+	top: 142px;
+}
+.colorpicker_hex input {
+	right: 6px;
+}
+.colorpicker_field {
+	height: 22px;
+	width: 62px;
+	background-position: top;
+	position: absolute;
+}
+.colorpicker_field span {
+	position: absolute;
+	width: 12px;
+	height: 22px;
+	overflow: hidden;
+	top: 0;
+	right: 0;
+	cursor: n-resize;
+}
+.colorpicker_rgb_r {
+	background-image: url(../images/colorpicker_rgb_r.png);
+	top: 52px;
+	left: 212px;
+}
+.colorpicker_rgb_g {
+	background-image: url(../images/colorpicker_rgb_g.png);
+	top: 82px;
+	left: 212px;
+}
+.colorpicker_rgb_b {
+	background-image: url(../images/colorpicker_rgb_b.png);
+	top: 112px;
+	left: 212px;
+}
+.colorpicker_hsb_h {
+	background-image: url(../images/colorpicker_hsb_h.png);
+	top: 52px;
+	left: 282px;
+}
+.colorpicker_hsb_s {
+	background-image: url(../images/colorpicker_hsb_s.png);
+	top: 82px;
+	left: 282px;
+}
+.colorpicker_hsb_b {
+	background-image: url(../images/colorpicker_hsb_b.png);
+	top: 112px;
+	left: 282px;
+}
+.colorpicker_submit {
+	position: absolute;
+	width: 22px;
+	height: 22px;
+	background: url(../images/colorpicker_submit.png) top;
+	left: 322px;
+	top: 142px;
+	overflow: hidden;
+}
+.colorpicker_focus {
+	background-position: center;
+}
+.colorpicker_hex.colorpicker_focus {
+	background-position: bottom;
+}
+.colorpicker_submit.colorpicker_focus {
+	background-position: bottom;
+}
+.colorpicker_slider {
+	background-position: bottom;
+}

studio/button-editor/css/layout.css

@@ -0,0 +1,218 @@
+body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
+	margin:0;
+	padding:0;
+}
+table {
+	border-collapse:collapse;
+	border-spacing:0;
+}
+fieldset,img { 
+	border:0;
+}
+address,caption,cite,code,dfn,em,strong,th,var {
+	font-style:normal;
+	font-weight:normal;
+}
+ol,ul {
+	list-style:none;
+}
+caption,th {
+	text-align:left;
+}
+h1,h2,h3,h4,h5,h6 {
+	font-size:100%;
+	font-weight:normal;
+}
+q:before,q:after {
+	content:'';
+}
+abbr,acronym { border:0;
+}
+html, body {
+	background-color: #fff;
+	font-family: Arial, Helvetica, sans-serif;
+	font-size: 12px;
+	line-height: 18px;
+	color: #52697E;
+}
+body {
+	text-align: center;
+	overflow: auto;
+}
+.wrapper {
+	width: 700px;
+	margin: 0 auto;
+	text-align: left;
+}
+h1 {
+	font-size: 21px;
+	height: 47px;
+	line-height: 47px;
+	text-transform: uppercase;
+}
+.navigationTabs {
+	height: 23px;
+	line-height: 23px;
+	border-bottom: 1px solid #ccc;
+}
+.navigationTabs li {
+	float: left;
+	height: 23px;
+	line-height: 23px;
+	padding-right: 3px;
+}
+.navigationTabs li a{
+	float: left;
+	dispaly: block;
+	height: 23px;
+	line-height: 23px;
+	padding: 0 10px;
+	overflow: hidden;
+	color: #52697E;
+	background-color: #eee;
+	position: relative;
+	text-decoration: none;
+}
+.navigationTabs li a:hover {
+	background-color: #f0f0f0;
+}
+.navigationTabs li a.active {
+	background-color: #fff;
+	border: 1px solid #ccc;
+	border-bottom: 0px solid;
+}
+.tabsContent {
+	border: 1px solid #ccc;
+	border-top: 0px solid;
+	width: 698px;
+	overflow: hidden;
+}
+.tab {
+	padding: 16px;
+	display: none;
+}
+.tab h2 {
+	font-weight: bold;
+	font-size: 16px;
+}
+.tab h3 {
+	font-weight: bold;
+	font-size: 14px;
+	margin-top: 20px;
+}
+.tab p {
+	margin-top: 16px;
+	clear: both;
+}
+.tab ul {
+	margin-top: 16px;
+	list-style: disc;
+}
+.tab li {
+	margin: 10px 0 0 35px;
+}
+.tab a {
+	color: #8FB0CF;
+}
+.tab strong {
+	font-weight: bold;
+}
+.tab pre {
+	font-size: 11px;
+	margin-top: 20px;
+	width: 668px;
+	overflow: auto;
+	clear: both;
+}
+.tab table {
+	width: 100%;
+}
+.tab table td {
+	padding: 6px 10px 6px 0;
+	vertical-align: top;
+}
+.tab dt {
+	margin-top: 16px;
+}
+
+#colorSelector {
+	position: relative;
+	width: 36px;
+	height: 36px;
+	background: url(../images/select.png);
+}
+#colorSelector div {
+	position: absolute;
+	top: 3px;
+	left: 3px;
+	width: 30px;
+	height: 30px;
+	background: url(../images/select.png) center;
+}
+#colorSelector2 {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 36px;
+	height: 36px;
+	background: url(../images/select2.png);
+}
+#colorSelector2 div {
+	position: absolute;
+	top: 4px;
+	left: 4px;
+	width: 28px;
+	height: 28px;
+	background: url(../images/select2.png) center;
+}
+#colorpickerHolder2 {
+	top: 32px;
+	left: 0;
+	width: 356px;
+	height: 0;
+	overflow: hidden;
+	position: absolute;
+}
+#colorpickerHolder2 .colorpicker {
+	background-image: url(../images/custom_background.png);
+	position: absolute;
+	bottom: 0;
+	left: 0;
+}
+#colorpickerHolder2 .colorpicker_hue div {
+	background-image: url(../images/custom_indic.gif);
+}
+#colorpickerHolder2 .colorpicker_hex {
+	background-image: url(../images/custom_hex.png);
+}
+#colorpickerHolder2 .colorpicker_rgb_r {
+	background-image: url(../images/custom_rgb_r.png);
+}
+#colorpickerHolder2 .colorpicker_rgb_g {
+	background-image: url(../images/custom_rgb_g.png);
+}
+#colorpickerHolder2 .colorpicker_rgb_b {
+	background-image: url(../images/custom_rgb_b.png);
+}
+#colorpickerHolder2 .colorpicker_hsb_s {
+	background-image: url(../images/custom_hsb_s.png);
+	display: none;
+}
+#colorpickerHolder2 .colorpicker_hsb_h {
+	background-image: url(../images/custom_hsb_h.png);
+	display: none;
+}
+#colorpickerHolder2 .colorpicker_hsb_b {
+	background-image: url(../images/custom_hsb_b.png);
+	display: none;
+}
+#colorpickerHolder2 .colorpicker_submit {
+	background-image: url(../images/custom_submit.png);
+}
+#colorpickerHolder2 .colorpicker input {
+	color: #778398;
+}
+#customWidget {
+	position: relative;
+	height: 36px;
+}

studio/button-editor/js/colorpicker.js

@@ -1,7 +1,6 @@
  (function($) {
     var ColorPicker = function() {
-		var
+        var ids = {},
-			ids = {},
         inAction,
         charMin = 65,
         visible,
@@ -19,23 +18,20 @@
         },
         fillRGBFields = function(hsb, cal) {
             var rgb = HSBToRGB(hsb);
-				$(cal).data('colorpicker').fields
+            $(cal).data('colorpicker').fields.eq(1).val(rgb.r).end().eq(2).val(rgb.g).end().eq(3).val(rgb.b).end();
-					.eq(1).val(rgb.r).end()
-					.eq(2).val(rgb.g).end()
-					.eq(3).val(rgb.b).end();
         },
         fillHSBFields = function(hsb, cal) {
-				$(cal).data('colorpicker').fields
+            $(cal).data('colorpicker').fields.eq(4).val(hsb.h).end().eq(5).val(hsb.s).end().eq(6).val(hsb.b).end();
-					.eq(4).val(hsb.h).end()
-					.eq(5).val(hsb.s).end()
-					.eq(6).val(hsb.b).end();
         },
         fillHexFields = function(hsb, cal) {
-				$(cal).data('colorpicker').fields
+            $(cal).data('colorpicker').fields.eq(0).val(HSBToHex(hsb)).end();
-					.eq(0).val(HSBToHex(hsb)).end();
         },
         setSelector = function(hsb, cal) {
-				$(cal).data('colorpicker').selector.css('backgroundColor', '#' + HSBToHex({h: hsb.h, s: 100, b: 100}));
+            $(cal).data('colorpicker').selector.css('backgroundColor', '#' + HSBToHex({
+                h: hsb.h,
+                s: 100,
+                b: 100
+            }));
             $(cal).data('colorpicker').selectorIndic.css({
                 left: parseInt(150 * hsb.s / 100, 10),
                 top: parseInt(150 * (100 - hsb.b) / 100, 10)
@@ -61,7 +57,8 @@
             }
         },
         change = function(ev) {
-				var cal = $(this).parent().parent(), col;
+            var cal = $(this).parent().parent(),
+            col;
             if (this.parentNode.className.indexOf('_hex') > 0) {
                 cal.data('colorpicker').color = col = HexToHSB(fixHex(this.value));
             } else if (this.parentNode.className.indexOf('_hsb') > 0) {
@@ -124,60 +121,76 @@
             return false;
         },
         downHue = function(ev) {
+            // prevent android from highlighting the hue selector on click
+            ev.preventDefault();
+
+            var moveEvent = ev;
+            if (typeof(event) !== "undefined" && event.touches) {
+                moveEvent = event.touches[0];
+            }
+
             var current = {
                 cal: $(this).parent(),
                 y: $(this).offset().top
             };
             current.preview = current.cal.data('colorpicker').livePreview;
-				$(document).bind('mouseup', current, upHue);
+            $(document).bind('mouseup touchend', current, upHue);
-				$(document).bind('mousemove', current, moveHue);
+            $(document).bind('mousemove touchmove', current, moveHue);
+
+            changeHue(moveEvent, current, current.preview);
+            return false;
+        },
+        changeHue = function(ev, data,  preview) {
+            change.apply(data.cal.data('colorpicker').fields.eq(4).val(parseInt(360 * (150 - Math.max(0, Math.min(150, ev.pageY - data.y))) / 150, 10)).get(0), [preview]);
         },
         moveHue = function(ev) {
-				change.apply(
+            var moveEvent = ev;
-					ev.data.cal.data('colorpicker')
+
-						.fields
+            // mobile touch event!
-						.eq(4)
+            if (typeof(event) !== "undefined" && event.touches) {
-						.val(parseInt(360*(150 - Math.max(0,Math.min(150,(ev.pageY - ev.data.y))))/150, 10))
+                moveEvent = event.touches[0];
-						.get(0),
+            }
-					[ev.data.preview]
+            changeHue(moveEvent, ev.data, ev.data.preview);
-				);
             return false;
         },
         upHue = function(ev) {
             fillRGBFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
             fillHexFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
-				$(document).unbind('mouseup', upHue);
+            $(document).unbind('mouseup touchend', upHue);
-				$(document).unbind('mousemove', moveHue);
+            $(document).unbind('mousemove touchmove', moveHue);
             return false;
         },
         downSelector = function(ev) {
+            // prevent android from highlighting the selector on click
+            ev.preventDefault();
             var current = {
                 cal: $(this).parent(),
                 pos: $(this).offset()
                 };
             current.preview = current.cal.data('colorpicker').livePreview;
-				$(document).bind('mouseup', current, upSelector);
+            $(document).bind('mouseup touchend', current, upSelector);
-				$(document).bind('mousemove', current, moveSelector);
+            $(document).bind('mousemove touchmove', current, moveSelector);
+
+            $(".colorpicker_color", current.cal).one('click', current, moveSelector);
+            ev.data = current;
+            moveSelector(ev);
         },
         moveSelector = function(ev) {
-				change.apply(
+            var moveEvent = ev;
-					ev.data.cal.data('colorpicker')
+
-						.fields
+            // mobile touch event!
-						.eq(6)
+            if (typeof(event) !== "undefined" && event.touches) {
-						.val(parseInt(100*(150 - Math.max(0,Math.min(150,(ev.pageY - ev.data.pos.top))))/150, 10))
+                moveEvent = event.touches[0];
-						.end()
+            }
-						.eq(5)
+
-						.val(parseInt(100*(Math.max(0,Math.min(150,(ev.pageX - ev.data.pos.left))))/150, 10))
+            change.apply(ev.data.cal.data('colorpicker').fields.eq(6).val(parseInt(100 * (150 - Math.max(0, Math.min(150, (moveEvent.pageY - ev.data.pos.top)))) / 150, 10)).end().eq(5).val(parseInt(100 * (Math.max(0, Math.min(150, (moveEvent.pageX - ev.data.pos.left)))) / 150, 10)).get(0), [ev.data.preview]);
-						.get(0),
-					[ev.data.preview]
-				);
             return false;
         },
         upSelector = function(ev) {
             fillRGBFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
             fillHexFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
-				$(document).unbind('mouseup', upSelector);
+            $(document).unbind('mouseup touchend', upSelector);
-				$(document).unbind('mousemove', moveSelector);
+            $(document).unbind('mousemove touchmove', moveSelector);
             return false;
         },
         enterSubmit = function(ev) {
@@ -193,6 +206,18 @@
             setCurrentColor(col, cal.get(0));
             cal.data('colorpicker').onSubmit(col, HSBToHex(col), HSBToRGB(col), cal.data('colorpicker').el);
         },
+        toggle = function(ev) {
+          var $body = $('body'),
+              current = $body.data('colorpickerId'),
+              me = $(this).data('colorpickerId');
+          if ( current && current === me ) {
+            $(document).trigger('mousedown');
+            $body.data('colorpickerId', null );
+          } else {
+            show.call(this, ev);
+            $body.data('colorpickerId', me );
+          }
+        },
         show = function(ev) {
             var cal = $('#' + $(this).data('colorpickerId'));
             cal.data('colorpicker').onBeforeShow.apply(this, [cal.get(0)]);
@@ -204,13 +229,18 @@
                 top -= this.offsetHeight + 176;
             }
             if (left + 356 > viewPort.l + viewPort.w) {
-					left -= 356;
+                left = Math.max(0, left - 356);
             }
-				cal.css({left: left + 'px', top: top + 'px'});
+            cal.css({
+                left: left + 'px',
+                top: top + 'px'
+            });
             if (cal.data('colorpicker').onShow.apply(this, [cal.get(0)]) != false) {
                 cal.show();
             }
-				$(document).bind('mousedown', {cal: cal}, hide);
+            $(document).bind('mousedown', {
+                cal: cal
+            }, hide);
             return false;
         },
         hide = function(ev) {
@@ -218,6 +248,9 @@
                 if (ev.data.cal.data('colorpicker').onHide.apply(this, [ev.data.cal.get(0)]) != false) {
                     ev.data.cal.hide();
                 }
+                if (!isChildOf($(ev.data.cal[0]).data("colorpicker")["el"], ev.target)) {
+                    $('body').data('colorpickerId', null);
+                }
                 $(document).unbind('mousedown', hide);
             }
         },
@@ -250,9 +283,9 @@
         },
         fixHSB = function(hsb) {
             return {
-					h: Math.min(360, Math.max(0, hsb.h)),
+                h: Math.round( Math.min(360, Math.max(0, hsb.h)) ),
-					s: Math.min(100, Math.max(0, hsb.s)),
+                s: Math.round( Math.min(100, Math.max(0, hsb.s)) ),
-					b: Math.min(100, Math.max(0, hsb.b))
+                b: Math.round( Math.min(100, Math.max(0, hsb.b)) )
                 };
         },
         fixRGB = function(rgb) {
@@ -276,7 +309,11 @@
         },
         HexToRGB = function(hex) {
             var hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
-				return {r: hex >> 16, g: (hex & 0x00FF00) >> 8, b: (hex & 0x0000FF)};
+            return {
+                r: hex >> 16,
+                g: (hex & 0x00FF00) >> 8,
+                b: (hex & 0x0000FF)
+                };
         },
         HexToHSB = function(hex) {
             return RGBToHSB(HexToRGB(hex));
@@ -292,7 +329,6 @@
             var delta = max - min;
             hsb.b = max;
             if (max != 0) {
-					
 }
             hsb.s = max != 0 ? 255 * delta / max: 0;
             if (hsb.s != 0) {
@@ -312,6 +348,10 @@
             }
             hsb.s *= 100 / 255;
             hsb.b *= 100 / 255;
+
+            hsb.h = Math.round ( hsb.h );
+            hsb.s = Math.round ( hsb.s );
+            hsb.b = Math.round ( hsb.b );
             return hsb;
         },
         HSBToRGB = function(hsb) {
@@ -325,23 +365,46 @@
                 var t1 = v;
                 var t2 = (255 - s) * v / 255;
                 var t3 = (t1 - t2) * (h % 60) / 60;
-					if(h==360) h = 0;
+                if (h == 360)
-					if(h<60) {rgb.r=t1;	rgb.b=t2; rgb.g=t2+t3}
+                    h = 0;
-					else if(h<120) {rgb.g=t1; rgb.b=t2;	rgb.r=t1-t3}
+                if (h < 60) {
-					else if(h<180) {rgb.g=t1; rgb.r=t2;	rgb.b=t2+t3}
+                    rgb.r = t1;
-					else if(h<240) {rgb.b=t1; rgb.r=t2;	rgb.g=t1-t3}
+                    rgb.b = t2;
-					else if(h<300) {rgb.b=t1; rgb.g=t2;	rgb.r=t2+t3}
+                    rgb.g = t2 + t3
-					else if(h<360) {rgb.r=t1; rgb.g=t2;	rgb.b=t1-t3}
+                } else if (h < 120) {
-					else {rgb.r=0; rgb.g=0;	rgb.b=0}
+                    rgb.g = t1;
+                    rgb.b = t2;
+                    rgb.r = t1 - t3
+                } else if (h < 180) {
+                    rgb.g = t1;
+                    rgb.r = t2;
+                    rgb.b = t2 + t3
+                } else if (h < 240) {
+                    rgb.b = t1;
+                    rgb.r = t2;
+                    rgb.g = t1 - t3
+                } else if (h < 300) {
+                    rgb.b = t1;
+                    rgb.g = t2;
+                    rgb.r = t2 + t3
+                } else if (h < 360) {
+                    rgb.r = t1;
+                    rgb.g = t2;
+                    rgb.b = t1 - t3
+                } else {
+                    rgb.r = 0;
+                    rgb.g = 0;
+                    rgb.b = 0
                 }
-				return {r:Math.round(rgb.r), g:Math.round(rgb.g), b:Math.round(rgb.b)};
+            }
+            return {
+                r: Math.round(rgb.r),
+                g: Math.round(rgb.g),
+                b: Math.round(rgb.b)
+                };
         },
         RGBToHex = function(rgb) {
-				var hex = [
+            var hex = [rgb.r.toString(16), rgb.g.toString(16), rgb.b.toString(16)];
-					rgb.r.toString(16),
-					rgb.g.toString(16),
-					rgb.b.toString(16)
-				];
             $.each(hex, function(nr, val) {
                 if (val.length == 1) {
                     hex[nr] = '0' + val;
@@ -379,7 +442,7 @@
                     if (!$(this).data('colorpickerId')) {
                         var options = $.extend({}, opt);
                         options.origColor = opt.color;
-						var id = 'collorpicker_' + parseInt(Math.random() * 1000);
+                        var id = 'colorpicker_' + ($(this).attr('id') || parseInt(Math.random() * 1000));
                         $(this).data('colorpickerId', id);
                         var cal = $(tpl).attr('id', id);
                         if (options.flat) {
@@ -387,27 +450,17 @@
                         } else {
                             cal.appendTo(document.body);
                         }
-						options.fields = cal
+                        options.fields = cal.find('input').bind('keyup', keyDown).bind('change', change).bind('blur', blur).bind('focus', focus);
-											.find('input')
+                        cal.find('span').bind('mousedown touchstart', downIncrement).end().find('>div.colorpicker_current_color').bind('click', restoreOriginal);
-												.bind('keyup', keyDown)
+                        options.selector = cal.find('div.colorpicker_color').bind('touchstart mousedown', downSelector);
-												.bind('change', change)
-												.bind('blur', blur)
-												.bind('focus', focus);
-						cal
-							.find('span').bind('mousedown', downIncrement).end()
-							.find('>div.colorpicker_current_color').bind('click', restoreOriginal);
-						options.selector = cal.find('div.colorpicker_color').bind('mousedown', downSelector);
                         options.selectorIndic = options.selector.find('div div');
                         options.el = this;
                         options.hue = cal.find('div.colorpicker_hue div');
-						cal.find('div.colorpicker_hue').bind('mousedown', downHue);
+                        cal.find('div.colorpicker_hue').bind('mousedown touchstart', downHue);
                         options.newColor = cal.find('div.colorpicker_new_color');
                         options.currentColor = cal.find('div.colorpicker_current_color');
                         cal.data('colorpicker', options);
-						cal.find('div.colorpicker_submit')
+                        cal.find('div.colorpicker_submit').bind('mouseenter touchstart', enterSubmit).bind('mouseleave touchend', leaveSubmit).bind('click', clickSubmit);
-							.bind('mouseenter', enterSubmit)
-							.bind('mouseleave', leaveSubmit)
-							.bind('click', clickSubmit);
                         fillRGBFields(options.color, cal.get(0));
                         fillHSBFields(options.color, cal.get(0));
                         fillHexFields(options.color, cal.get(0));
@@ -421,7 +474,7 @@
                                 display: 'block'
                             });
                         } else {
-							$(this).bind(options.eventName, show);
+                            $(this).bind(options.eventName, toggle);
                         }
                     }
                 });

studio/button-editor/js/eye.js

@@ -0,0 +1,28 @@
+(function($){
+	var EYE = window.EYE = function() {
+		var _registered = {
+			init: []
+		};
+		return {
+			init: function() {
+				$.each(_registered.init, function(nr, fn){
+					fn.call();
+				});
+			},
+			extend: function(prop) {
+				for (var i in prop) {
+					if (prop[i] != undefined) {
+						this[i] = prop[i];
+					}
+				}
+			},
+			register: function(fn, type) {
+				if (!_registered[type]) {
+					_registered[type] = [];
+				}
+				_registered[type].push(fn);
+			}
+		};
+	}();
+	$(EYE.init);
+})(jQuery);

studio/button-editor/js/layout.js

@@ -0,0 +1,67 @@
+(function($){
+	var initLayout = function() {
+		var hash = window.location.hash.replace('#', '');
+		var currentTab = $('ul.navigationTabs a')
+							.bind('click', showTab)
+							.filter('a[rel=' + hash + ']');
+		if (currentTab.size() == 0) {
+			currentTab = $('ul.navigationTabs a:first');
+		}
+		showTab.apply(currentTab.get(0));
+		$('#colorpickerHolder').ColorPicker({flat: true});
+		$('#colorpickerHolder2').ColorPicker({
+			flat: true,
+			color: '#00ff00',
+			onSubmit: function(hsb, hex, rgb) {
+				$('#colorSelector2 div').css('backgroundColor', '#' + hex);
+			}
+		});
+		$('#colorpickerHolder2>div').css('position', 'absolute');
+		var widt = false;
+		$('#colorSelector2').bind('click', function() {
+			$('#colorpickerHolder2').stop().animate({height: widt ? 0 : 173}, 500);
+			widt = !widt;
+		});
+		$('#colorpickerField1, #colorpickerField2, #colorpickerField3').ColorPicker({
+			onSubmit: function(hsb, hex, rgb, el) {
+				$(el).val(hex);
+				$(el).ColorPickerHide();
+			},
+			onBeforeShow: function () {
+				$(this).ColorPickerSetColor(this.value);
+			}
+		})
+		.bind('keyup', function(){
+			$(this).ColorPickerSetColor(this.value);
+		});
+		$('#colorSelector').ColorPicker({
+			color: '#0000ff',
+			onShow: function (colpkr) {
+				$(colpkr).fadeIn(500);
+				return false;
+			},
+			onHide: function (colpkr) {
+				$(colpkr).fadeOut(500);
+				return false;
+			},
+			onChange: function (hsb, hex, rgb) {
+				$('#colorSelector div').css('backgroundColor', '#' + hex);
+			}
+		});
+	};
+	
+	var showTab = function(e) {
+		var tabIndex = $('ul.navigationTabs a')
+							.removeClass('active')
+							.index(this);
+		$(this)
+			.addClass('active')
+			.blur();
+		$('div.tab')
+			.hide()
+				.eq(tabIndex)
+				.show();
+	};
+	
+	EYE.register(initLayout, 'init');
+})(jQuery)

studio/button-editor/js/utils.js

@@ -0,0 +1,246 @@
+(function($) {
+EYE.extend({
+	getPosition : function(e, forceIt)
+	{
+		var x = 0;
+		var y = 0;
+		var es = e.style;
+		var restoreStyles = false;
+		if (forceIt && jQuery.curCSS(e,'display') == 'none') {
+			var oldVisibility = es.visibility;
+			var oldPosition = es.position;
+			restoreStyles = true;
+			es.visibility = 'hidden';
+			es.display = 'block';
+			es.position = 'absolute';
+		}
+		var el = e;
+		if (el.getBoundingClientRect) { // IE
+			var box = el.getBoundingClientRect();
+			x = box.left + Math.max(document.documentElement.scrollLeft, document.body.scrollLeft) - 2;
+			y = box.top + Math.max(document.documentElement.scrollTop, document.body.scrollTop) - 2;
+		} else {
+			x = el.offsetLeft;
+			y = el.offsetTop;
+			el = el.offsetParent;
+			if (e != el) {
+				while (el) {
+					x += el.offsetLeft;
+					y += el.offsetTop;
+					el = el.offsetParent;
+				}
+			}
+			if (jQuery.browser.safari && jQuery.curCSS(e, 'position') == 'absolute' ) {
+				x -= document.body.offsetLeft;
+				y -= document.body.offsetTop;
+			}
+			el = e.parentNode;
+			while (el && el.tagName.toUpperCase() != 'BODY' && el.tagName.toUpperCase() != 'HTML') 
+			{
+				if (jQuery.curCSS(el, 'display') != 'inline') {
+					x -= el.scrollLeft;
+					y -= el.scrollTop;
+				}
+				el = el.parentNode;
+			}
+		}
+		if (restoreStyles == true) {
+			es.display = 'none';
+			es.position = oldPosition;
+			es.visibility = oldVisibility;
+		}
+		return {x:x, y:y};
+	},
+	getSize : function(e)
+	{
+		var w = parseInt(jQuery.curCSS(e,'width'), 10);
+		var h = parseInt(jQuery.curCSS(e,'height'), 10);
+		var wb = 0;
+		var hb = 0;
+		if (jQuery.curCSS(e, 'display') != 'none') {
+			wb = e.offsetWidth;
+			hb = e.offsetHeight;
+		} else {
+			var es = e.style;
+			var oldVisibility = es.visibility;
+			var oldPosition = es.position;
+			es.visibility = 'hidden';
+			es.display = 'block';
+			es.position = 'absolute';
+			wb = e.offsetWidth;
+			hb = e.offsetHeight;
+			es.display = 'none';
+			es.position = oldPosition;
+			es.visibility = oldVisibility;
+		}
+		return {w:w, h:h, wb:wb, hb:hb};
+	},
+	getClient : function(e)
+	{
+		var h, w;
+		if (e) {
+			w = e.clientWidth;
+			h = e.clientHeight;
+		} else {
+			var de = document.documentElement;
+			w = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
+			h = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
+		}
+		return {w:w,h:h};
+	},
+	getScroll : function (e)
+	{
+		var t=0, l=0, w=0, h=0, iw=0, ih=0;
+		if (e && e.nodeName.toLowerCase() != 'body') {
+			t = e.scrollTop;
+			l = e.scrollLeft;
+			w = e.scrollWidth;
+			h = e.scrollHeight;
+		} else  {
+			if (document.documentElement) {
+				t = document.documentElement.scrollTop;
+				l = document.documentElement.scrollLeft;
+				w = document.documentElement.scrollWidth;
+				h = document.documentElement.scrollHeight;
+			} else if (document.body) {
+				t = document.body.scrollTop;
+				l = document.body.scrollLeft;
+				w = document.body.scrollWidth;
+				h = document.body.scrollHeight;
+			}
+			if (typeof pageYOffset != 'undefined') {
+				t = pageYOffset;
+				l = pageXOffset;
+			}
+			iw = self.innerWidth||document.documentElement.clientWidth||document.body.clientWidth||0;
+			ih = self.innerHeight||document.documentElement.clientHeight||document.body.clientHeight||0;
+		}
+		return { t: t, l: l, w: w, h: h, iw: iw, ih: ih };
+	},
+	getMargins : function(e, toInteger)
+	{
+		var t = jQuery.curCSS(e,'marginTop') || '';
+		var r = jQuery.curCSS(e,'marginRight') || '';
+		var b = jQuery.curCSS(e,'marginBottom') || '';
+		var l = jQuery.curCSS(e,'marginLeft') || '';
+		if (toInteger)
+			return {
+				t: parseInt(t, 10)||0,
+				r: parseInt(r, 10)||0,
+				b: parseInt(b, 10)||0,
+				l: parseInt(l, 10)
+			};
+		else
+			return {t: t, r: r,	b: b, l: l};
+	},
+	getPadding : function(e, toInteger)
+	{
+		var t = jQuery.curCSS(e,'paddingTop') || '';
+		var r = jQuery.curCSS(e,'paddingRight') || '';
+		var b = jQuery.curCSS(e,'paddingBottom') || '';
+		var l = jQuery.curCSS(e,'paddingLeft') || '';
+		if (toInteger)
+			return {
+				t: parseInt(t, 10)||0,
+				r: parseInt(r, 10)||0,
+				b: parseInt(b, 10)||0,
+				l: parseInt(l, 10)
+			};
+		else
+			return {t: t, r: r,	b: b, l: l};
+	},
+	getBorder : function(e, toInteger)
+	{
+		var t = jQuery.curCSS(e,'borderTopWidth') || '';
+		var r = jQuery.curCSS(e,'borderRightWidth') || '';
+		var b = jQuery.curCSS(e,'borderBottomWidth') || '';
+		var l = jQuery.curCSS(e,'borderLeftWidth') || '';
+		if (toInteger)
+			return {
+				t: parseInt(t, 10)||0,
+				r: parseInt(r, 10)||0,
+				b: parseInt(b, 10)||0,
+				l: parseInt(l, 10)||0
+			};
+		else
+			return {t: t, r: r,	b: b, l: l};
+	},
+	traverseDOM : function(nodeEl, func)
+	{
+		func(nodeEl);
+		nodeEl = nodeEl.firstChild;
+		while(nodeEl){
+			EYE.traverseDOM(nodeEl, func);
+			nodeEl = nodeEl.nextSibling;
+		}
+	},
+	getInnerWidth :  function(el, scroll) {
+		var offsetW = el.offsetWidth;
+		return scroll ? Math.max(el.scrollWidth,offsetW) - offsetW + el.clientWidth:el.clientWidth;
+	},
+	getInnerHeight : function(el, scroll) {
+		var offsetH = el.offsetHeight;
+		return scroll ? Math.max(el.scrollHeight,offsetH) - offsetH + el.clientHeight:el.clientHeight;
+	},
+	getExtraWidth : function(el) {
+		if($.boxModel)
+			return (parseInt($.curCSS(el, 'paddingLeft'))||0)
+				+ (parseInt($.curCSS(el, 'paddingRight'))||0)
+				+ (parseInt($.curCSS(el, 'borderLeftWidth'))||0)
+				+ (parseInt($.curCSS(el, 'borderRightWidth'))||0);
+		return 0;
+	},
+	getExtraHeight : function(el) {
+		if($.boxModel)
+			return (parseInt($.curCSS(el, 'paddingTop'))||0)
+				+ (parseInt($.curCSS(el, 'paddingBottom'))||0)
+				+ (parseInt($.curCSS(el, 'borderTopWidth'))||0)
+				+ (parseInt($.curCSS(el, 'borderBottomWidth'))||0);
+		return 0;
+	},
+	isChildOf: function(parentEl, el, container) {
+		if (parentEl == el) {
+			return true;
+		}
+		if (!el || !el.nodeType || el.nodeType != 1) {
+			return false;
+		}
+		if (parentEl.contains && !$.browser.safari) {
+			return parentEl.contains(el);
+		}
+		if ( parentEl.compareDocumentPosition ) {
+			return !!(parentEl.compareDocumentPosition(el) & 16);
+		}
+		var prEl = el.parentNode;
+		while(prEl && prEl != container) {
+			if (prEl == parentEl)
+				return true;
+			prEl = prEl.parentNode;
+		}
+		return false;
+	},
+	centerEl : function(el, axis)
+	{
+		var clientScroll = EYE.getScroll();
+		var size = EYE.getSize(el);
+		if (!axis || axis == 'vertically')
+			$(el).css(
+				{
+					top: clientScroll.t + ((Math.min(clientScroll.h,clientScroll.ih) - size.hb)/2) + 'px'
+				}
+			);
+		if (!axis || axis == 'horizontally')
+			$(el).css(
+				{
+					left: clientScroll.l + ((Math.min(clientScroll.w,clientScroll.iw) - size.wb)/2) + 'px'
+				}
+			);
+	}
+});
+if (!$.easing.easeout) {
+	$.easing.easeout = function(p, n, firstNum, delta, duration) {
+		return -delta * ((n=n/duration-1)*n*n*n - 1) + firstNum;
+	};
+}
+	
+})(jQuery);