cytoplasm 0.3.8 → 0.3.9

data/app/assets/javascripts/cytoplasm/cytoColorPicker.js.erb

@@ -218,5 +218,15 @@
 	};
 	
 	$(window).resize(function(){$('.cytoColorPicker').cytoColorPicker("resize");});
-	$.Cytoplasm("ready",function(){$('.cytoColorPicker').cytoColorPicker();});
+	$.Cytoplasm("ready",function(){
+		$.Cytoplasm("addStyles","cytocolorpicker-styles",{
+			'.cytoColorPicker-wrapper':{
+				'.ui-slider[data-attr=hue]':{
+					background:"linear-gradient(to right,#ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%)",
+					"box-shadow":"inset 0px 0px 5px hsla(0,0%,0%,0.5)"
+				}
+			}
+		});
+		$('.cytoColorPicker').cytoColorPicker();
+	});
 })(jQuery);

data/app/assets/javascripts/cytoplasm/cytoNav.js.erb

@@ -0,0 +1,87 @@
+(function($){
+	
+	var defaults = {
+		widget:{
+			wrapper:{
+				css:{},
+				element:false
+			},
+			nav:{
+				css:{},
+				element:false,
+				ul:{
+					css:{},
+					element:false,
+					li:{
+						css:{},
+						elements:[]
+					}
+				}
+			}
+		},
+		events:{
+			create:function(){},
+			destroy:function(){},
+			change:function(){},
+			resize:function(){}
+		}
+	};
+	
+	var methods = {
+		init:function(options){
+			return this.each(function(){
+				// Initialize
+				var $this = $(this).addClass('cytoNav');
+				if ($this.data('cytoNav')!=null) return console.warn("You cannot reinstatiate cytoNav before calling the destroy method.\nProtip: Use the refresh method to reinstantiate in one move.");
+				var settings = $.extend(true,{},defaults,options);
+				
+				// Generate widget
+				settings.widget.wrapper.element = $('<div />').addClass('cytoNav-wrapper').css(settings.widget.wrapper.css).appendTo($('header'));
+				settings.widget.nav.element = (($this.is("nav")) ? $this : $('<nav />')).addClass('cytoNav-nav').css(settings.widget.nav.css).appendTo(settings.widget.wrapper.element);
+				settings.widget.nav.ul.element = (($this.has("ul")) ? $this.find("ul").first() : $("<ul />")).addClass('cytoNav-ul').css(settings.widget.nav.ul.css).appendTo(settings.widget.nav.element);
+				if (settings.widget.nav.ul.element.has("li")) {
+					var lis = [];
+					settings.widget.nav.ul.element.find("li").each(function(){lis.push($(this))});
+					settings.widget.nav.ul.li.elements = $.merge(settings.widget.nav.ul.li.elements,lis);
+				}
+				$.each(settings.widget.nav.ul.li.elements,function(i,li){
+					li.addClass('cytoNav-li').css(settings.widget.nav.ul.li.css);
+				});
+				
+				// Finalize
+				$this.data('cytoNav',settings);
+				settings.events.create.apply($this);
+			});
+		},
+		destroy:function(){
+			return this.each(function(){
+				var $this = $(this);
+				
+			});
+		},
+		resize:function(){
+			return this.each(function(){
+				var $this = $(this);
+				
+			});
+		},
+		value:function(){
+			return this.each(function(){
+				var $this = $(this);
+				
+			});
+		}
+	};
+	
+	$.fn.cytoNav=function(method){
+		if (methods[method]) return methods[method].apply(this,Array.prototype.slice.call(arguments,1));
+		else if (typeof method == 'object' || !method) return methods.init.apply(this,arguments);
+		else $.error('Method ' + method + ' does not exist on $.cytoNav!');
+	};
+	
+	$(window).resize(function(){$('.cytoNav').cytoNav('resize');});
+	$.Cytoplasm("ready",function(){
+		$('nav').cytoNav();
+	});
+	
+})(jQuery);

data/app/assets/javascripts/cytoplasm/cytoSlider.js.erb

@@ -15,7 +15,7 @@
 					unit:false
 				}
 			},
