<?php class ReduxFramework_dimensions 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(
			'width'				=&gt; true,
			'height'			=&gt; true,
			'units_extended'	=&gt; false,
			);

		$this-&gt;field['units'] = "em";

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

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

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

		if ( isset( $this-&gt;field['units'] ) &amp;&amp; !isset( $this-&gt;value['units'] ) ) { // Value should equal field units
			$this-&gt;value['units'] = $this-&gt;field['units'];
		} else if ( !isset( $this-&gt;field['units'] ) &amp;&amp; !isset( $this-&gt;value['units'] ) ) { // If both undefined
			$this-&gt;field['units'] = 'px';
			$this-&gt;value['units'] = 'px';
		} else if ( !isset( $this-&gt;field['units'] ) &amp;&amp; isset( $this-&gt;value['units'] ) ) { // If Value is defined
			if ( empty( $this-&gt;value['units'] ) ) { // Value can't be empty in this case for this field
				$this-&gt;field['units'] = 'px';
				$this-&gt;value['units'] = 'px';
			} else {
				$this-&gt;field['units'] = $this-&gt;value['units'];	// Make the field have it
			}
		}

		$defaults = array(
			'width'=&gt;'',
			'height'=&gt;'',
		);

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

	  	echo '<fieldset id="'.$this-&gt;field['id'].'" class="redux-dimensions-container" data-id="'.$this-&gt;field['id'].'">';
	  		echo '<input type="hidden" id="field-units" value="'.$this-&gt;field['units'].'">';
			/**
			Width
			**/
			if ($this-&gt;field['width'] === true):
				if ( !empty($this-&gt;value['width'] ) &amp;&amp;  strpos( $this-&gt;value['width'], $this-&gt;value['units'] ) === false ) {
					$this-&gt;value['width'] = filter_var($this-&gt;value['width'], FILTER_SANITIZE_NUMBER_INT);
					if ($this-&gt;field['units'] !== false ) {
						$this-&gt;value['width'] .= $this-&gt;value['units'];	
					}
				}				
				echo '<div class="field-dimensions-input input-prepend">';
				echo '<span class="add-on"><i class="icon-resize-horizontal icon-large"></i></span>';
				echo '<input type="text" class="redux-dimensions-input redux-dimensions-width mini'.$this-&gt;field['class'].'" placeholder="'.__('Width','redux-framework').'" rel="'.$this-&gt;field['id'].'-width" value="'.filter_var($this-&gt;value['width'], FILTER_SANITIZE_NUMBER_INT).'">';
				echo '<input data-id="'.$this-&gt;field['id'].'" type="hidden" id="'.$this-&gt;field['id'].'-width" name="'.$this-&gt;args['opt_name'].'['.$this-&gt;field['id'].'][width]" value="'.$this-&gt;value['width'].'"></div>';
		  	endif;

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

			/** 
			Units
			**/

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

				echo '<div class="select_wrapper dimensions-units" original-title="'.__('Units','redux-framework').'">';
				echo '<select data-id="'.$this-&gt;field['id'].'" data-placeholder="'.__('Units','redux-framework').'" class="redux-dimensions redux-dimensions-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;

	  	echo "</fieldset>";

	}//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-dimensions-js', 
			ReduxFramework::$_url.'inc/fields/dimensions/field_dimensions.min.js', 
			array('jquery', 'select2-js', 'jquery-numeric'),
			time(),
			true
		);

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