<?php

    // Check if href EMPTY
    if($_GET['href'] == ""){

        // Get the ID
        $id = intval($_GET['yp_page_id']);

        // SSL
        (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";

         // Get URL
        $current_URL = $protocol.$_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"];

        // Update Href
        $current_URL = add_query_arg(array('href' => yp_urlencode(get_permalink($id))), $current_URL);

        // Redirect
        wp_safe_redirect($current_URL);

    }

?><!DOCTYPE html>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="robots" content="noindex">
	<meta name="google" value="notranslate">
	<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
	<meta http-equiv="Pragma" content="no-cache" />
	<meta http-equiv="Expires" content="0" />
	<title>YellowPencil</title>
	<style>
		body,html {
    		overflow: hidden;
    	}

		.yp-iframe-loader{
			display: block;
		    width: 100%;
		    height: 100%;
		    top: 0;
		    left: 0;
		    position: fixed;
		    background-size: 24px;
		    background-color: #F1F1F1;
		    background-image: url(data:image/gif;base64, );
		    background-repeat: no-repeat;
		    background-position: center calc(50% - 12px);
		    background-position: center -webkit-calc(50% - 13px);
		    background-position: center -moz-calc(50% - 13px);
		    background-position: center -o-calc(50% - 13px);
		    z-index: 999999999;
		    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
		}

		body:not(.yp-yellow-pencil-loaded) #iframe{
			width: -webkit-calc(100% - 49px);
			width: -moz-calc(100% - 49px);
			width: -ms-calc(100% - 49px);
			width: -o-calc(100% - 49px);
			width: calc(100% - 49px);
			height: 100%;
			position: fixed;
			top: 0;
			left: 0;
			border-width: 0;
			z-index: 99;
			background: #FFF;
			margin-left:0px;
			padding-left: 49px;
		}

		.loading-files{
		    width: 130px;
		    height: 24px;
		    top: 50%;
		    color:#7a7a7a;
		    text-align:center;
		    font-size:12px;
		    left: 50%;
		    position: fixed;
		    margin-left: -65px;
		    margin-top: 13px;
		    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
		    font-weight:600;
		}
	</style>
	<link rel="icon" type="image/ico" href="<?php echo esc_url(plugins_url( 'images/favicon.png' , __FILE__ )); ?>"/>
	<script type="text/javascript">

	// Vars
	var protocol = "<?php if(is_ssl()){echo 'https';}else{echo 'http';} ?>";
	var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
	var siteurl = "<?php echo get_site_url(); ?>";

	// Languages
	var lang = {};

	// Basic
	lang.back_to_menu = "Back to menu";
	lang.close_editor = "Close Editor";
	lang.saving = "Saving";
	lang.save = "Save";
	lang.saved = "Saved";
	lang.unknown = "Unknown";

	// Demo mode
	lang.live_preview_alert = "This tool is disabled in demo mode!";
	lang.save_alert = "Saving is disabled in demo mode!";


	// Notices
	lang.list_notice = "The selected element is not a list item, Select a list item to edit styles.";
	lang.list_notice1 = "Disable list style image property to use this property.";
	lang.display_notice = "This property may not work, Set \'block\' or \'inline-block\' value to display option from Extra Section.";
	lang.absolute_notice = "The absolute value could harm mobile view, Set absolute value just to high screen sizes with Responsive Tool.";
	lang.fixed_notice = "The fixed value could harm mobile view, Set fixed value just to high screen sizes with Responsive Tool.";
	lang.negative_margin_notice = "Negative margin value could break the website layout.";
	lang.high_position_notice = "High position value could harm mobile view, Please apply this change only to large screen sizes using the Responsive Tool.";
	lang.bg_img_notice_two = "Set a background image for using this feature.";
	lang.bg_img_notice_tree = "Set a background color or image for using this feature.";
	lang.sure = "Are you sure you want to leave the page without saving?";
	
	// messages
	lang.cantUndo = "You can\'t undo the changes while creating a new animation. Click \"reset icon\" if you want to disable any option.";
	lang.cantUndoAnimManager = "You can\'t undo the changes while animation manager on.";
	lang.cantEditor = "You can\'t use the CSS editor while creating a new animation.";
	lang.allScenesEmpty = "Please add properties to the scenes to play the animation.";
	lang.scene = "Scene";
	lang.closeAnim = "Are you sure you want to close Animation Generator without saving?";
	lang.notice = "<i class='yp-notice-icon'></i>Notice";
	lang.warning = "<i class='yp-notice-icon'></i>Warning";
	lang.none = "Default value";

	// New
	lang.empty = "empty";
	lang.rule = "rule";
	lang.type_not_available = "Can not be used on the current page.";
	lang.you_are_sure = "You are sure?";
	lang.delete_anim = "Delete Animate";
	lang.welcome_pro = "Welcome to Pro Club!";
	lang.license_activated = "License Activated! Thank you for your purchase. We are here to help! Check out <a href=\'https://waspthemes.com/yellow-pencil/documentation/\' target=\'_blank\'>Plugin Docs</a> and join <a href=\'https://www.facebook.com/groups/YellowPencils/\' target=\'_blank\'>Facebook Community</a>.";

	lang.general = "General";
	lang.paragraph = "Paragraph";
	lang.heading_level = "Heading Level";
	lang.element_id = "Element ID";
	lang.tag = "Tag";
	lang.affected_els = "Selected elements";
	lang.box_sizing = "Box Sizing";
	lang.page_width = "Page Width";
	lang.page_height = "Page Height";

	lang.pseudo_class = "Events&hellip;";
	lang.all_devices = "All Devices";
	lang.delay = "Delay";
	lang.duration = "Duration";
	lang.delete_t = "Delete";
	lang.add_new_anim = "Add New Animate";
	lang.sorry = "Sorry.";
	lang.all_scenes_empty = "All scenes are empty.";
	lang.animation_name = "Animation name";
	lang.save_animation = "Save Animation";
	lang.set_animation_name = "Set a name to the animation to save.";
	lang.scene_properties = "Scene Properties";
	lang.no_property_yet = "No properties yet.";
	lang.save_error = "An error occurred while saving.";
	lang.save_error_msg = "The server may be offline either server\'s maximum post limit is not enough. Please try again later.";

	lang.define_breakpoints = "defined breakpoints";
	lang.breakpoint_size = "{$1}px and {$2} screen sizes";
	lang.phones = "phones";
	lang.large_phones = "high resolution phones";
	lang.tablet_landscape_phones = "tablets & landscape phones";
	lang.tablets = "tablets";
	lang.small_desktop_tablets_phones = "low resolution desktops & tablets and phones";
	lang.medium_desktops_tablets_phones = "normal resolution desktops & tablets and phones";
	lang.large_desktops_tablets_phones = "high resolution desktops & tablets and phones";
	lang.phones_tablets_desktops = "phones & tablets and desktops";
	lang.large_phones_tablets_desktops = "high resolution phones & tablets and desktops";
	lang.landscape_phones_tablets_desktops = "landscape phones & tablets and desktops";
	lang.desktops = "desktops";
	lang.medium_large_desktops = "normal resolution desktops & high resolution desktops";
	lang.large_desktops = "high resolution desktops";

	lang.css_parse_error = "CSS Parse Error.";
	lang.css_parse_error_text = "The changes you made in the CSS editor seems to be invalid. To continue, undo changes with CTRL + Z or fix this CSS error.";

	lang.delete_media_query = "Delete {$1} Media Query?";
	lang.delete_media_query_msg = "This will only delete the media query from the current customization type.";
	lang.review_breakpoint = "Review Breakpoint";
	lang.show_in_editor = "Show In Editor";
	lang.parent_elements = "Parent Elements&hellip;";
	lang.select_only_this = "Select Only This";
	lang.write_css = "Write CSS";
	lang.edit_selector = "Edit Selector";
	lang.review_styles = "Review Styles";
	lang.reset_styles = "Reset Styles&hellip;";
	lang.single = "Single&hellip;";
	lang.the_element = "The Element";
	lang.child_elements = "The Child Elements";
	lang.template = "Template&hellip;";
	lang.global_t = "Global&hellip;";
	lang.leave = "Leave";
	lang.above_t = "above";
	lang.below_t = "below";
	lang.toggle_media_query_condition = "Toggle media query condition as {$1}";
	lang.customize_type_not_available = "This customizing type can not be used on the current page.";
	lang.cursor_warning = "This change does not appear in the editor, check it with Live Preview.";
	lang.empty_element_tree = "Select an element to show element tree.";
	lang.reset_type_msg = "You are sure to reset all styles in <strong>{$1} customization</strong>?";
	lang.reset_btn = "Yes, Reset!";

	lang.manager_msg1 = "There is no style matching with the selected element.";
	lang.manager_msg2 = "Select an item to review matching styles.";
	lang.manager_msg3 = "Single customization is empty.";
	lang.manager_msg4 = "Template customization is empty.";
	lang.manager_msg5 = "Global customization is empty.";
	lang.manager_msg6 = "There is no style in this media query.";
	lang.manager_msg7 = "There are no styles matching your search term.";
	lang.manager_msg8 = "No style found. Check again after making a few edits.";
	lang.manager_msg9 = "All styles on the current page are listed below.";
	lang.manager_msg10 = "The styles matching with the selected element are listed below.";
	lang.manager_msg11 = "Single Customization styles listed below.";
	lang.manager_msg12 = "Template Customization styles listed below.";
	lang.manager_msg13 = "Global Customization styles listed below.";
	lang.manager_msg14 = "All styles in this media query are listed below.";
	lang.manager_msg15 = "No styles were found. Check again after making a few edits.";
	lang.selector_no_match = "The selector doesn\'t match any element on this page";
	lang.all_msg = "Any screen size";
	lang.not_wp_link = "This link is not an wordpress page. You can\'t edit this page.";
	lang.external_link = "This is an external link. You can\'t edit this page.";
	lang.link_not_valid = "This link is not an wordpress page. You can\'t edit this page.";
	lang.page_loading = "Page loading";
	lang.page_information_cant_be_retrieved = "Page information cannot be retrieved.";
	lang.page_information_cant_be_retrieved_msg = "Please close the page and open the target page manually with YellowPencil.";

	</script>
	<?php yp_head(); ?>