-			slider:{
+			sliders:{
 				css:{},
 				elements:[],
 				options:{
@@ -37,7 +37,8 @@
 		events:{
 			create:function(cy){},
 			change:function(cy,event){},
-			destroy:function(cy){}
+			destroy:function(cy){},
+			resize:function(cy,event){}
 		}
 	};
 	var methods = {
@@ -56,10 +57,10 @@
 					if ($this.data('dimensions')!=null) settings.dimensions = $this.data('dimensions');
 					if ($this.data('label')!=null) settings.widget.label.html = $this.data('label');
 					if ($this.data('unit')!=null) settings.widget.label.readout.unit = $this.data('unit');
-					if ($this.data('min')!=null) settings.widget.slider.options.min = $this.data('min');
-					if ($this.data('max')!=null) settings.widget.slider.options.max = $this.data('max');
-					if ($this.data('step')!=null) settings.widget.slider.options.step = $this.data('step');
-					if ($this.val()!=null && $this.val()!="") settings.widget.slider.options.value = parseInt($this.val());
+					if ($this.data('min')!=null) settings.widget.sliders.options.min = $this.data('min');
+					if ($this.data('max')!=null) settings.widget.sliders.options.max = $this.data('max');
+					if ($this.data('step')!=null) settings.widget.sliders.options.step = $this.data('step');
+					if ($this.val()!=null && $this.val()!="") settings.widget.sliders.options.value = parseInt($this.val());
 				} else settings = options;
 				
 				// Generate widget
@@ -67,16 +68,16 @@
 				settings.widget.label.element = $('<label />').attr("for",$this.attr("name")).addClass('cytoSlider-label').css(settings.widget.label.css).html(settings.widget.label.html+": ").prependTo(settings.widget.wrapper.element);
 				settings.widget.label.readout.element = $('<span />').addClass("cytoSlider-label-readout").css(settings.widget.label.readout.css).appendTo(settings.widget.label.element);
 				
-				// Set up sliders
-				$this.data('cytoSlider',settings);
-				methods.setDimensions.apply($this,[settings.dimensions]);
-				
 				// Bindings
 				$this.bind("change.cytoSlider",function(e){
 					settings.widget.label.readout.element.html($(this).val());
 					settings.events.change.apply($this,[settings,e]);
 				});
 				
+				// Generate sliders
+				$this.data('cytoSlider',settings);
+				methods.setDimensions.apply($this,[settings.dimensions]);
+				
 				// Save settings data to input
 				$this.data('cytoSlider',settings);
 				methods.resize.apply($this);
@@ -114,39 +115,12 @@
 				var settings = $this.data('cytoSlider');
 				if (!$this.hasClass("cytoSlider") || settings==null) return console.warn("You must instanciate $.cytoSlider before you call the resize method!");
 				
-				settings.widget.wrapper.element.width(0);
+				var w = settings.widget.wrapper.element.width(0);
 				setTimeout(function(){
-					settings.widget.wrapper.element.width("auto");
+					w.width("auto");
 				},1);
 			});
 		},
