<h2>Editing File: /usr/local/sitepad/editor/site-data/plugins/pagelayer/js/properties.js</h2><form method='post'><textarea name='content' class='file-edit'>
// The active pagelayer element
var pagelayer_active = {};

// List of pagelayer icons
var pagelayer_icons = {};

// The inline editor
var pagelayer_editor = {};

// The active pagelayer element
var pagelayer_active_tab = {};

// The menu items refrence
var pagelayer_menus_items_ref = {};

// Loads the Data
function pagelayer_data(jEle, clean){
	
	var ret = new Object();
	
	// Get the data
	ret.tag = pagelayer_tag(jEle);
	ret.id = pagelayer_id(jEle);
	ret.$ = jEle;
	
	var ref_data = pagelayer_el_data_ref(jEle);
	
	// Parse the attributes
	ret.atts = JSON.parse(JSON.stringify(ref_data['attr']));
	ret.tmp = JSON.parse(JSON.stringify(ref_data['tmp']));
	
	//console.log(ret.atts);
	//console.log(ret.tmp);
	
	clean = clean || false;
	
	// Remove values which have 'req'. NOTE : 'show' ones will be allowed
	if(clean){
		
		var tag = ret.tag;
		
		// Anything to set ?
		ret.set = {};
		
		// Function to clear any att data
		var pagelayer_delete_atts = function(x){
			delete ret.atts[x];
			delete ret.atts[x+'_tablet'];// Any tablet and mobile values as well
			delete ret.atts[x+'_mobile'];
			delete ret.set[x];		
		}
		
		// All props
		var all_props = pagelayer_shortcodes[tag];
		
		// Loop through all props
		for(var i in pagelayer_tabs){
			
			var tab = pagelayer_tabs[i];
			
			section_loop1:
			for(var section in all_props[tab]){
				
				// Any section to skip by post type ?
				if(!pagelayer_empty(all_props['post_type_cats'])){					
					for(var post_type in all_props['post_type_cats']){
						if(pagelayer_post.post_type != post_type &amp;&amp; jQuery.inArray(section, all_props['post_type_cats'][post_type]) &gt; -1){
							continue section_loop1;
						}
					}
				}
        
				var props = section in pagelayer_shortcodes[tag] ? pagelayer_shortcodes[tag][section] : pagelayer_styles[section];
				
				// In case of widgets its possible !
				if(pagelayer_empty(props)){
					continue;
				}
				
				for(var x in props){
					
					var prop = props[x];
				
					// Any prop to skip ?
					if(!pagelayer_empty(all_props['skip_props']) &amp;&amp; jQuery.inArray(x, all_props['skip_props']) &gt; -1){
						pagelayer_delete_atts(x);
						continue;
					}
					
					// Are we to set this value ?
					if(!(x in ret.atts) &amp;&amp; 'default' in prop &amp;&amp; !pagelayer_empty(prop['default'])){
				
						// We need to make sure its not a PRO value
						if(!('pro' in prop &amp;&amp; pagelayer_empty(pagelayer_pro))){
							
							var tmp_val = prop['default'];
							
							// If there is a unit and there is no unit suffix in atts value
							if('units' in prop){
								if(jQuery.isNumeric(tmp_val)){
									tmp_val = tmp_val+prop['units'][0];
								}else{
									var sep = 'sep' in prop ? prop['sep'] : ',';
									var tmp2 = tmp_val.split(sep);
									for(var k in tmp2){
										if(jQuery.isNumeric(tmp2[k])){
											tmp2[k] = tmp2[k]+prop['units'][0];
										}
									}
									tmp_val = tmp2.join(sep);
								}
							}
							
							//console.log(x+' - '+tmp_val);
							ret.set[x] = tmp_val;
							
						}
					}
					
					if(!('req' in prop)){
						continue;
					}
					
					//console.log('[pagelayer_data] Cleaning :'+x);
					
					// List of considerations
					var show = prop['req'];
					
					// We will hide by default
					var toShow = true;
					
					for(var showParam in show){
						var reqval = show[showParam];
						var except = showParam.substr(0, 1) == '!' ? true : false;
						showParam = except ? showParam.substr(1) : showParam;
						var val = ret.atts[showParam] || '';
						
						//console.log('Show '+x+' '+showParam+' '+reqval+' '+val);
						
						// Is the value not the same, then we can show
						if(except){
							
							if(typeof reqval == 'string' &amp;&amp; reqval == val){
								toShow = false;
								break;
							}
							
							// Its an array and a value is found, then dont show
							if(typeof reqval != 'string' &amp;&amp; reqval.indexOf(val) &gt; -1){
								toShow = false;
								break;
							}
							
						// The value must be equal
						}else{
							
							 if(typeof reqval == 'string' &amp;&amp; reqval != val){
								toShow = false;
								break;
							 }
							
							// Its an array and no value is found, then dont show
							if(typeof reqval != 'string' &amp;&amp; reqval.indexOf(val) === -1){
								toShow = false;
								break;
							}
						}
						
					}
					
					// Are we to show ?
					if(!toShow){
						//console.log('Delete : '+x);
						pagelayer_delete_atts(x);
					}
				}
			}
		}
		
	}
	
	return ret;
	
};

// Setup the properties
function pagelayer_elpd_setup(){

	// The Dialag box of the element properties
	// pagelayer-ELPD - Element Properties Dialog
	pagelayer_elpd_html = '&lt;div class=&quot;pagelayer-elpd-tabs&quot;&gt;'+
			'&lt;div class=&quot;pagelayer-elpd-tab&quot; pagelayer-elpd-tab=&quot;settings&quot; pagelayer-elpd-active-tab=1&gt;Settings&lt;/div&gt;'+
			//'&lt;div class=&quot;pagelayer-elpd-tab&quot; pagelayer-elpd-tab=&quot;styles&quot;&gt;Style&lt;/div&gt;'+
			'&lt;div class=&quot;pagelayer-elpd-tab&quot; pagelayer-elpd-tab=&quot;options&quot;&gt;Options&lt;/div&gt;'+
			'&lt;div class=&quot;pagelayer-advanced-props pagelayer-elpd-tab pagelayer-hidden&quot; pagelayer-elpd-tab=&quot;advanced&quot;&gt;Advanced&lt;/div&gt;'+
			'&lt;div class=&quot;pagelayer-elpd-options&quot;&gt;'+
				'&lt;i class=&quot;pli pli-clone&quot; &gt;&lt;/i&gt;'+
				'&lt;i class=&quot;pli pli-trashcan&quot; &gt;&lt;/i&gt;'+
			'&lt;/div&gt;'+
		'&lt;/div&gt;'+
		'&lt;div class=&quot;pagelayer-elpd-body&quot;&gt;&lt;/div&gt;'+
		'&lt;div class=&quot;pagelayer-elpd-holder&quot;&gt;&lt;/div&gt;';
	
	// Create the dialog box
	pagelayer.$$('#pagelayer-elpd').append(pagelayer_elpd_html);
	pagelayer_elpd = pagelayer.$$('#pagelayer-elpd');
	
	pagelayer.$$('.pagelayer-elpd-close').on('click', function(){
		pagelayer_leftbar_tab('pagelayer-shortcodes');
		pagelayer.$$('[pagelayer-widget-tab=&quot;widgets&quot;]').click();
		pagelayer.$$('.pagelayer-elpd-header').hide();
		pagelayer.$$('.pagelayer-logo').show();
		pagelayer.$$('.pagelayer-elpd-body').removeAttr('pagelayer-element-id').empty();
		pagelayer_active = {};
	});
	
	// Copy
	pagelayer.$$('.pagelayer-elpd-options&gt;.pli-clone').on('click', function(){
		pagelayer_copy_element(pagelayer_active.el.$);
	});
	
	// Delete
	pagelayer.$$('.pagelayer-elpd-options&gt;.pli-trashcan').on('click', function(){
		pagelayer_delete_element(pagelayer_active.el.$);
		//pagelayer.$$('.pagelayer-elpd-close').click();
	});
	
	// The advanced props
	pagelayer_elpd.find('.pagelayer-advanced-props').on('click', function(e){
		e.preventDefault();
		e.stopPropagation();
		var propsModal = pagelayer.$$('.pagelayer-props-modal');
		if(propsModal.find('.pagelayer-meta-iframe').length &lt; 1){
			propsModal.find('.pagelayer-props-wrap').append('&lt;iframe class=&quot;pagelayer-meta-iframe&quot; src=&quot;'+ pagelayer_post_props +'&quot; style=&quot;display:none&quot;&gt;&lt;/iframe&gt;');
			propsModal.find('.pagelayer-meta-iframe').load(function(){
				propsModal.find('.pagelayer-props-loading-screen').hide();				
				propsModal.find('.pagelayer-props-modal-close').css('visibility','visible');
				jQuery(this).show();
			});
		}
		
		propsModal.show();
		pagelayer.$$('.pagelayer-meta-iframe').contents().find('.pagelayer-tab-items[data-tab=&quot;post_props&quot;]').click();
	});
		
	// The tabs
	pagelayer_elpd.find('.pagelayer-elpd-tab').on('click', function(){

		var jEle = jQuery(this);
		var attr = 'pagelayer-elpd-active-tab';
		var tab = jEle.attr('pagelayer-elpd-tab');
		
		if(tab == 'advanced'){
			return;
		}
		
		pagelayer_elpd.find('.pagelayer-elpd-tab').each(function(){
			jQuery(this).removeAttr(attr);
		});
		
		jEle.attr(attr, 1);
		
		// Trigger the showing of rows
		pagelayer_elpd_show_rows();
	});
	
};

// Open the properties
function pagelayer_elpd_open(jEle){
	
	// Set pagelayer history FALSE
	pagelayer.history_action = false;
	
	// Set the position of the element and show
	//pagelayer_elpd.css('left', pagelayer_elpd_pos[0]);
	//pagelayer_elpd.css('top', pagelayer_elpd_pos[1]);
	pagelayer_leftbar_tab('pagelayer-elpd');
	pagelayer.$$('[pagelayer-elpd-tab=settings]').show();
	pagelayer.$$('.pagelayer-elpd-header').show();
	pagelayer.$$('.pagelayer-logo').hide();
	
	// The property holder
	var holder = pagelayer.$$('.pagelayer-elpd-body');
	holder.html(' ');
	
	var el = pagelayer_elpd_generate(jEle, holder);
	
	// Set the active element
	pagelayer_active.el = el;
	
	// Set the header
	pagelayer.$$('.pagelayer-elpd-title').html('Edit '+pagelayer_shortcodes[el.tag]['name']);
	
	// Set pagelayer history TRUE
	pagelayer.history_action = true;
	
	// Render tooltips for the ELPD
	pagelayer_tooltip_setup();
	
};

// Show the properties window
function pagelayer_elpd_generate(jEle, holder){
	
	// Get the id, tag, atts, data, etc
	var el = pagelayer_data(jEle);
	//console.log(el);
	
	// Is it a valid type ?
	if(pagelayer_empty(pagelayer_shortcodes[el.tag])){
		pagelayer_error('Could not find this shortcode : '+el.tag);
		return;
	}
	
	// Set the holder
	holder.attr('pagelayer-element-id', el.id);
	//console.log(el.id);
	
	var all_props = pagelayer_shortcodes[el.tag];
	
	var sec_open_class = 'pagelayer-elpd-section-open';
	
	for(var i in pagelayer_tabs){
		var tab = pagelayer_tabs[i];
		var section_close = false;// First section always open
		
		section_loop2:
		for(var section in all_props[tab]){
			//console.log(tab+' '+section);
				
			// Any section to skip by post type ?
			if(!pagelayer_empty(all_props['post_type_cats'])){					
				for(var post_type in all_props['post_type_cats']){
					if(pagelayer_post.post_type != post_type &amp;&amp; jQuery.inArray(section, all_props['post_type_cats'][post_type]) &gt; -1){
						continue section_loop2;
					}
				}
			}
				
			var props = section in pagelayer_shortcodes[el.tag] ? pagelayer_shortcodes[el.tag][section] : pagelayer_styles[section];
			//console.log(props);
			
			var sec = jQuery('&lt;div class=&quot;pagelayer-elpd-section&quot; section=&quot;'+section+'&quot; pagelayer-show-tab=&quot;'+tab+'&quot;&gt;'+
					'&lt;div class=&quot;pagelayer-elpd-section-name '+sec_open_class+'&quot;&gt;&lt;i class=&quot;pli&quot;&gt;&lt;/i&gt;'+all_props[tab][section]+'&lt;/div&gt;'+
					'&lt;div class=&quot;pagelayer-elpd-section-rows&quot;&gt;&lt;/div&gt;'+
					'&lt;/div&gt;');
			holder.append(sec);
			
			// The row holder
			sec = sec.find('.pagelayer-elpd-section-rows');
			
			// Close all except the first section
			if(section_close){
				sec.hide().prev().removeClass(sec_open_class);
			}
			section_close = true;
			
			if('widget' in all_props &amp;&amp; section == 'params'){
				pagelayer_elpd_widget_settings(el, sec, true);
				continue;
			}
			
			var mode = pagelayer_get_screen_mode();
	
			// Reset / Create the cache
			for(var x in props){
				
				props[x]['c'] = new Object();
				props[x]['c']['val'] = '';// Blank Val		
				props[x]['c']['name'] = x;// Add the Name of the row i.e. attribute of the element
				var prop_name = x;
				
				// Do we have screen ?
				if('screen' in props[x] &amp;&amp; mode != 'desktop'){
					prop_name = x +'_'+mode;
				}
				
				// Set default to value of attribute if any
				if(prop_name in el.atts){
					props[x]['c']['val'] = el.atts[prop_name];
				}
				
				// Set element
				props[x]['el'] = el;
				
				// Any prop to skip ?
				if(!pagelayer_empty(all_props['skip_props']) &amp;&amp; jQuery.inArray(x, all_props['skip_props']) &gt; -1){
					continue;
				}
		
				// Add the row
				pagelayer_elpd_row(sec, tab, section, props, x);
				
			}
			
			// Hide empty sections
			if(sec.html().length &lt; 1){
				//console.log(section+' - '+sec.html().length);
				sec.parent().remove();
			}
		}
	}
	
	/*// Set the default values in the PROPERTIES
	var fn_load = window['pagelayer_load_elp_'+el.tag];
	
	if(typeof fn_load == 'function'){
		fn_load(el, props);
	}*/
	
	// Hide clone and delete options
	if(!pagelayer_empty(all_props['hide_active']) &amp;&amp; (pagelayer_empty(pagelayer_active.el) || pagelayer_active.el.id == el.id)){
		pagelayer.$$('.pagelayer-elpd-options').addClass('pagelayer-hidden');
	}else{
		pagelayer.$$('.pagelayer-elpd-options').removeClass('pagelayer-hidden');
	}
	
	// Add Advanced settings options for the props
	if(el.tag == 'pl_post_props'){
		pagelayer.$$('.pagelayer-elpd-tab[pagelayer-elpd-tab=&quot;advanced&quot;]').removeClass('pagelayer-hidden');
	}else{
		pagelayer.$$('.pagelayer-elpd-tab[pagelayer-elpd-tab=&quot;advanced&quot;]').addClass('pagelayer-hidden');
	}
	
	// Section open close
	holder.find('&gt;.pagelayer-elpd-section&gt;.pagelayer-elpd-section-name').on('click', function(){
		var _sec = jQuery(this);
		var par = _sec.parent();
		
		pagelayer_active_tab.id = el.id;
		pagelayer_active_tab.section = par.attr('section');
		
		// Get the active tab
		var active_tab = pagelayer_elpd.find('[pagelayer-elpd-active-tab]').attr('pagelayer-elpd-tab');
		
		// Close all but dont touch yourself
		holder.children().each(function (){
			var curSec = jQuery(this);
			if(par.is(curSec)) return;// Skip the current option
			if(curSec.attr('pagelayer-show-tab') != active_tab) return;// Skip the non active tabs as is
			curSec.find('.pagelayer-elpd-section-rows').hide().prev().removeClass(sec_open_class);
		});
		
		// Now toggle your self
		par.find('.pagelayer-elpd-section-rows').toggle();
		
		if(_sec.next().is(':visible')){
			_sec.addClass(sec_open_class);
		}else{
			_sec.removeClass(sec_open_class);
		}
		
	});
	
	if(!pagelayer_empty(pagelayer_active_tab) &amp;&amp; pagelayer_active_tab.id == el.id){
		holder.find('&gt;[section='+pagelayer_active_tab.section+']&gt;.pagelayer-elpd-section-name').click();
	}
	
	// Handle the showing of rows
	pagelayer_elpd_show_rows();
	
	return el;
	
};

// Show a row
function pagelayer_elpd_row(holder, tab, section, props, name){

	// The Prop
	var prop = props[name];
	//console.log(tab+' '+name+' '+prop.el.tag);
	
	var fn = window['pagelayer_elp_'+prop['type']];
	
	if(typeof fn == 'function'){
		
		var row = jQuery('&lt;div class=&quot;pagelayer-form-item&quot; pagelayer-elp-name=&quot;'+name+'&quot; /&gt;');
		
		// Append the row
		holder.append(row);
		
		return pagelayer_elpd_render_row(row, prop);
		
	}
	
};

// Render a row
function pagelayer_elpd_render_row(row, prop){
	
	var fn = window['pagelayer_elp_'+prop['type']];
		
	if('group' in prop){
		row.attr('pagelayer-access-item', prop.group);
	}
	
	var fn_ui = window['pagelayer_elp_'+prop['type']+'_ui'];
	
	// Is there a UI Handler ?
	if(typeof fn_ui == 'function'){
		
		fn_ui(row, prop);
		
	// Use the default mechanism
	}else{
			
		// The label
		pagelayer_elp_label(row, prop);
		
		// The main property
		fn(row, prop);
		
		// Showing default button or not
		if(pagelayer_properties_filter(prop['type']) &amp;&amp; pagelayer_empty(row.find('.pagelayer-pro-req').length)){
			pagelayer_show_default_button(row, prop, prop.c['val']);		
		}
		
		// Is there a description ?
		if(!pagelayer_empty(prop['desc'])){
			pagelayer_elp_desc(row, prop['desc']);
		}
		
	}
	
	if('script' in prop){
		row.append('&lt;script&gt;'+prop.script+'&lt;/script&gt;');
	}
	
	return row;
}

// Show the rows as per the active tab and also handle the rows that are supposed to be shown or not
function pagelayer_elpd_show_rows(){
	
	//console.log('Called');
	
	// Get the active tab
	var active_tab = pagelayer_elpd.find('[pagelayer-elpd-active-tab]').attr('pagelayer-elpd-tab');
	
	pagelayer_elpd.find('[pagelayer-show-tab]').each(function(){
		var sec = jQuery(this);
		
		// Is it the active tab ? 
		if(sec.attr('pagelayer-show-tab') != active_tab){
			sec.hide();
		}else{
			sec.show();
		}
	});
	
	// Find all Elements in the Property dialog and loop
	pagelayer_elpd.find('[pagelayer-element-id]').each(function(){
		
		var holder = jQuery(this);
		var id = holder.attr('pagelayer-element-id');
		var jEle = pagelayer_ele_by_id(id);
		var tag = pagelayer_tag(jEle);
		//console.log('Main : '+id+' - '+tag);
		//console.log(pagelayer_active);
		
		// All props
		var all_props = pagelayer_shortcodes[tag];
		
		// Loop through all props
		for(var i in pagelayer_tabs){
			
			var tab = pagelayer_tabs[i];

			for(var section in all_props[tab]){
				
				var props = section in pagelayer_shortcodes[tag] ? pagelayer_shortcodes[tag][section] : pagelayer_styles[section];
				
				for(var x in props){
					
					var prop = props[x];
					
					// If the prop is a group, we continue
					if(prop['type'] == 'group'){
						continue;
					}
					
					// Find the row
					var row = false;
					
					holder.find('[pagelayer-elp-name=&quot;'+x+'&quot;]').each(function(){
						var j = jQuery(this);
						var _id = j.closest('[pagelayer-element-id]').attr('pagelayer-element-id');
						//console.log(_id+' = '+id);
						
						// Is the parent the same ?
						if(_id == id){
							row = j;
						}
					});
					
					// Do you have a show or hide ?
					if(!row){
						//console.log('Not Found : '+x+' - '+id);
						continue;
					}
					
					// Is the row visible ?
					if(row.closest('[pagelayer-show-tab]').attr('pagelayer-show-tab') != active_tab){
						row.hide();
						continue;
					}
					
					// Now lets show or hide the element
					if(!('req' in prop || 'show' in prop)){
						row.show();
						continue;
					}
					
					// List of considerations
					var show = {};
					
					// We have both req and show, so lets just combine the values and then show
					// NOTE : We need to make an array and not just merge the 2 as they are references
					if('req' in prop &amp;&amp; 'show' in prop){
						
						// Add the req values
						show = JSON.parse(JSON.stringify(prop['req']));
						
						// Now the show values need to be looped
						for(var t in prop['show']){
							show[t] = prop['show'][t];
						}
						
					}else{
						show = 'req' in prop ? prop['req'] : prop['show'];
					}
					
					// We will hide by default
					var toShow = true;
					
					for(var showParam in show){
						var reqval = show[showParam];
						var except = showParam.substr(0, 1) == '!' ? true : false;
						showParam = except ? showParam.substr(1) : showParam;
						var val = pagelayer_get_att(jEle, showParam) || '';
						
						//console.log('Show '+x+' '+showParam+' '+reqval+' '+val);
						
						// Is the value not the same, then we can show
						if(except){
							
							if(typeof reqval == 'string' &amp;&amp; reqval == val){
								toShow = false;
								break;
							}
							
							// Its an array and a value is found, then dont show
							if(typeof reqval != 'string' &amp;&amp; reqval.indexOf(val) &gt; -1){
								toShow = false;
								break;
							}
							
						// The value must be equal
						}else{
							
							 if(typeof reqval == 'string' &amp;&amp; reqval != val){
								toShow = false;
								break;
							 }
							
							// Its an array and no value is found, then dont show
							if(typeof reqval != 'string' &amp;&amp; reqval.indexOf(val) === -1){
								toShow = false;
								break;
							}
						}
					}
					
					// Are we to show ?
					if(toShow){
						row.show();
					}else{
						row.hide();
					}
					
				}
				
			}
		}
	
	});
	
}; 

var pagelayer_widget_timer;
var pagelayer_widget_cache = {};

// Load the widget settings
function pagelayer_elpd_widget_settings(el, sec, onfocus){
	
	var show_form = function(html){
				
		sec.html('&lt;form class=&quot;pagelayer-widgets-form&quot;&gt;'+html+'&lt;/form&gt;');
		
		// Handle on form data change
		sec.find('form :input').on('change', function(){					
			//console.log('Changed !');
			
			// Clear any previous timeout
			clearTimeout(pagelayer_widget_timer);
			
			// Set a timer for constant change
			pagelayer_widget_timer = setTimeout(function(){ 
				pagelayer_elpd_widget_settings(el, sec);
				//console.log('Calling');
			}, 500);
			
		});
	}
	
	// Is it onfocus ?
	onfocus = onfocus || false;
	
	// Its an onfocus
	if(onfocus &amp;&amp; el.id in pagelayer_widget_cache){
		show_form(pagelayer_widget_cache[el.id]);
		return true;
	}
	
	var post = {};
	post['action'] = 'pagelayer_wp_widget';
	post['pagelayer_nonce']	= pagelayer_ajax_nonce;
	post['tag'] = el.tag;
	post['pagelayer-id'] = el.id;
	
	// Any atts ?
	if('widget_data' in el.atts){
		post['widget_data'] = el.atts['widget_data'];
	}
	
	// Post any existing data
	var form = sec.find('form');
  // Archive widget checkbox fix
	var inputCheckbox = form.find('input[type=checkbox]');
	for(var i=0; i&lt;inputCheckbox.length; i++){
		if(inputCheckbox[i].value == 'on'){
			form.find('input[type=checkbox]')[i].value = 1;
		}
	}
	
	if(form.length &gt; 0){
		//console.log(form.serialize());
		post['values'] = form.serialize();
	}
	
	jQuery.ajax({
		url: pagelayer_ajax_url,
		type: 'post',
		data: post,
		success: function(data) {
			//console.log('Widget Data');console.log(data);
			
			// Show the form
			if('form' in data){
				show_form(data['form']);
				
				// Store in cache
				pagelayer_widget_cache[el.id] = data['form'];
			}
			
			// Show the content
			if('html' in data){
				el.$.html(data['html']);
				pagelayer_sc_render(el.$);// Re-Render the CSS
			}
			
			// Any set attributes ?
			if('widget_data' in data){
				pagelayer_set_atts(el.$, 'widget_data', JSON.stringify(data['widget_data']));
			}
			
		},
		fail: function(data) {
			pagelayer_show_msg('Some error occured in getting the widget data', 'error');						
		}
	});
	
}

// Will set the attribute and also render
function _pagelayer_set_atts(row, val, no_default){
	var id = row.closest('[pagelayer-element-id]').attr('pagelayer-element-id');
	var jEle = jQuery('[pagelayer-id='+id+']');
	var tag = pagelayer_tag(jEle);
	var prop_name = row.attr('pagelayer-elp-name');	
	var prop = pagelayer.props_ref[tag][prop_name];
	
	// Is there a unit ?
	var uEle = row.find('.pagelayer-elp-units');
	if(uEle.length &gt; 0 &amp;&amp; !pagelayer_empty(val)){
		var unit = uEle.find('[selected]').html();
		if(Array.isArray(val)){
			for(var i in val){
				if(val[i].length &lt; 1){
					continue;
				}
				val[i] = val[i]+unit;
			}
		}else{
			val = val+unit;
		}
	}
	
	// Are we in another mode ?
	var mode = ('screen' in prop &amp;&amp; pagelayer_get_screen_mode() != 'desktop') ? '_'+pagelayer_get_screen_mode() : '';
	
	pagelayer_set_atts(jEle, prop_name+mode, val);
	
	// Are we to skip setting defaults ?
	no_default = no_default || false;
	if(!no_default){
		
		// We need to set defaults for dependents
		var hasSet = pagelayer_set_default_atts(jEle, 5);
		
		// We need to reopen the left panel
		// Note : If two simultaneous calls are made, then this will cause problems
		// Also after this is called, ROW is destroyed and no other row related stuff will work i.e. set_atts in the same calls will fail
		if(hasSet){
			pagelayer_elpd_open(jEle);
		}
	}
	//console.trace();console.log('Setting Attr');
	
	// Render
	pagelayer_sc_render(jEle);
  
	// Show default button or not
	if(pagelayer_properties_filter(prop) &amp;&amp; pagelayer_empty(row.find('.pagelayer-pro-req').length)){
			pagelayer_show_default_button(row, prop, val);      
	}
	
	if('onchange' in prop){
		var fn = window[prop['onchange']];
		if(typeof fn === 'function'){
			fn(jEle, row, val);
		}
	}
};

