<?php class ReduxFramework_spacing extends ReduxFramework{	
	
	/**
	 * Field Constructor.
	 *
	 * Required - must call the parent constructor, then assign field and value to vars, and obviously call the render field function
	 *
	 * @since ReduxFramework 1.0.0
	*/
	function __construct($field = array(), $value ='', $parent){
		
		parent::__construct($parent->sections, $parent-&gt;args, $parent-&gt;extra_tabs);
		$this-&gt;field = $field;
		$this-&gt;value = $value;
		//$this-&gt;render();
		
	}//function
	
	
	
	/**
	 * Field Render Function.
	 *
	 * Takes the vars and outputs the HTML for the field in the settings
	 *
	 * @since ReduxFramework 1.0.0
	*/
	function render(){
	
		// No errors please
		$defaults = array(
			'units' 			=&gt; '',
			'mode' 				=&gt; 'padding',
			'top'				=&gt; true,
			'bottom'			=&gt; true,
			'left'				=&gt; true,
			'right'				=&gt; true,
			'units_extended'	=&gt; false,
			);
		$this-&gt;field = wp_parse_args( $this-&gt;field, $defaults );


		$defaults = array(
			'top'=&gt;'',
			'right'=&gt;'',
			'bottom'=&gt;'',
			'left'=&gt;'',
			'mode'=&gt;'padding',
			'units'=&gt;'px',
		);

		$this-&gt;value = wp_parse_args( $this-&gt;value, $defaults );

		if ( !empty( $this-&gt;field['units'] ) ) {
			$this-&gt;value['units'] = $this-&gt;field['units'];
		}

		if (  !in_array($this-&gt;value['units'], array( '%', 'in', 'cm', 'mm', 'em', 'ex', 'pt', 'pc', 'px' ) ) ) {
			if ( !empty( $this-&gt;field['units'] ) &amp;&amp; in_array($this-&gt;value['units'], array( '%', 'in', 'cm', 'mm', 'em', 'ex', 'pt', 'pc', 'px' ) ) ) {
				$this-&gt;value['units'] = $this-&gt;field['units'];	
			}
		}

		if ( $this-&gt;field['mode'] !== "margin" &amp;&amp; $this-&gt;field['mode'] !== "padding" ) {
			$mode = "";
		}
		
		if ( !empty( $this-&gt;field['mode'] ) ) {
			$this-&gt;field['mode'] = $this-&gt;field['mode']."-";
		}

		$oldval = $this-&gt;value;
		$this-&gt;value = array();
		foreach ($oldval as $k=&gt;$v) {
			if ($k == "units") {
				continue;
			}
			if (strpos($k, $this-&gt;field['mode']) === false) {
				$this-&gt;value[$k] = str_replace($oldval['units'], "", $v);
			} else {
				$this-&gt;value[str_replace($this-&gt;field['mode'].'-', "", $k)] = str_replace($oldval['units'], "", $v);
			}
		}

		$defaults = array(
			'top'=&gt;'',
			'right'=&gt;'',
			'bottom'=&gt;'',
			'left'=&gt;'',
			'units'=&gt;'',
		);

		$this-&gt;value = wp_parse_args( $this-&gt;value, $defaults );


			/**
			Top
			**/
			if ($this-&gt;field['top'] === true):
				if ( !empty( $this-&gt;value['top'] ) ) {
					$this-&gt;value['top'] = filter_var($this-&gt;value['top'], FILTER_SANITIZE_NUMBER_INT);
					$this-&gt;value['top'] = $this-&gt;value['top'].$this-&gt;value['units'];
				}
				echo '<div class="field-spacing-input input-prepend"><span class="add-on"><i class="icon-arrow-up icon-large"></i></span><input type="text" class="redux-spacing-top redux-spacing-input mini'.$this-&gt;field['class'].'" placeholder="'.__('Top','redux-framework').'" rel="'.$this-&gt;field['id'].'-top" value="'.filter_var($this-&gt;value['top'], FILTER_SANITIZE_NUMBER_INT).'"><input type="hidden" placeholder="'.__('Top','redux-framework').'" id="'.$this-&gt;field['id'].'-top" name="'.$this-&gt;args['opt_name'].'['.$this-&gt;field['id'].']['.$this-&gt;field['mode'].'top]" value="'.$this-&gt;value['top'].'"></div>';
		  	endif;

			/**
			Right
			**/
			if ($this-&gt;field['right'] === true):
				if ( !empty( $this-&gt;value['right'] ) ) {
					$this-&gt;value['right'] = filter_var($this-&gt;value['right'], FILTER_SANITIZE_NUMBER_INT);
					$this-&gt;value['right'] = $this-&gt;value['right'].$this-&gt;value['units'];
				}				
				echo '<div class="field-spacing-input input-prepend"><span class="add-on"><i class="icon-arrow-right icon-large"></i></span><input type="text" class="redux-spacing-right redux-spacing-input mini'.$this-&gt;field['class'].'" placeholder="'.__('Right','redux-framework').'" rel="'.$this-&gt;field['id'].'-right" value="'.filter_var($this-&gt;value['right'], FILTER_SANITIZE_NUMBER_INT).'"><input type="hidden" class="redux-spacing-right mini'.$this-&gt;field['class'].'" placeholder="'.__('Right','redux-framework').'" id="'.$this-&gt;field['id'].'-right" name="'.$this-&gt;args['opt_name'].'['.$this-&gt;field['id'].']['.$this-&gt;field['mode'].'right]" value="'.$this-&gt;value['right'].'"></div>';
		  	endif;

			/**
			Bottom
			**/
			if ($this-&gt;field['bottom'] === true):
				if ( !empty( $this-&gt;value['bottom'] ) ) {
					$this-&gt;value['bottom'] = filter_var($this-&gt;value['bottom'], FILTER_SANITIZE_NUMBER_INT);
					if ($this-&gt;field['units'] !== false ) {
						$this-&gt;value['bottom'] .= $this-&gt;value['units'];	
					}					
					$this-&gt;value['bottom'] = $this-&gt;value['bottom'].$this-&gt;value['units'];
				}					
				echo '<div class="field-spacing-input input-prepend"><span class="add-on"><i class="icon-arrow-down icon-large"></i></span><input type="text" class="redux-spacing-bottom redux-spacing-input mini'.$this-&gt;field['class'].'" placeholder="'.__('Bottom','redux-framework').'" rel="'.$this-&gt;field['id'].'-bottom" value="'.filter_var($this-&gt;value['bottom'], FILTER_SANITIZE_NUMBER_INT).'"><input type="hidden" class="redux-spacing-bottom mini'.$this-&gt;field['class'].'" placeholder="'.__('Bottom','redux-framework').'" id="'.$this-&gt;field['id'].'-bottom" name="'.$this-&gt;args['opt_name'].'['.$this-&gt;field['id'].']['.$this-&gt;field['mode'].'bottom]" value="'.$this-&gt;value['bottom'].'"></div>';
		  	endif;

			/**
			Left
			**/
			if ($this-&gt;field['left'] === true):
				if ( !empty( $this-&gt;value['left'] ) ) {
					$this-&gt;value['left'] = filter_var($this-&gt;value['left'], FILTER_SANITIZE_NUMBER_INT);
					$this-&gt;value['left'] = $this-&gt;value['left'].$this-&gt;value['units'];
				}									
				echo '<div class="field-spacing-input input-prepend"><span class="add-on"><i class="icon-arrow-left icon-large"></i></span><input type="text" class="redux-spacing-left redux-spacing-input mini'.$this-&gt;field['class'].'" placeholder="'.__('Left','redux-framework').'" rel="'.$this-&gt;field['id'].'-left" value="'.filter_var($this-&gt;value['left'], FILTER_SANITIZE_NUMBER_INT).'"><input type="hidden" class="redux-spacing-left mini'.$this-&gt;field['class'].'" placeholder="'.__('Left','redux-framework').'" id="'.$this-&gt;field['id'].'-left" name="'.$this-&gt;args['opt_name'].'['.$this-&gt;field['id'].']['.$this-&gt;field['mode'].'left]" value="'.$this-&gt;value['left'].'"></div>';
		  	endif;		


			/** 
			Units
			**/

			if ( $this-&gt;field['units'] !== false ):

				echo '<div class="select_wrapper spacing-units" original-title="'.__('Units','redux-framework').'">';
				echo '<select data-placeholder="'.__('Units','redux-framework').'" class="redux-spacing redux-spacing-units select'.$this-&gt;field['class'].'" original-title="'.__('Units','redux-framework').'" name="'.$this-&gt;args['opt_name'].'['.$this-&gt;field['id'].'][units]" id="'. $this-&gt;field['id'].'_units">';
				
				if ( $this-&gt;field['units_extended'] ) {
					$testUnits = array('px', 'em', '%', 'in', 'cm', 'mm', 'ex', 'pt', 'pc');	
				} else {
					$testUnits = array('px', 'em', '%');
				}
				
				if ( in_array($this-&gt;field['units'], $testUnits) ) {
					echo '<option value="'.$this-&gt;field['units'].'" selected>'.$this-&gt;field['units'].'</option>';
				} else {
					foreach($testUnits as $aUnit) {
						echo '<option value="'.$aUnit.'">value['units'], $aUnit, false).'&gt;'.$aUnit.'</option>';
					}

				}
				echo '</select></div>';

			endif;





	}//function
	
	
	/**
	 * Enqueue Function.
	 *
	 * If this field requires any scripts, or css define this function and register/enqueue the scripts/css
	 *
	 * @since ReduxFramework 1.0.0
	*/
	function enqueue(){
		wp_enqueue_script( 'select2-js' );
		wp_enqueue_style( 'select2-css' );	

		wp_enqueue_script(
			'redux-field-spacing-js', 
			ReduxFramework::$_url.'inc/fields/spacing/field_spacing.min.js', 
			array('jquery', 'select2-js', 'jquery-numeric'),
			time(),
			true
		);

		wp_enqueue_style(
			'redux-field-spacing-css', 
			ReduxFramework::$_url.'inc/fields/spacing/field_spacing.css', 
			time(),
			true
		);	
			
		
	}//function

    public function output() {
        if ( !isset($this-&gt;field['output']) || empty( $this-&gt;field['output'] ) ) {
            return;
        }            

    	if ( !empty( $this-&gt;field['mode'] ) &amp;&amp; !in_array($this-&gt;field['mode'], array( 'padding', 'absolute', 'margin', '' ) ) ) {
    		unset( $this-&gt;field['mode'] );
    	}

    	if ( !isset( $this-&gt;field['mode'] ) ) {
    		$this-&gt;field['mode'] = "padding";
    	}

    	if ( $this-&gt;field['mode'] == "absolute" ) {
    		unset( $this-&gt;field['mode'] );
    	}


		//absolute, padding, margin
        $keys = implode(",", $this-&gt;field['output']);
        $style = '<style type="text/css" class="redux-'.$this-&gt;field['type'].'">';
            $style .= $keys."{";
            foreach($this->value as $key=>$value) {
            	if ($key == "units") {
            		continue;
            	}
            	if (empty($value)) {
            		$value = 0;
            	}
                $style .= $key.':'.$value.';';
            }
            $style .= '}';
        $style .= '</style>';
        echo $style;
        
    }	
	
}//class