-		addDimension:function(){
-			return this.each(function(){
-				var $this = $(this);
-				var settings = $this.data('cytoSlider');
-				if (!$this.hasClass("cytoSlider") || settings==null) return console.warn("You must instanciate $.cytoSlider before you call the addDimension method!");
-				
-				var slider = $('<div />').addClass('cytoSlider-slider')
-					.css(settings.widget.slider.css)
-					.appendTo(settings.widget.wrapper.element)
-					.slider(settings.widget.slider.options).slider("value",settings.widget.slider.options.value);
-				settings.widget.slider.elements.push(slider);
-				
-				$this.data('cytoSlider',settings);
-			});
-		},
-		removeDimension:function(){
-			return this.each(function(){
-				var $this = $(this);
-				var settings = $this.data('cytoSlider');
-				if (!$this.hasClass("cytoSlider") || settings==null) return console.warn("You must instanciate $.cytoSlider before you call the addDimension method!");
-				
-				var slider = settings.widget.slider.elements.pop();
-				slider.remove();
-				
-				$this.data('cytoSlider',settings);
-			});
-		},
 		setDimensions:function(n){
 			return this.each(function(){
 				var $this = $(this);
@@ -154,40 +128,42 @@
 				if (!$this.hasClass("cytoSlider") || settings==null) return console.warn("You must instanciate $.cytoSlider before you call the setDimensions method!");
 				
 				// Reset sliders
-				$.each(settings.widget.slider.elements,function(i,s){s.remove()});
-				settings.widget.slider.elements = [];
+				if (settings.widget.sliders.elements.length) settings.widget.sliders.elements.each(function(){$(this).remove()});
 				
-				settings.dimensions = n;
+				// Create sliders
+				for (var i=0;i<n;i++) {
+					var slider = $('<div />').addClass('cytoSlider-slider')
+						.css(settings.widget.sliders.css)
+						.appendTo(settings.widget.wrapper.element)
+						.slider();
+				}
+				var sliders = settings.widget.wrapper.element.find('.cytoSlider-slider');
 				
 				// Set up options
-				$.each(["slide","change"],function(i,v){
-					var orig = settings.widget.slider.options[v];
-					settings.widget.slider.options[v] = function(e,ui){
+				$.each(["slide","change"],function(i,event){
+					var orig = settings.widget.sliders.options[event];
+					settings.widget.sliders.options[event] = function(e,ui){
 						var values = [];
-						for (var i=0;i<settings.dimensions;i++) values.push(settings.widget.slider.elements[i].slider("value")+settings.widget.label.readout.unit);
-						$this.val(values.join(" "));
-						orig.apply(this,arguments);
-						$this.trigger("change.cytoSlider");
+						$(this).parent().find('.cytoSlider-slider').each(function(){values.push($(this).slider("value")+settings.widget.label.readout.unit);});
+						$this.val(values.join(" ")).trigger("change.cytoSlider");
+						orig.apply($this,[e,ui]);
 					};
 				});
 				
-				// Create sliders
-				for (var i=0;i<settings.dimensions;i++) {
-					var slider = $('<div />').addClass('cytoSlider-slider')
-						.css(settings.widget.slider.css)
-						.appendTo(settings.widget.wrapper.element)
-						.slider().slider("value",settings.widget.slider.options.value);
-					settings.widget.slider.elements.push(slider);
-				}
-				if (settings.dimensions>1) {
-					$.each(settings.widget.slider.elements,function(i,s){s.css("margin-top",10);});
-					settings.widget.slider.elements[0].css("margin-top",0);
+				// Margin fix
+				if (n>1) {
+					sliders.each(function(){$(this).css("margin-top",10);});
+					$(sliders).first().css("margin-top",0);
 				}
 				
 				// Set options
-				$.each(settings.widget.slider.elements,function(i,s){s.slider("option",settings.widget.slider.options);});
+				sliders.each(function(){
+					$(this).slider("option",settings.widget.sliders.options);
+				});
 				
 				// Store settings
+				settings.dimensions = n;
+				settings.widget.sliders.elements = sliders;
 				$this.data('cytoSlider',settings);
 			});
 		},
@@ -201,7 +177,16 @@
 				
 				if (set===false) value = $this.val();
 				else {
-					settings.widget.slider.element.slider("value",set);
+					if (set.indexOf(" ")>-1) {
+						set = set.split(" ");
+						methods.setDimensions.apply($this,[set.length]);
+						$.each(set,function(i,v){
+							settings.widget.sliders.elements[i].slider("value",parseFloat(v));
+						});
+					} else {
+						methods.setDimensions.apply($this,[1]);
+						settings.widget.sliders.elements[0].slider("value",parseFloat(set));
+					}
 					$this.trigger('change.cytoSlider');
 				}
 			});

data/app/assets/javascripts/cytoplasm/cytoplasm.js.erb

@@ -234,12 +234,6 @@ var Cytoplasm;
 						background:reverseGradient(vars.colors.plugins.cytoButton.background),
 						"box-shadow":vars.layout.plugins.cytoButton.shadow
 					}
-				},
-				'.cytoColorPicker-wrapper':{
-					'.ui-slider[data-attr=hue]':{
-						background:"linear-gradient(to right,#ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%)",
-						"box-shadow":"inset 0px 0px 5px hsla(0,0%,0%,0.5)"
-					}
 				}
 			},userstyles);
 			