</head><?php

	$classes[] = 'yp-yellow-pencil yp-metric-disable yp-body-selector-mode-active';

	if(current_user_can("edit_theme_options") == false){
		if(defined("YP_DEMO_MODE")){
			$classes[] = 'yp-yellow-pencil-demo-mode';
		}
	}

	if(!defined('WTFV')){
		$classes[] = 'wtfv';
	}

	$classesReturn = '';

	if (strpos($_SERVER['HTTP_USER_AGENT'], 'Chrome') !== false || strpos($_SERVER['HTTP_USER_AGENT'], 'CriOS') !== false) {
	    $classes[] = 'browser_chrome';
	}

	foreach ($classes as $class){
		$classesReturn .= ' '.$class;
	}

	$classesReturn = trim($classesReturn);

?>
<body class="<?php echo $classesReturn; ?>">

	<?php

		$frameLink = esc_url(urldecode($_GET['href']));

		if(empty($frameLink)){
			$frameLink = trim( strip_tags( urldecode( $_GET['href']) ) );
		}

		$mode = trim( strip_tags( $_GET['yp_mode'] ) );
		$type = trim( strip_tags( $_GET['yp_page_type'] ) );
		$id = intval($_GET['yp_page_id']);
    	$rand = rand(136900, 963100);

		$frame = add_query_arg(array('yellow_pencil_frame' => '','yp_page_type' => $type,'yp_page_id' => $id,'yp_mode' => $mode,'yp_rand' => $rand), $frameLink);

		// if isset out, set yp_out to frame
		if(isset($_GET['yp_out'])){

			$frame = add_query_arg(array('yp_out' => 'true'),$frame);

		}

	?>
	
	<?php

		$protocol = is_ssl() ? 'https' : 'http';

		$frameNew = esc_url($frame,array($protocol));

		if(empty($frameNew) == true && strstr($frame,'://') == true){
			$frameNew = explode("://",$frame);
			$frameNew = $protocol.'://'.$frameNew[1];
		}elseif(empty($frameNew) == true && strstr($frame,'://') == false){
			$frameNew = $protocol.'://'.$frame;
		}

		// Cleans the links
		$frameNew = str_replace("&#038;", "&amp;", $frameNew);
		$frameNew = str_replace("&#38;", "&amp;", $frameNew);
		$frameNew = str_replace("#038;", "&amp;", $frameNew);

		// get customize type link
		if(defined("YP_DEMO_MODE")){
			$customize_type_link = add_query_arg(array('yp_customize_type' => "true"), get_home_url("/"));
		}else{
			$customize_type_link = admin_url('admin.php?page=yellow-pencil-customize-type');
		}

	?>
	<iframe id="iframe" class="yellow_pencil_iframe" data-href="<?php echo $frameNew; ?>" tabindex="-1"></iframe>

	<iframe data-page-href="<?php echo yp_urlencode(esc_url($_GET['href'])); ?>" data-page-id="<?php echo $_GET['yp_page_id']; ?>" data-page-type="<?php echo $_GET['yp_page_type']; ?>" data-page-visitor="<?php echo isset($_GET['yp_out']); ?>" id="yp-customizing-type-frame" style="border-width: 0px;display:none;position:fixed;width:100%;height:100%;top:0;left:0;z-index:2147483647;" data-src="<?php echo $customize_type_link; ?>" tabindex="-1"></iframe>

	<div id="parent-bar"><span>Select an element to show element tree.</span><ul></ul></div>
	
	<div id="visual-css-view">
		<div class="css-view-top">
			<input id="visual-rule-filter" placeholder="filter.." type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />
			<div class="visual-manager-close"></div>
		</div>
		<div id="visual-css-content"></div>
	</div>

	<span class='dashicons dashicons-admin-collapse yp-panel-show'></span>

	<style id="yp-animate-helper"></style>

	<div class="yp-animate-manager">

		<h3 class="animation-manager-empty">There is no animation on this page.<small>Select an element to add animation</small>.</h3>

		<div class="yp-anim-list-menu"><ul></ul></div>

		<div class="yp-anim-control-overflow">
			<div class="yp-anim-controls">
				<div class="yp-anim-control-left">
					<div class="yp-anim-manager-control">
						<a class="yp-anim-control-btn yp-anim-control-close" data-toggle='tooltipAnim' data-placement='top' title='Close'><span class="dashicons dashicons-no-alt"></span></a>
						<a class="yp-anim-control-btn yp-anim-control-pause" data-toggle='tooltipAnim' data-placement='top' title='Stop'><span class="dashicons dashicons-controls-pause"></span></a>
						<a class="yp-anim-control-btn yp-anim-control-play" data-toggle='tooltipAnim' data-placement='top' title='Play'><span class="dashicons dashicons-controls-play"></span></a>
						<span class="yp-anim-current-duration"><span class="yp-counter-min">00</span>:<span class="yp-counter-second">00</span>.<span class="yp-counter-ms">00</span></span>
					</div>
				</div>
				<div class="yp-anim-control-right">
					<div class="yp-anim-playing-border"></div>
					<div class="yp-anim-metric">
					</div>
				</div>
				<div class="yp-clear"></div>
			</div>
		</div>

		<div class="yp-animate-manager-inner">

			<div class="yp-anim-left-part-column"></div>
			<div class="yp-anim-right-part-column">
				<div class="yp-anim-playing-over"></div>
				<div class="yp-anim-playing-border"></div>
			</div>
			<div class="yp-clear"></div>

		</div>

	</div>

	<div class="responsive-right-handle"></div>

	<div class="responsive-size-text default-responsive-text"><a href="https://waspthemes.com/yellow-pencil/documentation/#responsive-tool" target="_blank" class="support-icon" data-toggle="tooltip" data-placement="right" title="Click here for learning how Responsive Tool work.">?</a> Customizing for <span class='device-size'></span>px and <span class='media-control' data-code='max-width'>below</span> screen sizes. <span class="device-name"></span></div>
	<div class="responsive-size-text"><a href="https://waspthemes.com/yellow-pencil/documentation/#responsive-tool" target="_blank" class="support-icon" data-toggle="tooltip" data-placement="right" title="Click here for learning how Responsive Tool work.">?</a> Customizing <span class='property-size-text'></span>.</div>

	<?php yp_yellow_penci_bar(); ?>
	
	<div class="top-area-btn-group">
		<a target="blank" class="yellow-pencil-logo" href="https://waspthemes.com/yellow-pencil" tabindex="-1"></a>
		<div class="top-area-btn cursor-main-btn yp-selector-mode active"><span class="no-aiming-icon"></span><span class="aiming-icon"></span><span class="sharp-selector-icon"></span></div>
		<div data-toggle='tooltip-bar' data-placement='right' title='Find An Element <span class="yp-s-shortcut">(F)</span><span class="yp-tooltip-shortcut">Find elements by CSS selector.</span>' class="top-area-btn yp-search-btn active"><span class="search-selector-icon"></span></div>
		<div data-toggle='tooltip-bar' data-placement='right' title='CSS Editor <span class="yp-s-shortcut">(É)</span><span class="yp-tooltip-shortcut">Edit style codes.</span>' class="top-area-btn css-editor-btn"><span class="css-editor-icon"></span></div>
		<div data-toggle='tooltip-bar' data-placement='right' title='Responsive Mode <span class="yp-s-shortcut">(R)</span><span class="yp-tooltip-shortcut">Edit for a specific screen size.</span>' class="top-area-btn yp-responsive-btn active"><span class="responsive-icon"></span></div>
		<div data-toggle='tooltip-bar' data-placement='right' title='Measuring Tool <span class="yp-s-shortcut">(M)</span><span class="yp-tooltip-shortcut">Measure elements.</span>' class="top-area-btn yp-ruler-btn"><span class="ruler-icon"></span></div>
		<div data-toggle='tooltip-bar' data-placement='right' title='Wireframe <span class="yp-s-shortcut">(W)</span><span class="yp-tooltip-shortcut">Work on the layout easily.</span>' class="top-area-btn yp-wireframe-btn"><span class="wireframe-icon"></span></div>
		<div data-toggle='tooltip-bar' data-placement='right' title='Design Information <span class="yp-s-shortcut">(D)</span><span class="yp-tooltip-shortcut">Typography, sizes and others.</span>' class="top-area-btn info-btn"><span class="design-information-icon"></span></div>
		<div data-toggle='tooltip-bar' data-placement='right' title='Animation Manager <span class="yp-tooltip-shortcut">Manage animations visually.</span>' class="top-area-btn animation-manager-btn"><span class="animation-manager-icon"></span></div>
		<div data-toggle='tooltip-bar' data-placement='right' title='Undo <span class="yp-tooltip-shortcut">CTRL + Z</span>' class="top-area-btn top-area-center undo-btn"><span class="undo-icon"></span></div>
		<div data-toggle='tooltip-bar' data-placement='right' title='Redo <span class="yp-tooltip-shortcut">CTRL + Y</span>' class="top-area-btn redo-btn"><span class="redo-icon"></span></div>

		<div class="top-area-btn left-menu-btn"><span class="dashicons dashicons-admin-generic"></span></div>

		<div class="left-menu-sublist inspector-sublist">
			<ul>
				<li class="inspector-sublist-cursor" data-cursor-action="cursor">Cursor</li>
				<li class="inspector-sublist-default active" data-cursor-action="default">Flexible Inspector</li>
				<li class="inspector-sublist-single" data-cursor-action="single">Single Inspector</li>
			</ul>
		</div>

		<div class="left-menu-sublist interface-settings">
			<ul>

				<li class="fixed_right_panel_checkbox">Fixed Right Panel <label class="interface-settings-switch"><input type="checkbox"><span class="interface-settings-slider"></span></label></li>

				<li class="show_parent_tree_checkbox">Show Parent Tree <label class="interface-settings-switch"><input type="checkbox"><span class="interface-settings-slider"></span></label></li>

				<li class="hide_premium_options_checkbox yp-lite" data-toggle='tooltip-bar' data-placement='right' title='<span class="yp-tooltip-shortcut2">Hides all preimum features on Lite version.</span>'>Hide Pro Features <label class="interface-settings-switch"><input type="checkbox"><span class="interface-settings-slider"></span></label></li>

				<li class="show_margin_padding_on_hover_checkbox" data-toggle='tooltip-bar' data-placement='right' title='<span class="yp-tooltip-shortcut2">Shows margin and padding when hover any element before select the element.</span>'>Show Margin &amp; Padding On Hover <label class="interface-settings-switch"><input type="checkbox"><span class="interface-settings-slider"></span></label></li>

				<li class="left-sublist-border"></li>

				<li class="smart_responsive_technology_checkbox" data-toggle='tooltip-bar' data-placement='right' title='<span class="yp-tooltip-shortcut2">This feature automatically detects the styles that can harm Responsive System and limits them with a special screen size.</span>'>Smart Responsive Technology <label class="interface-settings-switch"><input type="checkbox"><span class="interface-settings-slider"></span></label></li>

				<li class="append_auto_comments_checkbox" data-toggle='tooltip-bar' data-placement='right' title='<span class="yp-tooltip-shortcut2">Appends the new selectors to editor with CSS comment description.</span>'>Auto CSS Comments <label class="interface-settings-switch"><input type="checkbox"><span class="interface-settings-slider"></span></label></li>

				<li class="smart_important_tag_checkbox" data-toggle='tooltip-bar' data-placement='right' title='<span class="yp-tooltip-shortcut2">Adds important tag to CSS rules if required.</span>'>Smart Important Tag <label class="interface-settings-switch"><input type="checkbox"><span class="interface-settings-slider"></span></label></li>

				<li class="high_performance_checkbox" data-toggle='tooltip-bar' data-placement='right' title='<span class="yp-tooltip-shortcut2">Enhances editor performance by use of a simple selector before selecting the element but as a result, there is no difference in CSS code.</span>'>High Performance <label class="interface-settings-switch"><input type="checkbox"><span class="interface-settings-slider"></span></label></li>

				<li class="left-sublist-border"></li>

				<li class="basic"><a href="<?php echo admin_url("?page=yellow-pencil-changes"); ?>" target="_blank">Manage Customizations <span class="dashicons dashicons-external"></span></a></li>

			</ul>
		</div>
	</div>

	<div class="yp-right-panel-placeholder"></div>
	<div class="breakpoint-bar"></div>
	<div class="metric"></div>

	<div class="metric-left-border"></div>
	<div class="metric-top-border"></div>
	<div class="metric-top-tooltip">Y: <span></span> px</div>
	<div class="metric-left-tooltip">X: <span></span> px</div>

	<div class="search-box">
		<div class="search-close-link"><span class="dashicons dashicons-arrow-left-alt2"></span></div>
		<div class="search-box-topbar">Find By CSS Selector</div>
		<div class="search-input-area">
			<input id="search" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Search by class, ID or HTML tag." />
			<div class="yp-clear"></div>
		</div>
		<div class="search-box-inner">
			<ul class="search-live-result"></ul>
		</div>
	</div>

	<div class="advanced-info-box">
		<div class="advanced-close-link"><span class="dashicons dashicons-arrow-left-alt2"></span></div>
		<div class="advanced-info-box-menu">
			<span class="advance-info-btns element-btn">Element</span> <span class="advance-info-btns typography-btn">Typography</span> <span class="advance-info-btns advanced-btn">Advanced</span>
		</div>
		<div class="advanced-info-box-inner">

			<div class="typography-content advanced-info-box-content">

				<h3>Color Scheme</h3>
				<div class="info-color-scheme-list">
				</div>

				<h3 class="no-top">Basic</h3>
				<ul class="info-basic-typography-list">
				</ul>

				<h3>Font Families</h3>
				<ul class="info-font-family-list">
				</ul>

				<h3 id="animations-heading">Animations</h3>
				<ul class="info-animation-list">
				</ul>

			</div>

			<div class="element-content advanced-info-box-content">

				<div class="info-element-selected-section">

					<div class="info-element-selector-section">
						<h3 class="no-top">CSS Selector</h3>
						<ul class="info-element-selector-list">
						</ul>
					</div>
					
					<h3>General</h3>
					<ul class="info-element-general">
					</ul>

					<div class="info-element-classes-section">
						<h3>Classes</h3>
						<ul class="info-element-class-list">
						</ul>
					</div>

					<h3>Box Model</h3>
					<div id="box-element-view">

						<div class="box-element-view-inner">

							<div class="box-view-section">
								<i class="model-view-margin"><span>margin</span></i>
								<i class="model-view-margin"></i>
								<i class="model-view-margin"></i>
								<i class="model-view-margin model-margin-top"></i>
								<i class="model-view-margin"></i>
								<i class="model-view-margin"></i>
								<i class="model-view-margin"></i>
							</div>

							<div class="box-view-section">
								<i class="model-view-margin"></i>
								<i class="model-view-border"><span>border</span></i>
								<i class="model-view-border"></i>
								<i class="model-view-border model-border-top"></i>
								<i class="model-view-border"></i>
								<i class="model-view-border"></i>
								<i class="model-view-margin"></i>
							</div>

							<div class="box-view-section">
								<i class="model-view-margin"></i>
								<i class="model-view-border"></i>
								<i class="model-view-padding"><span>padding</span></i>
								<i class="model-view-padding model-padding-top"></i>
								<i class="model-view-padding"></i>
								<i class="model-view-border"></i>
								<i class="model-view-margin"></i>
							</div>

							<div class="box-view-section">
								<i class="model-view-margin model-margin-left"></i>
								<i class="model-view-border model-border-left"></i>
								<i class="model-view-padding model-padding-left"></i>
								<i class="model-view-size model-size"></i>
								<i class="model-view-padding model-padding-right"></i>
								<i class="model-view-border model-border-right"></i>
								<i class="model-view-margin model-margin-right"></i>
							</div>

							<div class="box-view-section">
								<i class="model-view-margin"></i>
								<i class="model-view-border"></i>
								<i class="model-view-padding"></i>
								<i class="model-view-padding model-padding-bottom"></i>
								<i class="model-view-padding"></i>
								<i class="model-view-border"></i>
								<i class="model-view-margin"></i>
							</div>

							<div class="box-view-section">
								<i class="model-view-margin"></i>
								<i class="model-view-border"></i>
								<i class="model-view-border"></i>
								<i class="model-view-border model-border-bottom"></i>
								<i class="model-view-border"></i>
								<i class="model-view-border"></i>
								<i class="model-view-margin"></i>
							</div>

							<div class="box-view-section">
								<i class="model-view-margin"></i>
								<i class="model-view-margin"></i>
								<i class="model-view-margin"></i>
								<i class="model-view-margin model-margin-bottom"></i>
								<i class="model-view-margin"></i>
								<i class="model-view-margin"></i>
								<i class="model-view-margin"></i>
							</div>

						</div>

					</div>

					<h3>DOM Code</h3>
					<textarea disabled="disabled" class="info-element-dom"></textarea>

				</div>

				<p class="info-no-element-selected">Please select an element to show information.</p>

			</div>

			<div class="advanced-content advanced-info-box-content">
				<h3>Dimensions</h3>
				<ul class="info-basic-size-list">
				</ul>
				<h3>All Ids</h3>
				<ul class="info-global-id-list">
				</ul>
				<h3>All Classes</h3>
				<ul class="info-global-class-list">
				</ul>
			</div>

		</div>
	</div>

	<div class="yp-iframe-loader">
		<div class="loading-files"></div>
	</div>

	<div class="unvalid-css-cover"></div>

	<div id="image_uploader">
		<iframe data-url="<?php echo admin_url('media-upload.php?TB_iframe=true&reauth=1&yp_uploader=1'); ?>"></iframe>
	</div>
	<div id="image_uploader_background"></div>

	<div id="selector-editor-box">
		<p class="selector-editor-notice">Press Enter to select, ESC cancel.</p>
		<input autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" type='text' class='yp-selector-editor' placeholder='Search by class, ID or HTML tag.' id='yp-selector-editor' />
		<ul id="autocomplate-selector-list"><li>a</li></ul>
	</div>
	<div id="selector-editor-background"></div>

	<div id="leftAreaEditor">
		<div id="cssData"></div>
		<div id="cssEditorBar">
			<span class="dashicons yp-css-close-btn dashicons-no-alt" title='Hide (ESC)'></span>
			<span class="editor-tabs single-tab" title="The styles applied to the current page." data-type-value="single">Single<i></i></span>
			<span class="editor-tabs template-tab" title="The styles applied to all pages of the current post type." data-type-value="template">Template<i></i></span>
			<span class="editor-tabs global-tab" title="The styles applied to the entire website." data-type-value="global">Global<i></i></span>
			<div class="editor-tab-border"></div>
		</div>
		<div class="unvalid-css-error">Error: <span></span></div>
	</div>

	<div class="yp-popup-background"></div>
	<div class="yp-info-modal">
		<div class="yp-info-modal-top"></div>
		<div class="yp-info-modal-top-inner">
			<h2>Changes Not Saved. Upgrade To Pro!</h2>
			<p>You are using some premium properties. Upgrade to Pro or disable premium properties to save changes.</p>
		</div>
		<ul>
			<li>Access 800+ Quality Fonts</li>
			<li>Hundreds of background patterns</li>
			<li>Visual Resizing</li>
			<li>Gradient backgrounds & color palettes</li>
			<li>Access all properties and tools</li>
			<li>6 months premium support</li>
			<li>Lifetime license & free updates</li>
		</ul>

		<div class="yp-action-area">
			<a class="yp-info-modal-close">No Thanks</a>
			<a class="yp-buy-link" target="_blank" href="https://waspthemes.com/yellow-pencil/buy">Go Pro</a>
			<p class="yp-info-last-note">Money back guarantee. You can request a refund at any time!</p>
		</div>
		<a class='activate-pro' href="<?php echo admin_url('admin.php?page=yellow-pencil-license'); ?>" target="_blank">Activate License</a>
	</div>

	<div class="anim-bar">
		<div class="anim-bar-title">
			<div class="anim-title">Animation Generator</div>
			<div class="yp-anim-save yp-anim-btn" data-toggle="tooltipAnimGenerator" data-placement="top" title="Done"><span class="dashicons dashicons-flag"></span></div>
			<div class="yp-anim-play yp-anim-btn" data-toggle="tooltipAnimGenerator" data-placement="top" title="Play"><span class="dashicons dashicons-controls-play"></span></div>
			<div class="yp-anim-cancel yp-anim-btn" data-toggle="tooltipAnimGenerator" data-placement="top" title="Cancel"><span class="dashicons dashicons-no-alt"></span></div>
			<div class="yp-clear"></div>
		</div>
		<div class="scenes">
			<div class="scene scene-active scene-1" data-scene="scene-1"><p><span class="scene-info">i</span>Scene 1 <span><input autocomplete="off" type='text' value='0' /></span></p></div>
			<div class="scene scene-2 scene-no-click-yet" data-scene="scene-2"><p><span class="scene-info">i</span>Scene 2 <span><input type='text' autocomplete="off" value='100' /></span></p></div>
			<div class="scene scene-add"><span class="dashicons dashicons-plus"></span></div>
			<div class="yp-clear"></div>
		</div>
	</div>

	<script src='<?php echo includes_url( 'js/jquery/jquery.js?ver='.YP_VERSION.'' , __FILE__ ); ?>'></script>

	<script>
	(function($){

		// PLUGIN OPTIONS
	    var ypOption = {
	        "fixed_right_panel"				: <?php echo yp_get_live_option("fixed_right_panel"); ?>, // Fixed Right Panel
	        "show_parent_tree"				: <?php echo yp_get_live_option("show_parent_tree"); ?>, // Show Parent Tree
	        "hide_premium_options"			: <?php echo yp_get_live_option("hide_premium_options"); ?>, // Hide Preimum features on Lite Version
	        "show_margin_padding_on_hover"	: <?php echo yp_get_live_option("show_margin_padding_on_hover"); ?>, // Show margin & Padding On Hover
	        "smart_responsive_technology"	: <?php echo yp_get_live_option("smart_responsive_technology"); ?>, // Smart Responsive Technology
	        "smart_important_tag"			: <?php echo yp_get_live_option("smart_important_tag"); ?>, // Smart Important Tag
	        "high_performance"				: <?php echo yp_get_live_option("high_performance"); ?>, // High performance
	        "append_auto_comments"			: <?php echo yp_get_live_option("append_auto_comments"); ?>, // Append Auto comments
	    };

		// Reload the page after browser undo & undo
		if (!!window.performance && window.performance.navigation.type === 2) {
            yp_load_note("Editor Reloading..");
            window.location.reload();
        }

		// All plugin element list
        window.plugin_classes_list = 'yellow-pencil-canvas|yellow-pencil-focus-canvas|yellow-pencil-extra-canvas|yellow-pencil-other-canvas|yp-high-performance|yp-no-wireframe|yp-element-not-visible|yp-iframe-placeholder|yp-element-picker-active|yp-data-updated|yp-animate-data|yp-inline-data|yellow-pencil-data|yp-animating|yp-scene-1|yp-sharp-selector-mode-active|yp-scene-2|yp-scene-3|yp-scene-4|yp-scene-5|yp-scene-6|yp-anim-creator|data-anim-scene|yp-animate-test-playing|ui-draggable-handle|yp-yellow-pencil-demo-mode|yp-yellow-pencil-loaded|yp-element-resized|resize-time-delay|yp-selected-handle|yp_onscreen|yp_hover|yp_click|yp_focus|yp-recent-hover-element|yp-selected-others|yp-multiple-selected|yp-demo-link|yp-live-editor-link|yp-yellow-pencil|yp-content-selected|yp-hide-borders-now|ui-draggable|yp-selector-editor-active|yp-closed|yp-responsive-device-mode|yp-metric-disable|yp-css-editor-active|wtfv|yp-clean-look|yp-has-transform|yp-will-selected|yp-selected|yp-element-resizing|yp-element-resizing-width-right|yp-element-resizing-height-bottom|context-menu-active|yp-selectors-hide|yp-contextmenuopen|yp-control-key-down|yp-selected-others-multiple-box|yp-iframe-mouseleave|yp-selected-boxed-top|yp-selected-boxed-bottom|yp-selected-boxed-left|yp-selected-boxed-right|yp-selected-boxed-margin-left|yp-zero-margin-w|yp-animate-manager-active|yp-wireframe-mode|yp-selector-hover|yp-size-handle|ypdw|ypdh|yp-body-selector-mode-active|yp-selected-boxed-margin-top|yp-selected-boxed-margin-bottom|yp-selected-boxed-margin-right|yp-selected-boxed-padding-left|yp-selected-boxed-padding-top|yp-selected-boxed-padding-bottom|yp-selected-boxed-padding-right|yp-selected-tooltip|yp-edit-tooltip|yp-edit-menu|yp-resorted|yp-full-width-selected|yp-zero-margin-h|yp-tooltip-small';

        // Replace all parent ways
        for(var s = 0; s < 51; s++){
        	window.plugin_classes_list += "|yp-parent-way-" + s;
        }

        // Any visible element.
        window.simple_not_selector = 'head, script, style, link, meta, title, noscript, svg, canvas, br';

        // basic simple.
        window.basic_not_selector = '*:not(script):not(style):not(link):not(meta):not(title):not(noscript):not(head):not(circle):not(rect):not(polygon):not(defs):not(linearGradient):not(stop):not(ellipse):not(text):not(canvas):not(line):not(polyline):not(path):not(g):not(tspan)';

        // Selector Comments
        <?php

        	$comments = get_option("yp_selector_comments");

        	if($comments == null || $comments == false){
        		echo "window.selectorComments = {};";
        	}else{
        		echo "window.selectorComments = ".yp_stripslashes($comments).";";
        	}

        ?>
        
		// Variable
		window.loadStatus = false;

		// Document Load Note:
		yp_load_note("Editor loading..");

		// Document ready.
		$(document).ready(function(){

			// Load iframe.
	        ($('#iframe')[0].contentWindow || $('#iframe')[0].contentDocument).location.replace($("#iframe").attr("data-href"));

	        // Frame load note:
	        yp_load_note("Reading styles..");

	        // Frame ready
	        $('#iframe').on('load', function(){

	        	var iframe = $($('#iframe').contents().get(0));
            	var iframeBody = iframe.find("body");
            	var body = $(document.body).add(iframeBody);

            	// Get iframe in JS
            	var iframejs = document.getElementById('iframe');
            	var iframeContentWindow = (iframejs.contentWindow || iframejs.contentDocument);
            	var iframeURL = iframeContentWindow.location.href;

            	// check if iframe URL is not valid.
            	if(iframeURL.indexOf("yellow_pencil_frame") == -1){
            		
            		// give information before redirect
            		yp_load_note("Page was redirected..");
            		alert("The target page was redirected to another page, click OK to continue...");

            		// Get parent url
                    var parentURL = window.location;

                    //delete after href.
                    parentURL = parentURL.toString().split("href=")[0] + "href=";

                    // Dedect the target page and load
                    $.post(iframeURL, {

                        yp_get_details: "true",

                    }).done(function(data){

                        // Find page details
                        data = $('<div />').append(data).find('#yp_page_details').html();

                        // find all
                        var pageID = data.split("|")[0];
                        var pageTYPE = data.split("|")[1];
                        var pageMODE = data.split("|")[2];

                        // Update result URL
                        iframeURL = iframeURL.replace(/.*?:\/\//g, ""); // delete protocol
                        iframeURL = iframeURL.replace("&yellow_pencil_frame", "").replace("?yellow_pencil_frame", "");
                        iframeURL = encodeURIComponent(iframeURL); // encode url
                        parentURL = parentURL + iframeURL + "&yp_page_id="+pageID+"&yp_page_type="+pageTYPE+"&yp_mode=" + pageMODE; // update parent URL

                        // GO
                        window.location = parentURL;

                    }).fail(function(){
                        alert(lang.page_information_cant_be_retrieved);
                    });

                    return false;
            		
            	}

            	// Moving styles to iframe
				var editorData = $("#yellow-pencil-iframe-data");
				iframeBody.append(editorData.html().replace(/(^\<\!\-\-|\-\-\>$)/g, ""));

	        	// Adding yp-animating class to animating elements.
	        	iframe.find(window.basic_not_selector).on('animationstart webkitAnimationStart oanimationstart MSAnimationStart',function(){

	        			// Stop if any yp animation tool works
	        			if(body.hasClass("yp-anim-creator") || body.hasClass("yp-animate-manager-active")){
	        				return false;
	        			}

                		var element = $(this);

                		// Add an animating class.
                    	if(!element.hasClass("yp-animating")){
                        	element.addClass("yp-animating");
                        }

                        // Set outline selected style if selected element has animating.
                        if(element.hasClass("yp-selected") && body.hasClass("yp-has-transform") == false && body.hasClass("yp-content-selected") == true){
                        	body.addClass("yp-has-transform");
                        }

                        return false;

                });

	        	// Loading Styles
				var styles = [
					"<?php echo esc_url(includes_url( 'css/dashicons.min.css' , __FILE__ )); ?>",
					"<?php $prtcl = is_ssl() ? 'https' : 'http'; echo $prtcl; ?>://fonts.googleapis.com/css?family=Roboto+Mono|Roboto:400,500",
					"<?php echo esc_url(plugins_url( 'css/yellow-pencil.css?ver='.YP_VERSION.'' , __FILE__ )); ?>"
				];

				// Loading.
				for(var i = 0; i < styles.length; i++){
					yp_load_css(styles[i]);
				}

				// let the user feel as that loads quickly.
				setTimeout(function(){
					yp_load_note("Analyzes the page..");
				},1600);

				setTimeout(function(){
					yp_load_note("Playing with codes..");
				},3200);

				setTimeout(function(){
					yp_load_note("Almost ready..");
				},6400);

				// Ace Code Editor Base.
				window.aceEditorBase = "<?php echo (plugins_url( 'library/ace/' , __FILE__ )); ?>";

				var scripts   = [
					"<?php echo includes_url( 'js/jquery/ui/core.min.js' , __FILE__ ); ?>",
					"<?php echo includes_url( 'js/jquery/ui/widget.min.js' , __FILE__ ); ?>",
					"<?php echo includes_url( 'js/jquery/ui/mouse.min.js' , __FILE__ ); ?>",
					"<?php echo includes_url( 'js/jquery/ui/slider.min.js' , __FILE__ ); ?>",
					"<?php echo includes_url( 'js/jquery/ui/draggable.min.js' , __FILE__ ); ?>",
					"<?php echo includes_url( 'js/jquery/ui/resizable.min.js' , __FILE__ ); ?>",
					"<?php echo includes_url( 'js/jquery/ui/menu.min.js' , __FILE__ ); ?>",
					"<?php echo includes_url( 'js/jquery/ui/autocomplete.min.js' , __FILE__ ); ?>",
					"<?php echo plugins_url( 'js/interface.js?ver='.YP_VERSION.'' , __FILE__ ); ?>",
					"<?php echo plugins_url( 'library/ace/ace.js' , __FILE__ ); ?>",
					"<?php echo plugins_url( 'library/ace/ext-language_tools.js' , __FILE__ ); ?>",
					"<?php echo plugins_url( 'js/yellow-pencil.js?ver='.YP_VERSION.'' , __FILE__ ); ?>"
				];

				//setup object to store results of AJAX requests
				var responses = {};

				//create function that evaluates each response in order
				function yp_eval_scripts() {

				    for (var i = 0, len = scripts.length; i < len; i++){

				    	// Eval
				    	eval(responses[scripts[i]]);

				    }

				    // Start the editor, loading stylesheets while user start customization.
				    yp_start_editor();

				}


				// Stop load and call editor function.
		        function yp_start_editor(){

		            // Ready!:
		            yp_load_note("Just a sec!");

		            // Set true.
		            window.loadStatus = true;

		        }


		        // Minimize CSS before load
				function minimize_css(data){

		            // Clean.
		            data = data.replace(/(\r\n|\n|\r)/g, "").replace(/\t/g, '');

		            // Don't care rules in comment.
		            data = data.replace(/\/\*(.*?)\*\//g, "");

		            // clean.
		            data = data.replace(/\}\s+\}/g, '}}').replace(/\s+\{/g, '{');

		            // clean.
		            data = data.replace(/\s+\}/g, '}').replace(/\{\s+/g, '{');
		            data = data.replace(/[\u2018\u2019\u201A\u201B\u2032\u2035\u201C\u201D]/g,'');
		            
		            // data
		            return data;

		        }


				$.each(scripts, function (index, value) {

					$.ajax({

					    url      : scripts[index],

					    //force the dataType to be "text" rather than "script"
					    dataType : 'text',

					    success  : function (textScript) {

					        //add the response to the "responses" object
					        responses[value] = textScript;

					        //check if the "responses" object has the same length as the "scripts" array,
					        //if so then evaluate the scripts
					        if (Object.keys(responses).length === scripts.length) {
					            yp_eval_scripts();
					        }

					    },

					    error : function (jqXHR, textStatus, errorThrown){
					        alert('An error occurred while loading.');
					    }

					});

				}); // frame ready

			}); // Document ready.

		});
	
	// CSS Loader
	function yp_load_css(link){
		$('<link>').appendTo('head').attr({type: 'text/css',rel: 'stylesheet',href: link});
	}

	// Update loading notes.
	function yp_load_note(text){
		if(window.loadStatus == false){
			$(".loading-files").html(text);
		}
	}

	})(jQuery);
	</script>

	<?php yp_editor_styles($id, $type, $mode, "all"); ?>
	<?php yp_footer(); ?>
	</body>
</html>