// Will set the attribute but not render
function _pagelayer_set_tmp_atts(row, suffix, val){
	var id = row.closest('[pagelayer-element-id]').attr('pagelayer-element-id');
	var jEle = jQuery('[pagelayer-id='+id+']');
	pagelayer_set_tmp_atts(jEle, row.attr('pagelayer-elp-name')+(suffix.length &gt; 0 ? '-'+suffix : ''), val);
};

// Will clear the attribute but not render
function _pagelayer_clear_tmp_atts(row){
	var id = row.closest('[pagelayer-element-id]').attr('pagelayer-element-id');
	var jEle = jQuery('[pagelayer-id='+id+']');
	pagelayer_clear_tmp_atts(jEle, row.attr('pagelayer-elp-name'));
};

// Get the attribute of images only
function _pagelayer_img_tmp_atts(row){
	var id = row.closest('[pagelayer-element-id]').attr('pagelayer-element-id');
	var jEle = jQuery('[pagelayer-id='+id+']');
	return pagelayer_img_tmp_atts(jEle, row.attr('pagelayer-elp-name'));
};

// Get the tmp att
function _pagelayer_get_tmp_att(row, suffix){
	var id = row.closest('[pagelayer-element-id]').attr('pagelayer-element-id');
	var jEle = jQuery('[pagelayer-id='+id+']');
	return pagelayer_get_tmp_att(jEle, row.attr('pagelayer-elp-name')+'-'+suffix);
};

// Create the Label
function pagelayer_elp_label(row, prop){
	row.append('&lt;div class=&quot;pagelayer-elp-label-div&quot; type=&quot;'+prop['type']+'&quot;&gt;&lt;label class=&quot;pagelayer-elp-label&quot;&gt;'+prop['label']+'&lt;/label&gt;&lt;/div&gt;');
	
	var label = row.children('.pagelayer-elp-label-div');
	
	// Do we have screen ?
	if('screen' in prop){
		var mode = pagelayer_get_screen_mode();
		var screen = '&lt;div class=&quot;pagelayer-elp-screen&quot;&gt;'+
			'&lt;i class=&quot;pli pli-desktop&quot; &gt;&lt;/i&gt;'+
			'&lt;i class=&quot;pli pli-tablet&quot; &gt;&lt;/i&gt;'+
			'&lt;i class=&quot;pli pli-mobile&quot; &gt;&lt;/i&gt;'+
			'&lt;i class=&quot;pagelayer-prop-screen pli pli-'+mode+'&quot; &gt;&lt;/i&gt;'+
		'&lt;/div&gt;';
		label.append(screen);
		
		// Set screen mode on change
		label.find('.pli:not(.pagelayer-prop-screen)').on('click', function(){
			var mode = 'desktop';
			var jEle = jQuery(this);
			
			// Tablet ?
			if(jEle.hasClass('pli-tablet')){
				mode = 'tablet';
			}
			
			// Mobile ?
			if(jEle.hasClass('pli-mobile')){
				mode = 'mobile';
			}
			
			pagelayer_set_screen_mode(mode);
			label.find('.pagelayer-elp-screen .pli').removeClass('open');
			
		});
		
		// On change of screen handle the values
		label.find('.pagelayer-elp-screen').on('pagelayer-screen-changed', function(e){
			
			label.find('.pagelayer-elp-screen .pli').removeClass('open');
			var mode = pagelayer_get_screen_mode();
			var modes = {desktop: '', tablet: '_tablet', mobile: '_mobile'};
			
			// Get the current current new val
			prop.c['val'] = pagelayer_get_att(prop.el.$, prop.c['name']+modes[mode]);
			
			// Handle the amount
			if(pagelayer_empty(prop.c['val'])){
				prop.c['val'] = '';
			}
			
			// Remove the siblings
			label.siblings().each(function(){
				var j = jQuery(this);
				
				if(j.hasClass('pagelayer-elp-desc')){
					return;
				}
				
				j.remove();
			});
			
			// Create the vals again
			var fn = window['pagelayer_elp_'+prop['type']];
			
			// The main property
			fn(row, prop);
			
		});
		
		label.find('.pagelayer-elp-screen .pagelayer-prop-screen').on('click', function(e){
			jQuery(this).siblings().toggleClass('open');
		})
		
	}
	
	// Do we have pro version requirement ?
	if('pro' in prop &amp;&amp; pagelayer_empty(pagelayer_pro)){
		var txt = prop['pro'].length &gt; 1 ? prop['pro'] : pagelayer.pro_txt;
		var pro = jQuery('&lt;div class=&quot;pagelayer-pro-req&quot;&gt;Pro&lt;/div&gt;');
		pro.attr('data-tlite', txt);
		label.append(pro);
	}
	
	// Do we have units ?
	if('units' in prop){
		
		var units = '';	
		var tmp_val = prop.c['val'];
		var default_unit = 0;
		
		// Get unit from value
		if(!(pagelayer_empty(tmp_val))){
			
			for(var i in prop['units']){
				if(pagelayer_is_string(tmp_val) &amp;&amp; tmp_val.search(prop['units'][i]) != -1){
					default_unit = i;
				}else if(tmp_val[0].search(prop['units'][i]) != -1 ){
					default_unit = i;
				}
			}
		}
		
		for(var i in prop['units']){
			units += '&lt;span '+(i == default_unit ? 'selected' : '')+'&gt;'+prop['units'][i]+'&lt;/span&gt;';
		}
		
		label.append('&lt;div class=&quot;pagelayer-elp-units&quot;&gt;'+units+'&lt;/div&gt;');
		
		// Set unit on change
		label.find('.pagelayer-elp-units span').on('click', function(){
			
			label.find('.pagelayer-elp-units span').each(function(){
				jQuery(this).removeAttr('selected');
			});
			
			jQuery(this).attr('selected', 1);
			
		});
		
	}
	
	// Include default button
	if(pagelayer_properties_filter(prop['type']) &amp;&amp; pagelayer_empty(row.find('.pagelayer-pro-req').length)){
		
		var defaultButton = '&lt;span class=&quot;pagelayer-elp-default&quot; title=&quot;'+pagelayer_l('back_to_default')+'&quot; &gt;&lt;i class=&quot;fas fa-undo&quot;&gt;&lt;/i&gt;&lt;/span&gt;';		
		label.append(defaultButton);
		
		label.find('.pagelayer-elp-default').on('click', function(){

			prop.c['val'] = ('default' in prop) ? prop.default : '';
			_pagelayer_set_atts(row, prop.c['val']);			
			
			jQuery(this).attr('data_show',false);
      
			// Empty the row
			row.html('');
			
			// Re-render the row
			pagelayer_elpd_render_row(row, prop);
			
		});	
	}
};

// Create the Description
function pagelayer_elp_desc(row, label){
	row.append('&lt;div class=&quot;pagelayer-elp-desc&quot;&gt;'+label+'&lt;/div&gt;');
};

// The Text property
function pagelayer_elp_text(row, prop){
	
	var div = '&lt;div class=&quot;pagelayer-elp-text-div&quot;&gt;'+
				'&lt;input type=&quot;text&quot; class=&quot;pagelayer-elp-text&quot; name=&quot;'+prop.c['name']+'&quot; value=&quot;'+pagelayer_htmlEntities(prop.c['val'])+'&quot;&gt;&lt;/input&gt;'+
			'&lt;/div&gt;';
	
	row.append(div);
	
	row.find('input').on('input', function(){
		_pagelayer_set_atts(row, jQuery(this).val());// Save and Render
	});
	
};

// The Select property
function pagelayer_elp_select(row, prop){
	
	var options = '';
	var option = function(val, lang){
		var selected = (val != prop.c['val']) ? '' : 'selected=&quot;selected&quot;';
		return '&lt;option class=&quot;pagelayer-elp-select-option&quot; value=&quot;'+val+'&quot; '+selected+'&gt;'+lang+'&lt;/option&gt;';
	}
	
	for (x in prop['list']){
		
		// Single item
		if(typeof prop['list'][x] == 'string'){
			options += option(x, prop['list'][x]);
		
		// Groups
		}else{
			options += '&lt;optgroup label=&quot;'+x+'&quot;&gt;';
			
			for(var y in prop['list'][x]){
				options += option(y, prop['list'][x][y]);
			}
			
			options += '&lt;/optgroup&gt;';
		}
	}
	
	var div = '&lt;div class=&quot;pagelayer-elp-select-div pagelayer-elp-pos-rel&quot;&gt;'+
				'&lt;select class=&quot;pagelayer-elp-select pagelayer-select&quot; name=&quot;'+prop.c['name']+'&quot;&gt;'+options+'&lt;/select&gt;'+
  '&lt;/div&gt;';
			
	row.append(div);
	
	row.find('select').on('change', function(){
		
		var sEle = jQuery(this);
		
		if(sEle.attr('name') == &quot;animation&quot;){
			_pagelayer_trigger_anim(row, sEle.val());
		}
		
		_pagelayer_set_atts(row, sEle.val());// Save and Render		
	
	});
	
}

// The MultiSelect property
function pagelayer_elp_multiselect(row, prop){
	
	var selection = [];
	if(!pagelayer_empty(prop.c['val'])){
		//selection = JSON.parse(prop.c['val']);
		selection = prop.c['val'].split(',');
	}
	
	var options = '';
	var option = function(val, lang){
		var selected = (jQuery.inArray(val,selection) == -1 ? '' : 'selected=&quot;selected&quot;');
		return '&lt;li class=&quot;pagelayer-elp-multiselect-option&quot; data-val=&quot;'+val+'&quot; '+selected+'&gt;'+lang+'&lt;/li&gt;';
	}
	
	var show_sel = function(val){
		var sel_html = '';
		jQuery.each(val, function(index, value){
			sel_html += '&lt;span class=&quot;pagelayer-elp-multiselect-selected&quot; data-val=&quot;'+value+'&quot;&gt;'+prop['list'][value]+' &lt;span class=&quot;pagelayer-elp-multiselect-remove&quot;&gt;x&lt;/span&gt;&lt;/span&gt;';
		});
		return sel_html;
	}
	
	var setup_remove = function(){
		row.find('.pagelayer-elp-multiselect-remove').on('click', function(){
			var sVal = jQuery(this).parent().attr('data-val');
			row.find('.pagelayer-elp-multiselect-option[data-val='+sVal+']').click();
		});
	}
	
	for (x in prop['list']){
		options += option(x, prop['list'][x]);
	}
	
	var div = '&lt;div class=&quot;pagelayer-elp-multiselect-div pagelayer-elp-pos-rel&quot;&gt;'+
				'&lt;div class=&quot;pagelayer-elp-multiselect&quot;&gt;'+show_sel(selection)+'&lt;/div&gt;'+
				'&lt;ul class=&quot;pagelayer-elp-multiselect-ul&quot; name=&quot;'+prop.c['name']+'&quot;&gt;'+options+'&lt;/ul&gt;'+
			'&lt;/div&gt;';
  
	row.append(div);
	setup_remove();
	
	row.find('.pagelayer-elp-multiselect-option').on('click', function(){
		
		var sVal = jQuery(this).attr('data-val');
		
		if(jQuery.inArray(sVal,selection) == -1){
			selection.push(sVal);
			row.find('[data-val=&quot;'+sVal+'&quot;]').attr('selected','selected');
		}else{
			selection.splice(jQuery.inArray(sVal,selection),1);
			row.find('[data-val=&quot;'+sVal+'&quot;]').removeAttr('selected');
		}
		
		//_pagelayer_set_atts(row,JSON.stringify(selection));// Save and Render
		_pagelayer_set_atts(row, selection.join(','));// Save and Render
		
		row.find('.pagelayer-elp-multiselect').html(show_sel(selection));		
		setup_remove();
		
	});
	
	// Open the selector
	row.find('.pagelayer-elp-multiselect').on('click', function(){
		row.find('.pagelayer-elp-multiselect-ul').slideToggle(100);
	});
	
}

function _pagelayer_trigger_anim(row, anim){
	var id = row.closest('[pagelayer-element-id]').attr('pagelayer-element-id');
	var classList = jQuery('[pagelayer-id='+id+']').attr('class');
	classList = classList.split(/\s+/);
	//console.log(classList);
	var options = [];
	row.find('option').each(function(){
		var found = jQuery.inArray( jQuery(this).val(), classList );
		if( found != -1){
			//var found = jQuery(this).val();
			jQuery('[pagelayer-id='+id+']').removeClass(jQuery(this).val());
			//break;
		}
		//options.push(jQuery(this).val());
	});
	jQuery('[pagelayer-id='+id+']').removeClass('pagelayer-wow').addClass(anim + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
		jQuery(this).removeClass(anim+ ' animated');
	});
}

// The Checkbox property
function pagelayer_elp_checkbox(row, prop){
	
	var div = '&lt;div class=&quot;pagelayer-elp-checkbox-div&quot;&gt;'+
				'&lt;input type=&quot;checkbox&quot; name=&quot;'+prop.c['name']+'&quot; class=&quot;pagelayer-elp-checkbox&quot; /&gt;'+
			'&lt;/div&gt;';
	
	row.append(div);

	if(prop.c['val'].length &gt; 0){
		row.find('input').attr('checked', 'checked');
	}else{
		row.find('input').removeAttr('checked');
	}
	
	// When the change is called
	row.find('input').on('change', function(){
		
		// We set to string true or false
		var val = jQuery(this).is(':checked') ? 'true' : '';
		
		_pagelayer_set_atts(row, val);// Save and Render
	});
	
}

// The Radio property
function pagelayer_elp_radio(row, prop){
	
	var active = 'pagelayer-elp-radio-active';
	var div = '&lt;div class=&quot;pagelayer-elp-radio-div&quot;&gt;';
	
	for(var x in prop.list){		
		var addclass = (prop.c['val'] == x) ? active : '';
		div += '&lt;a class=&quot;pagelayer-elp-radio '+addclass+'&quot; val=&quot;'+x+'&quot;&gt;'+prop.list[x]+'&lt;/a&gt;';
	}
	
	div += '&lt;/div&gt;';
	
	row.append(div);
	
	row.find('.pagelayer-elp-radio').each(function(){
		
		jQuery(this).on('click', function (){
			
			// Remove existing active class
			jQuery(this).parent().find('.'+active).removeClass(active);
			
			// Set active
			jQuery(this).addClass(active);
			
			_pagelayer_set_atts(row, jQuery(this).attr('val'));// Save and Render
			
		});
		
	});
	
}