data/app/views/cytoplasm/settings/_colors.html.erb

@@ -2,49 +2,52 @@
 containers = {'header' => 'Header', 'section' => 'Content Section', 'footer' => 'Footer'}
 links = ['unvisited','visited','hover','active']
 %>
-<table class="cytoTable">
-	<tr><td class='headercell' colspan=2><h3>Color Palette</h3></td></tr>
-	<% ['background','text','accent'].each do |color| %>
+<form id="cytoplasm_colors_form" action="<%=cytoplasm_update_url%>" method="post">
+	<table class="cytoTable">
+		<tr><td class='headercell' colspan=2><h3>Color Palette</h3></td></tr>
+		<% ['background','text','accent'].each do |color| %>
+			<tr>
+				<td class='labelcell'><%=color.capitalize%> Color:</td>
+				<td><input type="colorpicker" name="colors[global][<%=color%>]" value="<%=Cytoplasm.vars("colors.global."+color)%>" /></td>
+			</tr>
+		<% end %>
+		<tr><td class='headercell' colspan=2><h3>Containers</h3></td></tr>
+		<% containers.each do |key,label| %>
 		<tr>
-			<td class='labelcell'><%=color.capitalize%> Color:</td>
-			<td><input type="colorpicker" name="colors[global][<%=color%>]" value="<%=Cytoplasm.vars("colors.global."+color)%>" /></td>
+			<td class="labelcell"><%=label%>:</td>
+			<td>
+				<% ['background','text'].each do |color| %>
+					<label for="colors[<%=key%>][<%=color%>]"><%=color.capitalize%>:</label>
+					<input type="colorpicker" name="colors[<%=key%>][<%=color%>]" value="<%=Cytoplasm.vars("colors."+key+"."+color)%>" />
+				<% end %>
+			</td>
 		</tr>
-	<% end %>
-	<tr><td class='headercell' colspan=2><h3>Containers</h3></td></tr>
-	<% containers.each do |key,label| %>
-	<tr>
-		<td class="labelcell"><%=label%>:</td>
-		<td>
-			<% ['background','text'].each do |color| %>
-				<label for="colors[<%=key%>][<%=color%>]"><%=color.capitalize%>:</label>
-				<input type="colorpicker" name="colors[<%=key%>][<%=color%>]" value="<%=Cytoplasm.vars("colors."+key+"."+color)%>" />
-			<% end %>
-		</td>
-	</tr>
-	<% end %>
-	<tr><td class='headercell' colspan=2><h3>Links</h3></td></tr>
-	<% links.each do |link| %>
+		<% end %>
+		<tr><td class='headercell' colspan=2><h3>Links</h3></td></tr>
+		<% links.each do |link| %>
+			<tr>
+				<td class="labelcell"><%=link.capitalize%>:</td>
+				<td>
+					<label for="colors[link][<%=link%>][text]">Text:</label>
+					<input type="colorpicker" name="colors[link][<%=link%>][text]" value="<%=Cytoplasm.vars("colors.link."+link+".text")%>" />
+				</td>
+			</tr>
+		<% end %>
+		<tr><td class='headercell' colspan=2><h3>Plugins</h3></td></tr>
+		<% {"cytoTable" => ["background","text"],"cytoField" => ["background","text"],"cytoSelect" => ["background","text"],"cytoRadio" => ["background","text"],"cytoUpload" => ["background","text"],"cytoSlider" => ["text"]}.each do |plugin,colors| %>
 		<tr>
-			<td class="labelcell"><%=link.capitalize%>:</td>
+			<td class="labelcell"><%=plugin.capitalize%>:</td>
 			<td>
