/*
 * Author: Tom Pryor
 * Version: 0.1
 * Date: 03/27/2010
 * Copyright: 2010 da Vinci Interactive
 * 
 * Name: Button Maker
 * Description: Allow all level of users to quickly and easily produce a high quality button image online, with modern browsers, and no plugins.
 * Technology: HTML, CSS, and JavaScript
 */

$(document)
		.ready(
				function() {

					var trackedStyles = new Array("-moz-box-shadow",
							"background-color", "background-image", "border",
							"color", "text-shadow",
							"-moz-border-radius-topleft",
							"-moz-border-radius-topright",
							"-moz-border-radius-bottomright",
							"-moz-border-radius-bottomleft",
							"-webkit-border-top-right-radius",
							"-webkit-border-top-left-radius",
							"-webkit-border-bottom-right-radius",
							"-webkit-border-bottom-left-radius", "cursor",
							"font-family", "font-size", "height", "margin-top", "margin-right", "margin-bottom", "margin-left",
							"overflow", "padding-top", "padding-right", "padding-bottom", "padding-left", "position", "text-align",
							"width","transform", "transform-origin", "text-shadow", "-moz-linear-gradient", "transform-scale" );
					
					var trackedButtonPStyles = new Array("display",
							"font-size", "height", "overflow", "padding-top", "padding-right", "padding-bottom", "padding-left", "margin-top", "margin-right", "margin-bottom", "margin-left",
							"vertical-align", "width")


					
					$(function() {
						$("#sortable").sortable({
							placeholder: 'ui-state-highlight',
						});
						$("#sortable").disableSelection();
					});

					
					
					$("div#myButton-DISABLED")
							.click(
									function() {
										// alert($("#myButton").css("border"));
										var myButtonStyles = document
												.getElementById("myButton");
										var buttonStyles = window
												.getComputedStyle(
														myButtonStyles, null);

										// my button p styles myButtonLable
										var myButtonPStyles = document
												.getElementById("myButtonLable");
										// var myButtonPStyles = $("div#myButton
										// p");

										var buttonPStyles = window
												.getComputedStyle(
														myButtonPStyles, null);

										// alert($("div#myButton").css('-moz-border-radius'));
										// var buttonStyles =
										// document.getElementById("myButton").style.cssText;
										// alert(buttonStyles);
										// $("div#cssRules").html(buttonStyles);
										var myComputedStyles = "<h3>Computed CSS Button Styles</h3><p>div#myButton {<br /><blockquote>";
										/*
										 * This will dump out ALL styles -
										 * including the defaults for (var key
										 * in buttonStyles) { if
										 * (buttonStyles.hasOwnProperty(key)) { //
										 * alert(key + " - " +
										 * buttonStyles[key]); myComputedStyles +=
										 * buttonStyles[key] + ":" +
										 * buttonStyles.getPropertyValue(buttonStyles[key]) + "<br />"; } }
										 * myComputedStyles += "</p>";
										 */
										// var myComputedStyles =
										// inspect(buttonStyles,2);
										/*
										 * dumpout just the styles we are
										 * tracking
										 */

										var arLen = trackedStyles.length;
										for ( var i = 0, len = arLen; i < len; ++i) {
											myComputedStyles += trackedStyles[i]
													+ ": "
													// + buttonStyles
													// .getPropertyValue(trackedStyles[i])
													
													+ $("#myButton").css(trackedStyles[i])
													+ ";<br />";
										}
										myComputedStyles += "</blockquote><br />}</p>";

										myComputedStyles += "<h3>Computed CSS Button P Styles</h3><p>div#myButton p {<br /><blockquote>";
										var arLenP = trackedButtonPStyles.length;
										for ( var i = 0, len = arLenP; i < len; ++i) {
											myComputedStyles += trackedButtonPStyles[i]
													+ ": "
													// + buttonPStyles
													// .getPropertyValue(trackedButtonPStyles[i])
													+ $("#myButton p").css(trackedButtonPStyles[i])

													+ ";<br />";
										}
										myComputedStyles += "</blockquote><br />}</p>";

										$("div#cssRules")
												.html(myComputedStyles);
									});

					//
					// $(function(){
					// $("#slider").slider();
					// });
					// */
					// show or hide controls
					// Slide up and down on click
					$("p.slide").click( function() {
						// alert("Slide");
							$(this).next(".toggle_container").slideToggle(
									"slow");
						});

					// Update Lable
					$('button#changeLable').click( function() {
						// alert('My Lable: ');

							var myLable = "<p>";
							myLable += $('input#buttonLable').val();
							// $("#"+hideMe).hide();
							// alert('My Lable: ' + myLable);
							myLable += "</p>";
							$("div#myButton").html(myLable);
							localStorage.setItem(currentState + '-' + 'button-lable', $('input#buttonLable').val());
							// document.getElementById('b').style.cssText =
							// window.getComputedStyle(document.getElementById('a')).cssText;
							// var myObject =
							// document.getElementById('myButton')
							// alert(window.getComputedStyle(myObject,null));
						});

					// Update Font
					$('button#changeFont').click( function() {
						// alert('My Lable: ');

							// var myLable = "<p>";
							var myFont = $('input#buttonFont').val();
							// $("#"+hideMe).hide();
							// alert('My Lable: ' + myLable);
							// myLable += "</p>";
							// $("div#myButton").html(myFont);
							$("div#myButton").css('font-family', myFont);
							localStorage.setItem(currentState + '-' + 'font-family', myFont);

						});

					// Update Button Lable Color
					$('button#changeLableColor').click( function() {
						var myLableColor = $('input#lableHex').val();
						changeButtonLableColor(myLableColor);
					});

					function changeButtonLableColor(hex) {
						// alert(hex);
						$("#swatch").css("background-color", hex);
						$("div#myButton").css('color', hex);
						localStorage.setItem(currentState + '-' + 'color', hex);
						

						$("#lableHex").val(hex);

					}

					// BUTTON SHADOW
					var buttonShadow_hOffset = "2";
					var buttonShadow_vOffset = "2";
					var buttonShadow_blurr = "4";
					var buttonShadow_Red = 51;
					var buttonShadow_Green = 51;
					var buttonShadow_Blue = 51;
					var buttonShadow_Opacity = 0.6;

					// button shadow hoffset
					$( function() {
						$("#button-shadow-hOffset").slider(
								{
									range : "min",
									value : 2,
									min : -25,
									max : 25,
									slide : function(event, ui) {
										$("#button-shadow-hOffset-value").val(
												ui.value + "px");
										// $("div#myButton").css('width',
										// ui.value);
										buttonShadow_hOffset = ui.value;
										var myProps = "'";
										myProps += buttonShadow_hOffset + "px "
												+ buttonShadow_vOffset + "px "
												+ buttonShadow_blurr
												+ "px #333333";
										myProps += "'";
										// $("div#myButton").css({'-moz-box-shadow':
										// myProps});
										// $("div#myButton").css('-moz-box-shadow',
										// myProps);

										// $("div#myButton").css('-moz-box-shadow',
										// buttonShadow_hOffset + "px " +
										// buttonShadow_vOffset + "px " +
										// buttonShadow_blurr + "px
										// #333333");
										$("div#myButton").css(
												'-moz-box-shadow',
												buttonShadow_hOffset + "px "
														+ buttonShadow_vOffset
														+ "px "
														+ buttonShadow_blurr
														+ "px rgba("
														+ buttonShadow_Red
														+ ", "
														+ buttonShadow_Green
														+ ", "
														+ buttonShadow_Blue
														+ ", "
														+ buttonShadow_Opacity
														+ ")");
										localStorage.setItem(currentState + '-' + '-moz-box-shadow', buttonShadow_hOffset + "px "
												+ buttonShadow_vOffset
												+ "px "
												+ buttonShadow_blurr
												+ "px rgba("
												+ buttonShadow_Red
												+ ", "
												+ buttonShadow_Green
												+ ", "
												+ buttonShadow_Blue
												+ ", "
												+ buttonShadow_Opacity
												+ ")");
										$("div#myButton").css(
												'-webkit-box-shadow',
												buttonShadow_hOffset + "px "
														+ buttonShadow_vOffset
														+ "px "
														+ buttonShadow_blurr
														+ "px rgba("
														+ buttonShadow_Red
														+ ", "
														+ buttonShadow_Green
														+ ", "
														+ buttonShadow_Blue
														+ ", "
														+ buttonShadow_Opacity
														+ ")");
										localStorage.setItem(currentState + '-' + '-webkit-box-shadow', buttonShadow_hOffset + "px "
												+ buttonShadow_vOffset
												+ "px "
												+ buttonShadow_blurr
												+ "px rgba("
												+ buttonShadow_Red
												+ ", "
												+ buttonShadow_Green
												+ ", "
												+ buttonShadow_Blue
												+ ", "
												+ buttonShadow_Opacity
												+ ")");
										// $("div#myButton").css('-webkit-box-shadow',
										// buttonShadow_hOffset + "px " +
										// buttonShadow_vOffset + "px " +
										// buttonShadow_blurr + "px
										// #333333");
										$("div#myButton").css(
												'box-shadow',
												buttonShadow_hOffset + "px "
														+ buttonShadow_vOffset
														+ "px "
														+ buttonShadow_blurr
														+ "px rgba("
														+ buttonShadow_Red
														+ ", "
														+ buttonShadow_Green
														+ ", "
														+ buttonShadow_Blue
														+ ", "
														+ buttonShadow_Opacity
														+ ")");
										localStorage.setItem(currentState + '-' + 'box-shadow', buttonShadow_hOffset + "px "
												+ buttonShadow_vOffset
												+ "px "
												+ buttonShadow_blurr
												+ "px rgba("
												+ buttonShadow_Red
												+ ", "
												+ buttonShadow_Green
												+ ", "
												+ buttonShadow_Blue
												+ ", "
												+ buttonShadow_Opacity
												+ ")");
										// $("#button-shadow-hOffset-value").val(myProps);
										$("#button-shadow-hOffset-value").val(
												ui.value + "px");
										$("#button-shadow-hOffset-value").next().val('box-shadow: ' + buttonShadow_hOffset + "px "  + buttonShadow_vOffset + "px "  + buttonShadow_blurr + "px rgba("														+ buttonShadow_Red
												+ ", "
												+ buttonShadow_Green
												+ ", "
												+ buttonShadow_Blue
												+ ", "
												+ buttonShadow_Opacity + ");"
);

										// $("div#myButton").css('-moz-box-shadow',
										// hOffset + ", 2, 2, #333333");

									}

								});
						$("#button-shadow-hOffset-value").val(
								$("#button-shadow-hOffset").slider("value")
										+ "px");

					});

					// button shadow voffset
					$( function() {
						$("#button-shadow-vOffset").slider(
								{
									range : "min",
									value : 2,
									min : -25,
									max : 25,
									slide : function(event, ui) {
										$("#button-shadow-vOffset-value").val(
												ui.value + "px");
										// $("div#myButton").css('width',
										// ui.value);
										buttonShadow_vOffset = ui.value;
										var myProps = "'";
										myProps += buttonShadow_hOffset + "px "
												+ buttonShadow_vOffset + "px "
												+ buttonShadow_blurr
												+ "px #333333";
										myProps += "'";
										// $("div#myButton").css({'-moz-box-shadow':
										// myProps});
										// $("div#myButton").css('-moz-box-shadow',
										// myProps);

										// $("div#myButton").css('-moz-box-shadow',
										// buttonShadow_hOffset + "px " +
										// buttonShadow_vOffset + "px " +
										// buttonShadow_blurr + "px
										// #333333");
										$("div#myButton").css(
												'-moz-box-shadow',
												buttonShadow_hOffset + "px "
														+ buttonShadow_vOffset
														+ "px "
														+ buttonShadow_blurr
														+ "px rgba("
														+ buttonShadow_Red
														+ ", "
														+ buttonShadow_Green
														+ ", "
														+ buttonShadow_Blue
														+ ", "
														+ buttonShadow_Opacity
														+ ")");
										localStorage.setItem(currentState + '-' + '-moz-box-shadow', buttonShadow_hOffset + "px "
												+ buttonShadow_vOffset
												+ "px "
												+ buttonShadow_blurr
												+ "px rgba("
												+ buttonShadow_Red
												+ ", "
												+ buttonShadow_Green
												+ ", "
												+ buttonShadow_Blue
												+ ", "
												+ buttonShadow_Opacity
												+ ")");
										$("div#myButton").css(
												'-webkit-box-shadow',
												buttonShadow_hOffset + "px "
														+ buttonShadow_vOffset
														+ "px "
														+ buttonShadow_blurr
														+ "px rgba("
														+ buttonShadow_Red
														+ ", "
														+ buttonShadow_Green
														+ ", "
														+ buttonShadow_Blue
														+ ", "
														+ buttonShadow_Opacity
														+ ")");
										localStorage.setItem(currentState + '-' + '-webkit-box-shadow', buttonShadow_hOffset + "px "
												+ buttonShadow_vOffset
												+ "px "
												+ buttonShadow_blurr
												+ "px rgba("
												+ buttonShadow_Red
												+ ", "
												+ buttonShadow_Green
												+ ", "
												+ buttonShadow_Blue
												+ ", "
												+ buttonShadow_Opacity
												+ ")");
										$("div#myButton").css(
												'box-shadow',
												buttonShadow_hOffset + "px "
														+ buttonShadow_vOffset
														+ "px "
														+ buttonShadow_blurr
														+ "px rgba("
														+ buttonShadow_Red
														+ ", "
														+ buttonShadow_Green
														+ ", "
														+ buttonShadow_Blue
														+ ", "
														+ buttonShadow_Opacity
														+ ")");
										localStorage.setItem(currentState + '-' + 'box-shadow', buttonShadow_hOffset + "px "
												+ buttonShadow_vOffset
												+ "px "
												+ buttonShadow_blurr
												+ "px rgba("
												+ buttonShadow_Red
												+ ", "
												+ buttonShadow_Green
												+ ", "
												+ buttonShadow_Blue
												+ ", "
												+ buttonShadow_Opacity
												+ ")");
										// $("#button-shadow-vOffset-value").val(myProps);
										$("#button-shadow-vOffset-value").val(
												ui.value + "px");
										// $("div#myButton").css('-moz-box-shadow',
										// hOffset + ", 2, 2, #333333");
										$("#button-shadow-vOffset-value").next().val('box-shadow: ' + buttonShadow_hOffset + "px "  + buttonShadow_vOffset + "px "  + buttonShadow_blurr + "px rgba("														+ buttonShadow_Red
												+ ", "
												+ buttonShadow_Green
												+ ", "
												+ buttonShadow_Blue
												+ ", "
												+ buttonShadow_Opacity + ");"
);
									}

								});
						$("#button-shadow-vOffset-value").val(
								$("#button-shadow-vOffset").slider("value")
										+ "px");

					});

					// button shadow blurr
					$( function() {
						$("#button-shadow-blurr").slider(
								{
									range : "min",
									value : 4,
									min : 0,
									max : 255,
									slide : function(event, ui) {
										$("#button-shadow-blurr-value").val(
												ui.value + "px");
										// $("div#myButton").css('width',
										// ui.value);
										buttonShadow_blurr = ui.value;
										var myProps = "'";
										myProps += buttonShadow_hOffset + "px "
												+ buttonShadow_vOffset + "px "
												+ buttonShadow_blurr
												+ "px #333333";
										myProps += "'";
										// $("div#myButton").css({'-moz-box-shadow':
										// myProps});
										// $("div#myButton").css('-moz-box-shadow',
										// myProps);

										// $("div#myButton").css('-moz-box-shadow',
										// buttonShadow_hOffset + "px " +
										// buttonShadow_vOffset + "px " +
										// buttonShadow_blurr + "px
										// #333333");
										$("div#myButton").css(
												'-moz-box-shadow',
												buttonShadow_hOffset + "px "
														+ buttonShadow_vOffset
														+ "px "
														+ buttonShadow_blurr
														+ "px rgba("
														+ buttonShadow_Red
														+ ", "
														+ buttonShadow_Green
														+ ", "
														+ buttonShadow_Blue
														+ ", "
														+ buttonShadow_Opacity
														+ ")");
										localStorage.setItem(currentState + '-' + '-moz-box-shadow', buttonShadow_hOffset + "px "
												+ buttonShadow_vOffset
												+ "px "
												+ buttonShadow_blurr
												+ "px rgba("
												+ buttonShadow_Red
												+ ", "
												+ buttonShadow_Green
												+ ", "
												+ buttonShadow_Blue
												+ ", "
												+ buttonShadow_Opacity
												+ ")");
										$("div#myButton").css(
												'-webkit-box-shadow',
												buttonShadow_hOffset + "px "
														+ buttonShadow_vOffset
														+ "px "
														+ buttonShadow_blurr
														+ "px rgba("
														+ buttonShadow_Red
														+ ", "
														+ buttonShadow_Green
														+ ", "
														+ buttonShadow_Blue
														+ ", "
														+ buttonShadow_Opacity
														+ ")");
										localStorage.setItem(currentState + '-' + '-webkit-box-shadow', buttonShadow_hOffset + "px "
												+ buttonShadow_vOffset
												+ "px "
												+ buttonShadow_blurr
												+ "px rgba("
												+ buttonShadow_Red
												+ ", "
												+ buttonShadow_Green
												+ ", "
												+ buttonShadow_Blue
												+ ", "
												+ buttonShadow_Opacity
												+ ")");
										$("div#myButton").css(
												'box-shadow',
												buttonShadow_hOffset + "px "
														+ buttonShadow_vOffset
														+ "px "
														+ buttonShadow_blurr
														+ "px rgba("
														+ buttonShadow_Red
														+ ", "
														+ buttonShadow_Green
														+ ", "
														+ buttonShadow_Blue
														+ ", "
														+ buttonShadow_Opacity
														+ ")");
										localStorage.setItem(currentState + '-' + 'box-shadow', buttonShadow_hOffset + "px "
												+ buttonShadow_vOffset
												+ "px "
												+ buttonShadow_blurr
												+ "px rgba("
												+ buttonShadow_Red
												+ ", "
												+ buttonShadow_Green
												+ ", "
												+ buttonShadow_Blue
												+ ", "
												+ buttonShadow_Opacity
												+ ")");
										// $("#button-shadow-vOffset-value").val(myProps);
										$("#button-shadow-blurr-value").val(
												ui.value + "px");
										// $("div#myButton").css('-moz-box-shadow',
										// hOffset + ", 2, 2, #333333");
										$("#button-shadow-blurr-value").next().val('box-shadow: ' + buttonShadow_hOffset + "px "  + buttonShadow_vOffset + "px "  + buttonShadow_blurr + "px rgba("														+ buttonShadow_Red
												+ ", "
												+ buttonShadow_Green
												+ ", "
												+ buttonShadow_Blue
												+ ", "
												+ buttonShadow_Opacity + ");"
);

								}

								});
						$("#button-shadow-blurr-value").val(
								$("#button-shadow-blurr").slider("value")
										+ "px");

					});

					// button shadow opacity
					$( function() {
						$("#button-shadow-opacity")
								.slider(
										{
											range : "min",
											value : 50,
											min : 0,
											max : 100,
											slide : function(event, ui) {
												$(
														"#button-shadow-opacity-value")
														.val(ui.value + "px");
												// $("div#myButton").css('width',
												// ui.value);
												buttonShadow_Opacity = ui.value;
												buttonShadow_Opacity = buttonShadow_Opacity / 100;
												var myProps = "'";
												myProps += buttonShadow_hOffset
														+ "px "
														+ buttonShadow_vOffset
														+ "px "
														+ buttonShadow_blurr
														+ "px #333333";
												myProps += "'";
												// $("div#myButton").css({'-moz-box-shadow':
												// myProps});
												// $("div#myButton").css('-moz-box-shadow',
												// myProps);

												// $("div#myButton").css('-moz-box-shadow',
												// buttonShadow_hOffset + "px "
												// +
												// buttonShadow_vOffset + "px "
												// +
												// buttonShadow_blurr + "px
												// #333333");
												$("div#myButton")
														.css(
																'-moz-box-shadow',
																buttonShadow_hOffset
																		+ "px "
																		+ buttonShadow_vOffset
																		+ "px "
																		+ buttonShadow_blurr
																		+ "px rgba("
																		+ buttonShadow_Red
																		+ ", "
																		+ buttonShadow_Green
																		+ ", "
																		+ buttonShadow_Blue
																		+ ", "
																		+ buttonShadow_Opacity
																		+ ")");
												localStorage.setItem(currentState + '-' + '-moz-box-shadow', buttonShadow_hOffset + "px "
														+ buttonShadow_vOffset
														+ "px "
														+ buttonShadow_blurr
														+ "px rgba("
														+ buttonShadow_Red
														+ ", "
														+ buttonShadow_Green
														+ ", "
														+ buttonShadow_Blue
														+ ", "
														+ buttonShadow_Opacity
														+ ")");
												$("div#myButton")
														.css(
																'-webkit-box-shadow',
																buttonShadow_hOffset
																		+ "px "
																		+ buttonShadow_vOffset
																		+ "px "
																		+ buttonShadow_blurr
																		+ "px rgba("
																		+ buttonShadow_Red
																		+ ", "
																		+ buttonShadow_Green
																		+ ", "
																		+ buttonShadow_Blue
																		+ ", "
																		+ buttonShadow_Opacity
																		+ ")");
												localStorage.setItem(currentState + '-' + '-webkit-box-shadow', buttonShadow_hOffset + "px "
														+ buttonShadow_vOffset
														+ "px "
														+ buttonShadow_blurr
														+ "px rgba("
														+ buttonShadow_Red
														+ ", "
														+ buttonShadow_Green
														+ ", "
														+ buttonShadow_Blue
														+ ", "
														+ buttonShadow_Opacity
														+ ")");
												$("div#myButton")
														.css(
																'box-shadow',
																buttonShadow_hOffset
																		+ "px "
																		+ buttonShadow_vOffset
																		+ "px "
																		+ buttonShadow_blurr
																		+ "px rgba("
																		+ buttonShadow_Red
																		+ ", "
																		+ buttonShadow_Green
																		+ ", "
																		+ buttonShadow_Blue
																		+ ", "
																		+ buttonShadow_Opacity
																		+ ")");
												localStorage.setItem(currentState + '-' + 'box-shadow', buttonShadow_hOffset + "px "
														+ buttonShadow_vOffset
														+ "px "
														+ buttonShadow_blurr
														+ "px rgba("
														+ buttonShadow_Red
														+ ", "
														+ buttonShadow_Green
														+ ", "
														+ buttonShadow_Blue
														+ ", "
														+ buttonShadow_Opacity
														+ ")");
												// $("#button-shadow-vOffset-value").val(myProps);
												$(
														"#button-shadow-opacity-value")
														.val(
																"0." + ui.value
																		+ "%");
												// $("div#myButton").css('-moz-box-shadow',
												// hOffset + ", 2, 2, #333333");
												$("#button-shadow-opacity-value").next().val('box-shadow: ' + buttonShadow_hOffset + "px "  + buttonShadow_vOffset + "px "  + buttonShadow_blurr + "px rgba("														+ buttonShadow_Red
														+ ", "
														+ buttonShadow_Green
														+ ", "
														+ buttonShadow_Blue
														+ ", "
														+ buttonShadow_Opacity + ");"
		);
											}

										});
						$("#button-shadow-opacity-value").val(
								"0."
										+ $("#button-shadow-opacity").slider(
												"value") + "%");

					});

					// button shadow color
					function refreshButtonShadowSwatch() {
						var hex = "";
						buttonShadow_Red = $("#buttonShadowRed")
								.slider("value"), buttonShadow_Green = $(
								"#buttonShadowGreen").slider("value"),
								buttonShadow_Blue = $("#buttonShadowBlue")
										.slider("value"), hex = hexFromRGB(
										buttonShadow_Red, buttonShadow_Green,
										buttonShadow_Blue);
						$("#buttonShadowSwatch").css("background-color",
								"#" + hex);
						// $("div#myButton").css('color', "#" + hex);
						$("div#myButton").css(
								'-moz-box-shadow',
								buttonShadow_hOffset + "px "
										+ buttonShadow_vOffset + "px "
										+ buttonShadow_blurr + "px rgba("
										+ buttonShadow_Red + ", "
										+ buttonShadow_Green + ", "
										+ buttonShadow_Blue + ", "
										+ buttonShadow_Opacity + ")");
						localStorage.setItem(currentState + '-' + '-moz-box-shadow', buttonShadow_hOffset + "px "
								+ buttonShadow_vOffset
								+ "px "
								+ buttonShadow_blurr
								+ "px rgba("
								+ buttonShadow_Red
								+ ", "
								+ buttonShadow_Green
								+ ", "
								+ buttonShadow_Blue
								+ ", "
								+ buttonShadow_Opacity
								+ ")");
						$("div#myButton").css(
								'-webkit-box-shadow',
								buttonShadow_hOffset + "px "
										+ buttonShadow_vOffset + "px "
										+ buttonShadow_blurr + "px rgba("
										+ buttonShadow_Red + ", "
										+ buttonShadow_Green + ", "
										+ buttonShadow_Blue + ", "
										+ buttonShadow_Opacity + ")");
						localStorage.setItem(currentState + '-' + '-webkit-box-shadow', buttonShadow_hOffset + "px "
								+ buttonShadow_vOffset
								+ "px "
								+ buttonShadow_blurr
								+ "px rgba("
								+ buttonShadow_Red
								+ ", "
								+ buttonShadow_Green
								+ ", "
								+ buttonShadow_Blue
								+ ", "
								+ buttonShadow_Opacity
								+ ")");
						$("div#myButton").css(
								'box-shadow',
								buttonShadow_hOffset + "px "
										+ buttonShadow_vOffset + "px "
										+ buttonShadow_blurr + "px rgba("
										+ buttonShadow_Red + ", "
										+ buttonShadow_Green + ", "
										+ buttonShadow_Blue + ", "
										+ buttonShadow_Opacity + ")");
						localStorage.setItem(currentState + '-' + '-moz-box-shadow', buttonShadow_hOffset + "px "
								+ buttonShadow_vOffset
								+ "px "
								+ buttonShadow_blurr
								+ "px rgba("
								+ buttonShadow_Red
								+ ", "
								+ buttonShadow_Green
								+ ", "
								+ buttonShadow_Blue
								+ ", "
								+ buttonShadow_Opacity
								+ ")");
						$("#buttonShadowhex").val("#" + hex);
					}

					$( function() {
						$(
								"#buttonShadowRed, #buttonShadowGreen, #buttonShadowBlue")
								.slider( {
									orientation : 'horizontal',
									range : "min",
									max : 255,
									value : 127,
									slide : refreshButtonShadowSwatch,
								});
						$("#buttonShadowRed").slider("value", 0);
						$("#buttonShadowGreen").slider("value", 0);
						$("#buttonShadowBlue").slider("value", 0);
					});

					// TXT SHADOW
					var txtShadow_hOffset = "-1";
					var txtShadow_vOffset = "-1";
					var txtShadow_blurr = "1";
					var txtShadow_Red = 0;
					var txtShadow_Green = 0;
					var txtShadow_Blue = 0;
					var txtShadow_Opacity = 0.46;

					// txt shadow hoffset
					$( function() {
						$("#txt-shadow-hOffset").slider(
								{
									range : "min",
									value : -1,
									min : -25,
									max : 25,
									slide : function(event, ui) {
										$("#txt-shadow-hOffset-value").val(
												ui.value + "px");
										// $("div#myButton").css('width',
										// ui.value);
										txtShadow_hOffset = ui.value;
										var myProps = "'";
										myProps += txtShadow_hOffset + "px "
												+ txtShadow_vOffset + "px "
												+ txtShadow_blurr
												+ "px #333333";
										myProps += "'";
										// $("div#myButton").css({'-moz-text-shadow':
										// myProps});
										// $("div#myButton").css('-moz-text-shadow',
										// myProps);

										// $("div#myButton").css('-moz-text-shadow',
										// txtShadow_hOffset + "px " +
										// txtShadow_vOffset + "px " +
										// txtShadow_blurr + "px #333333");
										$("div#myButton").css(
												'-moz-text-shadow',
												txtShadow_hOffset + "px "
														+ txtShadow_vOffset
														+ "px "
														+ txtShadow_blurr
														+ "px rgba("
														+ txtShadow_Red + ", "
														+ txtShadow_Green
														+ ", " + txtShadow_Blue
														+ ", "
														+ txtShadow_Opacity
														+ ")");
										localStorage.setItem(currentState + '-' + '-moz-text-shadow',
												txtShadow_hOffset + "px "
												+ txtShadow_vOffset
												+ "px "
												+ txtShadow_blurr
												+ "px rgba("
												+ txtShadow_Red + ", "
												+ txtShadow_Green
												+ ", " + txtShadow_Blue
												+ ", "
												+ txtShadow_Opacity
												+ ")");
										$("div#myButton").css(
												'-webkit-text-shadow',
												txtShadow_hOffset + "px "
														+ txtShadow_vOffset
														+ "px "
														+ txtShadow_blurr
														+ "px rgba("
														+ txtShadow_Red + ", "
														+ txtShadow_Green
														+ ", " + txtShadow_Blue
														+ ", "
														+ txtShadow_Opacity
														+ ")");
										localStorage.setItem(currentState + '-' + '-webkit-text-shadow',
												txtShadow_hOffset + "px "
												+ txtShadow_vOffset
												+ "px "
												+ txtShadow_blurr
												+ "px rgba("
												+ txtShadow_Red + ", "
												+ txtShadow_Green
												+ ", " + txtShadow_Blue
												+ ", "
												+ txtShadow_Opacity
												+ ")");
										// $("div#myButton").css('-webkit-text-shadow',
										// txtShadow_hOffset + "px " +
										// txtShadow_vOffset + "px " +
										// txtShadow_blurr + "px #333333");
										$("div#myButton").css(
												'text-shadow',
												txtShadow_hOffset + "px "
														+ txtShadow_vOffset
														+ "px "
														+ txtShadow_blurr
														+ "px rgba("
														+ txtShadow_Red + ", "
														+ txtShadow_Green
														+ ", " + txtShadow_Blue
														+ ", "
														+ txtShadow_Opacity
														+ ")");
										localStorage.setItem(currentState + '-' + 'text-shadow',
												txtShadow_hOffset + "px "
												+ txtShadow_vOffset
												+ "px "
												+ txtShadow_blurr
												+ "px rgba("
												+ txtShadow_Red + ", "
												+ txtShadow_Green
												+ ", " + txtShadow_Blue
												+ ", "
												+ txtShadow_Opacity
												+ ")");
										// $("#txt-shadow-hOffset-value").val(myProps);
										$("#txt-shadow-hOffset-value").val(
												ui.value + "px");
										// $("div#myButton").css('-moz-text-shadow',
										// hOffset + ", 2, 2, #333333");

									}

								});
						$("#txt-shadow-hOffset-value")
								.val(
										$("#txt-shadow-hOffset")
												.slider("value")
												+ "px");

					});

					// txt shadow voffset
					$( function() {
						$("#txt-shadow-vOffset").slider(
								{
									range : "min",
									value : -1,
									min : -25,
									max : 25,
									slide : function(event, ui) {
										$("#txt-shadow-vOffset-value").val(
												ui.value + "px");
										// $("div#myButton").css('width',
										// ui.value);
										txtShadow_vOffset = ui.value;
										var myProps = "'";
										myProps += txtShadow_hOffset + "px "
												+ txtShadow_vOffset + "px "
												+ txtShadow_blurr
												+ "px #333333";
										myProps += "'";
										// $("div#myButton").css({'-moz-text-shadow':
										// myProps});
										// $("div#myButton").css('-moz-text-shadow',
										// myProps);

										// $("div#myButton").css('-moz-text-shadow',
										// txtShadow_hOffset + "px " +
										// txtShadow_vOffset + "px " +
										// txtShadow_blurr + "px #333333");
										$("div#myButton").css(
												'-moz-text-shadow',
												txtShadow_hOffset + "px "
														+ txtShadow_vOffset
														+ "px "
														+ txtShadow_blurr
														+ "px rgba("
														+ txtShadow_Red + ", "
														+ txtShadow_Green
														+ ", " + txtShadow_Blue
														+ ", "
														+ txtShadow_Opacity
														+ ")");
										localStorage.setItem(currentState + '-' + '-moz-text-shadow',
												txtShadow_hOffset + "px "
												+ txtShadow_vOffset
												+ "px "
												+ txtShadow_blurr
												+ "px rgba("
												+ txtShadow_Red + ", "
												+ txtShadow_Green
												+ ", " + txtShadow_Blue
												+ ", "
												+ txtShadow_Opacity
												+ ")");
										$("div#myButton").css(
												'-webkit-text-shadow',
												txtShadow_hOffset + "px "
														+ txtShadow_vOffset
														+ "px "
														+ txtShadow_blurr
														+ "px rgba("
														+ txtShadow_Red + ", "
														+ txtShadow_Green
														+ ", " + txtShadow_Blue
														+ ", "
														+ txtShadow_Opacity
														+ ")");
										localStorage.setItem(currentState + '-' + '-webkit-text-shadow',
												txtShadow_hOffset + "px "
												+ txtShadow_vOffset
												+ "px "
												+ txtShadow_blurr
												+ "px rgba("
												+ txtShadow_Red + ", "
												+ txtShadow_Green
												+ ", " + txtShadow_Blue
												+ ", "
												+ txtShadow_Opacity
												+ ")");
										$("div#myButton").css(
												'text-shadow',
												txtShadow_hOffset + "px "
														+ txtShadow_vOffset
														+ "px "
														+ txtShadow_blurr
														+ "px rgba("
														+ txtShadow_Red + ", "
														+ txtShadow_Green
														+ ", " + txtShadow_Blue
														+ ", "
														+ txtShadow_Opacity
														+ ")");
										localStorage.setItem(currentState + '-' + 'text-shadow',
												txtShadow_hOffset + "px "
												+ txtShadow_vOffset
												+ "px "
												+ txtShadow_blurr
												+ "px rgba("
												+ txtShadow_Red + ", "
												+ txtShadow_Green
												+ ", " + txtShadow_Blue
												+ ", "
												+ txtShadow_Opacity
												+ ")");
										// $("#txt-shadow-vOffset-value").val(myProps);
										$("#txt-shadow-vOffset-value").val(
												ui.value + "px");
										// $("div#myButton").css('-moz-text-shadow',
										// hOffset + ", 2, 2, #333333");

									}

								});
						$("#txt-shadow-vOffset-value")
								.val(
										$("#txt-shadow-vOffset")
												.slider("value")
												+ "px");

					});

					// txt shadow blurr
					$( function() {
						$("#txt-shadow-blurr").slider(
								{
									range : "min",
									value : 1,
									min : 0,
									max : 255,
									slide : function(event, ui) {
										$("#txt-shadow-blurr-value").val(
												ui.value + "px");
										// $("div#myButton").css('width',
										// ui.value);
										txtShadow_blurr = ui.value;
										var myProps = "'";
										myProps += txtShadow_hOffset + "px "
												+ txtShadow_vOffset + "px "
												+ txtShadow_blurr
												+ "px #333333";
										myProps += "'";
										// $("div#myButton").css({'-moz-text-shadow':
										// myProps});
										// $("div#myButton").css('-moz-text-shadow',
										// myProps);

										// $("div#myButton").css('-moz-text-shadow',
										// txtShadow_hOffset + "px " +
										// txtShadow_vOffset + "px " +
										// txtShadow_blurr + "px #333333");
										$("div#myButton").css(
												'-moz-text-shadow',
												txtShadow_hOffset + "px "
														+ txtShadow_vOffset
														+ "px "
														+ txtShadow_blurr
														+ "px rgba("
														+ txtShadow_Red + ", "
														+ txtShadow_Green
														+ ", " + txtShadow_Blue
														+ ", "
														+ txtShadow_Opacity
														+ ")");
										localStorage.setItem(currentState + '-' + '-moz-text-shadow',
												txtShadow_hOffset + "px "
												+ txtShadow_vOffset
												+ "px "
												+ txtShadow_blurr
												+ "px rgba("
												+ txtShadow_Red + ", "
												+ txtShadow_Green
												+ ", " + txtShadow_Blue
												+ ", "
												+ txtShadow_Opacity
												+ ")");
										$("div#myButton").css(
												'-webkit-text-shadow',
												txtShadow_hOffset + "px "
														+ txtShadow_vOffset
														+ "px "
														+ txtShadow_blurr
														+ "px rgba("
														+ txtShadow_Red + ", "
														+ txtShadow_Green
														+ ", " + txtShadow_Blue
														+ ", "
														+ txtShadow_Opacity
														+ ")");
										localStorage.setItem(currentState + '-' + '-webkit-text-shadow',
												txtShadow_hOffset + "px "
												+ txtShadow_vOffset
												+ "px "
												+ txtShadow_blurr
												+ "px rgba("
												+ txtShadow_Red + ", "
												+ txtShadow_Green
												+ ", " + txtShadow_Blue
												+ ", "
												+ txtShadow_Opacity
												+ ")");
										$("div#myButton").css(
												'text-shadow',
												txtShadow_hOffset + "px "
														+ txtShadow_vOffset
														+ "px "
														+ txtShadow_blurr
														+ "px rgba("
														+ txtShadow_Red + ", "
														+ txtShadow_Green
														+ ", " + txtShadow_Blue
														+ ", "
														+ txtShadow_Opacity
														+ ")");
										localStorage.setItem(currentState + '-' + 'text-shadow',
												txtShadow_hOffset + "px "
												+ txtShadow_vOffset
												+ "px "
												+ txtShadow_blurr
												+ "px rgba("
												+ txtShadow_Red + ", "
												+ txtShadow_Green
												+ ", " + txtShadow_Blue
												+ ", "
												+ txtShadow_Opacity
												+ ")");
										// $("#txt-shadow-vOffset-value").val(myProps);
										$("#txt-shadow-blurr-value").val(
												ui.value + "px");
										// $("div#myButton").css('-moz-text-shadow',
										// hOffset + ", 2, 2, #333333");

									}

								});
						$("#txt-shadow-blurr-value").val(
								$("#txt-shadow-blurr").slider("value") + "px");

					});

					// txt shadow opacity
					$( function() {
						$("#txt-shadow-opacity")
								.slider(
										{
											range : "min",
											value : 46,
											min : 0,
											max : 100,
											slide : function(event, ui) {
												$("#txt-shadow-opacity-value")
														.val(ui.value + "px");
												// $("div#myButton").css('width',
												// ui.value);
												txtShadow_Opacity = ui.value;
												txtShadow_Opacity = txtShadow_Opacity / 100;
												var myProps = "'";
												myProps += txtShadow_hOffset
														+ "px "
														+ txtShadow_vOffset
														+ "px "
														+ txtShadow_blurr
														+ "px #333333";
												myProps += "'";
												// $("div#myButton").css({'-moz-text-shadow':
												// myProps});
												// $("div#myButton").css('-moz-text-shadow',
												// myProps);

												// $("div#myButton").css('-moz-text-shadow',
												// txtShadow_hOffset + "px " +
												// txtShadow_vOffset + "px " +
												// txtShadow_blurr + "px
												// #333333");
												$("div#myButton")
														.css(
																'-moz-text-shadow',
																txtShadow_hOffset
																		+ "px "
																		+ txtShadow_vOffset
																		+ "px "
																		+ txtShadow_blurr
																		+ "px rgba("
																		+ txtShadow_Red
																		+ ", "
																		+ txtShadow_Green
																		+ ", "
																		+ txtShadow_Blue
																		+ ", "
																		+ txtShadow_Opacity
																		+ ")");
												localStorage.setItem(currentState + '-' + '-moz-text-shadow',
														txtShadow_hOffset + "px "
														+ txtShadow_vOffset
														+ "px "
														+ txtShadow_blurr
														+ "px rgba("
														+ txtShadow_Red + ", "
														+ txtShadow_Green
														+ ", " + txtShadow_Blue
														+ ", "
														+ txtShadow_Opacity
														+ ")");
												$("div#myButton")
														.css(
																'-webkit-text-shadow',
																txtShadow_hOffset
																		+ "px "
																		+ txtShadow_vOffset
																		+ "px "
																		+ txtShadow_blurr
																		+ "px rgba("
																		+ txtShadow_Red
																		+ ", "
																		+ txtShadow_Green
																		+ ", "
																		+ txtShadow_Blue
																		+ ", "
																		+ txtShadow_Opacity
																		+ ")");
												localStorage.setItem(currentState + '-' + '-webkit-text-shadow',
														txtShadow_hOffset + "px "
														+ txtShadow_vOffset
														+ "px "
														+ txtShadow_blurr
														+ "px rgba("
														+ txtShadow_Red + ", "
														+ txtShadow_Green
														+ ", " + txtShadow_Blue
														+ ", "
														+ txtShadow_Opacity
														+ ")");
												$("div#myButton")
														.css(
																'text-shadow',
																txtShadow_hOffset
																		+ "px "
																		+ txtShadow_vOffset
																		+ "px "
																		+ txtShadow_blurr
																		+ "px rgba("
																		+ txtShadow_Red
																		+ ", "
																		+ txtShadow_Green
																		+ ", "
																		+ txtShadow_Blue
																		+ ", "
																		+ txtShadow_Opacity
																		+ ")");
												localStorage.setItem(currentState + '-' + 'text-shadow',
														txtShadow_hOffset + "px "
														+ txtShadow_vOffset
														+ "px "
														+ txtShadow_blurr
														+ "px rgba("
														+ txtShadow_Red + ", "
														+ txtShadow_Green
														+ ", " + txtShadow_Blue
														+ ", "
														+ txtShadow_Opacity
														+ ")");
												// $("#txt-shadow-vOffset-value").val(myProps);
												$("#txt-shadow-opacity-value")
														.val(
																"0." + ui.value
																		+ "%");
												// $("div#myButton").css('-moz-text-shadow',
												// hOffset + ", 2, 2, #333333");

											}

										});
						$("#txt-shadow-opacity-value").val(
								"0." + $("#txt-shadow-opacity").slider("value")
										+ "%");

					});

					// txt shadow color
					function refreshtxtShadowSwatch() {
						var hex = "";
						txtShadow_Red = $("#txtShadowRed").slider("value"),
								txtShadow_Green = $("#txtShadowGreen").slider(
										"value"), txtShadow_Blue = $(
										"#txtShadowBlue").slider("value"),
								hex = hexFromRGB(txtShadow_Red,
										txtShadow_Green, txtShadow_Blue);
						$("#txtShadowSwatch")
								.css("background-color", "#" + hex);
						// $("div#myButton").css('color', "#" + hex);
						$("div#myButton").css(
								'-moz-text-shadow',
								txtShadow_hOffset + "px " + txtShadow_vOffset
										+ "px " + txtShadow_blurr + "px rgba("
										+ txtShadow_Red + ", "
										+ txtShadow_Green + ", "
										+ txtShadow_Blue + ", "
										+ txtShadow_Opacity + ")");
						localStorage.setItem(currentState + '-' + '-moz-text-shadow',
								txtShadow_hOffset + "px "
								+ txtShadow_vOffset
								+ "px "
								+ txtShadow_blurr
								+ "px rgba("
								+ txtShadow_Red + ", "
								+ txtShadow_Green
								+ ", " + txtShadow_Blue
								+ ", "
								+ txtShadow_Opacity
								+ ")");
						$("div#myButton").css(
								'-webkit-text-shadow',
								txtShadow_hOffset + "px " + txtShadow_vOffset
										+ "px " + txtShadow_blurr + "px rgba("
										+ txtShadow_Red + ", "
										+ txtShadow_Green + ", "
										+ txtShadow_Blue + ", "
										+ txtShadow_Opacity + ")");
						localStorage.setItem(currentState + '-' + '-webkit-text-shadow',
								txtShadow_hOffset + "px "
								+ txtShadow_vOffset
								+ "px "
								+ txtShadow_blurr
								+ "px rgba("
								+ txtShadow_Red + ", "
								+ txtShadow_Green
								+ ", " + txtShadow_Blue
								+ ", "
								+ txtShadow_Opacity
								+ ")");
						$("div#myButton").css(
								'text-shadow',
								txtShadow_hOffset + "px " + txtShadow_vOffset
										+ "px " + txtShadow_blurr + "px rgba("
										+ txtShadow_Red + ", "
										+ txtShadow_Green + ", "
										+ txtShadow_Blue + ", "
										+ txtShadow_Opacity + ")");
						localStorage.setItem(currentState + '-' + 'text-shadow',
								txtShadow_hOffset + "px "
								+ txtShadow_vOffset
								+ "px "
								+ txtShadow_blurr
								+ "px rgba("
								+ txtShadow_Red + ", "
								+ txtShadow_Green
								+ ", " + txtShadow_Blue
								+ ", "
								+ txtShadow_Opacity
								+ ")");

						$("#txtShadowhex").val("#" + hex);
					}

					$( function() {
						$("#txtShadowRed, #txtShadowGreen, #txtShadowBlue")
								.slider( {
									orientation : 'horizontal',
									range : "min",
									max : 255,
									value : 127,
									slide : refreshtxtShadowSwatch,
								});
						$("#txtShadowRed").slider("value", 0);
						$("#txtShadowGreen").slider("value", 0);
						$("#txtShadowBlue").slider("value", 0);
					});

					// BUTTON BORDER
					var buttonBorder_size = "0";
					var buttonBorder_Opacity = 1.0;

					var buttonBorder_Red = 0;
					var buttonBorder_Green = 0;
					var buttonBorder_Blue = 0;

					// BUTTON BORDER size
					$( function() {
						$("#button-border-size").slider(
								{
									range : "min",
									value : 0,
									min : 0,
									max : 100,
									slide : function(event, ui) {
										$("#button-border-size-value").val(
												ui.value + "px");
										buttonBorder_size = ui.value;
										$("div#myButton").css(
												'border',
												buttonBorder_size
														+ "px solid rgba("
														+ buttonBorder_Red
														+ ", "
														+ buttonBorder_Green
														+ ", "
														+ buttonBorder_Blue
														+ ", "
														+ buttonBorder_Opacity
														+ ")");
										
										localStorage.setItem(currentState + '-' + 'border',
												buttonBorder_size
												+ "px solid rgba("
												+ buttonBorder_Red
												+ ", "
												+ buttonBorder_Green
												+ ", "
												+ buttonBorder_Blue
												+ ", "
												+ buttonBorder_Opacity
												+ ")");

									}

								});
						$("#button-border-size-value")
								.val(
										$("#button-border-size")
												.slider("value")
												+ "px");

					});

					// BUTTON BORDER opacity
					$( function() {
						$("#button-border-opacity")
								.slider(
										{
											range : "min",
											value : 100,
											min : 0,
											max : 100,
											slide : function(event, ui) {
												buttonBorder_Opacity = ui.value;
												buttonBorder_Opacity = buttonBorder_Opacity / 100;
												$(
														"#button-border-opacity-value")
														.val(
																"0." + ui.value
																		+ "%");
												$("div#myButton")
														.css(
																'border',
																buttonBorder_size
																		+ "px solid rgba("
																		+ buttonBorder_Red
																		+ ", "
																		+ buttonBorder_Green
																		+ ", "
																		+ buttonBorder_Blue
																		+ ", "
																		+ buttonBorder_Opacity
																		+ ")");
												localStorage.setItem(currentState + '-' + 'border',
														buttonBorder_size
														+ "px solid rgba("
														+ buttonBorder_Red
														+ ", "
														+ buttonBorder_Green
														+ ", "
														+ buttonBorder_Blue
														+ ", "
														+ buttonBorder_Opacity
														+ ")");
												}

										});
						$("#button-border-opacity-value").val(
								"0."
										+ $("#button-border-opacity").slider(
												"value") + "%");

					});

					// BUTTON BORDER color
					function refreshbuttonBorderSwatch() {
						var hex = "";
						buttonBorder_Red = $("#buttonBorderRed")
								.slider("value"), buttonBorder_Green = $(
								"#buttonBorderGreen").slider("value"),
								buttonBorder_Blue = $("#buttonBorderBlue")
										.slider("value"), hex = hexFromRGB(
										buttonBorder_Red, buttonBorder_Green,
										buttonBorder_Blue);
						$("#buttonBorderSwatch").css("background-color",
								"#" + hex);
						$("div#myButton").css(
								'border',
								buttonBorder_size + "px solid rgba("
										+ buttonBorder_Red + ", "
										+ buttonBorder_Green + ", "
										+ buttonBorder_Blue + ", "
										+ buttonBorder_Opacity + ")");
						localStorage.setItem(currentState + '-' + 'border',
								buttonBorder_size
								+ "px solid rgba("
								+ buttonBorder_Red
								+ ", "
								+ buttonBorder_Green
								+ ", "
								+ buttonBorder_Blue
								+ ", "
								+ buttonBorder_Opacity
								+ ")");					}

					$( function() {
						$(
								"#buttonBorderRed, #buttonBorderGreen, #buttonBorderBlue")
								.slider( {
									orientation : 'horizontal',
									range : "min",
									max : 255,
									value : 127,
									slide : refreshbuttonBorderSwatch,
								});
						$("#buttonBorderRed").slider("value", 0);
						$("#buttonBorderGreen").slider("value", 0);
						$("#buttonBorderBlue").slider("value", 0);
					});

					// BUTTON TRANSFORMS

					var rotate = 0;
					var skewX = 0;
					var skewY = 0;
					var scale = 1;
					var translateX = 0;
					var translateY = 0;
					var origin = "50% 50%";

					// BUTTON ROTATION
					$( function() {
						$("#button-transform-rotation").slider(
								{
									range : "min",
									value : 0,
									min : -365,
									max : 365,
									slide : function(event, ui) {
										$("#button-transform-rotation-value")
												.val(ui.value + "deg");
										rotate = ui.value;
										$("div#myButton").css(
												'-moz-transform',
												"scale(" + scale
														+ ") translate("
														+ translateX + "px, "
														+ translateY
														+ "px) skew(" + skewX
														+ "deg, " + skewY
														+ "deg) rotate("
														+ rotate + "deg)");
										localStorage.setItem(currentState + '-' + '-moz-transform',
												"scale(" + scale
												+ ") translate("
												+ translateX + "px, "
												+ translateY
												+ "px) skew(" + skewX
												+ "deg, " + skewY
												+ "deg) rotate("
												+ rotate + "deg)");
										$("div#myButton").css(
												'-webkit-transform',
												"scale(" + scale
														+ ") translate("
														+ translateX + "px, "
														+ translateY
														+ "px) skew(" + skewX
														+ "deg, " + skewY
														+ "deg) rotate("
														+ rotate + "deg)");
										localStorage.setItem(currentState + '-' + '-webkit-transform',
												"scale(" + scale
												+ ") translate("
												+ translateX + "px, "
												+ translateY
												+ "px) skew(" + skewX
												+ "deg, " + skewY
												+ "deg) rotate("
												+ rotate + "deg)");
										$("div#myButton").css(
												'transform',
												"scale(" + scale
														+ ") translate("
														+ translateX + "px, "
														+ translateY
														+ "px) skew(" + skewY
														+ "deg, " + skewY
														+ "deg) rotate("
														+ rotate + "deg)");
										localStorage.setItem(currentState + '-' + 'transform',
												"scale(" + scale
												+ ") translate("
												+ translateX + "px, "
												+ translateY
												+ "px) skew(" + skewX
												+ "deg, " + skewY
												+ "deg) rotate("
												+ rotate + "deg)");
										// $("div#myButton").css('
										// transform-origin', origin);

									}

								});
						$("#button-transform-rotation-value").val(
								$("#button-transform-rotation").slider("value")
										+ "deg");

					});

					// BUTTON SKEW X
					$( function() {
						$("#button-transform-skew-x").slider(
								{
									range : "min",
									value : 0,
									min : -365,
									max : 365,
									slide : function(event, ui) {
										$("#button-transform-skew-x-value")
												.val(ui.value + "deg");
										skewX = ui.value;
										$("div#myButton").css(
												'-moz-transform',
												"scale(" + scale
														+ ") translate("
														+ translateX + "px, "
														+ translateY
														+ "px) skew(" + skewX
														+ "deg, " + skewY
														+ "deg) rotate("
														+ rotate + "deg)");
										localStorage.setItem(currentState + '-' + '-moz-transform',
												"scale(" + scale
												+ ") translate("
												+ translateX + "px, "
												+ translateY
												+ "px) skew(" + skewX
												+ "deg, " + skewY
												+ "deg) rotate("
												+ rotate + "deg)");
										$("div#myButton").css(
												'-webkit-transform',
												"scale(" + scale
														+ ") translate("
														+ translateX + "px, "
														+ translateY
														+ "px) skew(" + skewX
														+ "deg, " + skewY
														+ "deg) rotate("
														+ rotate + "deg)");
										localStorage.setItem(currentState + '-' + '-webkit-transform',
												"scale(" + scale
												+ ") translate("
												+ translateX + "px, "
												+ translateY
												+ "px) skew(" + skewX
												+ "deg, " + skewY
												+ "deg) rotate("
												+ rotate + "deg)");
										$("div#myButton").css(
												'transform',
												"scale(" + scale
														+ ") translate("
														+ translateX + "px, "
														+ translateY
														+ "px) skew(" + skewY
														+ "deg, " + skewY
														+ "deg) rotate("
														+ rotate + "deg)");
										localStorage.setItem(currentState + '-' + 'transform',
												"scale(" + scale
												+ ") translate("
												+ translateX + "px, "
												+ translateY
												+ "px) skew(" + skewX
												+ "deg, " + skewY
												+ "deg) rotate("
												+ rotate + "deg)");
										// $("div#myButton").css('
										// transform-origin', origin);

									}

								});
						$("#button-transform-skew-x-value").val(
								$("#button-transform-skew-x").slider("value")
										+ "deg");

					});

					// BUTTON Skew Y
					$( function() {
						$("#button-transform-skew-y").slider(
								{
									range : "min",
									value : 0,
									min : -365,
									max : 365,
									slide : function(event, ui) {
										$("#button-transform-skew-y-value")
												.val(ui.value + "deg");
										skewY = ui.value;
										$("div#myButton").css(
												'-moz-transform',
												"scale(" + scale
														+ ") translate("
														+ translateX + "px, "
														+ translateY
														+ "px) skew(" + skewX
														+ "deg, " + skewY
														+ "deg) rotate("
														+ rotate + "deg)");
										localStorage.setItem(currentState + '-' + '-moz-transform',
												"scale(" + scale
												+ ") translate("
												+ translateX + "px, "
												+ translateY
												+ "px) skew(" + skewX
												+ "deg, " + skewY
												+ "deg) rotate("
												+ rotate + "deg)");
										$("div#myButton").css(
												'-webkit-transform',
												"scale(" + scale
														+ ") translate("
														+ translateX + "px, "
														+ translateY
														+ "px) skew(" + skewX
														+ "deg, " + skewY
														+ "deg) rotate("
														+ rotate + "deg)");
										localStorage.setItem(currentState + '-' + '-webkit-transform',
												"scale(" + scale
												+ ") translate("
												+ translateX + "px, "
												+ translateY
												+ "px) skew(" + skewX
												+ "deg, " + skewY
												+ "deg) rotate("
												+ rotate + "deg)");

										$("div#myButton").css(
												'transform',
												"scale(" + scale
														+ ") translate("
														+ translateX + "px, "
														+ translateY
														+ "px) skew(" + skewY
														+ "deg, " + skewY
														+ "deg) rotate("
														+ rotate + "deg)");
										localStorage.setItem(currentState + '-' + 'transform',
												"scale(" + scale
												+ ") translate("
												+ translateX + "px, "
												+ translateY
												+ "px) skew(" + skewX
												+ "deg, " + skewY
												+ "deg) rotate("
												+ rotate + "deg)");
										// $("div#myButton").css('
										// transform-origin', origin);

									}

								});
						$("#button-transform-skew-y-value").val(
								$("#button-transform-skew-y").slider("value")
										+ "deg");

					});

					// BUTTON TRANSLATE X
					$( function() {
						$("#button-transform-translate-x")
								.slider(
										{
											range : "min",
											value : 0,
											min : -1000,
											max : 1000,
											slide : function(event, ui) {
												$(
														"#button-transform-translate-x-value")
														.val(ui.value + "px");
												translateX = ui.value;
												$("div#myButton")
														.css(
																'-moz-transform',
																"scale("
																		+ scale
																		+ ") translate("
																		+ translateX
																		+ "px, "
																		+ translateY
																		+ "px) skew("
																		+ skewX
																		+ "deg, "
																		+ skewY
																		+ "deg) rotate("
																		+ rotate
																		+ "deg)");
												localStorage.setItem(currentState + '-' + '-moz-transform',
														"scale(" + scale
														+ ") translate("
														+ translateX + "px, "
														+ translateY
														+ "px) skew(" + skewX
														+ "deg, " + skewY
														+ "deg) rotate("
														+ rotate + "deg)");
												$("div#myButton")
														.css(
																'-webkit-transform',
																"scale("
																		+ scale
																		+ ") translate("
																		+ translateX
																		+ "px, "
																		+ translateY
																		+ "px) skew("
																		+ skewX
																		+ "deg, "
																		+ skewY
																		+ "deg) rotate("
																		+ rotate
																		+ "deg)");
												localStorage.setItem(currentState + '-' + '-webkit-transform',
														"scale(" + scale
														+ ") translate("
														+ translateX + "px, "
														+ translateY
														+ "px) skew(" + skewX
														+ "deg, " + skewY
														+ "deg) rotate("
														+ rotate + "deg)");
												$("div#myButton")
														.css(
																'transform',
																"scale("
																		+ scale
																		+ ") translate("
																		+ translateX
																		+ "px, "
																		+ translateY
																		+ "px) skew("
																		+ skewY
																		+ "deg, "
																		+ skewY
																		+ "deg) rotate("
																		+ rotate
																		+ "deg)");
												localStorage.setItem(currentState + '-' + 'transform',
														"scale(" + scale
														+ ") translate("
														+ translateX + "px, "
														+ translateY
														+ "px) skew(" + skewX
														+ "deg, " + skewY
														+ "deg) rotate("
														+ rotate + "deg)");
												// $("div#myButton").css('
												// transform-origin', origin);

											}

										});
						$("#button-transform-translate-x-value").val(
								$("#button-transform-translate-x").slider(
										"value")
										+ "px");

					});

					// BUTTON TRANSLATE Y
					$( function() {
						$("#button-transform-translate-y")
								.slider(
										{
											range : "min",
											value : 0,
											min : -1000,
											max : 1000,
											slide : function(event, ui) {
												$(
														"#button-transform-translate-y-value")
														.val(ui.value + "px");
												translateY = ui.value;
												$("div#myButton")
														.css(
																'-moz-transform',
																"scale("
																		+ scale
																		+ ") translate("
																		+ translateX
																		+ "px, "
																		+ translateY
																		+ "px) skew("
																		+ skewX
																		+ "deg, "
																		+ skewY
																		+ "deg) rotate("
																		+ rotate
																		+ "deg)");
												localStorage.setItem(currentState + '-' + '-moz-transform',
														"scale(" + scale
														+ ") translate("
														+ translateX + "px, "
														+ translateY
														+ "px) skew(" + skewX
														+ "deg, " + skewY
														+ "deg) rotate("
														+ rotate + "deg)");
												$("div#myButton")
														.css(
																'-webkit-transform',
																"scale("
																		+ scale
																		+ ") translate("
																		+ translateX
																		+ "px, "
																		+ translateY
																		+ "px) skew("
																		+ skewX
																		+ "deg, "
																		+ skewY
																		+ "deg) rotate("
																		+ rotate
																		+ "deg)");
												localStorage.setItem(currentState + '-' + '-webkit-transform',
														"scale(" + scale
														+ ") translate("
														+ translateX + "px, "
														+ translateY
														+ "px) skew(" + skewX
														+ "deg, " + skewY
														+ "deg) rotate("
														+ rotate + "deg)");
												$("div#myButton")
														.css(
																'transform',
																"scale("
																		+ scale
																		+ ") translate("
																		+ translateX
																		+ "px, "
																		+ translateY
																		+ "px) skew("
																		+ skewY
																		+ "deg, "
																		+ skewY
																		+ "deg) rotate("
																		+ rotate
																		+ "deg)");
												localStorage.setItem(currentState + '-' + 'transform',
														"scale(" + scale
														+ ") translate("
														+ translateX + "px, "
														+ translateY
														+ "px) skew(" + skewX
														+ "deg, " + skewY
														+ "deg) rotate("
														+ rotate + "deg)");
												// $("div#myButton").css('
												// transform-origin', origin);

											}

										});
						$("#button-transform-translate-y-value").val(
								$("#button-transform-translate-y").slider(
										"value")
										+ "px");

					});

					// BUTTON SCALE
					$( function() {
						$("#button-transform-scale").slider(
								{
									range : "min",
									value : 100,
									min : 0,
									max : 500,
									slide : function(event, ui) {
										$("#button-transform-scale-value").val(
												"%" + ui.value);
										scale = ui.value / 100;
										$("div#myButton").css(
												'-moz-transform',
												"scale(" + scale
														+ ") translate("
														+ translateX + "px, "
														+ translateY
														+ "px) skew(" + skewX
														+ "deg, " + skewY
														+ "deg) rotate("
														+ rotate + "deg)");
										localStorage.setItem(currentState + '-' + '-moz-transform',
												"scale(" + scale
												+ ") translate("
												+ translateX + "px, "
												+ translateY
												+ "px) skew(" + skewX
												+ "deg, " + skewY
												+ "deg) rotate("
												+ rotate + "deg)");
										$("div#myButton").css(
												'-webkit-transform',
												"scale(" + scale
														+ ") translate("
														+ translateX + "px, "
														+ translateY
														+ "px) skew(" + skewX
														+ "deg, " + skewY
														+ "deg) rotate("
														+ rotate + "deg)");
										localStorage.setItem(currentState + '-' + '-webkit-transform',
												"scale(" + scale
												+ ") translate("
												+ translateX + "px, "
												+ translateY
												+ "px) skew(" + skewX
												+ "deg, " + skewY
												+ "deg) rotate("
												+ rotate + "deg)");
										$("div#myButton").css(
												'transform',
												"scale(" + scale
														+ ") translate("
														+ translateX + "px, "
														+ translateY
														+ "px) skew(" + skewY
														+ "deg, " + skewY
														+ "deg) rotate("
														+ rotate + "deg)");
										localStorage.setItem(currentState + '-' + 'transform',
												"scale(" + scale
												+ ") translate("
												+ translateX + "px, "
												+ translateY
												+ "px) skew(" + skewX
												+ "deg, " + skewY
												+ "deg) rotate("
												+ rotate + "deg)");
										// $("div#myButton").css('
										// transform-origin', origin);

									}

								});
						$("#button-transform-scale-value").val(
								"%"
										+ $("#button-transform-scale").slider(
												"value"));

					});

					// FONT SIZE
					
					// changeButtonFontsizeSlider
					
					$( function() {
						$("#buttonFontSize").slider(
								{
									range : "min",
									value : 40,
									min : 0,
									max : 200,
									slide : function(event, ui) {
										$("#fontSize").val(ui.value + "px");
										$("div#myButton p").css('font-size',
												ui.value + "px");
										
										localStorage.setItem(currentState + '-P-' + 'font-size', ui.value + "px");
										localStorage.setItem(currentState + '-' + 'font-size', ui.value + "px");
										$("#fontSize").next().val('font-size: ' + ui.value + "px;");

									}

								});
						$("#fontSize").val(
								$("#buttonFontSize").slider("value") + "px");

					});

					// WIDTH
					$( function() {
						$("#button-width").slider( {
							range : "min",
							value : 200,
							min : 0,
							max : 1000,
							slide : function(event, ui) {
								$("#width").val(ui.value + "px");
								$("div#myButton").css('width', ui.value);
								// alert("Current State = " + currentState);
								localStorage.setItem(currentState + '-' + 'width', ui.value + "px");
								$("div#myButton p").css('width', ui.value);
								localStorage.setItem(currentState + '-P-' + 'width', ui.value + "px");
								$("#width").next().val('width: ' + ui.value + "px;");
							}

						});
						$("#width").val(
								$("#button-width").slider("value") + "px");
					});

					// HEIGHT
					$( function() {
						$("#button-height").slider( {
							range : "min",
							value : 60,
							min : 0,
							max : 1000,
							slide : function(event, ui) {
								$("#height").val(ui.value + "px");
								$("div#myButton").css('height', ui.value);
								localStorage.setItem(currentState + '-' + 'height', ui.value + "px");
								$("div#myButton p").css('height', ui.value);
								localStorage.setItem(currentState + '-P-' + 'height', ui.value + "px");
								$("#height").next().val('height: ' + ui.value + "px;");
							}

						});
						$("#height").val(
								$("#button-height").slider("value") + "px");

					});

					// PADDING GLOBAL
					$( function() {
						$("#button-padding").slider( {
							range : "min",
							value : 0,
							min : 0,
							max : 100,
							slide : function(event, ui) {
								$("#padding").val(ui.value + "px");
								$("div#myButton").css('padding', ui.value);
								localStorage.setItem(currentState + '-' + 'padding', ui.value + "px");
								$("div#myButton p").css('padding', ui.value);
								localStorage.setItem(currentState + '-P-' + 'padding', ui.value + "px");
							}

						});
						$("#padding").val(
								$("#button-padding").slider("value") + "px");

					});

					// RADIUS GLOBAL
					// -moz-border-radius:12px 12px 12px 12px;

					// -moz-border-radius: 12px; /* FF1+ */
					// -webkit-border-radius: 12px; /* Saf3+, Chrome */
					// border-radius: 12px; /* Opera 10.5, IE 9 */

					$( function() {
						$("#button-radius")
								.slider(
										{
											range : "min",
											value : 10,
											min : 0,
											max : 100,
											slide : function(event, ui) {
												$("#radius").val(
														ui.value + "px");
												$("div#myButton").css(
														'-moz-border-radius',
														ui.value);
												localStorage.setItem(currentState + '-' + '-moz-border-radius', ui.value + "px");
												$("div#myButton")
														.css(
																'-webkit-border-radius',
																ui.value);
												localStorage.setItem(currentState + '-' + '-webkit-border-radius', ui.value + "px");
												$("div#myButton").css(
														'border-radius',
														ui.value);
												$("#radius").next().val('border-radius: ' + ui.value + "px;");
												localStorage.setItem(currentState + '-' + 'border-radius', ui.value + "px");
											}

										});
						$("#radius").val(
								$("#button-radius").slider("value") + "px");

					});

					// LABLE COLOR SWATCH
					function hexFromRGB(r, g, b) {
						var hex = [ r.toString(16), g.toString(16),
								b.toString(16) ];
						$.each(hex, function(nr, val) {
							if (val.length == 1) {
								hex[nr] = '0' + val;
							}
						});
						return hex.join('').toUpperCase();
					}
					function refreshSwatch() {
						var red = $("#red").slider("value"), green = $("#green")
								.slider("value"), blue = $("#blue").slider(
								"value"), hex = hexFromRGB(red, green, blue);
						$("#swatch").css("background-color", "#" + hex);
						$("div#myButton").css('color', "#" + hex);
						var myHex = "#" + hex;
						// alert("color currentState " + myHex);
						localStorage.setItem(currentState + '-' + 'color', myHex);
						localStorage.setItem(currentState + '-P-' + 'color', myHex);
						$("#lableHex").val("#" + hex);
						$("#lableColorStyleInfo").val('color: rgb(' + red + ", " + green + ", " + blue + ");");


					}

					$( function() {
						$("#red, #green, #blue").slider( {
							orientation : 'horizontal',
							range : "min",
							max : 255,
							value : 127,
							slide : refreshSwatch
						});
						$("#red").slider("value", 255);
						$("#green").slider("value", 255);
						$("#blue").slider("value", 255);
					});

					// BUTTON BKG GRADIENT START COLOR SWATCH
					// background-image: -moz-linear-gradient(top, #444444,
					// #999999); /* FF3.6 */
					// background-image: -webkit-gradient(linear,left top,left
					// bottom,color-stop(0, #444444),color-stop(1, #999999)); /*
					// Saf4+, Chrome */
					// filter:
					// progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444',
					// endColorstr='#999999'); /* IE6,IE7 */
					// -ms-filter:
					// "progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444',
					// endColorstr='#999999')"; /* IE8 */

					var buttonBKGgradientStart = "000000";

					function refreshSwatchBKGstart() {
						
						var red = $("#redBKGstart").slider("value"), green = $(
								"#greenBKGstart").slider("value"), blue = $(
								"#blueBKGstart").slider("value"), hex = hexFromRGB(
								red, green, blue);
						$("#swatchBKGstart").css("background-color", "#" + hex);
		                var myGKey = currentState + "-gradientState";

		                var gradientState = localStorage.getItem(myGKey);
		                //alert(gradientState);
		                if (gradientState > 0) {
		                	// alert(gradientState);
						$("div#myButton").css(
								'background-image',
								"-moz-linear-gradient(center top , #" + hex
										+ ", #" + buttonBKGgradientEnd);
						localStorage.setItem(currentState + '-' + '-moz-background-image',
								"-moz-linear-gradient(center top , #" + hex
								+ ", #" + buttonBKGgradientEnd + ")");
						$("div#myButton").css(
								'background-image',
								"-webkit-gradient(linear,left top,left bottom,color-stop(0, #"
										+ hex + "),color-stop(1, #"
										+ buttonBKGgradientEnd + "))");
						localStorage.setItem(currentState + '-' + '-webkit-background-image',
								"-webkit-gradient(linear,left top,left bottom,color-stop(0, #"
										+ hex + "),color-stop(1, #"
										+ buttonBKGgradientEnd + "))");
						 }
						buttonBKGgradientStart = hex;
						$("#gradientStartHexBKGstart").val("#" + hex);

					}

					$( function() {
						$("#redBKGstart, #greenBKGstart, #blueBKGstart")
								.slider( {
									orientation : 'horizontal',
									range : "min",
									max : 255,
									value : 127,
									slide : refreshSwatchBKGstart,
								});
						$("#redBKGstart").slider("value", 0);
						$("#greenBKGstart").slider("value", 0);
						$("#blueBKGstart").slider("value", 0);
					});

					// BUTTON BKG GRADIENT END COLOR SWATCH

					var buttonBKGgradientEnd = "ffffff";

					function refreshSwatchBKGend() {
						var red = $("#redBKGend").slider("value"), green = $(
								"#greenBKGend").slider("value"), blue = $(
								"#blueBKGend").slider("value"), hex = hexFromRGB(
								red, green, blue);
						
						
						$("#swatchBKGend").css("background-color", "#" + hex);
						
		                var myGKey = currentState + "-gradientState";

		                var gradientState = localStorage.getItem(myGKey);
		               // alert("ZZZ");
		                if (gradientState > 0) {
		                	// alert(gradientState);
						$("div#myButton").css(
								'background-image',
								"-moz-linear-gradient(center top , #"
										+ buttonBKGgradientStart + ", #" + hex);
						localStorage.setItem(currentState + '-' + '-moz-background-image',
								"-moz-linear-gradient(center top , #"
										+ buttonBKGgradientStart + ", #" + hex + ")");
						
						$("div#myButton").css(
								'background-image',
								"-webkit-gradient(linear,left top,left bottom,color-stop(0, #"
										+ buttonBKGgradientStart
										+ "),color-stop(1, #" + hex + "))");
						localStorage.setItem(currentState + '-' + '-webkit-background-image',
								"-webkit-gradient(linear,left top,left bottom,color-stop(0, #"
										+ buttonBKGgradientStart
										+ "),color-stop(1, #" + hex + "))");
		                }
						$("#gradientStartHexBKGend").val("#" + hex);

						buttonBKGgradientEnd = hex;
					}

					$( function() {
						$("#redBKGend, #greenBKGend, #blueBKGend").slider( {
							orientation : 'horizontal',
							range : "min",
							max : 255,
							value : 127,
							slide : refreshSwatchBKGend,
						});
						$("#redBKGend").slider("value", 255);
						$("#greenBKGend").slider("value", 255);
						$("#blueBKGend").slider("value", 255);
					});

					// BUTTON BKG COLOR SWATCH

					var stageBKGcolor = "ffffff";
					var buttonBKGcolor = "000000";

					function refreshswatchButtonBKGcolor() {
						var red = $("#redButtonBKGcolor").slider("value"), green = $(
								"#greenButtonBKGcolor").slider("value"), blue = $(
								"#blueButtonBKGcolor").slider("value"), hex = hexFromRGB(
								red, green, blue);
						$("#swatchButtonBKGcolor").css("background-color",
								"#" + hex);
						$("div#myButton").css('background-color', "#" + hex);
						localStorage.setItem(currentState + '-' + 'background-color', "#" + hex);

						buttonBKGcolor = hex;
						$("#buttonBKGcolorHex").val("#" + hex);
						$("#buttonBKGcolorStyleInfo").val('background-color: rgb(' + red + ", " + green + ", " + blue + ");");
					}

					$( function() {
						$(
								"#redButtonBKGcolor, #greenButtonBKGcolor, #blueButtonBKGcolor")
								.slider( {
									orientation : 'horizontal',
									range : "min",
									max : 255,
									value : 127,
									slide : refreshswatchButtonBKGcolor,
								});
						$("#redButtonBKGcolor").slider("value", 0);
						$("#greenButtonBKGcolor").slider("value", 0);
						$("#blueButtonBKGcolor").slider("value", 0);
					});
					
					// Update BUTTON BKG COLOR
					$('button#changeButtonBKGColor').click( function() {
						var myLableColor = $('input#buttonBKGcolorHex').val();
						changeButtonBKGColor(myLableColor);
					});

					function changeButtonBKGColor(hex) {
						// alert(hex);
						$("#swatchButtonBKGcolor").css("background-color", hex);
						$("div#myButton").css('background-color', hex);
						// alert("current state for lable " + currentState);
						localStorage.setItem(currentState + '-' + '-background-color', hex);
						// $("#lableHex").val(hex);

					}


					// STAGE BKG COLOR SWATCH

					function refreshswatchStageBKGcolor() {
						var red = $("#redStageBKGcolor").slider("value"), green = $(
								"#greenStageBKGcolor").slider("value"), blue = $(
								"#blueStageBKGcolor").slider("value"), hex = hexFromRGB(
								red, green, blue);
						$("#swatchStageBKGcolor").css("background-color",
								"#" + hex);
						$("body").css('background-color', "#" + hex);

						$("#stageBKGcolorHex").val("#" + hex);
						$("#stageBKGcolorStyleInfo").val('background-color: rgb(' + red + ", " + green + ", " + blue + ");");

						stageBKGcolor = hex;
					}

					$( function() {
						$(
								"#redStageBKGcolor, #greenStageBKGcolor, #blueStageBKGcolor")
								.slider( {
									orientation : 'horizontal',
									range : "min",
									max : 255,
									value : 127,
									slide : refreshswatchStageBKGcolor,
								});
						$("#redStageBKGcolor").slider("value", 255);
						$("#greenStageBKGcolor").slider("value", 255);
						$("#blueStageBKGcolor").slider("value", 255);
					});

					
					// Update BUTTON BKG COLOR
					$('button#changeStageBKGcolor').click( function() {
						// alert("XXX");
						var myLableColor = $('input#stageBKGcolorHex').val();
						changeStageBKGColor(myLableColor);
					});

					function changeStageBKGColor(hex) {
						// alert(hex);
						$("#swatchStageBKGcolor").css("background-color", hex);
						$("body").css('background-color', hex);

						// $("#lableHex").val(hex);

					}

					/*
					 * Auto Set Input Fields
					 */
					/*
					 * Button Lable
					 */
					$('input[type="text"]#buttonLable').each( function() {
						if (this.value == '') {
							// this.value = 'My Button'
							//	localStorage.setItem(currentState + '-' + 'button-lable', myLable);
							var myButtonLable = localStorage.getItem('default-button-lable');
							if(myButtonLable){
								this.value = myButtonLable;
								//$("div#myButton").html(myButtonLable);
								$("div#myButton").html("<p>" + myButtonLable + "</p>");

							}else{
							this.value = 'My Button';
							$("div#myButton").html('<p>My Button</p>');
							}
						}
					});
					$('input[type="text"]#buttonLable').focus( function() {
						if (this.value == 'My Button') {
							this.value = ''
						}
					});
					$('input[type="text"]#buttonLable').blur( function() {
						if (this.value == '') {
							var myButtonLable = localStorage.getItem('default-button-lable');
							if(myButtonLable){
								this.value = myButtonLable;
							}else{
							this.value = 'My Button';
							}
						}
					});

					/*
					 * Button Font
					 */
					$('input[type="text"]#buttonFont').each( function() {
						if (this.value == '') {
							var myFont = localStorage.getItem('default-font-family');
							
							if(myFont){
								this.value = myFont;
							}else{
							this.value = 'Baskerville';
							}
						}
					});
					$('input[type="text"]#buttonFont').focus( function() {
						if (this.value == 'Baskerville') {
							this.value = '';
						}
					});
					$('input[type="text"]#buttonFont').blur( function() {
						if (this.value == '') {
							var myFont = localStorage.getItem('default-font-family');
							
							if(myFont){
								this.value = myFont;
							}else{
							this.value = 'Baskerville';
							}
						}
					});
					
					
					
					
					
					
					
					/*
					 * Manage Button States
					 */
					
					
					
					

				});