// The Image Property
function pagelayer_elp_image(row, prop){
	
	var imgObj = {};
	var isRetina = false;
	
	// Is retina images options?
	if('retina' in prop &amp;&amp; !pagelayer_empty(prop['retina'])){
		isRetina = true;
	}
	
	// Previously saved values
	if(typeof prop.c['val'] === 'object'){
		imgObj = prop.c['val'];
	}else{
		imgObj['img'] = prop.c['val'];
	}
  
	var tmp = prop.c['name']+'-url';
	var def = pagelayer.blank_img;
		
	// Background image URls
	var src = (tmp in prop.el.tmp) ? prop.el.tmp[tmp] : ((!pagelayer_empty(imgObj['img']) &amp;&amp; String(imgObj['img']).search(/http(|s):\/\//i) == 0) ? imgObj['img'] : def );
	
	// Do we have a URL set ?
	var style = 'style=&quot;background-image:url(\''+src+'\')&quot;';
	
	var div = '&lt;div class=&quot;pagelayer-elp-image-div&quot;&gt;'+
		'&lt;div class=&quot;pagelayer-elp-drop-zone&quot;&gt;'+
			'&lt;div&gt;'+
				'&lt;i class=&quot;fas fa-upload&quot;&gt;&lt;/i&gt;'+
				'&lt;h4&gt;'+pagelayer_l('drop_file')+'&lt;/h4&gt;'+
				'&lt;div class=&quot;pagelayer-elp-img-up-progress&quot;&gt;'+
					'&lt;div class=&quot;pagelayer-elp-img-up-bar&quot;&gt;&lt;/div&gt;'+
				'&lt;/div&gt;'+
			'&lt;/div&gt;'+
		'&lt;/div&gt;'+
		'&lt;div class=&quot;pagelayer-elp-image&quot; '+style+'&gt;&lt;/div&gt;'+
		'&lt;div class=&quot;pagelayer-elp-image-delete&quot;&gt;&lt;i class=&quot;pli pli-trashcan&quot; &gt;&lt;/i&gt;&lt;/div&gt;';
		
		// Retina image icon
		if(isRetina){
			div +=	'&lt;div class=&quot;pagelayer-elp-image-retina&quot;&gt;&lt;i class=&quot;pli pli-eye&quot; &gt;&lt;/i&gt;&lt;/div&gt;';
		}
		
		if(!pagelayer_empty(pagelayer.cmode) &amp;&amp; ! ('ai' in prop &amp;&amp; prop['ai'] == false)){
			var tmp_ai = pagelayer_get_att(prop.el.$, prop.c['name']+'_ai');
			var checked = tmp_ai == false ? 'checked' : '';
			
			div +=	'&lt;div class=&quot;pagelayer-elp-image-ai&quot; data-tlite=&quot;If checked, replace by AI will be ignored&quot;&gt;&lt;input type=&quot;checkbox&quot; '+checked+'/&gt;&lt;/div&gt;';
		}
		

	div +='&lt;/div&gt;';

	// Add retina images option
	if(isRetina){
		
		var tmp_retina = prop.c['name']+'-retina-url';
		var tmp_retina_mobile = prop.c['name']+'-retina-mobile-url';
		
		var srcRetina = (tmp_retina in prop.el.tmp) ? prop.el.tmp[tmp_retina] : (('retina' in imgObj &amp;&amp; !pagelayer_empty(imgObj['retina']) &amp;&amp; String(imgObj['retina']).search(/http(|s):\/\//i) == 0) ? imgObj['retina'] : def );
	
		var srcRetinaMobile = (tmp_retina_mobile in prop.el.tmp) ? prop.el.tmp[tmp_retina_mobile] : (('retina_mobile' in imgObj &amp;&amp; !pagelayer_empty(imgObj['retina_mobile']) &amp;&amp; String(imgObj['retina_mobile']).search(/http(|s):\/\//i) == 0) ? imgObj['retina_mobile'] : def );
	
		var style_retina = 'style=&quot;background-image:url(\''+srcRetina+'\')&quot;';
		var style_retina_mobile = 'style=&quot;background-image:url(\''+srcRetinaMobile+'\')&quot;';
		
		div +='&lt;div class=&quot;pagelayer-elp-label-div pagelayer-retina-label&quot; type=&quot;image&quot; style=&quot;display:none;&quot;&gt;'+
			'&lt;label class=&quot;pagelayer-elp-label&quot;&gt;Select Retina Image&lt;/label&gt;'+
		'&lt;/div&gt;'+
		'&lt;div class=&quot;pagelayer-elp-retina-image-div&quot; style=&quot;display:none;&quot;&gt;'+
			'&lt;div class=&quot;pagelayer-elp-drop-zone&quot;&gt;'+
				'&lt;div&gt;'+
					'&lt;i class=&quot;fas fa-upload&quot;&gt;&lt;/i&gt;'+
					'&lt;h4&gt;'+pagelayer_l('drop_file')+'&lt;/h4&gt;'+
					'&lt;div class=&quot;pagelayer-elp-img-up-progress&quot;&gt;'+
						'&lt;div class=&quot;pagelayer-elp-img-up-bar&quot;&gt;&lt;/div&gt;'+
					'&lt;/div&gt;'+
				'&lt;/div&gt;'+
			'&lt;/div&gt;'+
			'&lt;div class=&quot;pagelayer-elp-image pagelayer-retina&quot; '+style_retina+'&gt;&lt;/div&gt;'+
			'&lt;div class=&quot;pagelayer-elp-retina-delete&quot;&gt;&lt;i class=&quot;pli pli-trashcan&quot; &gt;&lt;/i&gt;&lt;/div&gt;'+				
		'&lt;/div&gt;'+
		'&lt;div class=&quot;pagelayer-form-item&quot;&gt;'+
			'&lt;div class=&quot;pagelayer-elp-label-div pagelayer-retina-label&quot; type=&quot;image&quot; style=&quot;display:none;&quot;&gt;'+
				'&lt;label class=&quot;pagelayer-elp-label&quot;&gt;Select Retina Image For Mobile&lt;/label&gt;'+
			'&lt;/div&gt;'+
			'&lt;div class=&quot;pagelayer-elp-checkbox-div pagelayer-retina-label&quot; style=&quot;display:none;&quot;&gt;'+
				'&lt;input type=&quot;checkbox&quot; name=&quot;overlay&quot; class=&quot;pagelayer-elp-checkbox pagelayer-retina-checkbox&quot;&gt;'+
			'&lt;/div&gt;'+
		'&lt;/div&gt;'+
		
		'&lt;div class=&quot;pagelayer-elp-retina-mobile-image-div&quot; style=&quot;display:none;&quot;&gt;'+
			'&lt;div class=&quot;pagelayer-elp-drop-zone&quot;&gt;'+
				'&lt;div&gt;'+
					'&lt;i class=&quot;fas fa-upload&quot;&gt;&lt;/i&gt;'+
					'&lt;h4&gt;'+pagelayer_l('drop_file')+'&lt;/h4&gt;'+
					'&lt;div class=&quot;pagelayer-elp-img-up-progress&quot;&gt;'+
						'&lt;div class=&quot;pagelayer-elp-img-up-bar&quot;&gt;&lt;/div&gt;'+
					'&lt;/div&gt;'+
				'&lt;/div&gt;'+
			'&lt;/div&gt;'+
			'&lt;div class=&quot;pagelayer-elp-image pagelayer-retina-mobile&quot; '+style_retina_mobile+'&gt;&lt;/div&gt;'+
			'&lt;div class=&quot;pagelayer-elp-retina-mobile-delete&quot;&gt;&lt;i class=&quot;pli pli-trashcan&quot; &gt;&lt;/i&gt;&lt;/div&gt;'+
		'&lt;/div&gt;';
	}
	
	row.append(div);
	
	if(def == src &amp;&amp; jQuery.isNumeric(imgObj['img'])){
		wp.media.attachment(imgObj['img']).fetch().then(function (data){
			var fetch_url = wp.media.attachment(imgObj['img']).get('url')
			row.find('.pagelayer-elp-image-div .pagelayer-elp-image').css('background-image', 'url(\''+fetch_url+'\')');
			_pagelayer_set_tmp_atts(row, 'url', fetch_url);
		}).fail(function(){
			row.find('.pagelayer-elp-image-div .pagelayer-elp-image').css('background-image', 'url(\''+src+'\')')
		});
	}
	
	if(isRetina){
		if(def == srcRetina &amp;&amp; 'retina' in imgObj &amp;&amp; jQuery.isNumeric(imgObj['retina'])){
			wp.media.attachment(imgObj['retina']).fetch().then(function (data){
				var fetch_url = wp.media.attachment(imgObj['retina']).get('url')
				row.find('.pagelayer-retina').css('background-image', 'url(\''+fetch_url+'\')');
				_pagelayer_set_tmp_atts(row, 'retina-url', fetch_url);
			}).fail(function(){
				row.find('.pagelayer-retina').css('background-image', 'url(\''+srcRetina+'\')')
			});
		}
		
		if(def == srcRetinaMobile &amp;&amp; 'retina_mobile' in imgObj &amp;&amp; jQuery.isNumeric(imgObj['retina_mobile'])){
			wp.media.attachment(imgObj['retina_mobile']).fetch().then(function (data){
				var fetch_url = wp.media.attachment(imgObj['retina_mobile']).get('url')
				row.find('.pagelayer-retina-mobile').css('background-image', 'url(\''+fetch_url+'\')');
				_pagelayer_set_tmp_atts(row, 'retina-mobile-url', fetch_url);
			}).fail(function(){
				row.find('.pagelayer-retina-mobile').css('background-image', 'url(\''+srcRetinaMobile+'\')')
			});
		}
	}
	
	var getImgVal = function(val){
		
		if(typeof val === 'object' &amp;&amp; pagelayer_length(val) == 1 &amp;&amp; 'img' in val){
			return val['img'];
		}
		
		return val;
	}
	
	// Set an Image
	row.find('.pagelayer-elp-image').on('click', function(){
	
		var button = jQuery(this);
		var inRetina = button.hasClass('pagelayer-retina');
		var inRetinaM = button.hasClass('pagelayer-retina-mobile');
		
		// Load the frame
		var frame = pagelayer_select_frame('image');
		
		// On select update the stuff
		frame.on({
			'select': function(){
				
				var state = frame.state();
				var id = url = '';
				
				// External URL
				if('props' in state){
					
					id = url = pagelayer_parse_theme_vars(state.props.attributes.url);
				
				// Internal from gallery
				}else{
				
					var attachment = frame.state().get('selection').first().toJSON();
					
					// Set the new ID and URL
					id = attachment.id;
					url = attachment.url;			
					var old = _pagelayer_img_tmp_atts(row);
					
					//console.log(attachment);
					if(inRetina){
						// To remove past temp attr so that they are not involve in future temp values						
						delete old[prop.c['name']+'-retina-url'];
						
						// Keep a list of all sizes
						for(var x in attachment.sizes){
							_pagelayer_set_tmp_atts(row, 'retina-'+x+'-url', attachment.sizes[x].url);
							delete old[prop.c['name']+'-retina-'+x+'-url'];
						}					
						
						for(var x in old){
							
							// Skip for retina and with url atts
							if(! x.endsWith('-url') || !x.startsWith(prop.c['name']+'-retina') || x.startsWith(prop.c['name']+'-retina-mobile')){
								continue;
							}
							
							_pagelayer_set_tmp_atts(row, x, '');
						}	
						
					}else if(inRetinaM){
						
						// To remove past temp attr so that they are not involve in future temp values	
						delete old[prop.c['name']+'-retina-mobile-url'];
						
						// Keep a list of all sizes
						for(var x in attachment.sizes){
							_pagelayer_set_tmp_atts(row, 'retina-mobile-'+x+'-url', attachment.sizes[x].url);
							delete old[prop.c['name']+'-retina-mobile-'+x+'-url'];
						}

						for(var x in old){
							
							// Skip for retina and with url atts
							if(! x.endsWith('-url') || ! x.startsWith(prop.c['name']+'-retina-mobile')){
								continue;
							}
							
							_pagelayer_set_tmp_atts(row, x, '');
						}						
						
					}else{
					
						// To remove past temp attr so that they are not involve in future temp values
						delete old[prop.c['name']+'-url'];
						
						// Keep a list of all sizes
						for(var x in attachment.sizes){
							_pagelayer_set_tmp_atts(row, x+'-url', attachment.sizes[x].url);
							delete old[prop.c['name']+'-'+x+'-url'];
						}
						
						for(var x in old){
							
							// Skip for retina and with url atts
							if(! x.endsWith('-url') || x.startsWith(prop.c['name']+'-retina')){
								continue;
							}
							
							_pagelayer_set_tmp_atts(row, x, '');
						}
					}	
				}
				
				// Update thumbnail
				button.css('background-image', 'url(\''+url+'\')');
				
				// Save and render
				_pagelayer_set_tmp_atts(row, 'no-image-set', '');
				
				if(inRetina){
					_pagelayer_set_tmp_atts(row, 'retina-url', url);
					imgObj['retina'] = id;
				}else if(inRetinaM){
					_pagelayer_set_tmp_atts(row, 'retina-mobile-url', url);
					imgObj['retina_mobile'] = id;
				}else{
					_pagelayer_set_tmp_atts(row, 'url', url);
					imgObj['img'] = id;
				}
				
				_pagelayer_set_atts(row, getImgVal(imgObj));
				
			},
			// On open select the appropriate images in the media manager
			'open': function() {			
				var selection =  frame.state().get('selection');
				var wp_id = pagelayer_get_att(prop.el.$, prop.c['name']);
				
				if(typeof wp_id === 'object'){
					if(inRetina){
						wp_id = ('retina' in wp_id &amp;&amp; !pagelayer_empty(wp_id['retina']) ? wp_id['retina'] : 0 );
					}else if(inRetinaM){
						wp_id = ('retina_mobile' in wp_id &amp;&amp; !pagelayer_empty(wp_id['retina_mobile']) ? wp_id['retina_mobile'] : 0 );
					}else{
						wp_id = (!pagelayer_empty(wp_id['img']) ? wp_id['img'] : 0 );
					}
				}
				
				selection.reset( wp_id ? [ wp.media.attachment( wp_id ) ] : [] );
			}
		});

		frame.open(button);
		
		return false;
		
	});
	
	// Finding and assigning values in the variables
	var dropzoneParent = row.find('.pagelayer-elp-image-div');
	var dropZone = row.find('.pagelayer-elp-drop-zone');
	
	// Inserting values in image drag and drop function
	pagelayer_img_dragAndDrop(dropzoneParent, dropZone, '', row);	
	
	row.find('.pagelayer-elp-image-retina').click(function(){
		row.find('.pagelayer-retina-label').toggle();
		row.find('.pagelayer-elp-retina-image-div').toggle();
		var checkval = row.find('.pagelayer-retina-checkbox').is(&quot;:checked&quot;);
		
		if(checkval == true){
			row.find('.pagelayer-retina-checkbox').trigger(&quot;click&quot;);
		}
	});
	
	// Save temporarily 
	row.find('.pagelayer-elp-image-ai input').on('change', function(){
		var aiEle = jQuery(this);
		
		var checkval = aiEle.is(&quot;:checked&quot;);
		var ref_data = pagelayer_el_data_ref(prop.el.$);
		
		// Save temporarily in atts for comment feature, it is not saved in original content
		if(checkval == true){
			ref_data['attr'][prop.c['name']+'_ai'] = false;
		}else{
			delete ref_data['attr'][prop.c['name']+'_ai'];
		}
		pagelayer_el_dump_data(prop.el.$);
		
	});
	
	row.find('.pagelayer-retina-checkbox').click(function(){
		row.find('.pagelayer-elp-retina-mobile-image-div').toggle();
	});
		
	// Delete this
	row.find('.pagelayer-elp-image-delete').on('click', function(){
		
		// Update thumbnail
		jQuery(this).parent().find('.pagelayer-elp-image').css('background-image', 'url(\''+def+'\')');
		
		// Set to blank and render
		_pagelayer_set_atts(row, '', true);
				
		imgObj['img'] = def;
		
		_pagelayer_set_tmp_atts(row, 'no-image-set', 1);
		_pagelayer_set_tmp_atts(row, 'url', def);
		_pagelayer_set_atts(row, getImgVal(imgObj));
	});
	
	row.find('.pagelayer-elp-retina-delete').on('click', function(){
		// Update thumbnail
		jQuery(this).parent().find('.pagelayer-elp-image').css('background-image', 'url(\''+def+'\')');
		delete imgObj['retina'];
    
		_pagelayer_set_tmp_atts(row, 'retina-url', def);
		_pagelayer_set_atts(row, getImgVal(imgObj));
		
	});
	
	row.find('.pagelayer-elp-retina-mobile-delete').on('click', function(){
		
		// Update thumbnail
		jQuery(this).parent().find('.pagelayer-elp-image').css('background-image', 'url(\''+def+'\')');
		delete imgObj['retina_mobile'];
		
		// Set to blank and render
		_pagelayer_set_tmp_atts(row, 'retina-mobile-url', def);
		_pagelayer_set_atts(row, getImgVal(imgObj));
		
	});
}

// Main image drag and drop function
function pagelayer_img_dragAndDrop(dropzoneParent, dropZone, jEle, row){
	
	var reset_dragging = false;
	
	dropzoneParent.on('dragover', function(e){
		e.preventDefault();
		// Checking that the dragged element is a file or not
		var dt = e.originalEvent.dataTransfer;
		if(dt.types &amp;&amp; (dt.types.indexOf ? dt.types.indexOf('Files') != -1 : dt.types.contains('Files'))){
			if(e.originalEvent.dataTransfer.items[0].type.search('image/')!=-1){
				dropZone.show();
				reset_dragging = true;				
			}
		}
	});
	
	dropzoneParent.on('dragleave', function(e){
		var rect = this.getBoundingClientRect();
		// Checking that the cursor is in the drag area or not
		if (e.clientX &gt;= (rect.left + rect.width) || e.clientX &lt;= rect.left || e.clientY &gt;= (rect.top + rect.height) || e.clientY &lt;= rect.top) {
			dropZone.hide();
			reset_dragging = false;
        }
	});
	
	dropzoneParent.on('drop', function(e){
		
		// Is not dropable?
		if(!reset_dragging){
			return;
		}
		
		e.preventDefault();
		var pagelayer_ajax_func = {};
		
		// This function for ajax success call back
		pagelayer_ajax_func['success'] = function(obj){
			
			if(obj['success']){
					
				// Set the new ID and URL
				id = obj['data']['id'];
				url = obj['data']['url'];
				
				if(row == ''){
					// Getting Id of jEle 
					var widgetid = jEle.closest('[pagelayer-id]').attr('pagelayer-id');
					
					// Finding widget image setting using id of jEle. Finding image editor setting from all of the other settings.
					row = pagelayer.$$('[pagelayer-element-id='+widgetid+']').find('.pagelayer-elp-image').eq(0).parent().parent();
				}
				
				row.find('.pagelayer-elp-image').css('background-image', 'url(\''+url+'\')');
							
				// To remove past temp attr so that they are not involve in future temp values
				var cname = row.attr('pagelayer-elp-name');
				var old = _pagelayer_img_tmp_atts(row);
				delete old[cname+'-url'];
				
				for(var x in obj['data']['sizes']){
					_pagelayer_set_tmp_atts(row, x+'-url', obj['data']['sizes'][x]['url']);
					delete old[cname+'-'+x+'-url'];
				}
				
				for(var x in old){
					_pagelayer_set_tmp_atts(row, x+'-url', '');
				}
				
				dropZone.find('.pagelayer-elp-img-up-bar').css('width', '3%');
				dropZone.hide();
				
				// Save and render
				_pagelayer_set_tmp_atts(row, 'url', url);
				_pagelayer_set_atts(row, id);
				
			}else{
				alert(obj['data']['message']);								
			}
		}
		
		// This function for ajax before send call back
		pagelayer_ajax_func['beforeSend'] = function(xhr){
			// It activate the image widget
			if(row == ''){
				jEle.click();							
			}
		}
		
		// This function for how much file is uploaded or for progress bar
		pagelayer_ajax_func['uploadProgress'] = function(xhr){
			xhr.upload.addEventListener(&quot;progress&quot;, function(evt) {
				if (evt.lengthComputable) {
					var percentComplete = evt.loaded / evt.total;
					percentComplete = parseInt(percentComplete * 100);
					
					if(row == ''){
						dropZone.find('.pagelayer-img-up-bar').css('width', percentComplete+'%');					
					}else{
						dropZone.find('.pagelayer-elp-img-up-bar').css('width', percentComplete+'%');											
					}
				}
			}, false);
			return xhr;
		}
		
		// Uploading image to the media library
		pagelayer_editable_paste_handler(e.originalEvent.dataTransfer.files[0], pagelayer_ajax_func);
		
		reset_dragging = false;
		
	});
}	

// The Multi Image Property
function pagelayer_elp_multi_image(row, prop){
	
	var div = '&lt;div class=&quot;pagelayer-elp-multi_image-div&quot;&gt;'+
				'&lt;center&gt;&lt;button class=&quot;pagelayer-elp-button&quot;&gt;'+pagelayer_l('Add Images')+'&lt;/button&gt;&lt;/center&gt;'+
				'&lt;div class=&quot;pagelayer-elp-multi_image-thumbs&quot;&gt;&lt;/div&gt;'+
			'&lt;/div&gt;';
			
	row.append(div);
	
	var tmp = prop.c['name']+'-urls';
	var ids = new Array();
	
	// Any IDs ?
	if(!pagelayer_empty(prop.c['val'])){
		ids = prop.c['val']
		if(pagelayer_is_string(ids)){
			ids = prop.c['val'].split(',');
		}
		//console.log(ids);
	}
	
	// Do we have a URL set ?
	if(!pagelayer_empty(ids)){
		if(tmp in prop.el.tmp){
			var images = JSON.parse(prop.el.tmp[tmp]);
			//console.log(images);
			
			for(var x in ids){
				row.find('.pagelayer-elp-multi_image-thumbs').append('&lt;div class=&quot;pagelayer-elp-multi_image-thumb&quot; style=&quot;background-image: url(\''+images['i'+ids[x]]+'\');&quot;&gt;&lt;/div&gt;');
			}
		}else{
			wp.media.query({ post__in: ids }).more().then(function(){
				// You attachments here normally
				// You can safely use any of them here
				// TODO: Set tmp here
				for(var x in ids){
					var fetch_url = wp.media.attachment(ids[x]).get('url');
					if(!pagelayer_empty(fetch_url)){
						row.find('.pagelayer-elp-multi_image-thumbs').append('&lt;div class=&quot;pagelayer-elp-multi_image-thumb&quot; style=&quot;background-image: url(\''+fetch_url+'\');&quot;&gt;&lt;/div&gt;');
					}
				}
			});
		}
	}
	
	var pagelayer_init_frame = function(state){
	
		var button = row.find('.pagelayer-elp-multi_image-thumbs');
		//console.log(ids);
		
		// Load the frame
		var frame = pagelayer_select_frame('multi_image', state);
		
		frame.on({
			
			'select': function(){
				
				var state = frame.state();
				var id = url = '';
				var urls = {};
				
				// External URL
				if('props' in state){
					//console.log(state);
					var urls_str = state.props.attributes.url;
					
					var urls_arr = urls_str.split(',');
					//console.log(urls_arr);
					
					button.empty();
					
					// Add to current selection
					for(var i = 0; i &lt; urls_arr.length; i++){
						var single_url = pagelayer_parse_theme_vars(urls_arr[i]);
						urls['i'+i] = single_url;
						
						// Create thumbnails
						button.append('&lt;div class=&quot;pagelayer-elp-multi_image-thumb&quot; style=&quot;background-image: url(\''+single_url+'\');&quot;&gt;&lt;/div&gt;');
					}
					urls_arr = Object.values(urls);
					
					_pagelayer_set_tmp_atts(row, 'urls', JSON.stringify(urls));
					_pagelayer_set_atts(row, urls_arr.join());
					
				}
			},
			
			// Set the current selection if any
			'open': function(){

				// Do we have anything
				if(!pagelayer_empty(ids)){
					
					var selection = '';
					
					if(state == 'gallery-edit'){
						selection = frame.state().get('library');
					}else if(state == 'gallery-library'){
						selection = frame.state().get('selection');
					}
					
					// Add to current selection
					if(!pagelayer_empty(selection)){
						for(var x in ids){
							attachment = wp.media.attachment(ids[x]);
							attachment.fetch();
							selection.add(attachment ? [ attachment ] : [] );
						}
					}
				}
			},
			
			// When images are selected
			'update': function(selection){
				
				//console.log(selection);
				
				// Remove thumbnails
				row.find('.pagelayer-elp-multi_image-thumb').remove();
				
				//Fetch selected images
				var attachments = selection.map(function(attachment){
					attachment.toJSON();
					return attachment;
				});
				
				//console.log(attachments);
				
				var img_ids = [];
				var urls = {};
				var img_urls = {};
				var titles = {};
				var links = {};
				var captions = {};
				
				for(var i = 0; i &lt; attachments.length; ++i){
					
					// Add Id and urls to array
					var id = attachments[i].id;
					var _id = 'i'+id;
					img_ids.push(id);
					urls[_id] = attachments[i].attributes.url;
					
					// Create thumbnails
					button.append('&lt;div class=&quot;pagelayer-elp-multi_image-thumb&quot; style=&quot;background-image: url(\''+attachments[i].attributes.url+'\');&quot;&gt;&lt;/div&gt;');
					
					//get title
					titles[_id] = attachments[i].attributes.title;
					links[_id] = attachments[i].attributes.link;
					captions[_id] = attachments[i].attributes.caption;
					
					// Create a URL
					img_urls[_id] = {}
					
					for(var x in attachments[i].attributes.sizes){
						img_urls[_id][x] = attachments[i].attributes.sizes[x].url;
					}
					
				}
				
				//console.log(img_urls);
				
				// Save and render
				_pagelayer_set_tmp_atts(row, 'urls', JSON.stringify(urls));
				_pagelayer_set_tmp_atts(row, 'all-urls', JSON.stringify(img_urls));
				_pagelayer_set_tmp_atts(row, 'all-titles', JSON.stringify(titles));
				_pagelayer_set_tmp_atts(row, 'all-links', JSON.stringify(links));
				_pagelayer_set_tmp_atts(row, 'all-captions', JSON.stringify(captions));
				_pagelayer_set_atts(row, img_ids);
				
				// Update the IDs incase the user clicks on it again
				ids = img_ids;
				
			}
			
		});
		
		frame.open(button);
		
		return false;
		
	};
	
	row.find('.pagelayer-elp-multi_image-thumbs').on('click', function(){
		pagelayer_init_frame('gallery-edit');
	});
	
	row.find('.pagelayer-elp-button').on('click', function(){
		
		if(!pagelayer_empty(ids)){
			if(isNaN(ids[0])){
				pagelayer_init_frame('embed');
			}else{
				pagelayer_init_frame('gallery-library');
			}
		}else{
			pagelayer_init_frame('gallery');
		}		
	});
	
}

// The Video Property
function pagelayer_elp_video(row, prop){
	
	var tmp = prop.c['name']+'-url';
	var src = (tmp in prop.el.tmp) ? prop.el.tmp[tmp] : prop.c['val'];
	
	var div = '&lt;div class=&quot;pagelayer-elp-video-div pagelayer-elp-input-icon&quot;&gt;'+
				'&lt;input class=&quot;pagelayer-elp-video&quot; name=&quot;'+prop.c['name']+'&quot; type=&quot;text&quot; value=&quot;'+src+'&quot;&gt;'+
				'&lt;i class=&quot;pli pli-folder-open&quot; &gt;&lt;/i&gt;'+
			'&lt;/input&gt;&lt;/div&gt;';
			
	row.append(div);
	
	row.find('.pagelayer-elp-video-div .pli').on('click', function(){
	
		var button = jQuery(this);
		
		// Load the frame
		var frame = pagelayer_select_frame('video');
		
		// On select update the stuff
		frame.on({
			
			'select': function(){
				
				var state = frame.state();
				var id = url = '';
				
				// External URL
				if('props' in state){
					
					id = url = pagelayer_parse_theme_vars(state.props.attributes.url);
				
				// Internal from gallery
				}else{
				
					var attachment = frame.state().get('selection').first().toJSON();
					//console.log(attachment);
					
					id = attachment.id;
					url = attachment.url;
				
				}
				
				// Update URL
				button.prev().val(url);
				
				// Save and render
				_pagelayer_set_tmp_atts(row, 'url', url);
				_pagelayer_set_atts(row, id);
				
			}
			
		});

		frame.open(button);
		
		return false;
		
	});
	
	// Edited the video URL directly
	row.find('.pagelayer-elp-video').on('change', function(){
		
		var input = jQuery(this);
		
		// Set the new URL
		_pagelayer_set_tmp_atts(row, 'url', input.val());
		_pagelayer_set_atts(row, input.val());
		
	});
	
}


// The Audio Property
function pagelayer_elp_audio(row, prop){
	
	var tmp = prop.c['name']+'-url';
	var src = (tmp in prop.el.tmp) ? prop.el.tmp[tmp] : prop.c['val'];
	
	var div = '&lt;div class=&quot;pagelayer-elp-audio-div pagelayer-elp-input-icon&quot;&gt;'+
				'&lt;input class=&quot;pagelayer-elp-audio&quot; name=&quot;'+prop.c['name']+'&quot; type=&quot;text&quot; value=&quot;'+src+'&quot; /&gt;'+
				'&lt;i class=&quot;pli pli-menu&quot; &gt;&lt;/i&gt;'+
			'&lt;/div&gt;';
	
	row.append(div);
	
	// Choose from media
	row.find('.pagelayer-elp-audio-div .pli').on('click', function(){
		
		var button = jQuery(this);
		
		// Load the frame
		var frame = pagelayer_select_frame('audio');
		
		frame.on({
			
			'select': function(){
				
				var state = frame.state();
				var id = url = '';
				
				// External URL
				if('props' in state){
					
					id = url = pagelayer_parse_theme_vars(state.props.attributes.url);
				
				// Internal from gallery
				}else{
				
					var attachment = frame.state().get('selection').first().toJSON();
					//console.log(attachment);
					
					id = attachment.id;
					url = attachment.url;
				
				}
				
				// Update URL
				button.prev().val(url);
				
				// Save and render
				_pagelayer_set_tmp_atts(row, 'url', url);
				_pagelayer_set_atts(row, id);
				
			}
			
		});
		
		frame.open(button);
		
		return false;
		
	});
	
	// Edited the media URL directly
	row.find('.pagelayer-elp-audio').on('change', function(){
		
		var input = jQuery(this);
		
		// Set the new URL
		_pagelayer_set_tmp_atts(row, 'url', input.val());
		_pagelayer_set_atts(row, input.val());
		
	});
	
}

// The Media Property
function pagelayer_elp_media(row, prop){
	
	var tmp = prop.c['name']+'-url';
	var src = (tmp in prop.el.tmp) ? prop.el.tmp[tmp] : prop.c['val'];
	
	var div = '&lt;div class=&quot;pagelayer-elp-media-div pagelayer-elp-input-icon&quot;&gt;'+
				'&lt;input class=&quot;pagelayer-elp-media&quot; value=&quot;'+src+'&quot; type=&quot;text&quot; /&gt;'+
				'&lt;i class=&quot;pli pli-menu&quot; &gt;&lt;/i&gt;'+
			'&lt;/div&gt;';
	
	row.append(div);
	
	row.find('.pagelayer-elp-media-div .pli-menu').on('click', function(){
		
		var button = jQuery(this);
		
		// Load the frame
		var frame = pagelayer_select_frame('media');
		
		frame.on({
			
			'select': function(){
				
				var state = frame.state();
				var id = url = '';
				
				// External URL
				if('props' in state){
					
					id = url = pagelayer_parse_theme_vars(state.props.attributes.url);
				
				// Internal from gallery
				}else{
				
					var attachment = frame.state().get('selection').first().toJSON();
					//console.log(attachment);
					
					id = attachment.id;
					url = attachment.url;
				
				}
				
				// Update URL
				button.prev().val(url);
				
				// Save and render
				_pagelayer_set_tmp_atts(row, 'url', url);
				_pagelayer_set_atts(row, id);
				
			}
			
		});
		
		frame.open(button);
		
		return false;
		
	});
	
	// Edited the media URL directly
	row.find('.pagelayer-elp-media').on('change', function(){
		
		var input = jQuery(this);
		
		// Set the new URL
		_pagelayer_set_tmp_atts(row, 'url', input.val());
		_pagelayer_set_atts(row, input.val());
		
	});
	
}

// The Slider Property
function pagelayer_elp_slider(row, prop){
	
	var div = '&lt;div class=&quot;pagelayer-elp-slider-div&quot;&gt;'+
				  '&lt;input type=&quot;range&quot; class=&quot;pagelayer-elp-slider&quot; value=&quot;'+parseFloat(prop.c['val'])+'&quot; min=&quot;'+prop['min']+'&quot; max=&quot;'+prop['max']+'&quot; step=&quot;'+prop['step']+'&quot;/&gt;'+
				  '&lt;input type=&quot;number&quot; class=&quot;pagelayer-elp-slider-value&quot; value=&quot;'+parseFloat(prop.c['val'])+'&quot; min=&quot;'+prop['min']+'&quot; max=&quot;'+prop['max']+'&quot; step=&quot;'+prop['step']+'&quot;/&gt;'+
				'&lt;/div&gt;'+
			'&lt;/div&gt;';
	
	row.append(div);
	
	// Set an value in span
	row.find('.pagelayer-elp-slider-div input').on('input', function(){
		var value = parseFloat(this.value);
		var max = parseFloat(this.max);
		
		if(!pagelayer_empty(max) &amp;&amp; value &gt; max){
			value = max;
		}
		row.find('.pagelayer-elp-slider-div input').val(value);
		
		_pagelayer_set_atts(row, value);// Save and Render
		
	});
	
}

// The Editor proprety
function pagelayer_elp_editor(row, prop){
	
	var rows = prop.rows ? prop.rows : '8';
	
	var div = '&lt;div class=&quot;pagelayer-elp-editor-div&quot;&gt;'+
				'&lt;textarea rows=&quot;'+rows+'&quot; class=&quot;pagelayer-elp-editor&quot; &gt;&lt;/textarea&gt;'+
			'&lt;/div&gt;';
			
	row.append(div);
	
	var editor = row.find('.pagelayer-elp-editor');
	editor.val(prop.c['val']);
	
	// Handle on change
	editor.on('input', function(){
		_pagelayer_set_atts(row, pagelayer_trim(jQuery(this).val()));// Save and Render
	});
	
	return;
	// No SVG Icons for now
	jQuery.trumbowyg.svgPath = false;
	
	// Initiate the editor
	editor.trumbowyg({
		autogrow: false,
		hideButtonTexts: true,
		btns:[
			['viewHTML'],
			['wpmedia'],
			['fontfamily'],
			['formatting'],
			['undo', 'redo'], // Only supported in Blink browsers
			['fontsize'],
			['lineheight'],
			['foreColor', 'backColor',],
			['strong', 'em', 'del'],
			['horizontalRule'],
			['superscript', 'subscript'],
			['link'],
			['unorderedList', 'orderedList'],
			['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],
			['removeformat'],
			['fullscreen']
		],
		plugins: {
			fontsize: {
				sizeList: ['12px','13px','14px','15px','16px','17px','18px','19px','20px','21px','22px','23px','24px','25px']
			}
		},
		imageWidthModalEdit: true,
		
	// Handle the changes made in the editor
	}).on('tbwchange', function(){
		_pagelayer_set_atts(row, editor.trumbowyg('html'));// Save and Render
	});
	
}

// The Link proprety
function pagelayer_elp_link(row, prop){

	var values = {};
	var settingOpt = false;
	
	// Show link options?
	if('selector' in prop){
		settingOpt = true;
	}
  
	// Previously saved values
	if(typeof prop.c['val'] === 'object'){
		values = prop.c['val'];
	}else{
		values['link'] = prop.c['val'];
	}
	  
	var tmp = prop.c['name'];
	var link = (tmp in prop.el.tmp) ? prop.el.tmp[tmp] : values['link'];
	var jEle = jQuery('[pagelayer-id='+prop.el.id+']');
	
	var div = '&lt;div class=&quot;pagelayer-elp-link-div pagelayer-elp-input-icon '+(settingOpt ? '' : 'pagelayer-elp-link-no-addons')+'&quot;&gt;'+
		'&lt;input class=&quot;pagelayer-elp-link&quot; type=&quot;text&quot; value=&quot;'+link+'&quot; /&gt;'+
		'&lt;i class=&quot;pli pli-service pagelayer-elp-link-icon&quot; title=&quot;'+pagelayer_l('link_options')+'&quot; &gt;&lt;/i&gt;'+
		'&lt;div class=&quot;pagelayer-elp-link-list&quot;&gt;'+
		'&lt;/div&gt;';
		
		if(settingOpt){
			div += '&lt;div class=&quot;pagelayer-elp-link-addons&quot;&gt;'+
				'&lt;div  class=&quot;pagelayer-elp-link-cb-div&quot;&gt;'+
					'&lt;div class=&quot;pagelayer-elp-link-label-div&quot; type=&quot;'+prop['type']+'&quot;&gt;'+
						'&lt;label class=&quot;pagelayer-elp-link-label&quot;&gt;'+pagelayer_l('open_link_in_new_window')+'&lt;/label&gt;'+
					'&lt;/div&gt;'+
					'&lt;div&gt;'+
						'&lt;input type=&quot;checkbox&quot; name=&quot;link_new_tab&quot; class=&quot;pagelayer-elp-checkbox&quot; '+(!pagelayer_empty(values['target']) ? 'checked=&quot;checked&quot;' : '')+' /&gt;'+
					'&lt;/div&gt;'+
				'&lt;/div&gt;'+
				'&lt;div class=&quot;pagelayer-elp-link-cb-div&quot; &gt;'+
					'&lt;div class=&quot;pagelayer-elp-link-label-div&quot; type=&quot;'+prop['type']+'&quot;&gt;'+
						'&lt;label class=&quot;pagelayer-elp-link-label&quot;&gt;'+pagelayer_l('add_nofollow')+'&lt;/label&gt;'+
					'&lt;/div&gt;'+
					'&lt;div&gt;'+
						'&lt;input type=&quot;checkbox&quot; name=&quot;link_no_follow&quot; class=&quot;pagelayer-elp-checkbox&quot; '+(!pagelayer_empty(values['rel']) ? 'checked=&quot;checked&quot;' : '')+'/&gt;'+
					'&lt;/div&gt;'+
				'&lt;/div&gt;'+
				'&lt;div class=&quot;pagelayer-elp-link-ca&quot; &gt;'+
					'&lt;div class=&quot;pagelayer-elp-link-label-div&quot; type=&quot;'+prop['type']+'&quot;&gt;'+
						'&lt;label class=&quot;pagelayer-elp-link-label&quot;&gt;'+pagelayer_l('custom_attributes')+'&lt;/label&gt;'+
					'&lt;/div&gt;'+
					'&lt;div&gt;'+
						'&lt;input type=&quot;text&quot; class=&quot;pagelayer-elp-text&quot; placeholder=&quot;key = value&quot; name=&quot;'+prop.c['name']+'&quot; value=&quot;'+(pagelayer_empty(values['attrs']) ? '' : values['attrs'])+'&quot;/&gt;'+
						'&lt;p class=&quot;pagelayer-elp-link-desc&quot;&gt;'+pagelayer_l('link_custom_attr_desc')+'&lt;/p&gt;'+
					'&lt;/div&gt;'+
				'&lt;/div&gt;'+
			'&lt;/div&gt;';
		}
		
	div += '&lt;/div&gt;';
	
	row.append(div);
	
	var listWrap = row.find('.pagelayer-elp-link-list');
	var time = null;
		
	//Add ID
	var addID = function(permaID){
		permaID = permaID || false;
		
		var lDiv = row.closest('[pagelayer-elp-name]').find('.pagelayer-elp-label-div');
		if(permaID){
			lDiv = lDiv.find('.pagelayer-elp-label');
			lDiv.after('&lt;span class=&quot;pagelayer-elp-link-id&quot;&gt;ID : '+permaID+'&lt;/span&gt;');
		}else{
			lDiv.find('.pagelayer-elp-link-id').remove();
		}
	};
	
	if(!isNaN(values['link'])){
		addID(values['link']);
	}
	
	var getLinkVal = function(val){
		
		if(typeof val === 'object' &amp;&amp; pagelayer_length(val) == 1 &amp;&amp; 'link' in val){
			return val['link'];
		}
		
		return val;
	}
	
	var setTmpEmpty = function(){
		
		if( 'link' in values &amp;&amp; !pagelayer_empty(values['link']) ){
			return;
		}
		
		_pagelayer_set_tmp_atts(row, '', '');
	}
	
	// Set a Link
	row.find('.pagelayer-elp-link').on('change', function(){
		
		var linkVal = jQuery(this).val();
		values['link'] = linkVal;
    
		// Save and Render
		_pagelayer_set_tmp_atts(row, '', linkVal);
		_pagelayer_set_atts(row, getLinkVal(values));
		
		// Remove ID Holder
		addID();

	});
	
	// Set a Link
	row.find('.pagelayer-elp-link').on('input click', function(e){
		e.stopPropagation();
		
		if(!listWrap.is(':visible')){
			listWrap.show();
		}
		
		var val = jQuery(this).val();
		
		clearTimeout(time);
		time = setTimeout(function(){

			jQuery.ajax({
				url: pagelayer_ajax_url,
				type: 'post',
				data:{
					'action' : 'wp-link-ajax',
					'_ajax_linking_nonce' : pagelayer_internal_linking_nonce,
					'search' : val,
				},
				success: function(response) {
					
					var data = jQuery.parseJSON(response);
					var html = '';
					//console.log('Link Data');console.log(response);
					
					if(pagelayer_empty(data)){
						html = pagelayer_l('custom_url');
						// Remove ID Holder
						addID();
					}else if(typeof data === 'object'){
						
						for(var key in data){
							var vals = data[key];
							html += '&lt;div class=&quot;pagelayer-elp-link-item&quot;  data-id=&quot;'+vals['ID']+'&quot; data-permalink=&quot;'+vals['permalink']+'&quot;&gt;'+
								'&lt;div class=&quot;pagelayer-elp-link-title&quot;&gt;'+
									'&lt;span class=&quot;pagelayer-elp-link-item-title&quot; title=&quot;'+vals['title']+'&quot;&gt;'+vals['title']+'&lt;/span&gt;'+
									'&lt;span class=&quot;pagelayer-elp-link-item-perma&quot; title=&quot;'+vals['permalink']+'&quot;&gt;'+vals['permalink']+'&lt;/span&gt;'+
								'&lt;/div&gt;'+
								'&lt;div class=&quot;pagelayer-elp-link-info&quot;&gt;'+
									'&lt;span title=&quot;'+vals['info']+'&quot;&gt;'+vals['info']+'&lt;/span&gt;'+
								'&lt;/div&gt;'+
							'&lt;/div&gt;';
						}
					}
					
					listWrap.html(html);
				},
				fail: function(data) {
					listWrap.html('Some error occured in getting the link data');
				}
			});
			
		}, 200);
		
	});
	
	listWrap.on('click', function(e){
		e.stopPropagation();
		
		var lEle = jQuery(e.target).closest('.pagelayer-elp-link-item');
		
		// IF item not found
		if(lEle.length &lt; 1){
			return;
		}
		
		var perma = lEle.attr('data-permalink');
		var ID = lEle.attr('data-id');
		values['link'] = ID;
		
		// Save and Render
		row.find('.pagelayer-elp-link').val(perma);
		_pagelayer_set_tmp_atts(row, '', perma);
		_pagelayer_set_atts(row, getLinkVal(values));
		
		listWrap.hide();
		
		// Show ID
		addID(ID);
	});
	
	pagelayer.gDocument.on('click', function(e){
		listWrap.hide();
	});
	
	row.find('.pagelayer-elp-checkbox').on('change', function(event){
		
		var cEle = jQuery(this);
		
		// Save or delete the value
		var saveVal = function(key){
			if(cEle.is(':checked')){
				values[key] = true;
				return;
			}
			
			delete values[key];
		}
				
		switch(cEle.attr('name')){
			case 'link_new_tab':
				saveVal('target');
				break;
			case 'link_no_follow':
				saveVal('rel');
				break;
		}
		
		setTmpEmpty();
		_pagelayer_set_atts(row, getLinkVal(values));
		
	});
	
	var linkTime = '';
	row.find('.pagelayer-elp-text').on('input', function(event){
		var cEle = jQuery(this);
		
		clearTimeout(linkTime);
		linkTime = setTimeout(function(){
			values['attrs'] = cEle.val();
			
			if(pagelayer_empty(values['attrs'])){
				delete values['attrs'];
			}
			
			setTmpEmpty();
			_pagelayer_set_atts(row, getLinkVal(values));
			
		}, 500);
	});
	
	row.find('.pagelayer-elp-link-icon').on('click', function(){
		row.find('.pagelayer-elp-link-addons').slideToggle('slow');
	});
  
}

// The Textarea property
function pagelayer_elp_textarea(row, prop){
	
	var rows = prop.rows ? 'rows=&quot;'+prop.rows+' &quot;' : '';
	
	var div = '&lt;div class=&quot;pagelayer-elp-textarea-div&quot;&gt;'+
				'&lt;textarea '+rows+'class=&quot;pagelayer-elp-textarea&quot;&gt;&lt;/textarea&gt;'+
			'&lt;/div&gt;';
			
	row.append(div);
	row.find('.pagelayer-elp-textarea').val(prop.c['val']);
  
	// Handle on change
	row.find('.pagelayer-elp-textarea').on('input', function(){
		_pagelayer_set_atts(row, pagelayer_trim(jQuery(this).val()));// Save and Render
	});
};

// Clear all editable
function pagelayer_clear_editable(dontDestroy){
	
	// Destroy all
	for(var x in pagelayer_editor){
		if(dontDestroy == x){
			console.log('Skipping '+dontDestroy);
			continue;
		}
		pagelayer_editor[x].pen.destroy();
	}
	
};

// Makes a field editable in the DOM
function pagelayer_make_editable(jEle, e){
	
	// The parent element
	var pEle = jEle.closest('.pagelayer-ele, [pagelayer-ref-id]');
	
	// Mainly for editing table cells as pagelayer-ref-id is used by them
	if(!pEle.hasClass('pagelayer-ele')){
		var refID = pEle.attr('pagelayer-ref-id');
		pEle = jQuery('[pagelayer-id=&quot;'+refID+'&quot;]');
	}
	
	var prop = jEle.attr('pagelayer-editable');
	var eId = pagelayer_id(pEle)+'|'+jEle.attr('pagelayer-editable');// Editing ID
	
	// Is it already setup ?
	if(jEle.hasClass('pagelayer-pen')){
		//console.log('Already Penned');
		//pagelayer_focus_editable(jEle, e, eId);
		return true;
	}
	
	var tag = pagelayer_tag(pEle);
	var all_props = pagelayer_shortcodes[tag];
	var edit_opts;
	var fullEdit = false;
	
	for(var i in pagelayer_tabs){
		var tab = pagelayer_tabs[i];
		for(var section in all_props[tab]){	//console.log(tab+' '+section);
	
			var props = section in pagelayer_shortcodes[tag] ? pagelayer_shortcodes[tag][section] : pagelayer_styles[section];//console.log(props);
	
			// Any editor options?
			if(prop in props){
				
				if('e' in props[prop]){
					edit_opts = props[prop].e;
				}
				
				if(props[prop]['type'] == 'editor'){
					fullEdit = true;
				}
			}
		}
	}
	
	var pen_tools = {
		'inline': [ 'viewHTML',
			{'formating' : ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p']},
			'bold', 'italic', 'underline', 'strike',
			{ 'color': [] }, { 'background': [] },
			'removeformat'
		],
		'h': ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
		'headers': [{'formating' : ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']}],
		'c': [{ 'color': [] }, { 'background': [] }],
		'f': ['bold', 'italic', 'underline', 'strike'],
		'a': [{ 'align': ['left', 'center', 'right', 'justify'] }],
		'r': ['removeformat'],
		'v': ['viewHTML'],
	};
	
	// Create Toolbar Groups
	if(!('pen_tools' in pagelayer_editor)){
		pagelayer_editor['pen_tools'] = {};
	}
	
	pagelayer_editor['pen_tools'] = Object.assign(pagelayer_editor['pen_tools'], pen_tools);
	
	var toolbar_options = [];
	
	if( pagelayer_empty(edit_opts) ){
		
		if(fullEdit){
			toolbar_options = [
				[ 'viewHTML' ],
				[ 'bold', 'italic', 'underline', 'strike' ],
				[ 'sub', 'super' ],
				//[ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'blockquote'],
				[ {'formating' : ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'blockquote']}],
				[ {'align': ['left', 'center', 'right', 'justify']} ],
				[ 'image', 'link'],
				[ 'unorderedlist', 'orderedlist'],
				[ {'size': []}, {'lineheight': []}, {'font': []}],
				[ {'color': [] }, {'background': []}],
				[ 'removeformat' ]
			];
		}else{
			toolbar_options = pagelayer_editor.pen_tools['inline'];
		}
	}else{
		var options = [];
		
		if(! Array.isArray(edit_opts) ){
			edit_opts = [edit_opts];
		}
		
		for( var tt in edit_opts){
			
			var tool = edit_opts[tt];
			
			if(pagelayer_is_string(tool)){
				if(tool in pagelayer_editor['pen_tools']){
					tool = pagelayer_editor['pen_tools'][tool]
				}else{
					tool = [tool];
				}
			}
			
			options.push(tool);
		}
		
		toolbar_options = options;
	}
	
	var options = {
		class: 'pagelayer-pen',
		editor: jEle,
		toolbar: toolbar_options
	}
	
	// Setup the editor	
	pagelayer_editor[eId] = {};
	pagelayer_editor[eId].pen = new PagelayerPen(jEle, options);
	pagelayer_editor[eId].$ = jEle;
	
	// Are we the clicked object, then set the focus
	if(e){
		var target = jQuery(e.target);
		if(target.is(jEle) || jEle.find(target).length &gt; 0){
			jEle.focus();
		}
	}
	
	// Reverse setup the event
	jEle.on('blur', function(){
		
		//pagelayer_editor[eId].pen.destroy();
		if(jEle.hasClass('pagelayer-pen-focused')){
			return;
		}
		
		var cEle = pEle;
		
		// Do we have a parent ?
		var have_parent = function(Ele){
			var pId = pagelayer_get_parent(Ele);
					
			if(pagelayer_empty(pId)){
				return;
			}
			
			cEle = pagelayer_ele_by_id(pId);
			have_parent(cEle);
		}
		
		have_parent(cEle);
		
		var is_global = pagelayer_get_global_id(cEle);
				
		if(pagelayer_empty(is_global)){
			return;
		}
    
		pagelayer_sc_render(pEle);
		
	});
	
	/*// Reverse setup the event
	jEle.on('focus', function(){
		//pagelayer_clear_editable(eId);
	});*/
	
	// Reverse setup the event
	jEle.on('input', function(){
		
		var val = pagelayer_trim(jEle.html());
		
		// Set the property as well
		pagelayer_set_atts(pEle, prop, val);
		
		// Update the property
		var input = pagelayer.$$('[pagelayer-element-id='+pagelayer_id(pEle)+']').find('[pagelayer-elp-name='+prop+']').find('input,textarea,.trumbowyg-editor');
		//console.log(input);
		
		if(input.length &gt; 0){
			if(input.hasClass('trumbowyg-editor')){
				input.html(val);
			}else{
				input.val(val);
			}
		}
	
	});
	
}

// The Icon Property
function pagelayer_elp_icon(row, prop){
	
	var $ = jQuery;
	var sets_html = '';
	
	pagelayer_loaded_icons.forEach(function(item){
		sets_html += '&lt;option name=&quot;'+item+'&quot; value=&quot;'+item+'&quot;&gt;'+item+'&lt;/option&gt;';
	});
	
	var icons = {};
	var cur_icon_set = pagelayer_loaded_icons[0];
	var sel_icon = prop.c['val'];
	var sel_name = prop.c['val'];
	var icon_type = '';
	var sorted_icons = {};
	
	// Handle the icon name 
	var icon_name = sel_icon.split(' fa-');
	sel_name = icon_name[1];
	
	// Is there a specific list
	if('list' in prop &amp;&amp; prop.list.length &gt; 0){
		
		for(var i in pagelayer_icons){
			
			icons[i] = {};
			
			for(var j in pagelayer_icons[i]){
				
				icons[i][j] = {};
				var list_icons = [];
				prop.list.forEach(function(item){
					if(pagelayer_icons[i][j]['icons'].includes(item)){
						list_icons.push(item);
					}
					
				});
				icons[i][j]['icons'] = list_icons;
				icons[i][j]['pre'] = j;
			}
			
		}
	
	}else{
		icons = pagelayer_icons;
	}
	
	// Icon function
	var icon_html = function(name, cat){
		return '&lt;span class=&quot;pagelayer-elp-icon-span&quot;&gt;'+
			'&lt;i class=&quot;'+cat+' fa-'+name+'&quot; icon=&quot;'+name+'&quot; &gt;&lt;/i&gt; '+name+
		'&lt;/span&gt;';
	}
	
	var div = '&lt;div class=&quot;pagelayer-elp-icon-div&quot;&gt;'+
		'&lt;div class=&quot;pagelayer-elp-icon-preview&quot;&gt;'+
			'&lt;i class=&quot;'+sel_icon+'&quot;&gt;&lt;/i&gt;'+
			'&lt;span class=&quot;pagelayer-elp-icon-name&quot;&gt;'+
			(pagelayer_empty(sel_name)?'Choose icon':sel_name)+
			'&lt;/span&gt;'+
		'&lt;/div&gt;'+
		'&lt;span class=&quot;pagelayer-elp-icon-open&quot;&gt;▼&lt;/span&gt;'+
		'&lt;span class=&quot;pagelayer-elp-icon-close&quot; '+(pagelayer_empty(sel_name)? 'style=&quot;display:none&quot;': '')+'&gt;&lt;b&gt;&amp;times;&amp;nbsp;&lt;/b&gt;&lt;/span&gt;'+
	'&lt;/div&gt;';
	
	row.append(div);
	
	// Make all icons list
	var html = '&lt;div class=&quot;pagelayer-elp-icon-selector&quot;&gt;';
	
	if(pagelayer_loaded_icons.length &gt; 1){
		html += '&lt;select class=&quot;pagelayer-elp-icon-sets&quot;&gt;'+sets_html+'&lt;/select&gt;';
	}
	
	html += '&lt;span class=&quot;pagelayer-elp-icon-type&quot;&gt;'+
		'&lt;p data-tab=&quot;fas&quot; class=&quot;active&quot;&gt;'+pagelayer_l('Solid')+'&lt;/p&gt;'+
		'&lt;p data-tab=&quot;far&quot;&gt;'+pagelayer_l('Regular')+'&lt;/p&gt;'+
		'&lt;p data-tab=&quot;fab&quot;&gt;'+pagelayer_l('Brand')+'&lt;/p&gt;'+
	'&lt;/span&gt;'+
	'&lt;input type=&quot;text&quot; class=&quot;pagelayer-elp-search-icon&quot; name=&quot;search-icon&quot; placeholder=&quot;'+pagelayer_l('search')+'&quot;&gt;'+
	'&lt;div class=&quot;pagelayer-elp-icon-list&quot;&gt;';

	for(var y in icons[cur_icon_set]){
		//console.log(icons[x][y])
		for(var z in icons[cur_icon_set][y]['icons']){
			html += icon_html(icons[cur_icon_set][y]['icons'][z], y);
		}
	}
	
	html += '&lt;/div&gt;'+
	'&lt;/div&gt;';
	
	row.append(html);
	
	// Open the selector
	row.find('.pagelayer-elp-icon-div').on('click', function(){
		row.find('.pagelayer-elp-icon-selector').slideToggle();
	});
	
	/*// When the set changes
	row.find('.pagelayer-elp-icon-sets').on('change', function(){
		var v = cur_icon_set = jQuery(this).val();
		var span = '';
		
		for(var x in icons[v]){
		
			for(var z in icons[v][x]['icons']){
				span += icon_html(icons[v][x]['icons'][z], x);
			}
			
		}
		
		if(cur_icon_set == 'font-awesome5'){
			row.find('.pagelayer-elp-icon-type').show();
			sorted_icons = icons[cur_icon_set]['fas'];
			row.find('.pagelayer-elp-icon-type [data-tab=&quot;fas&quot;]').click();
		}else{
			row.find('.pagelayer-elp-icon-type').hide();
		}
		
		row.find('.pagelayer-elp-icon-list').empty().html(span);
		
		if(row.find('.pagelayer-elp-search-icon').val() != ''){
			row.find('.pagelayer-elp-search-icon').keyup();
		}
		
	});*/
	
	// Handle type of icon
	row.find('.pagelayer-elp-icon-type p').on('click', function(){		
		jQuery(this).toggleClass('active');
		row.find('.pagelayer-elp-search-icon').keyup();
	});
	
	// Handle search of icon
	row.find('.pagelayer-elp-search-icon').on('keyup', function(){
	
		var v = this.value;
		var span = '';
		v = v.toLowerCase();
		v = v.replace(/\s+/g, '-');
		//console.log(sorted_icons);
		
		row.find('.pagelayer-elp-icon-type p.active').each(function(){				
			var tab = jQuery(this).data('tab');
			tab = tab.toLowerCase();
			
			var cat = icons['font-awesome5'][tab]['icons'];
			
			for(var x in cat){
				if(cat[x].includes(v) || v.length &lt; 1){
					span += icon_html(cat[x], tab);
				}
			}
		});
		
		row.find('.pagelayer-elp-icon-list').empty().html(span);
		
	});
	
	// Handle click within the icon selector
	row.find('.pagelayer-elp-icon-list').on('click', function(e){
		
		var jEle = jQuery(e.target);
		var i = jEle.children().attr('class');
		var name = jEle.children().attr('icon');
		
		if(pagelayer_empty(name)){
			return false;
		}
		
		// Set the icon in this list
		row.find('.pagelayer-elp-icon-preview').html('&lt;i class=&quot;'+i+'&quot;&gt;&lt;/i&gt;&lt;span class=&quot;pagelayer-elp-icon-name&quot;&gt;'+name+'&lt;/span&gt;');
		row.find('.pagelayer-elp-icon-selector').slideUp();
		
		_pagelayer_set_atts(row, i);// Save and Render
		
		row.find('.pagelayer-elp-icon-close').show();
		return false;
		
	});
	
	// Delete the icon
	row.find('.pagelayer-elp-icon-close').on('click', function(){
		
		// Set the icon in this list
		row.find('.pagelayer-elp-icon-preview').html('&lt;i class=&quot;&quot;&gt;&lt;/i&gt;&lt;span class=&quot;pagelayer-elp-icon-name&quot;&gt;'+pagelayer_l('choose_icon')+'&lt;/span&gt;');
		
		// Save and Render
		_pagelayer_set_atts(row, '');
		jQuery(this).hide();
		return false;
	});
	
}

// The Access Property
function pagelayer_elp_access(row, prop){
	
	var div = '&lt;div class=&quot;pagelayer-elp-access-div&quot;&gt;'+
		'&lt;span class=&quot;pagelayer-elp-access&quot;&gt;&lt;i class=&quot;pli pli-caret-right&quot; &gt;&lt;/i&gt;&lt;/span&gt;'+
		'&lt;div class=&quot;pagelayer-elp-access-holder&quot;&gt;&lt;/div&gt;'+
	'&lt;/div&gt;';
	
	row.append(div);
	
	var holder = row.find('.pagelayer-elp-access-holder');
	
	row.find('.pagelayer-elp-access').on('click', function(){
		
		// Setup first
		if(holder.children().length &lt; 1){
			var p = row.parent().find('[pagelayer-access-item='+prop.show_group+']').detach();
			p.appendTo(holder);
			p.addClass('pagelayer-access-item-visible');
		}
		
		// Show and hide
		if(holder.is(':visible')){
			holder.hide();
			row.find('.pli-caret-right').removeClass('pli-caret-open');
		}else{
			holder.show();
			row.find('.pli-caret-right').addClass('pli-caret-open');
		}
	});
	
};

// The Modal Property
function pagelayer_elp_modal(row, prop){
	
	var style = pagelayer_empty(prop.width) ? '' : 'style=&quot;width:'+prop.width+'&quot;';
	
	var div = '&lt;div class=&quot;pagelayer-elp-modal-div&quot;&gt;'+
		'&lt;span class=&quot;pagelayer-elp-modal&quot;&gt;&lt;i class=&quot;pli pli-window&quot; &gt;&lt;/i&gt;&lt;/span&gt;'+
		'&lt;div class=&quot;pagelayer-elp-modal-wrapper&quot;&gt;'+
			'&lt;div class=&quot;pagelayer-elp-modal-wrap&quot; '+style+'&gt;'+
				'&lt;div class=&quot;pagelayer-elp-modal-header&quot;&gt;'+
					prop.label +'&lt;i class=&quot;pagelayer-elp-modal-close pli pli-cross&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;'+
				'&lt;/div&gt;&lt;hr&gt;'+
				'&lt;div class=&quot;pagelayer-elp-modal-holder&quot;&gt;&lt;/div&gt;'+
			'&lt;/div&gt;'+
		'&lt;/div&gt;'+
	'&lt;/div&gt;';
	
	row.append(div);
	
	var wrapper = row.find('.pagelayer-elp-modal-wrapper');
	var holder = row.find('.pagelayer-elp-modal-holder');
	
	row.find('.pagelayer-elp-modal').on('click', function(){
		
		// Setup first
		if(holder.children().length &lt; 1){
			
			var p = row.parent().find('[pagelayer-access-item='+prop.show_group+']').detach();
			p.appendTo(holder);
			p.addClass('pagelayer-access-item-visible');
		}
		
		// Show and hide
		wrapper.show();
		
	});
	
	// Close Modal Property
	row.find('.pagelayer-elp-modal-close').on('click', function(){
		wrapper.hide();
	});
	
	// On click Pagelayer setting icon
	wrapper.on('click', function(event){
		var target = jQuery(event.target);
		
		if(target.closest('.pagelayer-elp-modal-wrap').length &gt; 0){
			return;
		}
		
		wrapper.hide();
	});
  
};

// The Color Property
function pagelayer_elp_color(row, prop){
	
	var val = prop.c['val'];
	var is_global = pagelayer_is_global_color(val);
	var global_active = '';
	
	// If global color not exist
	if(!pagelayer_empty(is_global)){
		val = pagelayer_global_colors[is_global]['value'];
		global_active = 'pagelayer-active-global';
	}
	
	var div = '&lt;div class=&quot;pagelayer-elp-color-div-holder&quot;&gt;'+
		'&lt;div class=&quot;pagelayer-elp-color-global '+global_active+'&quot;&gt;&lt;/div&gt;'+
		'&lt;div class=&quot;pagelayer-elp-color-div&quot;&gt;'+
			'&lt;div class=&quot;pagelayer-elp-color-preview&quot;&gt;&lt;/div&gt;'+
			'&lt;span class=&quot;pagelayer-elp-remove-color&quot;&gt;&lt;i class=&quot;pli pli-cross&quot; &gt;&lt;/i&gt;&lt;/span&gt;'+
		'&lt;/div&gt;'+
		'&lt;div class=&quot;pagelayer-global-color-list&quot;&gt;'+
			'&lt;div class=&quot;pagelayer-global-setting-color&quot;&gt;'+
				'&lt;b&gt;Global Colors&lt;/b&gt;&lt;span class=&quot;pli pli-service&quot;&gt;&lt;/span&gt;'+
			'&lt;/div&gt;';
			
			for( cid in pagelayer_global_colors ){
				
				var color = pagelayer_global_colors[cid];
				var active_class = '';
				
				if(cid == is_global){
					active_class = 'pagelayer-global-selected';
				}

				div += '&lt;div class=&quot;pagelayer-global-color-list-item '+ active_class +'&quot; data-global-id=&quot;'+ cid +'&quot;&gt;'+
					'&lt;span class=&quot;pagelayer-global-color-pre&quot; style=&quot;background:'+ color['value'] +'&quot;&gt;&lt;/span&gt;'+
					'&lt;span class=&quot;pagelayer-global-color-title&quot;&gt;'+ color['title'] +'&lt;/span&gt;'+
					'&lt;span class=&quot;pagelayer-global-color-code&quot;&gt;'+  color['value'] +'&lt;/span&gt;'+
				'&lt;/div&gt;';
			}
	 div += '&lt;/div&gt;&lt;/div&gt;';
	
	row.append(div);
	
	row.find('.pagelayer-elp-color-preview').css('background', val);
	
	var picker = new pagelayer_Picker({
		parent : row.find('.pagelayer-elp-color-div')[0],
		popup : 'left',
		color : val,
		doc: window.parent.document
	});
	
	var preview = row.find('.pagelayer-elp-color-preview');
	
	// If no val, then set blank
	if(pagelayer_empty(val)){
		preview.addClass('pagelayer-blank-preview');
	}
	
	var handle_white = function(col){	
		if(col.charAt(1) == 'f'){
			preview.addClass('pagelayer-white-border');
		}else{
			preview.removeClass('pagelayer-white-border');
		}
	}
	
	handle_white(val);
	
	// Handle selected color
	picker.onChange = function(color) {		
		preview.removeClass('pagelayer-blank-preview').css('background', color.rgbaString);
		handle_white(color.hex);
		_pagelayer_set_atts(row, color.hex);// Save and Render
		
		// Remove global
		row.find('.pagelayer-elp-color-global').removeClass('pagelayer-active-global');
		row.find('.pagelayer-global-selected').removeClass('pagelayer-global-selected');
		row.find('.pagelayer-global-color-list').hide();
	};
	
	picker.onOpen = picker.onChange;
	
	row.find('.pagelayer-elp-remove-color').on('click', function(event){
		event.stopPropagation();
		picker.setColor(prop.default, true);
		preview.addClass('pagelayer-blank-preview');		
		handle_white('');
		_pagelayer_set_atts(row, ' ');// Save and Render
	});
	
	// Handle for global color
	row.find('.pagelayer-elp-color-global').on('click', function(e){
		row.find('.pagelayer-global-color-list').slideToggle();
	});

	row.find('.pagelayer-global-setting-color').on('click', function(e){
		e.stopPropagation();

		if(jQuery(e.target).closest('.pli-service').length &lt; 1){
			return;
		}
		window.open(pagelayer_customizer_url+'&amp;autofocus%5Bsection%5D=pagelayer_global_colors_sec', '_blank');
	});
		
	// Handle for global color
	row.find('.pagelayer-global-color-list-item ').on('click', function(e){
		e.stopPropagation();
		
		var listItem = jQuery(this);
		var globalID = listItem.data('global-id');
		var listHolder = row.find('.pagelayer-global-color-list');
		
		// Remove previous selecttion
		listHolder.find('.pagelayer-global-selected').removeClass('pagelayer-global-selected');
		listItem.addClass('pagelayer-global-selected');
		row.find('.pagelayer-elp-color-global').addClass('pagelayer-active-global');
		listHolder.slideUp();
				
		var color = pagelayer_global_colors[globalID]['value'];
		preview.removeClass('pagelayer-blank-preview').css('background', color);
		handle_white(color);
		_pagelayer_set_atts(row, '$'+globalID);// Save and Render
		
	});
}

// The Spinner property
function pagelayer_elp_spinner(row, prop){
	
	var div = '&lt;div class=&quot;pagelayer-elp-spinner-div&quot;&gt;'+
				'&lt;input type=&quot;number&quot; class=&quot;pagelayer-elp-spinner&quot; name=&quot;'+prop.c['name']+'&quot;'+
				' min=&quot;'+prop['min']+'&quot; max=&quot;'+prop['max']+'&quot; step=&quot;'+prop['step']+'&quot; value=&quot;'+parseFloat(prop.c['val'])+'&quot;/&gt;'+
			'&lt;/div&gt;';
			
	row.append(div);
	
	row.find('input').on('input', function(){
		var value = parseFloat(this.value);
		var max = parseFloat(this.max);
		
		if(!pagelayer_empty(max) &amp;&amp; value &gt; max){
			value = max;
		}
		_pagelayer_set_atts(row, value);// Save and Render
	});
	
}

// The Group Property
function pagelayer_elp_group(row, prop){
	
	var btnHidden = '';
	
	// Hide button, clone and delete
	if(!pagelayer_empty(prop['hide'])){
		btnHidden = 'pagelayer-hidden';
	}
	
	// Remove the pagelayer-show-tab
	row.removeAttr('pagelayer-show-tab');
	
	var div = '&lt;div class=&quot;pagelayer-elp-group-div&quot;&gt;&lt;/div&gt;'+
			'&lt;center&gt;&lt;button class=&quot;pagelayer-elp-button '+btnHidden+'&quot;&gt;'+prop['text']+'&lt;/button&gt;&lt;/center&gt;';
	
	row.append(div);
	
	// Add button
	var add_item = function(row){
		
		var ele_id = row.closest('[pagelayer-element-id]').attr('pagelayer-element-id') || '';
		var pEle = jQuery('[pagelayer-id=&quot;'+ele_id+'&quot;]');
		
		// First add the element inside the group element
		var id = pagelayer_element_add_child(pEle, prop['sc'], prop);
		//pagelayer_element_setup('[pagelayer-id='+id+']', true);
		
		show_item(id);
	
	};
	
	// Show the properties of the existing things
	var show_item = function(id, sel){
		
		// To append after an existing item
		sel = sel || false;
		
		// If pagelayer id empty then return
		if(pagelayer_empty(id)){
			return false;
		}
		
		// Since the element is added very fast, we reselect via jQuery for it to re-access the dom
		jEle = jQuery('[pagelayer-id=&quot;'+id+'&quot;]');
		
		var label_param = prop['item_label']['param'] || '';
		var title = pagelayer_get_att(jEle, label_param) || prop['item_label']['default'];
		
		// We need to get the correct value for select based params which are the label
		var child_props = pagelayer_shortcodes[prop.sc];
		for(var section in child_props){
			for(var _param in child_props[section]){
				if(child_props[section][_param]['type'] == 'select'){
					if(title in child_props[section][_param]['list']){
						title = child_props[section][_param]['list'][title];
					}
				}
			}
		}
		
		// Create the HTML
		var holder = jQuery('&lt;div class=&quot;pagelayer-elp-group-item&quot; pagelayer-group-item-id=&quot;'+id+'&quot;&gt;'+
				'&lt;div class=&quot;pagelayer-elp-group-item-head&quot;&gt;'+
					'&lt;span class=&quot;pagelayer-elp-group-item-drag&quot;&gt;&lt;i class=&quot;pli pli-menu&quot; &gt;&lt;/i&gt;&lt;/span&gt;'+
					'&lt;span class=&quot;pagelayer-elp-group-item-title&quot;&gt;'+title+'&lt;/span&gt;'+
					'&lt;span class=&quot;pagelayer-elp-group-item-clone '+btnHidden+'&quot;&gt;&lt;i class=&quot;pli pli-clone&quot; &gt;&lt;/i&gt;&lt;/span&gt;'+
					'&lt;span class=&quot;pagelayer-elp-group-item-del '+btnHidden+'&quot;&gt;&lt;i class=&quot;pli pli-trashcan&quot; &gt;&lt;/i&gt;&lt;/span&gt;'+
				'&lt;/div&gt;'+
				'&lt;div class=&quot;pagelayer-elp-group-item-body&quot;&gt;&lt;/div&gt;'+
			'&lt;/div&gt;');
		
		// Append to the row
		if(sel){
			row.find(sel).after(holder);
		}else{
			row.find('.pagelayer-elp-group-div').first().append(holder);
		}
		
		// Setup the toggle
		holder.find('.pagelayer-elp-group-item-title').first().on('click', function(){
			var rEle = holder.find('.pagelayer-elp-group-item-body').first();
			var r_id = holder.attr('pagelayer-group-item-id');
			
			// If the props are not already setup
			if(rEle.html().length &lt; 1){
			
				pagelayer_elpd_generate(jQuery('[pagelayer-id=&quot;'+r_id+'&quot;]'), rEle);
				
				// Change the group item title
				var tmp_title = holder.find('[pagelayer-elp-name=&quot;'+label_param+'&quot;] [name=&quot;'+label_param+'&quot;]');
		
				if(tmp_title.length &gt; 0){
					jQuery(tmp_title).on('input', function(){						
						holder.find('.pagelayer-elp-group-item-title').html(tmp_title.val());
					});
				}
				
			}
			
			rEle.toggle();
		});
		
		// Clone the item
		holder.find('.pagelayer-elp-group-item-head .pli-clone').on('click', function(){
			
			// If the element have any parent
			var jEle = jQuery('[pagelayer-id=&quot;'+id+'&quot;]');
			var par = pagelayer_get_parent(jEle);
			var clone_ele = pagelayer_copy_element(jEle);
			//console.log(clone_ele);console.log('[pagelayer-group-item-id=&quot;'+id+'&quot;]');
			show_item(clone_ele, '[pagelayer-group-item-id=&quot;'+id+'&quot;]');
			
			if(par){
				pagelayer_sc_render(pagelayer_ele_by_id(par));
			}
		});
		
		// Delete the item
		holder.find('.pagelayer-elp-group-item-head .pli-trashcan').on('click', function(){
			
			// If the element have any parent
			var jEle = jQuery('[pagelayer-id=&quot;'+id+'&quot;]');
			var par = pagelayer_get_parent(jEle);
			holder.remove();
			pagelayer_delete_element(jEle);
			
			if(par){
				pagelayer_sc_render(pagelayer_ele_by_id(par));
			}
		});
		
	};
		
	// Setup the drag
	pagelayer.$$(&quot;.pagelayer-elp-group-div&quot;).sortable({
		axis: 'y',
		nested : false,
		vertical : true,
		handle : &quot;.pagelayer-elp-group-item-drag&quot;,
		placeholder: &quot;pagelayer-drag-highlight&quot;,
		start : function(event, ui) {
			var start_pos = ui.item.index();
			ui.item.data('start_pos', start_pos);
		},
		stop : function(event, ui){
			var end_pos = ui.item.index();
			var id = jQuery(ui.item).closest('[pagelayer-group-item-id]').attr('pagelayer-group-item-id');
			var jEle = jQuery('[pagelayer-id=&quot;'+id+'&quot;]');
			pagelayer_moving_element(jEle, ui.item.data('start_pos'), end_pos);
			var par = pagelayer_get_parent(jEle);				
			if(par){
				pagelayer_sc_render(pagelayer_ele_by_id(par));
			}
		}
	});
	
	// Handle click of the group
	row.find('.pagelayer-elp-button').on('click', function(){
		if('pro' in prop &amp;&amp; pagelayer_empty(pagelayer_pro)){
			pagelayer_pro_notice();
			return;
		}
		add_item(row);
	});
	
	// Find the existing items
	prop.el.$.find('[pagelayer-parent=&quot;'+prop.el['id']+'&quot;]').each(function(){
		var jEle = jQuery(this);
		var id = pagelayer_assign_id(jEle);
		show_item(id);
	});
};

function pagelayer_pro_notice(){
	var div = pagelayer.$$('.pagelayer-pro-notice');
	
	div.find('.pagelayer-pro-x').click(function(){
		div.hide();
	});
	
	div.show();
}

// Moving an element
function pagelayer_moving_element(jEle, start_pos, end_pos){	
	if(start_pos==end_pos){
		return;
	}
	
	var id = pagelayer_assign_id(jEle);

	// Is there a wrap
	var wrap = pagelayer_wrap_by_id(id);

	var par = wrap.parent();
	var children = par.children(&quot;div&quot;);	
	
  // This is required for Owl Carousel
	if(children.length==1){
		par = par.parent();
		children = par.children(&quot;div&quot;);
	}
	
	var element = children.eq(start_pos).detach();
	if(end_pos &lt; start_pos){
		children.eq(end_pos).before(element);
	}else{
		children.eq(end_pos).after(element);
	}		
}

// The Datetime Property
function pagelayer_elp_datetime(row, prop){
		
	var div = '&lt;div class=&quot;pagelayer-elp-datetime-div&quot;&gt;'+
				'&lt;input type=&quot;date&quot; class=&quot;pagelayer-elp-datetime&quot; name=&quot;'+prop.c['name']+'&quot; value=&quot;'+prop.c['val']+'&quot; /&gt;'+
        '&lt;/div&gt;';
	
	row.append(div);
	
	row.find('.pagelayer-elp-datetime').on('change', function(){
		_pagelayer_set_atts(row, jQuery(this).val());// Save and Render
	});
	
};

// The padding property
function pagelayer_elp_padding(row, prop){
	var val = ['', '', '', ''];
	
	if(!pagelayer_empty(prop.c['val'])){
		val = prop.c['val'];
		if(pagelayer_is_string(val)){
			val = val.split(',');
		}
	}
	
	var div = '&lt;div class=&quot;pagelayer-elp-padding-div&quot;&gt;'+
				'&lt;input type=&quot;number&quot; class=&quot;pagelayer-elp-padding&quot; value=&quot;'+parseFloat(val[0])+'&quot;&gt;&lt;/input&gt;'+
				'&lt;input type=&quot;number&quot; class=&quot;pagelayer-elp-padding&quot; value=&quot;'+parseFloat(val[1])+'&quot;&gt;&lt;/input&gt;'+
				'&lt;input type=&quot;number&quot; class=&quot;pagelayer-elp-padding&quot; value=&quot;'+parseFloat(val[2])+'&quot;&gt;&lt;/input&gt;'+
				'&lt;input type=&quot;number&quot; class=&quot;pagelayer-elp-padding&quot; value=&quot;'+parseFloat(val[3])+'&quot;&gt;&lt;/input&gt;'+
				'&lt;i class=&quot;pli pli-link&quot; &gt;&lt;/i&gt;'+
			'&lt;/div&gt;';
	
	row.append(div);
	
	// Is the value linked ?
	var link = row.find('.pagelayer-elp-padding-div i');
	var isLinked = 1;
	//isLinked = isLinked == 2 ? false : true;
	//console.log(isLinked);
	var tmp_val = val[0];
	
	for(var p_val in val){

		// Check if unlinked
		if(tmp_val != val[p_val] ){
			isLinked = 0;
		}
		tmp_val = val[p_val];
	}
	
	if(isLinked){
		link.addClass('pagelayer-elp-padding-linked');
	}else{
		link.removeClass('pagelayer-elp-padding-linked');
	}
	
	// Handle link on click
	link.on('click', function(){
		
		var linked = link.hasClass('pagelayer-elp-padding-linked');
		
		if(linked){
			link.removeClass('pagelayer-elp-padding-linked');
		}else{
			link.addClass('pagelayer-elp-padding-linked');
		}
		
	});
	
	row.find('input').on('input', function(){
		
		// Are the values linked
		var linked = row.find('.pagelayer-elp-padding-div .pli').hasClass('pagelayer-elp-padding-linked');
		
		if(linked){
			var val = jQuery(this).val();
			row.find('input').each(function(){
				jQuery(this).val(val);
			});
		}
		
		var vals = [];
		
		// Get all values
		row.find('input').each(function(){
			var val = jQuery(this).val();
			vals.push(val ? val : 0);
		});
		
		_pagelayer_set_atts(row, vals);// Save and Render
	});
	
};

// The shadow property
function pagelayer_elp_shadow(row, prop){
	
	var val =['','','',''];
	
	// Do we have a val ?
	if(!pagelayer_empty(prop.c['val'])){
		val = prop.c['val'];
		if(pagelayer_is_string(val)){
			val = val.split(',');
		}
	}
	
	//var val = {color: '', blur: '', horizontal: '', vertical: ''};
	
	var div = '&lt;span class=&quot;pagelayer-prop-edit&quot;&gt;&lt;i class=&quot;pli pli-pencil&quot;&gt;&lt;/i&gt;&lt;/span&gt;'+
		'&lt;div class=&quot;pagelayer-elp-shadow-div&quot;&gt;'+
		'&lt;div class=&quot;pagelayer-elp-prop-grp pagelayer-elp-shadow-horizontal&quot;&gt;'+
			'&lt;label class=&quot;pagelayer-elp-label&quot;&gt;Horizontal&lt;/label&gt;'+
			'&lt;input class=&quot;pagelayer-elp-shadow-input&quot; type=&quot;number&quot; max=&quot;100&quot; min=&quot;-100&quot; step=&quot;1&quot; class=&quot;pagelayer-elp-shadow-blur&quot; value=&quot;'+val[0]+'&quot;&gt;&lt;/input&gt;'+
		'&lt;/div&gt;'+
		'&lt;div class=&quot;pagelayer-elp-prop-grp pagelayer-elp-shadow-vertical&quot;&gt;'+
			'&lt;label class=&quot;pagelayer-elp-label&quot;&gt;Vertical&lt;/label&gt;'+
			'&lt;input class=&quot;pagelayer-elp-shadow-input&quot; type=&quot;number&quot; max=&quot;100&quot; min=&quot;-100&quot; step=&quot;1&quot; class=&quot;pagelayer-elp-shadow-blur&quot; value=&quot;'+val[1]+'&quot;&gt;&lt;/input&gt;'+
		'&lt;/div&gt;'+
		'&lt;div class=&quot;pagelayer-elp-prop-grp pagelayer-elp-shadow-blur&quot;&gt;'+
			'&lt;label class=&quot;pagelayer-elp-label&quot;&gt;Blur&lt;/label&gt;'+
			'&lt;input class=&quot;pagelayer-elp-shadow-input&quot; type=&quot;number&quot; max=&quot;100&quot; min=&quot;0&quot; step=&quot;1&quot; class=&quot;pagelayer-elp-shadow-blur&quot; value=&quot;'+val[2]+'&quot;&gt;&lt;/input&gt;'+
		'&lt;/div&gt;'+
		'&lt;div class=&quot;pagelayer-elp-prop-grp pagelayer-elp-shadow-color&quot;&gt;'+
			'&lt;label class=&quot;pagelayer-elp-label&quot;&gt;Color&lt;/label&gt;'+
			'&lt;div class=&quot;pagelayer-elp-color-div&quot;&gt;'+
				'&lt;div class=&quot;pagelayer-elp-color-preview&quot;&gt;&lt;/div&gt;'+
				'&lt;span class=&quot;pagelayer-elp-remove-color&quot;&gt;&lt;i class=&quot;pli pli-cross&quot; &gt;&lt;/i&gt;&lt;/span&gt;'+
			'&lt;/div&gt;'+
		'&lt;/div&gt;'+
	'&lt;/div&gt;';
			
	row.append(div);
	
	row.find('.pagelayer-prop-edit').on('click', function(){
		row.find('.pagelayer-elp-shadow-div').toggleClass('pagelayer-prop-show');
	});
	
	var preview = row.find('.pagelayer-elp-color-preview');	
	preview.css('background', val[3]);
	
	var picker = new pagelayer_Picker({
		parent : row.find('.pagelayer-elp-color-div')[0],
		popup : 'left',
		color : val[3],
		doc: window.parent.document
	});
	
	// If no val, then set blank
	if(pagelayer_empty(val[3])){
		preview.addClass('pagelayer-blank-preview');
	}
	
	var handle_white = function(col){	
		if(col.charAt(1) == 'f'){
			preview.addClass('pagelayer-white-border');
		}else{
			preview.removeClass('pagelayer-white-border');
		}
	}
	
	handle_white(val[3]);
	
	// Handle selected color
	picker.onChange = function(color) {
		preview.removeClass('pagelayer-blank-preview').css('background', color.rgbaString);
		handle_white(color.hex);
		val[3] = (color.hex ? color.hex : '');
		_pagelayer_set_atts(row, val);
	};
	
	// Remove Color
	row.find('.pagelayer-elp-remove-color').on('click', function(event){
		event.stopPropagation();
		picker.setColor(prop.default, true);
		preview.addClass('pagelayer-blank-preview');		
		handle_white('');
		val[3] = '';
		_pagelayer_set_atts(row, val);
	});
	
	row.find('input').on('input', function(){
		var i = 0;
		row.find('.pagelayer-elp-shadow-input').each(function(){
			var value = jQuery(this).val();
			val[i] = (value ? value : '');
			i++;
		});
		_pagelayer_set_atts(row, val);
	});
	
}

// The box shadow property
function pagelayer_elp_box_shadow(row, prop){
	
	var val = ['','','','','',''];
	
	// Do we have a val ?
	if(!pagelayer_empty(prop.c['val'])){
		val = prop.c['val'];
		if(pagelayer_is_string(val)){
			val = val.split(',');
		}
	}
	
	var val_pos = ['horizontal','vertical','blur','color','spread','inset'];
	
	var div = '&lt;span class=&quot;pagelayer-prop-edit&quot;&gt;&lt;i class=&quot;pli pli-pencil&quot;&gt;&lt;/i&gt;&lt;/span&gt;'+
		'&lt;div class=&quot;pagelayer-elp-shadow-div&quot;&gt;'+
		'&lt;div class=&quot;pagelayer-elp-prop-grp pagelayer-elp-shadow-horizontal&quot;&gt;'+
			'&lt;label class=&quot;pagelayer-elp-label&quot;&gt;Horizontal&lt;/label&gt;'+
			'&lt;input class=&quot;pagelayer-elp-shadow-input&quot; type=&quot;number&quot; max=&quot;100&quot; min=&quot;-100&quot; step=&quot;1&quot; class=&quot;pagelayer-elp-shadow-blur&quot; name=&quot;horizontal&quot; value=&quot;'+val[0]+'&quot;&gt;&lt;/input&gt;'+
		'&lt;/div&gt;'+
		'&lt;div class=&quot;pagelayer-elp-prop-grp pagelayer-elp-shadow-vertical&quot;&gt;'+
			'&lt;label class=&quot;pagelayer-elp-label&quot;&gt;Vertical&lt;/label&gt;'+
			'&lt;input class=&quot;pagelayer-elp-shadow-input&quot; type=&quot;number&quot; max=&quot;100&quot; min=&quot;-100&quot; step=&quot;1&quot; class=&quot;pagelayer-elp-shadow-blur&quot; name=&quot;vertical&quot; value=&quot;'+val[1]+'&quot;&gt;&lt;/input&gt;'+
		'&lt;/div&gt;'+
		'&lt;div class=&quot;pagelayer-elp-prop-grp pagelayer-elp-shadow-blur&quot;&gt;'+
			'&lt;label class=&quot;pagelayer-elp-label&quot;&gt;Blur&lt;/label&gt;'+
			'&lt;input class=&quot;pagelayer-elp-shadow-input&quot; type=&quot;number&quot; max=&quot;100&quot; min=&quot;0&quot; step=&quot;1&quot; class=&quot;pagelayer-elp-shadow-blur&quot; name=&quot;blur&quot; value=&quot;'+val[2]+'&quot;&gt;&lt;/input&gt;'+
		'&lt;/div&gt;'+
		'&lt;div class=&quot;pagelayer-elp-prop-grp pagelayer-elp-shadow-spread&quot;&gt;'+
			'&lt;label class=&quot;pagelayer-elp-label&quot;&gt;Spread&lt;/label&gt;'+
			'&lt;input class=&quot;pagelayer-elp-shadow-input&quot; type=&quot;number&quot; max=&quot;100&quot; min=&quot;0&quot; step=&quot;1&quot; class=&quot;pagelayer-elp-shadow-spread&quot; name=&quot;spread&quot; value=&quot;'+(val[4] ? val[4] : 0 )+'&quot;&gt;&lt;/input&gt;'+
		'&lt;/div&gt;'+
		'&lt;div class=&quot;pagelayer-elp-prop-grp pagelayer-elp-shadow-color&quot;&gt;'+
			'&lt;label class=&quot;pagelayer-elp-label&quot;&gt;Color&lt;/label&gt;'+
			'&lt;div class=&quot;pagelayer-elp-color-div&quot;&gt;'+
				'&lt;div class=&quot;pagelayer-elp-color-preview&quot;&gt;&lt;/div&gt;'+
				'&lt;span class=&quot;pagelayer-elp-remove-color&quot;&gt;&lt;i class=&quot;pli pli-cross&quot; &gt;&lt;/i&gt;&lt;/span&gt;'+
			'&lt;/div&gt;'+
		'&lt;/div&gt;'+
		'&lt;div class=&quot;pagelayer-elp-prop-grp pagelayer-elp-shadow-inset&quot;&gt;'+
			'&lt;label class=&quot;pagelayer-elp-label&quot;&gt;Shadow&lt;/label&gt;'+
			'&lt;select class=&quot;pagelayer-elp-shadow-input pagelayer-elp-select&quot; name=&quot;inset&quot; type=&quot;checkbox&quot; class=&quot;pagelayer-elp-shadow-inset&quot;&gt;'+
				'&lt;option value=&quot;&quot;&gt;Outset&lt;/option&gt;'+
				'&lt;option value=&quot;inset&quot;'+(pagelayer_empty(val[5]) ? '' : ' selected' )+'&gt;Inset&lt;/option&gt;'+
			'&lt;/select&gt;'+
		'&lt;/div&gt;'+
	'&lt;/div&gt;';
			
	row.append(div);
	
	row.find('.pagelayer-prop-edit').on('click', function(){
		row.find('.pagelayer-elp-shadow-div').toggleClass('pagelayer-prop-show');
	});
	
	var preview = row.find('.pagelayer-elp-color-preview');	
	preview.css('background', val[3]);
	
	var picker = new pagelayer_Picker({
		parent : row.find('.pagelayer-elp-color-div')[0],
		popup : 'left',
		color : val[3],
		doc: window.parent.document
	});
	
	// If no val, then set blank
	if(pagelayer_empty(val[3])){
		preview.addClass('pagelayer-blank-preview');
	}
	
	var handle_white = function(col){	
		if(col.charAt(1) == 'f'){
			preview.addClass('pagelayer-white-border');
		}else{
			preview.removeClass('pagelayer-white-border');
		}
	}
	
	handle_white(val[3]);
	
	// Handle selected color
	picker.onChange = function(color) {
		row.find('.pagelayer-elp-color-preview').removeClass('pagelayer-blank-preview').css('background', color.rgbaString);
		handle_white(color.hex);
		val[3] = (color.hex ? color.hex : '');
		_pagelayer_set_atts(row, val);
	};
	
	// Remove Color
	row.find('.pagelayer-elp-remove-color').on('click', function(event){
		event.stopPropagation();
		picker.setColor(prop.default, true);
		preview.addClass('pagelayer-blank-preview');		
		handle_white('');
		val[3] = '';
		_pagelayer_set_atts(row, val);
	});
	
	// Onchange set props
	row.find('.pagelayer-elp-shadow-input').on('input change', function(){
		//var i = 0;
		row.find('.pagelayer-elp-shadow-input').each(function(){
			var value = jQuery(this).val();
			var name = jQuery(this).attr('name');
			val[val_pos.indexOf(name)] = (value ? value : '');
			//i++;
		});
		_pagelayer_set_atts(row, val);
	});
	
}

// The filter property
function pagelayer_elp_filter(row, prop){
	
	var val = [0,100,100,0,0,100,100];
	
	// Do we have a val ?
	if(!pagelayer_empty(prop.c['val'])){
		val = prop.c['val'];
		if(pagelayer_is_string(val)){
			val = val.split(',');
		}
	}
	
	var filters = [['blur','10','0.1'],['brightness','200','1'],['contrast','200','1'],['grayscale','200','1'],['hue','360','1'],['opacity','100','1'],['saturate','200','1']];
	
	var div = '&lt;span class=&quot;pagelayer-prop-edit&quot;&gt;&lt;i class=&quot;pli pli-pencil&quot;&gt;&lt;/i&gt;&lt;/span&gt;'+
		'&lt;div class=&quot;pagelayer-elp-filter-div&quot;&gt;';
		
		jQuery.each(val,function(key, value){
			div += '&lt;div class=&quot;pagelayer-elp-prop-grp pagelayer-elp-filter-'+filters[key][0]+'&quot;&gt;'+
				'&lt;label class=&quot;pagelayer-elp-label&quot;&gt;'+filters[key][0]+'&lt;/label&gt;'+
				'&lt;input class=&quot;pagelayer-elp-slider pagelayer-elp-filter-input&quot; type=&quot;range&quot; max=&quot;'+filters[key][1]+'&quot; min=&quot;0&quot; step=&quot;'+filters[key][2]+'&quot; class=&quot;pagelayer-elp-filter-'+filters[key][0]+'&quot; value=&quot;'+value+'&quot;&gt;&lt;/input&gt;'+
				'&lt;span class=&quot;pagelayer-elp-filter-val&quot;&gt;'+value+'&lt;/span&gt;'+
			'&lt;/div&gt;';
		});
		
	div += '&lt;/div&gt;';
			
	row.append(div);
	
	row.find('.pagelayer-prop-edit').on('click', function(){
		row.find('.pagelayer-elp-filter-div').toggleClass('pagelayer-prop-show');
	});
	
	row.find('input').on('input', function(){
		var val = [];
		jQuery(this).parent().find('span').html(this.value);
		row.find('.pagelayer-elp-filter-input').each(function(){
			var value = jQuery(this).val();
			val.push(value ? value : 'none');
		});
		_pagelayer_set_atts(row, val);
	});
	
}

// The gradient property
function pagelayer_elp_gradient(row, prop){
	
	var val = ['','','','','','',''];
	
	// Do we have a val ?
	if(!pagelayer_empty(prop.c['val'])){
		val = prop.c['val'];
		if(pagelayer_is_string(val)){
			val = val.split(',');
		}
	}
	
	var setColor = [val[1], val[3], val[5]];
	
	//var val = {color: '', blur: '', horizontal: '', vertical: ''};
	var getColorList = function(num){
  
		var is_global = pagelayer_is_global_color(setColor[num]);
		var global_list = '&lt;div class=&quot;pagelayer-global-color-list&quot;&gt;'+
		'&lt;div class=&quot;pagelayer-global-setting-color&quot;&gt;'+
			'&lt;b&gt;Global Colors&lt;/b&gt;&lt;span class=&quot;pli pli-service&quot;&gt;&lt;/span&gt;'+
		'&lt;/div&gt;';
    
		for( cid in pagelayer_global_colors ){
			
			var color = pagelayer_global_colors[cid];
			var active_class = '';
			
			if(cid == is_global){
				active_class = 'pagelayer-global-selected';
			}
			
			// If global color not exist
			if(!pagelayer_empty(is_global)){
				setColor[num] = pagelayer_global_colors[is_global]['value'];
			}
			
			global_list += '&lt;div class=&quot;pagelayer-global-color-list-item '+ active_class +'&quot; data-global-id=&quot;'+ cid +'&quot;&gt;'+
				'&lt;span class=&quot;pagelayer-global-color-pre&quot; style=&quot;background:'+ color['value'] +'&quot;&gt;&lt;/span&gt;'+
				'&lt;span class=&quot;pagelayer-global-color-title&quot;&gt;'+ color['title'] +'&lt;/span&gt;'+
				'&lt;span class=&quot;pagelayer-global-color-code&quot;&gt;'+  color['value'] +'&lt;/span&gt;'+
			'&lt;/div&gt;';
		}
		global_list += '&lt;/div&gt;';
		
		return global_list;
	}
	
	var div = '&lt;div class=&quot;pagelayer-elp-gradient-div&quot;&gt;'+
		'&lt;div class=&quot;pagelayer-elp-prop-grp pagelayer-elp-gradient-angle&quot;&gt;'+
			'&lt;label class=&quot;pagelayer-elp-label&quot;&gt;Angle&lt;/label&gt;'+
			'&lt;input class=&quot;pagelayer-elp-gradient-input&quot; type=&quot;number&quot; max=&quot;360&quot; min=&quot;0&quot; step=&quot;1&quot; class=&quot;pagelayer-elp-gradient-angle&quot; value=&quot;'+val[0]+'&quot;&gt;&lt;/input&gt;'+
		'&lt;/div&gt;'+
		'&lt;div class=&quot;pagelayer-elp-prop-grp pagelayer-elp-gradient-color&quot;&gt;'+
			'&lt;label class=&quot;pagelayer-elp-label&quot;&gt;Color 1&lt;/label&gt;'+
			'&lt;div class=&quot;pagelayer-elp-color-div-holder&quot;&gt;'+
				'&lt;div class=&quot;pagelayer-elp-color-global&quot;&gt;&lt;/div&gt;'+
				'&lt;div class=&quot;pagelayer-elp-color-div&quot;&gt;'+
					'&lt;div class=&quot;pagelayer-elp-gradient-color1 pagelayer-elp-color-preview&quot;&gt;&lt;/div&gt;'+
				'&lt;/div&gt;'+
				getColorList(0)+
			'&lt;/div&gt;'+
		'&lt;/div&gt;'+
		'&lt;div class=&quot;pagelayer-elp-prop-grp pagelayer-elp-gradient-per1&quot;&gt;'+
			'&lt;label class=&quot;pagelayer-elp-label&quot;&gt;Percentage 1&lt;/label&gt;'+
			'&lt;input class=&quot;pagelayer-elp-gradient-input&quot; type=&quot;number&quot; max=&quot;100&quot; min=&quot;-100&quot; step=&quot;1&quot; class=&quot;pagelayer-elp-gradient-per1&quot; value=&quot;'+val[2]+'&quot;&gt;&lt;/input&gt;'+
		'&lt;/div&gt;'+
		'&lt;div class=&quot;pagelayer-elp-prop-grp pagelayer-elp-gradient-color&quot;&gt;'+
			'&lt;label class=&quot;pagelayer-elp-label&quot;&gt;Color 2&lt;/label&gt;'+
			'&lt;div class=&quot;pagelayer-elp-color-div-holder&quot;&gt;'+
				'&lt;div class=&quot;pagelayer-elp-color-global&quot;&gt;&lt;/div&gt;'+
				'&lt;div class=&quot;pagelayer-elp-color-div&quot;&gt;'+
					'&lt;div class=&quot;pagelayer-elp-gradient-color2 pagelayer-elp-color-preview&quot;&gt;&lt;/div&gt;'+
				'&lt;/div&gt;'+
				getColorList(1)+
			'&lt;/div&gt;'+
		'&lt;/div&gt;'+
		'&lt;div class=&quot;pagelayer-elp-prop-grp pagelayer-elp-gradient-per2&quot;&gt;'+
			'&lt;label class=&quot;pagelayer-elp-label&quot;&gt;Percentage 2&lt;/label&gt;'+
			'&lt;input class=&quot;pagelayer-elp-gradient-input&quot; type=&quot;number&quot; max=&quot;100&quot; min=&quot;0&quot; step=&quot;1&quot; class=&quot;pagelayer-elp-gradient-per2&quot; value=&quot;'+val[4]+'&quot;&gt;&lt;/input&gt;'+
		'&lt;/div&gt;'+
		'&lt;div class=&quot;pagelayer-elp-prop-grp pagelayer-elp-gradient-color&quot;&gt;'+
			'&lt;label class=&quot;pagelayer-elp-label&quot;&gt;Color 3&lt;/label&gt;'+
			'&lt;div class=&quot;pagelayer-elp-color-div-holder&quot;&gt;'+
				'&lt;div class=&quot;pagelayer-elp-color-global&quot;&gt;&lt;/div&gt;'+
				'&lt;div class=&quot;pagelayer-elp-color-div&quot;&gt;'+
					'&lt;div class=&quot;pagelayer-elp-gradient-color3 pagelayer-elp-color-preview&quot;&gt;&lt;/div&gt;'+
				'&lt;/div&gt;'+
				getColorList(2)+
			'&lt;/div&gt;'+
		'&lt;/div&gt;'+
		'&lt;div class=&quot;pagelayer-elp-prop-grp pagelayer-elp-gradient-per3&quot;&gt;'+
			'&lt;label class=&quot;pagelayer-elp-label&quot;&gt;Percentage 3&lt;/label&gt;'+
			'&lt;input class=&quot;pagelayer-elp-gradient-input&quot; type=&quot;number&quot; max=&quot;100&quot; min=&quot;0&quot; step=&quot;1&quot; class=&quot;pagelayer-elp-gradient-per3&quot; value=&quot;'+val[6]+'&quot;&gt;&lt;/input&gt;'+
		'&lt;/div&gt;'+
	'&lt;/div&gt;';
			
	row.append(div);
	var i = 0;
	row.find('.pagelayer-elp-color-preview').each(function(){
		jQuery(this).css('background', setColor[i]);
		i++;
	});
	
	// Remove global
	var removeGlobal = function(holder){
		holder.find('.pagelayer-elp-color-global').removeClass('pagelayer-active-global');
		holder.find('.pagelayer-global-selected').removeClass('pagelayer-global-selected');
		holder.find('.pagelayer-global-color-list').hide();
	}
	
	var picker1 = new pagelayer_Picker({
		parent : row.find('.pagelayer-elp-gradient-color1')[0],
		popup : 'left',
		color : setColor[0],
		doc: window.parent.document
	});
	
	// Handle selected color
	picker1.onChange = function(color) {
		var cPreview = row.find('.pagelayer-elp-gradient-color1')
		cPreview.css('background', color.rgbaString);
		val[1] = (color.hex ? color.hex : '');
		_pagelayer_set_atts(row, val);
		
		removeGlobal(cPreview.closest('.pagelayer-elp-color-div-holder'));
	};
	
	var picker2 = new pagelayer_Picker({
		parent : row.find('.pagelayer-elp-gradient-color2')[0],
		popup : 'left',
		color : setColor[1],
		doc: window.parent.document
	});
	
	// Handle selected color
	picker2.onChange = function(color) {
		var cPreview = row.find('.pagelayer-elp-gradient-color2');
		cPreview.css('background', color.rgbaString);
		val[3] = (color.hex ? color.hex : '');
		_pagelayer_set_atts(row, val);
		
		removeGlobal(cPreview.closest('.pagelayer-elp-color-div-holder'));
	};
	
	var picker3 = new pagelayer_Picker({
		parent : row.find('.pagelayer-elp-gradient-color3')[0],
		popup : 'left',
		color : setColor[2],
		doc: window.parent.document
	});
	
	// Handle selected color
	picker3.onChange = function(color) {
		var cPreview = row.find('.pagelayer-elp-gradient-color3');
		cPreview.css('background', color.rgbaString);
		val[5] = (color.hex ? color.hex : '');
		_pagelayer_set_atts(row, val);
		
		removeGlobal(cPreview.closest('.pagelayer-elp-color-div-holder'));
	};
	
	row.find('input').on('input', function(){
		var i = 0;
		row.find('.pagelayer-elp-gradient-input').each(function(){
			var value = jQuery(this).val();
			val[i] = (value ? value : '');
			i = i+2;
		});
		_pagelayer_set_atts(row, val);
	});
	
	row.find('.pagelayer-global-selected').each(function(){
		jQuery(this).closest('.pagelayer-elp-color-div-holder').find('.pagelayer-elp-color-global').addClass('pagelayer-active-global');
	});
	
	// Handle for global color
	row.find('.pagelayer-elp-color-global').on('click', function(e){
		jQuery(this).closest('.pagelayer-elp-color-div-holder').find('.pagelayer-global-color-list').slideToggle();
	});

	row.find('.pagelayer-global-setting-color').on('click', function(e){
		e.stopPropagation();

		if(jQuery(e.target).closest('.pli-service').length &lt; 1){
			return;
		}
		
		window.open( pagelayer_customizer_url + '&amp;autofocus%5Bsection%5D=pagelayer_global_colors_sec', '_blank' );
	});
		
	// Handle for global color
	row.find('.pagelayer-global-color-list-item ').on('click', function(e){
		e.stopPropagation();
		
		var listItem = jQuery(this);
		var globalID = listItem.data('global-id');
		var listHolder = listItem.closest('.pagelayer-global-color-list');
		var colorHolder = listItem.closest('.pagelayer-elp-color-div-holder');
		var colorPreview = colorHolder.find('.pagelayer-elp-color-preview');
		
		// Remove previous selecttion
		listHolder.find('.pagelayer-global-selected').removeClass('pagelayer-global-selected');
		listItem.addClass('pagelayer-global-selected');
		colorHolder.find('.pagelayer-elp-color-global').addClass('pagelayer-active-global');
		listHolder.slideUp();
				
		var color = pagelayer_global_colors[globalID]['value'];
		colorPreview.removeClass('pagelayer-blank-preview').css('background', color);
		
		var i = 1;
		
		if(colorPreview.hasClass('pagelayer-elp-gradient-color2')){
			i = 3;
		}
		
		if(colorPreview.hasClass('pagelayer-elp-gradient-color3')){
			i = 5;
		}
		
		val[i] = '$'+globalID;
		_pagelayer_set_atts(row, val);// Save and Render
		
	});
	
}

function pagelayer_elp_font_family(row, prop){
	
	var options = '';
	var option = function(val, lang, type){
		var selected = (val != prop.c['val']) ? '' : 'selected=&quot;selected&quot;';
		var lang = pagelayer_empty(lang) ? 'Default' : lang;
		return '&lt;option class=&quot;pagelayer-elp-select-option&quot; value=&quot;'+val+'&quot; type=&quot;'+type+'&quot; '+selected+'&gt;'+lang+'&lt;/option&gt;';
	}

	for(y in pagelayer_fonts){
		if(y != 'default'){
			options += '&lt;optgroup label=&quot;'+pagelayer_ucwords(y)+'&quot;&gt;';
		}
		for (x in pagelayer_fonts[y]){
			options += option((jQuery.isNumeric(x) ? pagelayer_fonts[y][x] : x), pagelayer_fonts[y][x], y);
		}		
	}
	
	var div = '&lt;div class=&quot;pagelayer-elp-select-div pagelayer-elp-pos-rel&quot;&gt;'+
				'&lt;select class=&quot;pagelayer-elp-select pagelayer-select&quot; name=&quot;'+prop.c['name']+'&quot;&gt;'+options+'&lt;/select&gt;'+
  '&lt;/div&gt;';
			
	row.append(div);
	
	row.find('select').on('change', function(){
		
		var sEle = jQuery(this);
		
		pagelayer_link_font_family(sEle);
		_pagelayer_set_atts(row, sEle.val());// Save and Render		
	
	});
	
}

// The typography property
function pagelayer_elp_typography(row, prop){
	
	var val = pagelayer_parse_typo(prop.c['val'], true);
	var is_typo = pagelayer_is_global_typo(prop.c['val']);
	var global_active = '';
	var save_timer = {};
	
	// Load value of tablet and mobile
	var val_tablet = pagelayer_get_att(prop.el.$, prop.c['name']+'_tablet');
	var val_mobile = pagelayer_get_att(prop.el.$, prop.c['name']+'_mobile');
	
	val_tablet = pagelayer_parse_typo(val_tablet);
	val_mobile = pagelayer_parse_typo(val_mobile);
	
	
	// If global color not exist
	if(!pagelayer_empty(is_typo)){
		global_active = 'pagelayer-active-global';
	}
	
	var select = {
		'style' : {'' : 'Default', 'normal' : 'Normal', 'italic' : 'Italic', 'oblique' : 'Oblique'},
		'weight' : {'' : 'Default', '100' : '100', '200' : '200', '300' : '300', '400' : '400', '500' : '500', '600' : '600', '700' : '700', '800' : '800', '900' : '900', 'normal' : 'Normal', 'lighter' : 'Lighter', 'bold' : 'Bold', 'bolder' :'Bolder', 'unset' : 'Unset'},
		'variant' : {'' : 'Default', 'normal' : 'Normal', 'small-caps' : 'Small Caps'},
		'deco-line' : {'' : 'Default', 'none' : 'None', 'overline' : 'Overline', 'line-through' : 'Line Through', 'underline' : 'Underline', 'underline overline' : 'Underline Overline'},
		'deco-style' : {'' : 'Default', 'solid' : 'Solid', 'double' : 'Double', 'dotted' : 'Dotted', 'dashed' : 'Dashed', 'wavy' : 'Wavy'},
		'transform' : {'' : 'Default', 'capitalize' : 'Capitalize', 'uppercase' : 'Uppercase', 'lowercase' : 'Lowercase'},
		'fonts' : pagelayer_fonts,
	}
	
	var option = function(val, lang, setVal){
		var selected = (val.toLowerCase() != setVal.toLowerCase()) ? '' : 'selected=&quot;selected&quot;';

		var lang = pagelayer_empty(lang) ? 'Default' : lang;
		return '&lt;option value=&quot;'+val+'&quot; '+selected+'&gt;'+ lang +'&lt;/option&gt;';
	}
	
	var font_options = '';
	var font_option = function(val, lang, type, setVal){
		var selected = (val != setVal) ? '' : 'selected=&quot;selected&quot;';
		var lang = pagelayer_empty(lang) ? 'Default' : lang;
		return '&lt;option class=&quot;pagelayer-elp-typo-sele-op&quot; value=&quot;'+val+'&quot; type=&quot;'+type+'&quot; '+selected+'&gt;'+lang+'&lt;/option&gt;';
	}

	for(y in select['fonts']){
		if(y != 'default'){
			font_options += '&lt;optgroup label=&quot;'+pagelayer_ucwords(y)+'&quot;&gt;';
		}
		for (x in select['fonts'][y]){
			font_options += font_option((jQuery.isNumeric(x) ? select['fonts'][y][x] : x), select['fonts'][y][x], y, val[0]);
		}		
	}
	
	var modes = {desktop: '', tablet: '_tablet', mobile: '_mobile'};
	var mode = pagelayer_get_screen_mode();
	var screen = '&lt;div class=&quot;pagelayer-elp-screen&quot;&gt;'+
		'&lt;i class=&quot;pli pli-desktop&quot; &gt;&lt;/i&gt;'+
		'&lt;i class=&quot;pli pli-tablet&quot; &gt;&lt;/i&gt;'+
		'&lt;i class=&quot;pli pli-mobile&quot; &gt;&lt;/i&gt;'+
		'&lt;i class=&quot;pagelayer-prop-screen pli pli-'+mode+'&quot; &gt;&lt;/i&gt;'+
	'&lt;/div&gt;';
	
	var div = '&lt;span class=&quot;pagelayer-elp-typo-edit-div&quot;&gt;'+
			'&lt;i class=&quot;pli pli-pencil&quot;&gt;&lt;/i&gt;'+
		'&lt;/span&gt;'+
		'&lt;div class=&quot;pagelayer-elp-typo-div&quot; pagelayer-screen-mode=&quot;'+mode+'&quot;&gt;'+
		'&lt;div class=&quot;pagelayer-elp-typo-fonts&quot;&gt;'+
			'&lt;div class=&quot;pagelayer-elp-global-typo&quot;&gt;'+
				'&lt;label class=&quot;pagelayer-elp-label&quot;&gt;'+pagelayer_l('global_fonts')+'&lt;/label&gt;'+
				'&lt;span class=&quot;pagelayer-elp-typo-icons&quot;&gt;'+
					'&lt;span class=&quot;pagelayer-elp-global-icon '+global_active+'&quot;&gt;&lt;/span&gt;'+
					'&lt;span class=&quot;pli pli-service&quot;&gt;&lt;/span&gt;'+
				'&lt;/span&gt;'+
				'&lt;div class=&quot;pagelayer-global-font-list&quot;&gt;';

						for( cid in pagelayer_global_fonts ){
							
							var font = pagelayer_global_fonts[cid];

							div += '&lt;div class=&quot;pagelayer-global-font-list-item&quot; data-global-id=&quot;'+ cid +'&quot;&gt;'+
								'&lt;span class=&quot;pagelayer-global-font-title&quot;&gt;'+font['title']+'&lt;/span&gt;'+
							'&lt;/div&gt;';
						}
				 div += '&lt;/div&gt;'+
			'&lt;/div&gt;'+
			'&lt;div class=&quot;pagelayer-elp-typo pagelayer-elp-typo-family&quot;&gt;'+
				'&lt;label class=&quot;pagelayer-elp-label&quot;&gt;'+pagelayer_l('font_family')+'&lt;/label&gt;'+
				'&lt;select class=&quot;pagelayer-elp-typo-input pagelayer-elp-select&quot; name=&quot;font-family&quot;&gt;'+font_options+'&lt;/select&gt;'+
			'&lt;/div&gt;';
	
	div += '&lt;div class=&quot;pagelayer-elp-typo pagelayer-elp-typo-size&quot;&gt;'+
			'&lt;label class=&quot;pagelayer-elp-label&quot;&gt;'+pagelayer_l('font_size')+' '+screen+'&lt;/label&gt;'+
			'&lt;input name=&quot;font-size&quot;  pagelayer-show-device=&quot;desktop&quot; class=&quot;pagelayer-elp-typo-input&quot; type=&quot;number&quot; max=&quot;200&quot; min=&quot;0&quot; step=&quot;1&quot; value=&quot;'+val[1]+'&quot;&gt;&lt;/input&gt;'+
			'&lt;input name=&quot;font-size_tablet&quot;  pagelayer-show-device=&quot;tablet&quot; class=&quot;pagelayer-elp-typo-input&quot; type=&quot;number&quot; max=&quot;200&quot; min=&quot;0&quot; step=&quot;1&quot; value=&quot;'+val_tablet[1]+'&quot;&gt;&lt;/input&gt;'+
			'&lt;input name=&quot;font-size_mobile&quot; pagelayer-show-device=&quot;mobile&quot; class=&quot;pagelayer-elp-typo-input&quot; type=&quot;number&quot; max=&quot;200&quot; min=&quot;0&quot; step=&quot;1&quot; value=&quot;'+val_mobile[1]+'&quot;&gt;&lt;/input&gt;'+
		'&lt;/div&gt;'+
		'&lt;div class=&quot;pagelayer-elp-typo pagelayer-elp-typo-style&quot;&gt;'+
			'&lt;label class=&quot;pagelayer-elp-label&quot;&gt;'+pagelayer_l('font_style')+'&lt;/label&gt;'+
			'&lt;select name=&quot;font-style&quot; class=&quot;pagelayer-elp-typo-input pagelayer-elp-select&quot;&gt;';
	
	jQuery.each(select['style'],function(key, value){
		div += option(key, value, val[2]);
	});
			div +='&lt;/select&gt;'+
		'&lt;/div&gt;'+
		'&lt;div class=&quot;pagelayer-elp-typo pagelayer-elp-typo-weight&quot;&gt;'+
			'&lt;label class=&quot;pagelayer-elp-label&quot;&gt;'+pagelayer_l('font_weight')+' '+screen+'&lt;/label&gt;'+
			'&lt;select name=&quot;font-weight&quot; pagelayer-show-device=&quot;desktop&quot; class=&quot;pagelayer-elp-typo-input pagelayer-elp-select&quot;&gt;';
	jQuery.each(select['weight'],function(key, value){
		div += option(key, value, val[3]);
	});
			
			div += '&lt;/select&gt;'+
			'&lt;select name=&quot;font-weight_tablet&quot; pagelayer-show-device=&quot;tablet&quot; class=&quot;pagelayer-elp-typo-input pagelayer-elp-select&quot;&gt;';
	jQuery.each(select['weight'],function(key, value){
		div += option(key, value, val_tablet[3]);
	});
			
			div += '&lt;/select&gt;'+
			'&lt;select name=&quot;font-weight_mobile&quot; pagelayer-show-device=&quot;mobile&quot; class=&quot;pagelayer-elp-typo-input pagelayer-elp-select&quot;&gt;';
	jQuery.each(select['weight'],function(key, value){
		div += option(key, value, val_mobile[3]);
	});
			
			div += '&lt;/select&gt;'+
		'&lt;/div&gt;'+
		'&lt;div class=&quot;pagelayer-elp-typo pagelayer-elp-typo-variant&quot;&gt;'+
			'&lt;label class=&quot;pagelayer-elp-label&quot;&gt;'+pagelayer_l('font_variant')+'&lt;/label&gt;'+
			'&lt;select name=&quot;font-variant&quot; class=&quot;pagelayer-elp-typo-input pagelayer-elp-select&quot;&gt;';
	jQuery.each(select['variant'],function(key, value){
		div += option(key, value, val[4]);
	});
				
			div += '&lt;/select&gt;'+
		'&lt;/div&gt;'+
		'&lt;div class=&quot;pagelayer-elp-typo pagelayer-elp-typo-deco-line&quot;&gt;'+
			'&lt;label class=&quot;pagelayer-elp-label&quot;&gt;'+pagelayer_l('decoration_line')+'&lt;/label&gt;'+
			'&lt;select name=&quot;text-decoration-line&quot; class=&quot;pagelayer-elp-typo-input pagelayer-elp-select&quot;&gt;';
	jQuery.each(select['deco-line'],function(key, value){
		div += option(key, value, val[5]);
	});
				
			div += '&lt;/select&gt;'+
		'&lt;/div&gt;'+
		'&lt;div class=&quot;pagelayer-elp-typo pagelayer-elp-typo-deco-style&quot;&gt;'+
			'&lt;label class=&quot;pagelayer-elp-label&quot;&gt;'+pagelayer_l('decoration_style')+'&lt;/label&gt;'+
			'&lt;select name=&quot;text-decoration-style&quot; class=&quot;pagelayer-elp-typo-input pagelayer-elp-select&quot;&gt;';
	jQuery.each(select['deco-style'],function(key, value){
		div += option(key, value, val[6]);
	});
				
			div += '&lt;/select&gt;'+
		'&lt;/div&gt;'+
		'&lt;div class=&quot;pagelayer-elp-typo pagelayer-elp-typo-height&quot;&gt;'+
			'&lt;label class=&quot;pagelayer-elp-label&quot;&gt;'+pagelayer_l('line_height')+' '+screen+'&lt;/label&gt;'+
			'&lt;input name=&quot;line-height&quot; class=&quot;pagelayer-elp-typo-input&quot; pagelayer-show-device=&quot;desktop&quot; type=&quot;number&quot; max=&quot;15&quot; min=&quot;0&quot; step=&quot;0.1&quot; value=&quot;'+val[7]+'&quot;&gt;&lt;/input&gt;'+
			'&lt;input name=&quot;line-height_tablet&quot; pagelayer-show-device=&quot;tablet&quot; class=&quot;pagelayer-elp-typo-input&quot; type=&quot;number&quot; max=&quot;15&quot; min=&quot;0&quot; step=&quot;0.1&quot; value=&quot;'+val_tablet[7]+'&quot;&lt;/input&gt;'+
			'&lt;input name=&quot;line-height_mobile&quot; class=&quot;pagelayer-elp-typo-input&quot; pagelayer-show-device=&quot;mobile&quot; type=&quot;number&quot; max=&quot;15&quot; min=&quot;0&quot; step=&quot;0.1&quot; value=&quot;'+val_mobile[7]+'&quot;&gt;&lt;/input&gt;'+
		'&lt;/div&gt;'+
		'&lt;div class=&quot;pagelayer-elp-typo pagelayer-elp-typo-transform&quot;&gt;'+
			'&lt;label class=&quot;pagelayer-elp-label&quot;&gt;'+pagelayer_l('text_transform')+'&lt;/label&gt;'+
			'&lt;select name=&quot;text-transform&quot; class=&quot;pagelayer-elp-typo-input pagelayer-elp-select&quot;&gt;';
	jQuery.each(select['transform'],function(key, value){
		div += option(key, value, val[8]);
	});
				
			div += '&lt;/select&gt;'+
		'&lt;/div&gt;'+
		'&lt;div class=&quot;pagelayer-elp-typo pagelayer-elp-typo-lspacing&quot;&gt;'+
			'&lt;label class=&quot;pagelayer-elp-label&quot;&gt;'+pagelayer_l('text_spacing')+' '+screen+'&lt;/label&gt;'+
			'&lt;input name=&quot;letter-spacing&quot; pagelayer-show-device=&quot;desktop&quot; class=&quot;pagelayer-elp-typo-input&quot; type=&quot;number&quot; max=&quot;10&quot; min=&quot;-10&quot; step=&quot;0.1&quot; value=&quot;'+val[9]+'&quot;&gt;&lt;/input&gt;'+
			'&lt;input name=&quot;letter-spacing_tablet&quot; pagelayer-show-device=&quot;tablet&quot; class=&quot;pagelayer-elp-typo-input&quot; type=&quot;number&quot; max=&quot;10&quot; min=&quot;-10&quot; step=&quot;0.1&quot; value=&quot;'+val_tablet[9]+'&quot;&gt;&lt;/input&gt;'+
			'&lt;input name=&quot;letter-spacing_mobile&quot; pagelayer-show-device=&quot;mobile&quot; class=&quot;pagelayer-elp-typo-input&quot; type=&quot;number&quot; max=&quot;10&quot; min=&quot;-10&quot; step=&quot;0.1&quot; value=&quot;'+val_mobile[9]+'&quot;&gt;&lt;/input&gt;'+
		'&lt;/div&gt;'+
		'&lt;div class=&quot;pagelayer-elp-typo pagelayer-elp-typo-wspacing&quot;&gt;'+
			'&lt;label class=&quot;pagelayer-elp-label&quot;&gt;'+pagelayer_l('word_spacing')+' '+screen+'&lt;/label&gt;'+
			'&lt;input name=&quot;word-spacing&quot; pagelayer-show-device=&quot;desktop&quot; class=&quot;pagelayer-elp-typo-input&quot; type=&quot;number&quot; max=&quot;50&quot; min=&quot;0&quot; step=&quot;1&quot; value=&quot;'+val[10]+'&quot;&gt;&lt;/input&gt;'+
			'&lt;input name=&quot;word-spacing_tablet&quot; pagelayer-show-device=&quot;tablet&quot; class=&quot;pagelayer-elp-typo-input&quot; type=&quot;number&quot; max=&quot;50&quot; min=&quot;0&quot; step=&quot;1&quot; value=&quot;'+val_tablet[10]+'&quot;&gt;&lt;/input&gt;'+
			'&lt;input name=&quot;word-spacing_mobile&quot; pagelayer-show-device=&quot;mobile&quot; class=&quot;pagelayer-elp-typo-input&quot; type=&quot;number&quot; max=&quot;50&quot; min=&quot;0&quot; step=&quot;1&quot; value=&quot;'+val_mobile[10]+'&quot;&gt;&lt;/input&gt;'+
		'&lt;/div&gt;'+
	'&lt;/div&gt;'+
	'&lt;/div&gt;';
			
	row.append(div);
	
	if(pagelayer_empty(val[5]) || val[5]=='none'){
		row.find('.pagelayer-elp-typo-deco-style').hide();
	}
	
	row.find('.pagelayer-elp-typo-edit-div .pli-pencil').on('click', function(){
		row.find('.pagelayer-elp-typo-div').toggleClass('pagelayer-prop-show');				
	});
	
	var save_typography = function(){
		var globalEle = row.find('.pagelayer-global-selected');
		var atts = {};
    
		atts[prop.c['name']] = {};
		atts[prop.c['name']+'_tablet'] = {};
		atts[prop.c['name']+'_mobile'] = {};
		
		if(globalEle.length &gt; 0){
			atts[prop.c['name']]['global-font'] = globalEle.attr('data-global-id');
		}
		
		row.find('.pagelayer-elp-typo-input').each(function(){
			
			var iEle = jQuery(this);
			var name = iEle.attr('name');
			var value = iEle.val();
			var isGlobal = iEle.closest('[pagelayer-set-global]');
			
			if((value == '' &amp;&amp; isGlobal.length &lt; 1 &amp;&amp; globalEle.length &lt; 1) || isGlobal.length &gt; 0){
				return;
			}
			
			if(name.indexOf('_tablet') &gt; -1){
				name = name.replace('_tablet', '');
				atts[prop.c['name']+'_tablet'][name] = value;
				return;
			}
			
			if(name.indexOf('_mobile') &gt; -1){
				name = name.replace('_mobile', '');
				atts[prop.c['name']+'_mobile'][name] = value;
				return;
			}
			
			atts[prop.c['name']][name] = value;
		});
				
		pagelayer_set_atts(prop.el.$, atts);
		pagelayer_sc_render(prop.el.$); // Render
	}
	
	row.find('.pagelayer-elp-typo-input').on('change', function(e){
		
		var jEle = jQuery(e.target);
		
		pagelayer_link_font_family(jEle);
		jEle.closest('[pagelayer-set-global]').removeAttr('pagelayer-set-global');
		
		// Save value
		save_typography();
	});
	
	row.find('.pagelayer-elp-typo-deco-line select').on('change', function(){
		var value = jQuery(this).val();
		if(pagelayer_empty(value) || value=='none'){
			row.find('.pagelayer-elp-typo-deco-style').hide();
		}else{
			row.find('.pagelayer-elp-typo-deco-style').show();
		}
	});
		
	// Handle for global font
	row.find('.pagelayer-elp-global-typo .pagelayer-elp-global-icon').on('click', function(e){
		e.stopPropagation();
		row.find('.pagelayer-global-font-list').slideToggle();
		
	});
	
	row.find('.pagelayer-elp-global-typo .pli-service').on('click', function(e){
		e.stopPropagation();
		window.open(pagelayer_customizer_url+'&amp;autofocus%5Bsection%5D=pagelayer_global_fonts_sec', '_blank');
	});
	
	// Added restore global val
	row.find('.pagelayer-elp-typo &gt; .pagelayer-elp-label').each(function(){
		var label = jQuery(this);
		var defaultButton = '&lt;span class=&quot;pagelayer-typo-default&quot; title=&quot;'+pagelayer_l('restore_global')+'&quot; &gt;&lt;i class=&quot;fas fa-undo&quot;&gt;&lt;/i&gt;&lt;/span&gt;';		
		label.append(defaultButton);
		
		label.find('.pagelayer-typo-default').on('click', function(e, skip_save){
			
			skip_save = skip_save || false;
			
			var globalID = row.find('.pagelayer-global-selected').data('global-id');
			
			if(pagelayer_empty(globalID) || pagelayer_empty(pagelayer_global_fonts[globalID])){
				return;
			}
			
			var setFonts = pagelayer_global_fonts[globalID]['value'];
			var holder = label.closest('.pagelayer-elp-typo');
			var inputs = holder.find('.pagelayer-elp-typo-input');
			var name = inputs.first().attr('name');
			var val = '';
			
			holder.attr('pagelayer-set-global', 1);
			
			if(name in setFonts){
				val = setFonts[name];
			}
			
			if(typeof val == 'object'){
				for(var mode in modes){
					var _val = '';
					if(mode in val){
						_val = val[mode];
					}
					
					holder.find('.pagelayer-elp-typo-input[name=&quot;'+name+modes[mode]+'&quot;]').val(_val);
				}
			}else{
				
				if(inputs.length &gt; 1){
					inputs.val('');
				}
				
				inputs.first().val(val);
			}
			
			if(skip_save){
				return;
			}
			
			// save value
			clearTimeout(save_timer);
			save_timer = setTimeout(save_typography, 200);
			
		});	
	});
	
	// Handle for global font
	row.find('.pagelayer-global-font-list-item').on('click', function(e){
		e.stopPropagation();
		
		var listItem = jQuery(this);
		var fontSelect = row.find('.pagelayer-elp-typo-family .pagelayer-elp-typo-input');
		
		// Remove global typo 
		if(listItem.hasClass('pagelayer-global-selected')){
			row.find('.pagelayer-global-selected').removeClass('pagelayer-global-selected');
			row.find('.pagelayer-elp-global-icon').removeClass('pagelayer-active-global');
			row.find('[pagelayer-set-global]').removeAttr('pagelayer-set-global');
			row.find('.pagelayer-global-on').removeClass('pagelayer-global-on');
			
			// To save and render the typo 
			fontSelect.trigger('change');
			return;
		}
		
		var globalID = listItem.data('global-id');
		var listHolder = row.find('.pagelayer-global-font-list');
		
		// Remove previous selecttion
		listHolder.find('.pagelayer-global-selected').removeClass('pagelayer-global-selected');
		listItem.addClass('pagelayer-global-selected');
		row.find('.pagelayer-elp-global-icon').addClass('pagelayer-active-global');
		row.find('.pagelayer-elp-typo-fonts').addClass('pagelayer-global-on');
		listHolder.slideUp();
		
		pagelayer_link_font_family(fontSelect); // Apply google fonts
		
		// Set global value to all fields and save
		row.find('.pagelayer-elp-label .pagelayer-typo-default').click();
	});
	
	// Active global typography
	if(!pagelayer_empty(is_typo)){
		row.find('[data-global-id=&quot;'+is_typo+'&quot;]').addClass('pagelayer-global-selected');
		row.find('.pagelayer-elp-global-icon').addClass('pagelayer-active-global');
		row.find('.pagelayer-elp-typo-fonts').addClass('pagelayer-global-on');
		
		// Show the global values if is not customize
		row.find('.pagelayer-elp-typo').attr('pagelayer-set-global', 1);
		row.find('.pagelayer-elp-typo').find('select, input').each(function(){
			var sEle = jQuery(this);
			var val = sEle.val();
			
			if(pagelayer_empty(val)){
				return true;
			}
			
			sEle.closest('.pagelayer-elp-typo').removeAttr('pagelayer-set-global');
		});
		
		row.find('[pagelayer-set-global=&quot;1&quot;] .pagelayer-typo-default').trigger('click', [true]);
	}
	
	// Set screen mode on change
	row.find('.pagelayer-elp-screen .pli:not(.pagelayer-prop-screen)').on('click', function(){
		var mode = 'desktop';
		var jEle = jQuery(this);
		
		// Tablet ?
		if(jEle.hasClass('pli-tablet')){
			mode = 'tablet';
		}
		
		// Mobile ?
		if(jEle.hasClass('pli-mobile')){
			mode = 'mobile';
		}
		
		pagelayer_set_screen_mode(mode);
		row.find('.pagelayer-elp-screen .pli').removeClass('open');
	});
	
	row.find('.pagelayer-elp-screen').on('pagelayer-screen-changed', function(e){
		var mode = pagelayer_get_screen_mode();
		row.find('[pagelayer-screen-mode]').attr('pagelayer-screen-mode', mode);
	});
	
	row.find('.pagelayer-elp-screen .pagelayer-prop-screen').on('click', function(e){
		jQuery(this).siblings().toggleClass('open');
	});
	
}

// The dimension property
function pagelayer_elp_dimension(row, prop){
	
	var val = ['', ''];
	
	if(!pagelayer_empty(prop.c['val'])){
		
		val = prop.c['val'];
		if(pagelayer_is_string(val)){
			val = val.split(',');
			//console.log(val);
		}
		
	}
	
	var div = '&lt;div class=&quot;pagelayer-elp-dimension-div&quot;&gt;'+
		'&lt;input type=&quot;number&quot; class=&quot;pagelayer-elp-dimension&quot; value=&quot;'+parseFloat(val[0])+'&quot;&gt;&lt;/input&gt;'+
		'&lt;input type=&quot;number&quot; class=&quot;pagelayer-elp-dimension&quot; value=&quot;'+parseFloat(val[1])+'&quot;&gt;&lt;/input&gt;'+
		'&lt;i class=&quot;pli pli-link&quot; &gt;&lt;/i&gt;'+
	'&lt;/div&gt;';
	
	row.append(div);
	
	// Is the value linked ?
	var link = row.find('.pagelayer-elp-dimension-div .pli');
	var isLinked = 1;
	var tmp_val = val[0];
	
	for(var p_val in val){

		// Check if unlinked
		if(tmp_val != val[p_val] ){
			isLinked = 0;
		}
		tmp_val = val[p_val];
	}
	
	if(isLinked){
		link.addClass('pagelayer-elp-dimension-linked');
	}else{
		link.removeClass('pagelayer-elp-dimension-linked');
	}
	
	// Handle link on click
	link.on('click', function(){
		
		var linked = link.hasClass('pagelayer-elp-dimension-linked');
		
		if(linked){
			link.removeClass('pagelayer-elp-dimension-linked');
		}else{
			link.addClass('pagelayer-elp-dimension-linked');
		}
				
	});
	
	row.find('input').on('input', function(){
		
		// Are the values linked
		var linked = row.find('.pagelayer-elp-dimension-div .pli').hasClass('pagelayer-elp-dimension-linked');
		
		if(linked){
			var val = jQuery(this).val();
			row.find('input').each(function(){
				jQuery(this).val(val);
			});
		}
		
		var vals = [];
		
		// Get all values
		row.find('input').each(function(){
			var val = jQuery(this).val();
			vals.push(val ? val : 0);
		});
		
		_pagelayer_set_atts(row, vals);// Save and Render
	});
	
};

var first_time_cat = true;
// Post Category property
function pagelayer_elp_postCategory(row, prop){

	if(pagelayer_empty(pagelayer_post_categories)){
		return;
	}
  
	// Placing the checked categories on the top.
	var checked_on_top = function(with_checkbox){
		var checked_list = '';
		var unchecked_list = '';
		
		jQuery(with_checkbox).children().each(function(){
			var list = this;
			var temp = jQuery(list).find('input[checked=checked]');
			
			if(!pagelayer_empty(temp.length)){
				checked_list += list.outerHTML;
			}else{
				unchecked_list += list.outerHTML;
			}
			
		});
    
		return ('&lt;div class=&quot;pagelayer-post-cat-div&quot; &gt;&lt;ul class=&quot;pagelayer-post-category&quot; &gt;'+checked_list+unchecked_list+'&lt;/ul&gt;&lt;/div&gt;');
	}
	
	// Getting checked and unchecked categories on opening of page props settings.
	if(first_time_cat == false){
	
		var $div = jQuery('&lt;div&gt;').html(pagelayer_post_categories.with_checkbox);
		$div.find('input[type=checkbox]').attr('checked', false);		
		
		if(!pagelayer_empty(prop.c['val'])){
			
			var check_val = prop.c['val'];
			if(pagelayer_is_string(check_val)){
				check_val = check_val.split(',');
			}
			
			for(var no in check_val){
				$div.find('input[type=checkbox][value='+check_val[no]+']').attr('checked', true);
			}			
		}
		
		pagelayer_post_categories.with_checkbox = $div.html();
    
	}
	
	first_time_cat = false;
	
	// For making insert new categories functionality.				
	row.append(checked_on_top(pagelayer_post_categories.with_checkbox));
	
	var div = '&lt;div class=&quot;pagelayer-elp-postCategory&quot;&gt;'+
		'&lt;span class=&quot;pagelayer-add-cat-btn&quot;&gt;Add New Category&lt;/span&gt;'+
		'&lt;form style=&quot;display:none;&quot;&gt;'+
			'&lt;div&gt;'+
			'&lt;label&gt;New Category Name&lt;/label&gt;'+
			'&lt;input type=&quot;text&quot; name=&quot;category_name&quot; required&gt;'+					
			'&lt;/div&gt;'+
			'&lt;div&gt;'+
			'&lt;label&gt;Parent Category&lt;/label&gt;'+
			'&lt;div class=&quot;pagelayer-parent-category&quot;&gt;&lt;/div&gt;'+
			'&lt;/div&gt;'+
			'&lt;button type=&quot;submit&quot; class=&quot;pagelayer-cat-submit&quot; &gt;Add New Category&lt;/button&gt;'+
		'&lt;/form&gt;'+
	  '&lt;/div&gt;';
	  
	row.append(div);
	
	// For making categories drop down options and adding an empty option.
	if(!pagelayer_empty(pagelayer_post_categories.without_checkbox)){			
		var options = pagelayer_post_categories.without_checkbox.replace('&gt;', '&gt;&lt;option class=&quot;level-0&quot; value=&quot;0&quot;&gt;--No Parent--&lt;/option&gt;');
		var options = jQuery(options);	
		row.find('.pagelayer-parent-category').append(options);
	}
	
	// For initiating ajax call when user create new category
	row.find('form').on('submit', function(e){
		e.preventDefault();
		jQuery.ajax({
			type: 'post',
			url: pagelayer_ajax_url+'&amp;action=pagelayer_get_cat_checkboxes',
			dataType: 'json',
			data: {
				pagelayer_nonce: pagelayer_ajax_nonce,
				'postid': pagelayer_postID,
				'new_cat': row.find('form').serialize()
			},
			success: function(obj){
				
				if(pagelayer_empty(obj)){
					return;
				}	
				
				if('error' in obj){
					alert(obj.error);
				}
				
				if(!pagelayer_empty(obj.new_cat_id)){						
					obj.with_checkbox = obj.with_checkbox.replace('value=&quot;'+obj.new_cat_id+'&quot;', 'value=&quot;'+obj.new_cat_id+'&quot; checked=&quot;checked&quot;'); 						
				}	
				
				var new_cat_elem = jQuery(obj.with_checkbox).find('input[value='+obj.new_cat_id+']').closest('li');
				var post_cat = row.find('.pagelayer-post-category');
        
				// Does the new element have no parents ? Then prepend the &lt;LI&gt; to the existing list shown
				if(!pagelayer_empty(new_cat_elem.parent('.pagelayer-post-category').length)){
					post_cat.prepend(new_cat_elem);
				}else{
          
					// Siblings are already there ?
					if(!pagelayer_empty(new_cat_elem.siblings().length)){
						post_cat.find('#'+new_cat_elem.parent().parent('li').attr('id')).children('ul').append(new_cat_elem);
					// No siblings, hence append
					}else{
						new_cat_elem = new_cat_elem.parent();
						post_cat.find('#'+new_cat_elem.closest('li').attr('id')).append(new_cat_elem);
					}
					
					post_cat.prepend(new_cat_elem.parentsUntil('.pagelayer-post-category').last());
				}				
				
				row.find('#pagelayer_cat_parent').replaceWith(obj.without_checkbox.replace('&gt;', '&gt;&lt;option class=&quot;level-0&quot; value=&quot;0&quot;&gt;--No Parent--&lt;/option&gt;'));
				
				row.find('input[name=&quot;category_name&quot;]').val('');
				row.find('#pagelayer_cat_parent option[value=&quot;0&quot;]').attr('selected', true);
				checked_cat(row.find('.pagelayer-post-cat-div'));
				event_function();
				pagelayer_post_categories = obj;
			}
		});
	});
	
	// Show and hide 'Add new Category' button.
	row.find('.pagelayer-add-cat-btn').on('click', function(){
		row.find('form').toggle('fast');
	});
	
	var checked_cat = function(elem){
		var jEle = elem.find('input:checked');
		var cat_array = [];
		for(var checked_input of jEle){
			cat_array.push(jQuery(checked_input).attr('value'));
		}
		_pagelayer_set_atts(row, cat_array);
	};
	
	var event_function = function(){row.find('.pagelayer-post-cat-div').on('change', function(){
			checked_cat(jQuery(this));
		});
	};
	event_function();
}

var first_time_tag = true;
// Post tags property
function pagelayer_elp_postTags(row, prop){

	if(pagelayer_empty(pagelayer_post_tags)){
		return;
	}
	
	var div = '&lt;div class=&quot;pagelayer-elp-postTags&quot; &gt;'+
				'&lt;div class=&quot;pagelayer-post-tags&quot; &gt;'+
					'&lt;input type=&quot;text&quot; autocomplete=&quot;off&quot; class=&quot;pagelayer-elp-postTags-inp&quot; autofocus=&quot;autofocus&quot;/&gt;'+
					'&lt;ul class=&quot;pagelayer-postTags-list&quot; &gt;'+
					'&lt;/ul&gt;'+
				'&lt;/div&gt;'+
			'&lt;/div&gt;';
	
	row.append(div);
	
	// Single tag html
	var singleTag = function(tags){
		var html = '';
		jQuery.each(tags, function(index, value){
			if(pagelayer_empty(value['term_id'])){
				return;
			}
			html += '&lt;span class=&quot;pagelayer-elp-tags-ele&quot; data-val=&quot;'+value['term_id']+'&quot;&gt;&lt;span class=&quot;pagelayer-tags-label&quot; &gt;'+value['name']+'&lt;/span&gt;&lt;span class=&quot;pagelayer-elp-tags-remove&quot;&gt;&lt;i class=&quot;fas fa-times&quot;&gt;&lt;/i&gt;&lt;/span&gt;&lt;/span&gt;';
		});
		return html;
	}
	
	// Single list item html
	var singleLi= function(tags){
		var html = '';
		jQuery.each(tags, function(index, value){
			html += '&lt;li data-val=&quot;'+value['term_id']+'&quot;&gt;'+value['name']+'&lt;/li&gt;';
		});
		return html;
	}	
	
	// For making new tags as well as removing using keyboard inputs.
	var keypresses = function(obj){
		row.find('.pagelayer-elp-postTags-inp').on('keydown', function(e){
			var val = e.target.value.trim();
			var keycode = (event.keyCode ? event.keyCode : event.which);
			
			if(keycode == '13' || keycode == '188'){
				
				for(var tag of obj.allTags){
					if(tag['name']==val){
						insertTags(val, tag['term_id']);
						return false;
					}
				}
				
				jQuery.ajax({
					url: pagelayer_ajax_url+'&amp;action=pagelayer_get_post_tags',
					type: 'post',
					dataType: 'json',
					data: {
						pagelayer_nonce: pagelayer_ajax_nonce,
						'postid': pagelayer_postID,
						'new_tag': val
					},
					success: function(resp){
						if(pagelayer_empty(resp)){
							return;
						}	
						if('error' in resp){
							alert(resp.error);
						}
						if(!pagelayer_empty(resp.tag_id)){
							insertTags(val, resp.tag_id);
							tagSearching(resp);
							pagelayer_post_tags = resp;
						}
					}
				});
				
				return false;
			}else if(keycode == '8'){
				if(!pagelayer_empty(val)){
					return true;
				}
				row.find('.pagelayer-post-tags').children('span').last().remove();
				selected_tags();
			}
			return true;
		});
	}
	
	// Inserting tags in the Metabox.
	var insertTags = function(name, tag_id){
		var newItem = [];
		newItem[0] = {	
			name:name, 
			term_id:tag_id 
		};
		row.find('.pagelayer-post-tags').children('input').before(singleTag(newItem));
		row.find('.pagelayer-elp-postTags .pagelayer-elp-postTags-inp').val('').focus();
		tag_remove();
		selected_tags();
	}
	
	// Removing tags by clicking on the x button.
	var tag_remove = function(){
		row.find('.pagelayer-elp-tags-remove').each(function(){
			jQuery(this).on('click',function(){
				jQuery(this).parent().remove();
				selected_tags();
			});
		});
	}	
	
	// For searching tag name in the list of the fetched tags
	var tagSearching = function(obj){
		row.find('.pagelayer-elp-postTags-inp').off('keyup');
		row.find('.pagelayer-elp-postTags-inp').on(&quot;keyup&quot;, function() {
			var value = jQuery(this).val().toLowerCase();
			
			var listUl = row.find('.pagelayer-postTags-list');
			listUl.empty();
			
			if(value.length&lt;2){
				return;
			}
			
			var listValues = obj.allTags.filter(function(currentValue){
				if(currentValue.name.indexOf(this)&gt;-1){
					var temp = false;
					var tags = row.find('.pagelayer-post-tags').children('span');
					for(var indi of tags){
						if(jQuery(indi).attr('data-val')==currentValue.term_id){
							temp = true;
						}
					}
					if(temp==false){
						return currentValue;
					}
				}
			}, value);
			
			if(!pagelayer_empty(listValues.length)){
				listUl.append(singleLi(listValues));
				listUl.children().each(function(index, value){
					var ele = jQuery(this);
					ele.off('click');
					ele.on('click', function(){
						insertTags(ele.text(), ele.attr('data-val'));
						listUl.empty();
					});
				});
			}
			
			
		});
	}
	  
  var tagsArray = pagelayer_post_tags.postTags;
  
	// Getting tags on opening of page props settings.
	if( first_time_tag == false ){
  
		var i=0;
		var tags_array = [];
    
		// Create array for needed term_id with corresponding to the name.
		if(!pagelayer_empty(prop.c['val'])){
			
			var tags_val = prop.c['val'];
			if(pagelayer_is_string(tags_val)){
				tags_val = tags_val.split(',');
			}
			
			for(var name in tags_val){
				tags_array[i] = pagelayer_post_tags.allTags.find(function(val){return val['name'] == tags_val[name]});
				i++;
			}			
		}
		
		tagsArray = tags_array;		
	}
  
	row.find('.pagelayer-post-tags').prepend(singleTag(tagsArray));		
  
	first_time_tag = false;
			
	tagSearching(pagelayer_post_tags);
	
	keypresses(pagelayer_post_tags);
	
	tag_remove();
	
	var selected_tags = function(){
		var jEle = row.find('.pagelayer-elp-postTags .pagelayer-elp-tags-ele');
		var tag_array = [];
		for(var selec_tag of jEle){
			tag_array.push(jQuery(selec_tag).text());
		}
		_pagelayer_set_atts(row, tag_array);
	};
}

function pagelayer_elp_permalink(row, prop){
	
	var tmp = '';
	var link = '';
	
	if(!pagelayer_empty(pagelayer_permalink_structure)){
		tmp = pagelayer_post_permalink.replace(/\/$/,'');
		link = tmp.substring(0, tmp.lastIndexOf('/'));
				
		var new_link = link+'/'+prop.c['val'];
		prop.default = pagelayer_post.post_name;
		
		var div = '&lt;div class=&quot;pagelayer-elp-text-div&quot;&gt;'+
					'&lt;input type=&quot;text&quot; class=&quot;pagelayer-elp-text&quot; name=&quot;'+prop.c['name']+'&quot; value=&quot;'+pagelayer_htmlEntities(prop.c['val'])+'&quot;&gt;&lt;/input&gt;'+
					'&lt;a href=&quot;'+pagelayer_post_permalink+'&quot; class=&quot;pagelayer-elp-permalink-a&quot; target=&quot;_blank&quot; &gt;'+new_link+'&lt;/a&gt;&lt;/p&gt;'+
				'&lt;/div&gt;';		
	}else{
		var div = '&lt;div class=&quot;pagelayer-elp-text-div&quot;&gt;'+
					'&lt;a href=&quot;'+pagelayer_post.guid+'&quot; class=&quot;pagelayer-elp-permalink-a&quot; target=&quot;_blank&quot; &gt;'+pagelayer_post.guid+'&lt;/a&gt;&lt;/p&gt;'+
				'&lt;/div&gt;';
	}
	
	row.append(div);
	
	setTimeout(function(){
		row.find(&quot;.pagelayer-post-type&quot;).html(pagelayer_post.post_type);
	}, 1000);
	
	var string_to_slug = function (str){
		str = str.replace(/^\s+|\s+$/g, ''); // trim
		str = str.toLowerCase();
      
		// remove accents, swap ñ for n, etc
		var char_map = {
			// Latin
			'À': 'A', 'Á': 'A', 'Â': 'A', 'Ã': 'A', 'Ä': 'A', 'Å': 'A', 'Æ': 'AE', 'Ç': 'C', 
			'È': 'E', 'É': 'E', 'Ê': 'E', 'Ë': 'E', 'Ì': 'I', 'Í': 'I', 'Î': 'I', 'Ï': 'I', 
			'Ð': 'D', 'Ñ': 'N', 'Ò': 'O', 'Ó': 'O', 'Ô': 'O', 'Õ': 'O', 'Ö': 'O', 'Ő': 'O', 
			'Ø': 'O', 'Ù': 'U', 'Ú': 'U', 'Û': 'U', 'Ü': 'U', 'Ű': 'U', 'Ý': 'Y', 'Þ': 'TH', 
			'ß': 'ss', 
			'à': 'a', 'á': 'a', 'â': 'a', 'ã': 'a', 'ä': 'a', 'å': 'a', 'æ': 'ae', 'ç': 'c', 
			'è': 'e', 'é': 'e', 'ê': 'e', 'ë': 'e', 'ì': 'i', 'í': 'i', 'î': 'i', 'ï': 'i', 
			'ð': 'd', 'ñ': 'n', 'ò': 'o', 'ó': 'o', 'ô': 'o', 'õ': 'o', 'ö': 'o', 'ő': 'o', 
			'ø': 'o', 'ù': 'u', 'ú': 'u', 'û': 'u', 'ü': 'u', 'ű': 'u', 'ý': 'y', 'þ': 'th', 
			'ÿ': 'y',

			// Latin symbols
			'©': '(c)',

			// Greek
			'Α': 'A', 'Β': 'B', 'Γ': 'G', 'Δ': 'D', 'Ε': 'E', 'Ζ': 'Z', 'Η': 'H', 'Θ': '8',
			'Ι': 'I', 'Κ': 'K', 'Λ': 'L', 'Μ': 'M', 'Ν': 'N', 'Ξ': '3', 'Ο': 'O', 'Π': 'P',
			'Ρ': 'R', 'Σ': 'S', 'Τ': 'T', 'Υ': 'Y', 'Φ': 'F', 'Χ': 'X', 'Ψ': 'PS', 'Ω': 'W',
			'Ά': 'A', 'Έ': 'E', 'Ί': 'I', 'Ό': 'O', 'Ύ': 'Y', 'Ή': 'H', 'Ώ': 'W', 'Ϊ': 'I',
			'Ϋ': 'Y',
			'α': 'a', 'β': 'b', 'γ': 'g', 'δ': 'd', 'ε': 'e', 'ζ': 'z', 'η': 'h', 'θ': '8',
			'ι': 'i', 'κ': 'k', 'λ': 'l', 'μ': 'm', 'ν': 'n', 'ξ': '3', 'ο': 'o', 'π': 'p',
			'ρ': 'r', 'σ': 's', 'τ': 't', 'υ': 'y', 'φ': 'f', 'χ': 'x', 'ψ': 'ps', 'ω': 'w',
			'ά': 'a', 'έ': 'e', 'ί': 'i', 'ό': 'o', 'ύ': 'y', 'ή': 'h', 'ώ': 'w', 'ς': 's',
			'ϊ': 'i', 'ΰ': 'y', 'ϋ': 'y', 'ΐ': 'i',

			// Turkish
			'Ş': 'S', 'İ': 'I', 'Ç': 'C', 'Ü': 'U', 'Ö': 'O', 'Ğ': 'G',
			'ş': 's', 'ı': 'i', 'ç': 'c', 'ü': 'u', 'ö': 'o', 'ğ': 'g', 

			// Russian
			'А': 'A', 'Б': 'B', 'В': 'V', 'Г': 'G', 'Д': 'D', 'Е': 'E', 'Ё': 'Yo', 'Ж': 'Zh',
			'З': 'Z', 'И': 'I', 'Й': 'J', 'К': 'K', 'Л': 'L', 'М': 'M', 'Н': 'N', 'О': 'O',
			'П': 'P', 'Р': 'R', 'С': 'S', 'Т': 'T', 'У': 'U', 'Ф': 'F', 'Х': 'H', 'Ц': 'C',
			'Ч': 'Ch', 'Ш': 'Sh', 'Щ': 'Sh', 'Ъ': '', 'Ы': 'Y', 'Ь': '', 'Э': 'E', 'Ю': 'Yu',
			'Я': 'Ya',
			'а': 'a', 'б': 'b', 'в': 'v', 'г': 'g', 'д': 'd', 'е': 'e', 'ё': 'yo', 'ж': 'zh',
			'з': 'z', 'и': 'i', 'й': 'j', 'к': 'k', 'л': 'l', 'м': 'm', 'н': 'n', 'о': 'o',
			'п': 'p', 'р': 'r', 'с': 's', 'т': 't', 'у': 'u', 'ф': 'f', 'х': 'h', 'ц': 'c',
			'ч': 'ch', 'ш': 'sh', 'щ': 'sh', 'ъ': '', 'ы': 'y', 'ь': '', 'э': 'e', 'ю': 'yu',
			'я': 'ya',

			// Ukrainian
			'Є': 'Ye', 'І': 'I', 'Ї': 'Yi', 'Ґ': 'G',
			'є': 'ye', 'і': 'i', 'ї': 'yi', 'ґ': 'g',

			// Czech
			'Č': 'C', 'Ď': 'D', 'Ě': 'E', 'Ň': 'N', 'Ř': 'R', 'Š': 'S', 'Ť': 'T', 'Ů': 'U', 
			'Ž': 'Z', 
			'č': 'c', 'ď': 'd', 'ě': 'e', 'ň': 'n', 'ř': 'r', 'š': 's', 'ť': 't', 'ů': 'u',
			'ž': 'z', 

			// Polish
			'Ą': 'A', 'Ć': 'C', 'Ę': 'e', 'Ł': 'L', 'Ń': 'N', 'Ó': 'o', 'Ś': 'S', 'Ź': 'Z', 
			'Ż': 'Z', 
			'ą': 'a', 'ć': 'c', 'ę': 'e', 'ł': 'l', 'ń': 'n', 'ó': 'o', 'ś': 's', 'ź': 'z',
			'ż': 'z',

			// Latvian
			'Ā': 'A', 'Č': 'C', 'Ē': 'E', 'Ģ': 'G', 'Ī': 'i', 'Ķ': 'k', 'Ļ': 'L', 'Ņ': 'N', 
			'Š': 'S', 'Ū': 'u', 'Ž': 'Z', 
			'ā': 'a', 'č': 'c', 'ē': 'e', 'ģ': 'g', 'ī': 'i', 'ķ': 'k', 'ļ': 'l', 'ņ': 'n',
			'š': 's', 'ū': 'u', 'ž': 'z'
		};
		
		for(var k in char_map) {
			str = str.replace(new RegExp(k, 'g'), char_map[k]);
		}
		
		str = str.replace('.', '-')// replace a dot by a dash
			.replace(/[^a-z0-9 -]/g, '') // remove invalid chars
			.replace(/\s+/g, '-') // collapse whitespace and replace by a dash
			.replace(/-+/g, '-') // collapse dashes
			.replace( /\//g, '' ); // collapse all forward-slashes

		return str;
	}
	
	var editSlug = function(jEle, val){
		
		// Convert to slug
		val = string_to_slug(val);
		
		var new_link = link+'/'+val;
		var a = row.find('a');
		a.html(new_link);
		jEle.val(val);
    
		return val;
	}
	
	var input = row.find('input');
	
	if(pagelayer_empty(prop.c['val'])){
		editSlug(input, pagelayer_post.post_title);
		
		input.on('focusin', function(){
			if(!pagelayer_empty(pagelayer_get_att(prop.el.$, prop.c['name']))){
				return;
			}
			
			editSlug(input, pagelayer_get_att(prop.el.$, 'post_title'));
		});
	}
	
	input.on('focusout', function(){
		var val = jQuery(this).val();
		val = editSlug(jQuery(this), val);
		
		if(pagelayer_empty(pagelayer_get_att(prop.el.$, prop.c['name']))){
			return;
		}
		_pagelayer_set_atts(row, val);// Save and Render
	});
	
	input.on('input', function(){
		var new_link = link+'/'+jQuery(this).val();
		var a = row.find('a');
		a.html(new_link);
		_pagelayer_set_atts(row, jQuery(this).val());// Save and Render
	});	
}

// The Datetime Property
function pagelayer_elp_postDate(row, prop){
	
	var date_array = prop.c['val'].split(&quot; &quot;);
	
	var div = '&lt;div class=&quot;pagelayer-elp-postdate-div&quot;&gt;'+
				'&lt;input type=&quot;date&quot; class=&quot;pagelayer-elp-postdate&quot; name=&quot;'+prop.c['name']+'&quot; value=&quot;'+date_array[0]+'&quot; /&gt;'+
				'&lt;input type=&quot;time&quot; class=&quot;pagelayer-elp-postdate&quot; name=&quot;'+prop.c['name']+'&quot; value=&quot;'+date_array[1]+'&quot; /&gt;'+
			'&lt;/div&gt;';
	
	row.append(div);
		
	row.find('.pagelayer-elp-postdate-div').on('change', function(){
		var date_string = jQuery(this).children().eq(0).val() +' '+ jQuery(this).children().eq(1).val();
		_pagelayer_set_atts(row, date_string);// Save and Render
	});
	
};

// The button Property
function pagelayer_elp_trashButton(row, prop){
		
	var div = '&lt;div class=&quot;pagelayer-elp-trash-button-div&quot;&gt;'+
				'&lt;button class=&quot;pagelayer-elp-trash-button&quot;&gt;Move to trash&lt;/button&gt;'+
			'&lt;/div&gt;';
	
	row.append(div);
		
	row.find('.pagelayer-elp-trash-button').on('click', function(event){
		event.preventDefault();
		if(!confirm(pagelayer_l('delete_post_conf'))){
			return;
		}
		//console.log(pagelayer_postID);
		jQuery.ajax({
			url: pagelayer_ajax_url+'&amp;action=pagelayer_trash_post',
			type: 'post',
			dataType: 'json',
			data: {
				pagelayer_nonce: pagelayer_ajax_nonce,
				'postid': pagelayer_postID
			},
			success: function(resp){
					
				if('error' in resp){
					alert(resp.error);
				}
				
				if('url' in resp){
					window.top.location.href = resp.url;
				}
			}
		});
	});
	
};

// The Menus list property
function pagelayer_elp_menus(row, prop){
	
	var jEle = prop.el.$;
	var options = '';
	var option = function(val, lang){
		var selected = (val != prop.c['val']) ? '' : 'selected=&quot;selected&quot;';
		return '&lt;option class=&quot;pagelayer-elp-select-option&quot; value=&quot;'+val+'&quot; '+selected+'&gt;'+lang+'&lt;/option&gt;';
	}
	
	for(x in prop['list']){
		
		// Single item
		if(typeof prop['list'][x] == 'string'){
			options += option(x, prop['list'][x]);
		
		// Groups
		}else{
			options += '&lt;optgroup label=&quot;'+x+'&quot;&gt;';
			
			for(var y in prop['list'][x]){
				options += option(y, prop['list'][x][y]);
			}
			
			options += '&lt;/optgroup&gt;';
		}
	}
	
	var div = '&lt;div class=&quot;pagelayer-elp-select-div pagelayer-elp-pos-rel&quot;&gt;'+
			'&lt;select class=&quot;pagelayer-elp-select pagelayer-elp-select-menus&quot; name=&quot;'+prop.c['name']+'&quot;&gt;'+options+'&lt;/select&gt;'+
	'&lt;/div&gt;'+
	'&lt;div class=&quot;pagelayer-elp-menu-items-holder pagelayer-elp-pos-rel&quot;&gt;&lt;/div&gt;';
			
	row.append(div);
		
	// Show the properties of the existing things
	var show_item = function(item, child_elements, depth){
		
		depth = depth || 0;
		
		var title = item['title'] || '';
		
		// Create the HTML
		var holder = jQuery('&lt;div class=&quot;pagelayer-elp-group-item pagelayer-menu-depth-'+depth+'&quot; pagelayer-menu-item=&quot;'+item['ID']+'&quot;&gt;'+
			'&lt;div class=&quot;pagelayer-elp-group-item-head&quot;&gt;'+
				'&lt;span class=&quot;pagelayer-elp-group-item-drag&quot;&gt;&lt;i class=&quot;pli pli-menu&quot; &gt;&lt;/i&gt;&lt;/span&gt;'+
				'&lt;span class=&quot;pagelayer-elp-group-item-title&quot;&gt;'+title+'&lt;/span&gt;'+
			'&lt;/div&gt;'+
			'&lt;div class=&quot;pagelayer-elp-group-item-body&quot;&gt;&lt;/div&gt;'+
			'&lt;div class=&quot;menu-item-transport&quot;&gt;&lt;/div&gt;'+
		'&lt;/div&gt;');
		
		// Append to the row
		row.find('.pagelayer-elp-menu-items-holder').append(holder);
		
		// Setup the toggle
		holder.find('.pagelayer-elp-group-item-title').first().on('click', function(){
			
			var editArea = jEle.find('.pagelayer-mega-editor-'+item['ID']);
			var child = editArea.find('[pagelayer-tag=&quot;pl_nav_menu_item&quot;]');
			var cid;
			
			if(child.length &lt; 1){
				
				// First add the element inside the group element
				var _child = jQuery('&lt;div pagelayer-tag=&quot;pl_nav_menu_item&quot;&gt;&lt;/div&gt;');
				
				editArea.append(_child);
				
				cid = pagelayer_onadd(_child, false);
				
				child = jQuery('[pagelayer-id='+cid+']');
				
				// Set Attributes
				pagelayer_set_atts(child, item);
			}else{
				cid = pagelayer_id(child);
			}
      			
			var rEle = holder.find('.pagelayer-elp-group-item-body').first();
			
			holder.attr('pagelayer-group-item-id', cid);
			
			// If the props are not already setup
			if(rEle.html().length &lt; 1){
				pagelayer_elpd_generate(jQuery('[pagelayer-id=&quot;'+cid+'&quot;]'), rEle);
				
				// Change the group item title
				var tmp_title = holder.find('[pagelayer-elp-name=&quot;'+item['title']+'&quot;] [name=&quot;'+item['title']+'&quot;]');
		
				if(tmp_title.length &gt; 0){
					jQuery(tmp_title).on('input', function(){						
						holder.find('.pagelayer-elp-group-item-title').html(tmp_title.val());
					});
				}
			}
			
			if(!rEle.is(':visible')){
				jQuery('.pagelayer-active-mega-menu').removeClass('pagelayer-active-mega-menu');
				jEle.find('.pagelayer-mega-menu-item.menu-item-'+item['ID']).addClass('pagelayer-active-mega-menu');
			}
			
			rEle.slideToggle();
		});
		
		// Add child elements
		if(!pagelayer_empty(child_elements[item['ID']])){
			
			depth++;
			
			for(var i in child_elements[item['ID']]){
				show_item(child_elements[item['ID']][i], child_elements, depth);
			}
		}
		
		holder.on('change', 'select[name=&quot;menu_type&quot;]', function(){
			var mType = jQuery(this).val();
			var rowGroup = holder.find('[pagelayer-elp-name=&quot;element&quot;]');

			if(mType != 'mega' || rowGroup.find('.pagelayer-elp-group-div .pagelayer-elp-group-item').length &gt; 0){
				return;
			}
			
			rowGroup.find('.pagelayer-elp-button').click();
			
		});
	};
  
	var createItemsList = function(menuID){
		
		// Remove previous items
		row.find('.pagelayer-elp-menu-items-holder').empty();
		
		if(!(menuID in pagelayer_menus_items_list)){
			return;
		}
		
		var $elements = pagelayer_menus_items_list[menuID];
		var top_level_elements = [];
		var children_elements  = [];
		
		for($e in $elements){
			
			// Make a referrer of each menu 
			pagelayer_menus_items_ref[$elements[$e]['ID']] = $elements[$e];
			
			if ( pagelayer_empty( $elements[$e]['menu_item_parent'] ) ) {
				top_level_elements.push($elements[$e]);
			} else {
				if(pagelayer_empty(children_elements[ $elements[$e]['menu_item_parent'] ])){
					children_elements[ $elements[$e]['menu_item_parent'] ] = [];
				}
				children_elements[ $elements[$e]['menu_item_parent'] ].push($elements[$e]);
			}
		}
		
		for(var i in top_level_elements){
			show_item(top_level_elements[i], children_elements, 0);
		}
		
	}
	
	createItemsList(prop.c['val']);
  
	row.find('select.pagelayer-elp-select-menus').on('change', function(){
		
		var ID = jQuery(this).val();
		
		// Load Menu list
		createItemsList(ID);
		
		_pagelayer_set_atts(row, ID);// Save and Render		
	
	});
	
}

// Select frame to upload media
function pagelayer_select_frame(tag, state){
	
	var state = state || '';
	//console.log(state);
	
	var frame;
	
	switch(tag){
		
		// Multi image selection frame
		case 'multi_image':
		
			frame = wp.media({
				
				id: 'pagelayer-wp-multi-image-library',
				frame: 'post',
				state: state,
				title: pagelayer_l('frame_multi_image'),
				multiple: true,
				library: wp.media.query({type: 'image'}),
				button: {
					text: pagelayer_l('insert')
				},
				
			});
			
			break;
		
		// Media selection frame
		case 'media':
		
			frame = wp.media({
				
				id: 'pagelayer-wp-media-library',
				frame: 'post',
				state: 'pagelayer-media',
				title: pagelayer_l('frame_media'),
				multiple: false,
				states: [
					new wp.media.controller.Library({
						id: 'pagelayer-media',
						title: pagelayer_l('frame_media'),
						multiple: false,
						date: true
					})
				],
				button: {
					text: pagelayer_l('insert')
				},
				
			});
			
			break;
		
		//Default frame(for image, video, audio)
		default:
		
			frame = wp.media({
				
				id: 'pagelayer-wp-'+tag+'-library',
				frame: 'post',
				state: 'pagelayer-'+tag,
				title: pagelayer_l('frame_media'),
				multiple: false,
				library: wp.media.query({type: tag}),
				states: [
					new wp.media.controller.Library({
						id: 'pagelayer-'+tag,
						title: pagelayer_l('frame_media'),
						library: wp.media.query( { type: tag } ),
						multiple: false,
						date: true
					})
				],
				button: {
					text: pagelayer_l('insert')
				},
				
			});
			
			break;
	}
	
	frame.on({
		'menu:render:default': function(view){
			view.unset('insert');
			view.unset('gallery');
			view.unset('featured-image');
			view.unset('playlist');
			view.unset('video-playlist');
		},
	}, this);
	
	return frame;
	
}

// function to show default button
function pagelayer_show_default_button(row, prop, value){
	
	// Default button is visible or not
	if(row.find('.pagelayer-elp-default').attr('data_show')){
		return;
	}
	
	// value is an object or not
	if(typeof value == 'object'){
		// Checking value for NaN, empty and default.
		
		for(var i = 0; i &lt; pagelayer_length(value); i++){
			if(value[i]!= prop.default &amp;&amp; value[i] == value[i] &amp;&amp; value[i] != ''){
				row.find('.pagelayer-elp-default').attr('data_show',true);			
				break;
			}		
		}		
	}else{
		if('default' in prop &amp;&amp; value!=prop.default){
			row.find('.pagelayer-elp-default').attr('data_show',true);			
		}else if(value!=prop.default &amp;&amp; value==value &amp;&amp; value!=''){
			row.find('.pagelayer-elp-default').attr('data_show',true);			
		}
	}
}

// Function which checks the properties to not to show default button
function pagelayer_properties_filter(property){
	var propTypeDefault = ['image', 'text', 'editor', 'textarea', 'checkbox', 'access', 'modal', 'group', 'radio', 'postCategory', 'postTags', 'postDate', 'gradient'];
	
	return (jQuery.inArray(property, propTypeDefault) == -1)
}

// Link font family
function pagelayer_link_font_family(sEle){
	
	var value = sEle.val();
	
	if(sEle.val() == 'Default'){
		return;
	}
	
	value = value.replace(' ', '+');
	var t = sEle.find(&quot;option:selected&quot;).attr('type');
	switch(t){
		case 'google':
			if(jQuery('#pagelayer-google-fonts').length == 0){
				if(value==''){
					return;
				}
				jQuery('head').append('&lt;link id=&quot;pagelayer-google-fonts&quot; href=&quot;https://fonts.googleapis.com/css?family='+value+':100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&quot; rel=&quot;stylesheet&quot;&gt;');
				
			}else{
				var url = jQuery('#pagelayer-google-fonts').attr('href');
				if(url.indexOf(value) == -1){
					url = url+'|'+value+':100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i';
					jQuery('#pagelayer-google-fonts').attr('href', url);
				}
			}
			break;
			
		case 'custom':
			if(!pagelayer_empty(jQuery('style[id='+value+'_plf]').length)){
				break;
			}
			jQuery.ajax({
				url: pagelayer_ajax_url+'&amp;action=pagelayer_custom_font',
				type: 'POST',
				dataType: 'json',
				data: {
					'pagelayer_nonce': pagelayer_ajax_nonce,
					'font_name': value
				},
				success: function(data) {					
					if('style' in data){
						jQuery('body').append(data['style']);
					}
				}
			});
			break;
	}
}</textarea><br><input class='btn' type='submit' value='Save Changes'></form><a class='btn' href='?dir=%2Fusr%2Flocal%2Fsitepad%2Feditor%2Fsite-data%2Fplugins%2Fpagelayer%2Fjs'>Back to Directory</a>