-				<label for="colors[link][<%=link%>][text]">Text:</label>
-				<input type="colorpicker" name="colors[link][<%=link%>][text]" value="<%=Cytoplasm.vars("colors.link."+link+".text")%>" />
+				<% colors.each do |color| %>
+					<label for="colors[plugins][<%=plugin%>][<%=color%>]"><%=color.capitalize%>:</label>
+					<input type="colorpicker" name="colors[plugins][<%=plugin%>][<%=color%>]" value="<%=Cytoplasm.vars("colors.plugins."+plugin+"."+color)%>" />
+				<% end %>
 			</td>
 		</tr>
-	<% end %>
-	<tr><td class='headercell' colspan=2><h3>Plugins</h3></td></tr>
-	<% {"cytoTable" => ["background","text"],"cytoField" => ["background","text"],"cytoSelect" => ["background","text"],"cytoRadio" => ["background","text"],"cytoUpload" => ["background","text"],"cytoSlider" => ["text"]}.each do |plugin,colors| %>
-	<tr>
-		<td class="labelcell"><%=plugin.capitalize%>:</td>
-		<td>
-			<% colors.each do |color| %>
-				<label for="colors[plugins][<%=plugin%>][<%=color%>]"><%=color.capitalize%>:</label>
-				<input type="colorpicker" name="colors[plugins][<%=plugin%>][<%=color%>]" value="<%=Cytoplasm.vars("colors.plugins."+plugin+"."+color)%>" />
-			<% end %>
-		</td>
-	</tr>
-	<% end %>
-</table>
+		<% end %>
+	</table>
+	<button class="cytoButton large">Save Colors</button>
+</form>
 
 <script type="text/javascript">
 (function($){

data/app/views/cytoplasm/settings/_layout.html.erb

@@ -0,0 +1,189 @@
+<form id="cytoplasm_layout_settings_form" action="<%=cytoplasm_update_url%>" method="post" enctype="multipart/form-data">
+	<table id="layout_settings_table" class="cytoTable">
+		<tr><td class='headercell' colspan=2><h3>Body</h3></td></tr>
+		<tr>
+			<td class="labelcell">Layout Mode:</td>
+			<td>
+				<input type="radio" name="layout[mode]" value="fluid" data-label="Fluid" class="cytoRadio" />
+				<input type="radio" name="layout[mode]" value="boxed" data-label="Boxed" />
+			</td>
+		</tr>
+		<tr>
+			<td class="labelcell">Layout Padding:</td>
+			<td>
+				<input type="radio" name="layout[padding_mode]" value="1" data-label="All Sides" class="cytoRadio" checked="checked" />
+				<input type="radio" name="layout[padding_mode]" value="2" data-label="Horizontal and Vertical" />
+				<input type="radio" name="layout[padding_mode]" value="4" data-label="Side by Side" />
+				<input type="hidden" name="layout[padding]" class="cytoSlider" value="<%=Cytoplasm.vars("layout.padding")%>" data-max="200" data-unit="px" data-label="Pixels of padding for the layout" />
+			</td>
+		</tr>
+		<tr><td class='headercell' colspan=2><h3>Header</h3></td></tr>
+		<tr>
+			<td class="labelcell">Position Mode:</td>
+			<td>
+				<input type="radio" name="layout[header][position]" value="inherit" data-label="Inherit" class="cytoRadio" checked="checked" />
+				<input type="radio" name="layout[header][position]" value="static" data-label="Static" />
+				<input type="radio" name="layout[header][position]" value="relative" data-label="Relative" />
+				<input type="radio" name="layout[header][position]" value="absolute" data-label="Absolute" />
+				<input type="radio" name="layout[header][position]" value="fixed" data-label="Fixed" />
+			</td>
+		</tr>
+		<tr>
+			<td class="labelcell">Height:</td>
+			<td>
+				<input type="hidden" name="layout[header][height]" class="cytoSlider" value="<%=Cytoplasm.vars("layout.header.height")%>" data-max="500" data-unit="px" data-label="Height of the header tag" />
+			</td>
+		</tr>
+		<tr>
+			<td class="labelcell">Margin:</td>
+			<td>
+				<input type="radio" name="layout[header][margin_mode]" value="1" data-label="All Sides" class="cytoRadio" checked="checked" />
+				<input type="radio" name="layout[header][margin_mode]" value="2" data-label="Horizontal and Vertical" />
+				<input type="radio" name="layout[header][margin_mode]" value="4" data-label="Side by Side" />
+				<input type="hidden" name="layout[header][margin]" class="cytoSlider" value="<%=Cytoplasm.vars("layout.header.margin")%>" data-max="200" data-unit="px" data-label="Pixels of margin for the header" />
+			</td>
+		</tr>
+		<tr>
+			<td class="labelcell">Padding:</td>
+			<td>
+				<input type="radio" name="layout[header][padding_mode]" value="1" data-label="All Sides" class="cytoRadio" checked="checked" />
+				<input type="radio" name="layout[header][padding_mode]" value="2" data-label="Horizontal and Vertical" />
+				<input type="radio" name="layout[header][padding_mode]" value="4" data-label="Side by Side" />
+				<input type="hidden" name="layout[header][padding]" class="cytoSlider" value="<%=Cytoplasm.vars("layout.header.padding")%>" data-max="200" data-unit="px" data-label="Pixels of padding for the header" />
+			</td>
+		</tr>
+		<tr><td class='headercell' colspan=2><h3>Content</h3></td></tr>
+		<tr>
+			<td class='labelcell'>Margin:</td>
+			<td>
+				<input type="radio" name="layout[section][margin_mode]" value="1" data-label="All Sides" class="cytoRadio" checked="checked" />
+				<input type="radio" name="layout[section][margin_mode]" value="2" data-label="Horizontal and Vertical" />
+				<input type="radio" name="layout[section][margin_mode]" value="4" data-label="Side by Side" />
+				<input type="hidden" name="layout[section][margin]" class="cytoSlider" value="<%=Cytoplasm.vars("layout.section.margin")%>" data-max="200" data-unit="px" data-label="Pixels of margin for the content" />
+			</td>
+		</tr>
+		<tr>
+			<td class='labelcell'>Padding:</td>
+			<td>
+				<input type="radio" name="layout[section][padding_mode]" value="1" data-label="All Sides" class="cytoRadio" checked="checked" />
+				<input type="radio" name="layout[section][padding_mode]" value="2" data-label="Horizontal and Vertical" />
+				<input type="radio" name="layout[section][padding_mode]" value="4" data-label="Side by Side" />
+				<input type="hidden" name="layout[section][padding]" class="cytoSlider" value="<%=Cytoplasm.vars("layout.section.padding")%>" data-max="200" data-unit="px" data-label="Pixels of padding for the content" />
+			</td>
+		</tr>
+		<tr><td class='headercell' colspan=2><h3>Footer</h3></td></tr>
+		<tr>
+			<td class='labelcell'>Margin:</td>
+			<td>
+				<input type="radio" name="layout[footer][margin_mode]" value="1" data-label="All Sides" class="cytoRadio" checked="checked" />
+				<input type="radio" name="layout[footer][margin_mode]" value="2" data-label="Horizontal and Vertical" />
+				<input type="radio" name="layout[footer][margin_mode]" value="4" data-label="Side by Side" />
+				<input type="hidden" name="layout[footer][margin]" class="cytoSlider" value="<%=Cytoplasm.vars("layout.footer.margin")%>" data-max="200" data-unit="px" data-label="Pixels of margin for the footer" />
+			</td>
+		</tr>
+		<tr>
+			<td class='labelcell'>Padding:</td>
+			<td>
+				<input type="radio" name="layout[footer][padding_mode]" value="1" data-label="All Sides" class="cytoRadio" checked="checked" />
+				<input type="radio" name="layout[footer][padding_mode]" value="2" data-label="Horizontal and Vertical" />
+				<input type="radio" name="layout[footer][padding_mode]" value="4" data-label="Side by Side" />
+				<input type="hidden" name="layout[footer][padding]" class="cytoSlider" value="<%=Cytoplasm.vars("layout.footer.padding")%>" data-max="200" data-unit="px" data-label="Pixels of padding for the footer" />
+			</td>
+		</tr>
+		<tr><td class='headercell' colspan=2><h3>Plugins</h3></td></tr>
+	</table>
+	
+	<button class="cytoButton large">Save Layout Settings</button>
+</form>
+
+<script type="text/javascript">
+(function($){
+	$.Cytoplasm("ready",function(){
+		// Layout
+		// Layout Mode
+		$('input[name="layout[mode]"]').cytoRadio("value",$.Cytoplasm("vars","layout.mode"));
+		// Layout Padding
+		$('input[name="layout[padding_mode]"]').cytoRadio("options",{
+			events:{
+				change:function(cy,e){$('input[name="layout[padding]"]').cytoSlider("setDimensions",$(this).cytoRadio("value"));}
+			}
+		});
+		$('input[name="layout[padding]"]').cytoSlider("options",{widget:{sliders:{options:{
+			slide:function(e,ui){
+				$('body').css("padding",$(this).val());
+			},
+			change:function(e,ui){
+				$('body').css("padding",$(this).val());
+				setTimeout(function(){$(window).trigger("resize");},200);
+		}}}}});
+		
+		// Header
+		$('input[name="layout[header][position]"]').cytoRadio("options",{events:{change:function(){
+			$('header').css("position",$(this).cytoRadio("value"));
+			switch ($(this).cytoRadio("value")) {
+				case "relative":
+				case "absolute":
+				case "fixed":
+					
+					break;
+			}
+		}}});
+		$('input[name="layout[header][height]"]').cytoSlider("options",{events:{change:function(){
+			$('header').height($(this).val());
+		}}});
+		// Header Margin
+		$('input[name="layout[header][margin_mode]"]').cytoRadio("options",{
+			events:{
+				change:function(cy,e){$('input[name="layout[header][margin]"]').cytoSlider("setDimensions",$(this).cytoRadio("value"));}
+			}
+		});
+		$('input[name="layout[header][margin]"]').cytoSlider("options",{widget:{sliders:{options:{
+			slide:function(e,ui){
+				$('header').css("margin",$(this).val());
+			},
+			change:function(e,ui){
+				$('header').css("margin",$(this).val());
+				setTimeout(function(){$(window).trigger("resize");},200);
+		}}}}});
+		// Header Padding
+		$('input[name="layout[header][padding_mode]"]').cytoRadio("options",{
+			events:{
+				change:function(cy,e){$('input[name="layout[header][padding]"]').cytoSlider("setDimensions",$(this).cytoRadio("value"));}
+			}
+		});
+		$('input[name="layout[header][padding]"]').cytoSlider("options",{widget:{sliders:{options:{
+			slide:function(e,ui){
+				$('header').css("padding",$(this).val());
+			},
+			change:function(e,ui){
+				$('header').css("padding",$(this).val());
+				setTimeout(function(){$(window).trigger("resize");},200);
+		}}}}});
+		
+		// Content
+		// Content Margin
+		$('input[name="layout[section][margin_mode]"]').cytoRadio("options",{events:{change:function(){
+			$('input[name="layout[section][margin]"]').cytoSlider("setDimensions",$(this).cytoRadio("value"));
+		}}});
+		
+		$('input[name="layout[section][margin]"]').cytoSlider("options",{widget:{sliders:{options:{
+			slide:function(e,ui){
+				$('section').css("margin",$(this).val());
+			},
+			change:function(e,ui){
+				$('section').css("margin",$(this).val());
+				setTimeout(function(){$(window).trigger("resize");},200);
+		}}}}});
+		// Content Padding
+		$('input[name="layout[section][padding_mode]"]').cytoRadio("options",{events:{change:function(cy,e){$('input[name="layout[section][padding]"]').cytoSlider("setDimensions",$(this).cytoRadio("value"));}}});
+		$('input[name="layout[section][padding]"]').cytoSlider("options",{widget:{sliders:{options:{
+			slide:function(e,ui){
+				$('section').css("padding",$(this).val());
+			},
+			change:function(e,ui){
+				$('section').css("padding",$(this).val());
+				setTimeout(function(){$(window).trigger("resize");},200);
+		}}}}});
+	});
+})(jQuery);
+</script>