$(document).ready(function() {
	$(".hiding-sheet").click(toggleSheet);
});

$(window).on("load", function() {
	layout();
});

$(window).on("resize", function() {
	layout();
});

function layout() {
	layout_pic_and_description();
}

function toggleSheet() {
	$(this).children("*").each(function(index){
		$(this).slideToggle();
	});
}

function layout_pic_and_description() {
	$("div.pic_and_description > *").css({ position : 'absolute' });
	$("div.pic_and_description").each(function(index){
		if ($(this).is(':hidden')) {
			return;
		}
		if ($(this).hasClass("second_left")) {
			$thisDesc = $("> *:nth-child(1)",this);
			$thisPic = $("> *:nth-child(2)",this);
			if (!$(this).data('second_top_toggle_thrown')) {
				$(this).data('second_top_toggle_thrown','true');
				$(this).toggleClass("second_top");
			}
		} else {
			$thisPic = $("> *:nth-child(1)",this);
			$thisDesc = $("> *:nth-child(2)",this);
		}
		if (!$thisPic.data('originalWidth')) {
			var width;
			var nextWidth;
			width = $thisPic.width();
			nextWidth = parseInt($thisPic.css("width"), 10);
			if (nextWidth)
			width = Math.max(width,nextWidth);
			$thisPic.data('originalWidth',width);
		}
		if (!$thisDesc.data('originalWidth')) {
			$thisDesc.data('originalWidth',$thisDesc.width());
		}
        
		$thisDesc.css({ position : 'absolute' });
		$thisPic.css({ position : 'absolute' });
        
		var viewWidth;
		viewWidth = $(this).outerWidth();
		viewWidth = Math.min(viewWidth, $(window).width());
		var margin = 0;
		var padding = 15;
		var marginGap = 0;
		if ($(this).css('padding')) {
			padding = parseInt($(this).css('padding'));
		}
		if ($(this).css('margin')) {
			margin = parseInt($(this).css('margin'));
		}
		$(this).css({
			'margin': margin,
			'padding': padding,
			'position' : 'relative'
		});
        
		// getting the image's actual width
		// Get on screen image
		var imageHeight;
		var imageWidth;
		var screenImage = $thisPic;
		var originalImage = new Image();
		originalImage.src = screenImage.attr("src");
		var realImageWidth = originalImage.width;
		realImageWidth = $thisPic.data('originalWidth');
        
		if (realImageWidth + margin*2 + padding*2 > viewWidth) {
			imageWidth = viewWidth - margin*2 - padding*2;
		} else {
			imageWidth = realImageWidth;
		}
		$thisPic.css({
			width : imageWidth,
		});
        
		imageHeight = $thisPic.height();
		imageWidth = $thisPic.width();
        
		var divWidth = 0;
		var divTop = 0;
		var divLeft = 0;
		var imageLeft = 0;
		var imageTop = 0;
		if (viewWidth - imageWidth < 300) { // stack pic and description; width is to little for side by side
			if (margin == 0 && padding == 0) {
				marginGap = 15;
				$(this).css({
					'margin-bottom': marginGap
				});
			}
			divWidth = (viewWidth - margin*2 - padding*2);
			$thisDesc.css({ width : divWidth, });
			if ($(this).hasClass("second_top")) {
				var divHeight = $thisDesc.outerHeight(true);
				imageTop = divHeight + padding*2 + margin;
				divTop = 0;
			} else {
				divTop = imageHeight + padding*2 + margin;
				imageTop = 0;
			}
			divLeft = padding;
			imageLeft = (viewWidth - margin*2 - padding*2 - imageWidth) / 2;
			$thisDesc.css({
				width : divWidth,
				left : divLeft,
				top : divTop,
			});
			$thisPic.css({
				'margin-left' : imageLeft,
				'margin-top' : imageTop,
			});
		} else { // set pic and description side by side
			if (margin == 0 && padding == 0) {
				marginGap = 15;
				$("div:nth-child(2)",this).css({
					'margin-left': marginGap
				});
			}
			divWidth = (viewWidth - margin*2 - padding*3 - imageWidth-marginGap);
			divLeft = (imageWidth + padding*2);
			$thisPic.css({
				'margin-left' : imageLeft,
				'margin-top' : imageTop,
			});
			$thisDesc.css({
				width : divWidth,
				left : divLeft,
			});
            
			if ($thisDesc.height() < imageHeight) {
				var descriptionBlockHeight = $thisDesc.height();
				divTop = ((imageHeight - descriptionBlockHeight) / 2) + padding;
			} else {
				divTop = 0;
			}
			$thisDesc.css({ top : divTop });
		}
		var viewHeight = Math.max(imageTop + imageHeight + margin + padding, divTop + $thisDesc.height() + margin + padding)+marginGap;
        
		$(this).css({
			'height' : viewHeight,
		});
	});
}

function edit_page(site_id, user_name) {
	html = 	'<div class="col-sm-3 span4"><div class="col-xs-1 span1"><a href="https://rwg1.com/edit-this-page.html" target="_blank">?<a></div><div class="col-xs-10 span3"><button class="submit btn" id="" onclick="edit_login(' + site_id + ')" type="button">Edit This Page</button></div></div><div class="col-sm-3 span3"><button class="submit btn" id="" onclick="window.open(' + "'https://realwebmanager.com','_blank')" + ';" type="button">Modern Control Panel</button></div><div class="col-sm-3 span3"><button class="submit btn" id="" onclick="window.open(' + "'http://rwglobal.com/~" + user_name + "/1GS_control/','_blank')" + ';" type="button">Legacy Control Panel</button></div><div class="col-sm-3 span3"><button class="submit btn" id="" onclick="editing_logout();" type="button">Exit</button></div>';
	document.getElementById("editing-tools").innerHTML = html;
	document.getElementById("gs").classList.add("editing-on-gs");
	window.scrollTo(0, document.body.scrollHeight);
}
function edit_login(site_id) {
//	html = "<div class='container'><div class='title col-sm-2 span-2 text-center'><label>Edit Page Login</label></div><div class='title col-sm-3 span3'><input type='text' class='form-control' id='emailInput' placeholder='Username' /></div><div class='title col-sm-3 span3'><input type='password' class='form-control' id='passwordInput' placeholder='Password' onkeyup='checkLogin(event)' /></div><div class='title col-sm-3 span3'><button class='submit btn-primary' style='height: 34px; width: 100%;' id='LoginButton' onclick='login(" + site_id + ")'>login</button></div>" + '<div class="col-sm-1 span1"><button class="submit btn" id="" onclick="editing_logout();" type="button">Exit</button></div></div>';
	html = "<div class='container'><div class='title col-sm-2 span-2 text-center'><label>Edit Page Login</label></div><div class='title col-sm-3 span3'><input type='text' class='form-control' id='emailInput' placeholder='Username' /></div><div class='title col-sm-3 span3'><input type='password' class='form-control' id='passwordInput' placeholder='Password' /></div><div class='title col-sm-3 span3'><button class='submit btn-primary' style='height: 34px; width: 100%;' id='LoginButton' onclick='login(" + site_id + ")'>login</button></div>" + '<div class="col-sm-1 span1"><button class="submit btn" id="" onclick="editing_logout();" type="button">Exit</button></div></div>';
	document.getElementById("editing-tools").innerHTML = html;
	document.getElementById("gs").classList.add("editing-on-gs");
}

function login(site_id) {
	var user = document.getElementById("emailInput").value;
	var password = document.getElementById("passwordInput").value;
	if (!user) {
		document.getElementById(errorElementId).innerText = 'User name is required.';
		return
	} else if (!password) {
		document.getElementById(errorElementId).innerText = 'Password is required.';
		return
	} else {
		let xmlhttp = new XMLHttpRequest();
		xmlhttp.open("GET", `common_public/phpFunctions/ajaxFunctions.php?f1=edit_page_login&email=${encodeURIComponent(user)}&site_id=${encodeURIComponent(site_id)}&password=${encodeURIComponent(password)}`, true);
		xmlhttp.responseType = 'text';
		xmlhttp.onload = function() {
			let values = xmlhttp.response.split('~,~');
			let entryId = values[0];
			if (entryId!='') {
				start_editing(site_id,entryId);
			} else {
				alert("Login Failed");
			}
		}
		xmlhttp.send();
	}
}
function editing_logout() {
	let xmlhttp = new XMLHttpRequest();
	xmlhttp.open("GET", `common_public/phpFunctions/ajaxFunctions.php?f1=editing_logout`, true);
	xmlhttp.responseType = 'text';
	xmlhttp.onload = function() {
		let values = xmlhttp.response.split('~,~');
		html = '';
		document.getElementById("editing-tools").innerHTML = html;
		document.getElementById("gs").classList.remove("editing-on-gs");	
		es = document.getElementsByClassName("gs-editable");
		var i;
		for (i = 0; i < es.length; i++) {
			es[i].contentEditable = "false";
			es[i].classList.remove("editing-on");
		}
		const was0 = document.getElementsByClassName("was0");
		for (i = 0; i < was0.length; i++) {
			was0[i].style.top = "0px";
		}
		document.getElementById("page").style.marginTop = "0px";
		document.getElementById("page").style.paddingBottom = "0px";
		drop_stylesheet();
		location.reload();
	}
	xmlhttp.send();
}
function start_editing(site_id,entryId) {
	es = document.getElementsByClassName("gs-editable");
	var i;
	for (i = 0; i < es.length; i++) {
		es[i].contentEditable = "true";
		es[i].classList.add("editing-on");
	}
	html = 	'<div class="col-sm-4 span4"><button class="submit btn btn-primary" id="saveEdits" data-user="' + entryId + '" onclick="save_edits(' + site_id + ')" type="button">Save Changes</button></div><div class="col-sm-4 span4"><button class="submit btn" id="" onclick="location.reload();" type="button">Reset</button></div><div class="col-sm-4 span4"><button class="submit btn" id="" onclick="editing_logout();" type="button">Logout</button></div>';
	add_stylesheet(site_id,entryId);
	toolbar_html = get_toolbar();
	html = html + toolbar_html;
	document.getElementById("editing-tools").innerHTML = html;
	document.getElementById("gs").classList.add("editing-on-gs");
	document.body.appendChild(document.getElementById("editing-tools"));
	window.scrollTo(0, document.body.scrollHeight);
	editingEnabled();
	clicker();
//	fixPageMargins();
}
function add_stylesheet(site_id,entryId) {
	var lnk=document.createElement('link');
	lnk.href='common_public/inline-editing.css';
	lnk.rel='stylesheet';
	lnk.type='text/css';
	lnk.id='inlineCSS';
	(document.head||document.documentElement).appendChild(lnk);
	if (site_id=='1001074') {
		var lnk2=document.createElement('link');
		lnk2.href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css';
		lnk2.rel='stylesheet';
		lnk2.type='text/css';
		lnk2.id='bootstrap3CSS';
		(document.head||document.documentElement).appendChild(lnk2);
		var stylesheet3 = document.getElementById("bootstrap2");
		if (stylesheet3) {
			stylesheet3.disabled = true;
			stylesheet3.parentNode.removeChild(stylesheet3);
		}
	}
	if (typeof addStyle !== "function") {
		var scriptTag = document.createElement('script');
		scriptTag.src = 'common_public/inline-editing.js';
		inlineScript = document.body.appendChild(scriptTag);
		inlineScript.setAttribute("id","inlineScript");
	}
}
function drop_stylesheet() {
	var stylesheet = document.getElementById("inlineCSS");
	stylesheet.disabled = true;
	document.querySelector("link[href='common_public/inline-editing.css']").removeAttribute("href");
	stylesheet.parentNode.removeChild(stylesheet);
	var stylesheet2 = document.getElementById("bootstrap3CSS");
	if (stylesheet2) {
		stylesheet2.disabled = true;
		stylesheet2.parentNode.removeChild(stylesheet2);
		var lnk2=document.createElement('link');
		lnk2.href='_site_layouts//css/bootstrap.css';
		lnk2.rel='stylesheet';
		lnk2.type='text/css';
		lnk2.id='bootstrap2';
		(document.head||document.documentElement).appendChild(lnk2);
	}
	document.getElementById("inlineScript").remove;
}
function save_edits(site_id) {
	es = document.getElementsByClassName("gs-editable");
	var i;
	for (i = 0; i < es.length; i++) {
		tipe_id = es[i].dataset.tipe;
		html = es[i].innerHTML;
		user_id = document.getElementById("saveEdits").dataset.user;
		save_tipe_page(tipe_id,html,user_id);
	}
	alert("Changes Saved");
}

function save_tipe_page(tipe_id,html,user_id) {
	html = html.replace(/#/g,"%23");
	html = encodeURIComponent(html);
	var params = "f1=edit_page_save&section_name=" + tipe_id + "&html=" + html + "&user_id="+user_id;
	var xmlhttp = new XMLHttpRequest();
	xmlhttp.open("POST", "common_public/phpFunctions/ajaxFunctions.php", true);
	xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	xmlhttp.onload = function() {
		if (xmlhttp.readyState === xmlhttp.DONE) { 
			if (xmlhttp.status === 200) { 
				console.log(xmlhttp.response); 
				console.log(xmlhttp.responseText); 
			}
		}
		values = xmlhttp.response.split('~,~');
		result = values[0];
	};
	xmlhttp.send(params);
}
function get_toolbar() {
	var toolbar_html = '\
	<div id="inpage-editor">\
		<div class="note-toolbar panel-heading">\
			<div class="note-btn-group btn-group note-style">\
				<div class="note-btn-group btn-group">\
					<button type="button" class="note-btn btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" title="" data-original-title="Style" aria-expanded="false">\
						<i class="note-icon-magic"></i> \
						<span class="note-icon-caret"></span>\
					</button>\
					<div class="dropdown-menu dropdown-style">\
						<li><a href="#" data-value="p" onClick="addTag(\'p\');"><p>p</p></a></li>\
						<li><a href="#" data-value="blockquote" onClick="addTag(\'blockquote\');"><blockquote>blockquote</blockquote></a></li>\
						<li><a href="#" data-value="pre" onClick="addTag(\'pre\');"><pre>pre</pre></a></li>\
						<li><a href="#" data-value="h1" onClick="addTag(\'h1\');"><h1>h1</h1></a></li>\
						<li><a href="#" data-value="h2" onClick="addTag(\'h2\');"><h2>h2</h2></a></li>\
						<li><a href="#" data-value="h3" onClick="addTag(\'h3\');"><h3>h3</h3></a></li>\
						<li><a href="#" data-value="h4" onClick="addTag(\'h4\');"><h4>h4</h4></a></li>\
						<li><a href="#" data-value="h5" onClick="addTag(\'h5\');"><h5>h5</h5></a></li>\
						<li><a href="#" data-value="h6" onClick="addTag(\'h6\');"><h6>h6</h6></a></li>\
					</div>\
				</div>\
				<button type="button" class="note-btn btn btn-default btn-sm note-btn-bold" title="" data-original-title="Bold (⌘+B)" onClick="addStyle(\'fontWeight\',\'bold\');">\
					<i class="note-icon-bold"></i>\
				</button>\
				<button type="button" class="note-btn btn btn-default btn-sm note-btn-italic" title="" data-original-title="Italic (⌘+I)" onClick="addStyle(\'fontStyle\',\'italic\');">\
					<i class="note-icon-italic"></i>\
				</button>\
				<button type="button" class="note-btn btn btn-default btn-sm note-btn-underline" title="" data-original-title="Underline (⌘+U)" onClick="addStyle(\'textDecoration\',\'underline\');">\
					<i class="note-icon-underline"></i>\
				</button>\
				<button type="button" class="note-btn btn btn-default btn-sm" title="" data-original-title="Remove Font Style (⌘+\)" onClick="removeFormatting();">\
					<i class="note-icon-eraser"></i>\
				</button>\
			</div>\
			<div class="note-btn-group btn-group note-font">\
				<button type="button" class="note-btn btn btn-default btn-sm note-btn-strikethrough" title="" data-original-title="Strikethrough (⌘+⇧+S)" onClick="addTag(\'s\');">\
					<i class="note-icon-strikethrough"></i>\
				</button>\
				<button type="button" class="note-btn btn btn-default btn-sm note-btn-superscript" title="" data-original-title="Superscript" onClick="addTag(\'sup\');">\
					<i class="note-icon-superscript"></i>\
				</button>\
				<button type="button" class="note-btn btn btn-default btn-sm note-btn-subscript" title="" data-original-title="Subscript" onClick="addTag(\'sub\');">\
					<i class="note-icon-subscript"></i>\
				</button>\
			</div>\
			<div class="note-btn-group btn-group note-fontsize">\
				<div class="note-btn-group btn-group">\
					<button type="button" class="note-btn btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" title="" data-original-title="Font Size">\
						<span class="note-current-fontsize" id="current-fontsize">14</span>\
						<span class="note-icon-caret"></span>\
					</button>\
					<div class="dropdown-menu note-check dropdown-fontsize" id="fontsize-choices">\
						<li><a href="#" data-value="8" class="" onClick="addStyle(\'fontSize\',\'8px\'); changeCurrentFontSize(this);"><i class="note-icon-check"></i> 8</a></li>\
						<li><a href="#" data-value="9" class="" onClick="addStyle(\'fontSize\',\'9px\'); changeCurrentFontSize(this);"><i class="note-icon-check"></i> 9</a></li>\
						<li><a href="#" data-value="10" class="" onClick="addStyle(\'fontSize\',\'10px\'); changeCurrentFontSize(this);"><i class="note-icon-check"></i> 10</a></li>\
						<li><a href="#" data-value="11" class="" onClick="addStyle(\'fontSize\',\'11px\'); changeCurrentFontSize(this);"><i class="note-icon-check"></i> 11</a></li>\
						<li><a href="#" data-value="12" class="" onClick="addStyle(\'fontSize\',\'12px\'); changeCurrentFontSize(this);"><i class="note-icon-check"></i> 12</a></li>\
						<li><a href="#" data-value="14" class="checked" onClick="addStyle(\'fontSize\',\'14px\'); changeCurrentFontSize(this);"><i class="note-icon-check"></i> 14</a></li>\
						<li><a href="#" data-value="18" class="" onClick="addStyle(\'fontSize\',\'18px\'); changeCurrentFontSize(this);"><i class="note-icon-check"></i> 18</a></li>\
						<li><a href="#" data-value="24" class="" onClick="addStyle(\'fontSize\',\'24px\'); changeCurrentFontSize(this);"><i class="note-icon-check"></i> 24</a></li>\
						<li><a href="#" data-value="36" class="" onClick="addStyle(\'fontSize\',\'36px\'); changeCurrentFontSize(this);"><i class="note-icon-check"></i> 36</a></li>\
					</div>\
				</div>\
			</div>\
			<div class="note-btn-group btn-group note-color">\
				<div class="note-btn-group btn-group note-color">\
					<button type="button" id="recentColor" class="note-btn btn btn-default btn-sm note-current-color-button" title="" data-original-title="Recent Color" data-backcolor="rgba(255, 255, 255, 0)" data-color="#000000" onClick="addStyle(\'backgroundColor\',this.dataset.backcolor); addStyle(\'color\',this.dataset.color);">\
						<i id="fontColors" class="note-icon-font note-recent-color" style="background-color: rgba(255, 255, 255, 0); color: #000000;"></i>\
					</button>\
					<button type="button" class="note-btn btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" title="" data-original-title="More Color">\
						<span class="note-icon-caret"></span>\
					</button>\
					<div class="dropdown-menu">\
						<li>\
						<div class="btn-group">  \
							<div class="note-palette-title">Background Color</div>  \
							<div>    \
								<button type="button" class="note-color-reset btn btn-default" data-event="backColor" data-value="inherit" onClick="fixBackground();">Transparent</button>\
							</div>  \
							<div class="note-holder" data-event="backColor">\
								<div class="note-color-palette">\
									<div class="note-color-row">\
										<button type="button" class="note-color-btn" style="background-color:#000000" data-event="backColor" data-value="#000000" title="" data-toggle="button" tabindex="-1" data-original-title="#000000" onClick="addStyle(\'backgroundColor\',\'#000000\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#424242" data-event="backColor" data-value="#424242" title="" data-toggle="button" tabindex="-1" data-original-title="#424242" onClick="addStyle(\'backgroundColor\',\'#424242\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#636363" data-event="backColor" data-value="#636363" title="" data-toggle="button" tabindex="-1" data-original-title="#636363" onClick="addStyle(\'backgroundColor\',\'#636363\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#9C9C94" data-event="backColor" data-value="#9C9C94" title="" data-toggle="button" tabindex="-1" data-original-title="#9C9C94" onClick="addStyle(\'backgroundColor\',\'#9C9C94\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#CEC6CE" data-event="backColor" data-value="#CEC6CE" title="" data-toggle="button" tabindex="-1" data-original-title="#CEC6CE" onClick="addStyle(\'backgroundColor\',\'#CEC6CE\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#EFEFEF" data-event="backColor" data-value="#EFEFEF" title="" data-toggle="button" tabindex="-1" data-original-title="#EFEFEF" onClick="addStyle(\'backgroundColor\',\'#EFEFEF\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#F7F7F7" data-event="backColor" data-value="#F7F7F7" title="" data-toggle="button" tabindex="-1" data-original-title="#F7F7F7" onClick="addStyle(\'backgroundColor\',\'#F7F7F7\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#FFFFFF" data-event="backColor" data-value="#FFFFFF" title="" data-toggle="button" tabindex="-1" data-original-title="#FFFFFF" onClick="addStyle(\'backgroundColor\',\'#FFFFFF\');"></button>\
									</div>\
									<div class="note-color-row">\
										<button type="button" class="note-color-btn" style="background-color:#FF0000" data-event="backColor" data-value="#FF0000" title="" data-toggle="button" tabindex="-1" data-original-title="#FF0000" onClick="addStyle(\'backgroundColor\',\'#FF0000\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#FF9C00" data-event="backColor" data-value="#FF9C00" title="" data-toggle="button" tabindex="-1" data-original-title="#FF9C00" onClick="addStyle(\'backgroundColor\',\'#FF9C00\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#FFFF00" data-event="backColor" data-value="#FFFF00" title="" data-toggle="button" tabindex="-1" data-original-title="#FFFF00" onClick="addStyle(\'backgroundColor\',\'#FFFF00\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#00FF00" data-event="backColor" data-value="#00FF00" title="" data-toggle="button" tabindex="-1" data-original-title="#00FF00" onClick="addStyle(\'backgroundColor\',\'#00FF00\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#00FFFF" data-event="backColor" data-value="#00FFFF" title="" data-toggle="button" tabindex="-1" data-original-title="#00FFFF" onClick="addStyle(\'backgroundColor\',\'#00FFFF\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#0000FF" data-event="backColor" data-value="#0000FF" title="" data-toggle="button" tabindex="-1" data-original-title="#0000FF" onClick="addStyle(\'backgroundColor\',\'#0000FF\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#9C00FF" data-event="backColor" data-value="#9C00FF" title="" data-toggle="button" tabindex="-1" data-original-title="#9C00FF" onClick="addStyle(\'backgroundColor\',\'#9C00FF\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#FF00FF" data-event="backColor" data-value="#FF00FF" title="" data-toggle="button" tabindex="-1" data-original-title="#FF00FF" onClick="addStyle(\'backgroundColor\',\'#FF00FF\');"></button>\
									</div>\
									<div class="note-color-row">\
										<button type="button" class="note-color-btn" style="background-color:#F7C6CE" data-event="backColor" data-value="#F7C6CE" title="" data-toggle="button" tabindex="-1" data-original-title="#F7C6CE" onClick="addStyle(\'backgroundColor\',\'#F7C6CE\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#FFE7CE" data-event="backColor" data-value="#FFE7CE" title="" data-toggle="button" tabindex="-1" data-original-title="#FFE7CE" onClick="addStyle(\'backgroundColor\',\'#FFE7CE\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#FFEFC6" data-event="backColor" data-value="#FFEFC6" title="" data-toggle="button" tabindex="-1" data-original-title="#FFEFC6" onClick="addStyle(\'backgroundColor\',\'#FFEFC6\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#D6EFD6" data-event="backColor" data-value="#D6EFD6" title="" data-toggle="button" tabindex="-1" data-original-title="#D6EFD6" onClick="addStyle(\'backgroundColor\',\'#D6EFD6\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#CEDEE7" data-event="backColor" data-value="#CEDEE7" title="" data-toggle="button" tabindex="-1" data-original-title="#CEDEE7" onClick="addStyle(\'backgroundColor\',\'#CEDEE7\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#CEE7F7" data-event="backColor" data-value="#CEE7F7" title="" data-toggle="button" tabindex="-1" data-original-title="#CEE7F7" onClick="addStyle(\'backgroundColor\',\'#CEE7F7\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#D6D6E7" data-event="backColor" data-value="#D6D6E7" title="" data-toggle="button" tabindex="-1" data-original-title="#D6D6E7" onClick="addStyle(\'backgroundColor\',\'#D6D6E7\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#E7D6DE" data-event="backColor" data-value="#E7D6DE" title="" data-toggle="button" tabindex="-1" data-original-title="#E7D6DE" onClick="addStyle(\'backgroundColor\',\'#E7D6DE\');"></button>\
									</div>\
									<div class="note-color-row">\
										<button type="button" class="note-color-btn" style="background-color:#E79C9C" data-event="backColor" data-value="#E79C9C" title="" data-toggle="button" tabindex="-1" data-original-title="#E79C9C" onClick="addStyle(\'backgroundColor\',\'#E79C9C\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#FFC69C" data-event="backColor" data-value="#FFC69C" title="" data-toggle="button" tabindex="-1" data-original-title="#FFC69C" onClick="addStyle(\'backgroundColor\',\'#FFC69C\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#FFE79C" data-event="backColor" data-value="#FFE79C" title="" data-toggle="button" tabindex="-1" data-original-title="#FFE79C" onClick="addStyle(\'backgroundColor\',\'#FFE79C\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#B5D6A5" data-event="backColor" data-value="#B5D6A5" title="" data-toggle="button" tabindex="-1" data-original-title="#B5D6A5" onClick="addStyle(\'backgroundColor\',\'#B5D6A5\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#A5C6CE" data-event="backColor" data-value="#A5C6CE" title="" data-toggle="button" tabindex="-1" data-original-title="#A5C6CE" onClick="addStyle(\'backgroundColor\',\'#A5C6CE\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#9CC6EF" data-event="backColor" data-value="#9CC6EF" title="" data-toggle="button" tabindex="-1" data-original-title="#9CC6EF" onClick="addStyle(\'backgroundColor\',\'#9CC6EF\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#B5A5D6" data-event="backColor" data-value="#B5A5D6" title="" data-toggle="button" tabindex="-1" data-original-title="#B5A5D6" onClick="addStyle(\'backgroundColor\',\'#B5A5D6\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#D6A5BD" data-event="backColor" data-value="#D6A5BD" title="" data-toggle="button" tabindex="-1" data-original-title="#D6A5BD" onClick="addStyle(\'backgroundColor\',\'#D6A5BD\');"></button>\
									</div>\
									<div class="note-color-row">\
										<button type="button" class="note-color-btn" style="background-color:#E76363" data-event="backColor" data-value="#E76363" title="" data-toggle="button" tabindex="-1" data-original-title="#E76363" onClick="addStyle(\'backgroundColor\',\'#E76363\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#F7AD6B" data-event="backColor" data-value="#F7AD6B" title="" data-toggle="button" tabindex="-1" data-original-title="#F7AD6B" onClick="addStyle(\'backgroundColor\',\'#F7AD6B\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#FFD663" data-event="backColor" data-value="#FFD663" title="" data-toggle="button" tabindex="-1" data-original-title="#FFD663" onClick="addStyle(\'backgroundColor\',\'#FFD663\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#94BD7B" data-event="backColor" data-value="#94BD7B" title="" data-toggle="button" tabindex="-1" data-original-title="#94BD7B" onClick="addStyle(\'backgroundColor\',\'#94BD7B\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#73A5AD" data-event="backColor" data-value="#73A5AD" title="" data-toggle="button" tabindex="-1" data-original-title="#73A5AD" onClick="addStyle(\'backgroundColor\',\'#73A5AD\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#6BADDE" data-event="backColor" data-value="#6BADDE" title="" data-toggle="button" tabindex="-1" data-original-title="#6BADDE" onClick="addStyle(\'backgroundColor\',\'#6BADDE\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#8C7BC6" data-event="backColor" data-value="#8C7BC6" title="" data-toggle="button" tabindex="-1" data-original-title="#8C7BC6" onClick="addStyle(\'backgroundColor\',\'#8C7BC6\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#C67BA5" data-event="backColor" data-value="#C67BA5" title="" data-toggle="button" tabindex="-1" data-original-title="#C67BA5" onClick="addStyle(\'backgroundColor\',\'#C67BA5\');"></button>\
									</div>\
									<div class="note-color-row">\
										<button type="button" class="note-color-btn" style="background-color:#CE0000" data-event="backColor" data-value="#CE0000" title="" data-toggle="button" tabindex="-1" data-original-title="#CE0000" onClick="addStyle(\'backgroundColor\',\'#CE0000\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#E79439" data-event="backColor" data-value="#E79439" title="" data-toggle="button" tabindex="-1" data-original-title="#E79439" onClick="addStyle(\'backgroundColor\',\'#E79439\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#EFC631" data-event="backColor" data-value="#EFC631" title="" data-toggle="button" tabindex="-1" data-original-title="#EFC631" onClick="addStyle(\'backgroundColor\',\'#EFC631\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#6BA54A" data-event="backColor" data-value="#6BA54A" title="" data-toggle="button" tabindex="-1" data-original-title="#6BA54A" onClick="addStyle(\'backgroundColor\',\'#6BA54A\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#4A7B8C" data-event="backColor" data-value="#4A7B8C" title="" data-toggle="button" tabindex="-1" data-original-title="#4A7B8C" onClick="addStyle(\'backgroundColor\',\'#4A7B8C\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#3984C6" data-event="backColor" data-value="#3984C6" title="" data-toggle="button" tabindex="-1" data-original-title="#3984C6" onClick="addStyle(\'backgroundColor\',\'#3984C6\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#634AA5" data-event="backColor" data-value="#634AA5" title="" data-toggle="button" tabindex="-1" data-original-title="#634AA5" onClick="addStyle(\'backgroundColor\',\'#634AA5\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#A54A7B" data-event="backColor" data-value="#A54A7B" title="" data-toggle="button" tabindex="-1" data-original-title="#A54A7B" onClick="addStyle(\'backgroundColor\',\'#A54A7B\');"></button>\
									</div>\
									<div class="note-color-row">\
										<button type="button" class="note-color-btn" style="background-color:#9C0000" data-event="backColor" data-value="#9C0000" title="" data-toggle="button" tabindex="-1" data-original-title="#9C0000" onClick="addStyle(\'backgroundColor\',\'#9C0000\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#B56308" data-event="backColor" data-value="#B56308" title="" data-toggle="button" tabindex="-1" data-original-title="#B56308" onClick="addStyle(\'backgroundColor\',\'#B56308\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#BD9400" data-event="backColor" data-value="#BD9400" title="" data-toggle="button" tabindex="-1" data-original-title="#BD9400" onClick="addStyle(\'backgroundColor\',\'#BD9400\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#397B21" data-event="backColor" data-value="#397B21" title="" data-toggle="button" tabindex="-1" data-original-title="#397B21" onClick="addStyle(\'backgroundColor\',\'#397B21\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#104A5A" data-event="backColor" data-value="#104A5A" title="" data-toggle="button" tabindex="-1" data-original-title="#104A5A" onClick="addStyle(\'backgroundColor\',\'#104A5A\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#085294" data-event="backColor" data-value="#085294" title="" data-toggle="button" tabindex="-1" data-original-title="#085294" onClick="addStyle(\'backgroundColor\',\'#085294\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#311873" data-event="backColor" data-value="#311873" title="" data-toggle="button" tabindex="-1" data-original-title="#311873" onClick="addStyle(\'backgroundColor\',\'#311873\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#731842" data-event="backColor" data-value="#731842" title="" data-toggle="button" tabindex="-1" data-original-title="#731842" onClick="addStyle(\'backgroundColor\',\'#731842\');"></button>\
									</div>\
									<div class="note-color-row">\
										<button type="button" class="note-color-btn" style="background-color:#630000" data-event="backColor" data-value="#630000" title="" data-toggle="button" tabindex="-1" data-original-title="#630000" onClick="addStyle(\'backgroundColor\',\'#630000\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#7B3900" data-event="backColor" data-value="#7B3900" title="" data-toggle="button" tabindex="-1" data-original-title="#7B3900" onClick="addStyle(\'backgroundColor\',\'#7B3900\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#846300" data-event="backColor" data-value="#846300" title="" data-toggle="button" tabindex="-1" data-original-title="#846300" onClick="addStyle(\'backgroundColor\',\'#846300\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#295218" data-event="backColor" data-value="#295218" title="" data-toggle="button" tabindex="-1" data-original-title="#295218" onClick="addStyle(\'backgroundColor\',\'#295218\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#083139" data-event="backColor" data-value="#083139" title="" data-toggle="button" tabindex="-1" data-original-title="#083139" onClick="addStyle(\'backgroundColor\',\'#083139\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#003163" data-event="backColor" data-value="#003163" title="" data-toggle="button" tabindex="-1" data-original-title="#003163" onClick="addStyle(\'backgroundColor\',\'#003163\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#21104A" data-event="backColor" data-value="#21104A" title="" data-toggle="button" tabindex="-1" data-original-title="#21104A" onClick="addStyle(\'backgroundColor\',\'#21104A\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#4A1031" data-event="backColor" data-value="#4A1031" title="" data-toggle="button" tabindex="-1" data-original-title="#4A1031" onClick="addStyle(\'backgroundColor\',\'#4A1031\');"></button>\
									</div>\
								</div>\
							</div>\
						</div>\
						<div class="btn-group">  \
							<div class="note-palette-title">Foreground Color</div>  \
							<div>    \
								<button type="button" class="note-color-reset btn btn-default" data-event="removeFormat" data-value="foreColor" onClick="addStyle(\'color\',\'initial\');">Reset to default    </button>  \
							</div>  \
							<div class="note-holder" data-event="foreColor">\
								<div class="note-color-palette">\
									<div class="note-color-row">\
										<button type="button" class="note-color-btn" style="background-color:#000000" data-event="foreColor" data-value="#000000" title="" data-toggle="button" tabindex="-1" data-original-title="#000000" onClick="addStyle(\'color\',\'#000000\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#424242" data-event="foreColor" data-value="#424242" title="" data-toggle="button" tabindex="-1" data-original-title="#424242" onClick="addStyle(\'color\',\'#424242\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#636363" data-event="foreColor" data-value="#636363" title="" data-toggle="button" tabindex="-1" data-original-title="#636363" onClick="addStyle(\'color\',\'#636363\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#9C9C94" data-event="foreColor" data-value="#9C9C94" title="" data-toggle="button" tabindex="-1" data-original-title="#9C9C94" onClick="addStyle(\'color\',\'#9C9C94\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#CEC6CE" data-event="foreColor" data-value="#CEC6CE" title="" data-toggle="button" tabindex="-1" data-original-title="#CEC6CE" onClick="addStyle(\'color\',\'#CEC6CE\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#EFEFEF" data-event="foreColor" data-value="#EFEFEF" title="" data-toggle="button" tabindex="-1" data-original-title="#EFEFEF" onClick="addStyle(\'color\',\'#EFEFEF\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#F7F7F7" data-event="foreColor" data-value="#F7F7F7" title="" data-toggle="button" tabindex="-1" data-original-title="#F7F7F7" onClick="addStyle(\'color\',\'#F7F7F7\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#FFFFFF" data-event="foreColor" data-value="#FFFFFF" title="" data-toggle="button" tabindex="-1" data-original-title="#FFFFFF" onClick="addStyle(\'color\',\'#FFFFFF\');"></button>\
									</div>\
									<div class="note-color-row">\
										<button type="button" class="note-color-btn" style="background-color:#FF0000" data-event="foreColor" data-value="#FF0000" title="" data-toggle="button" tabindex="-1" data-original-title="#FF0000" onClick="addStyle(\'color\',\'#FF0000\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#FF9C00" data-event="foreColor" data-value="#FF9C00" title="" data-toggle="button" tabindex="-1" data-original-title="#FF9C00" onClick="addStyle(\'color\',\'#FF9C00\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#FFFF00" data-event="foreColor" data-value="#FFFF00" title="" data-toggle="button" tabindex="-1" data-original-title="#FFFF00" onClick="addStyle(\'color\',\'#FFFF00\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#00FF00" data-event="foreColor" data-value="#00FF00" title="" data-toggle="button" tabindex="-1" data-original-title="#00FF00" onClick="addStyle(\'color\',\'#00FF00\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#00FFFF" data-event="foreColor" data-value="#00FFFF" title="" data-toggle="button" tabindex="-1" data-original-title="#00FFFF" onClick="addStyle(\'color\',\'#00FFFF\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#0000FF" data-event="foreColor" data-value="#0000FF" title="" data-toggle="button" tabindex="-1" data-original-title="#0000FF" onClick="addStyle(\'color\',\'#0000FF\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#9C00FF" data-event="foreColor" data-value="#9C00FF" title="" data-toggle="button" tabindex="-1" data-original-title="#9C00FF" onClick="addStyle(\'color\',\'#9C00FF\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#FF00FF" data-event="foreColor" data-value="#FF00FF" title="" data-toggle="button" tabindex="-1" data-original-title="#FF00FF" onClick="addStyle(\'color\',\'#FF00FF\');"></button>\
									</div>\
									<div class="note-color-row">\
										<button type="button" class="note-color-btn" style="background-color:#F7C6CE" data-event="foreColor" data-value="#F7C6CE" title="" data-toggle="button" tabindex="-1" data-original-title="#F7C6CE" onClick="addStyle(\'color\',\'#F7C6CE\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#FFE7CE" data-event="foreColor" data-value="#FFE7CE" title="" data-toggle="button" tabindex="-1" data-original-title="#FFE7CE" onClick="addStyle(\'color\',\'#FFE7CE\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#FFEFC6" data-event="foreColor" data-value="#FFEFC6" title="" data-toggle="button" tabindex="-1" data-original-title="#FFEFC6" onClick="addStyle(\'color\',\'#FFEFC6\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#D6EFD6" data-event="foreColor" data-value="#D6EFD6" title="" data-toggle="button" tabindex="-1" data-original-title="#D6EFD6" onClick="addStyle(\'color\',\'#D6EFD6\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#CEDEE7" data-event="foreColor" data-value="#CEDEE7" title="" data-toggle="button" tabindex="-1" data-original-title="#CEDEE7" onClick="addStyle(\'color\',\'#CEDEE7\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#CEE7F7" data-event="foreColor" data-value="#CEE7F7" title="" data-toggle="button" tabindex="-1" data-original-title="#CEE7F7" onClick="addStyle(\'color\',\'#CEE7F7\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#D6D6E7" data-event="foreColor" data-value="#D6D6E7" title="" data-toggle="button" tabindex="-1" data-original-title="#D6D6E7" onClick="addStyle(\'color\',\'#D6D6E7\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#E7D6DE" data-event="foreColor" data-value="#E7D6DE" title="" data-toggle="button" tabindex="-1" data-original-title="#E7D6DE" onClick="addStyle(\'color\',\'#E7D6DE\');"></button>\
									</div>\
									<div class="note-color-row">\
										<button type="button" class="note-color-btn" style="background-color:#E79C9C" data-event="foreColor" data-value="#E79C9C" title="" data-toggle="button" tabindex="-1" data-original-title="#E79C9C" onClick="addStyle(\'color\',\'#E79C9C\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#FFC69C" data-event="foreColor" data-value="#FFC69C" title="" data-toggle="button" tabindex="-1" data-original-title="#FFC69C" onClick="addStyle(\'color\',\'#FFC69C\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#FFE79C" data-event="foreColor" data-value="#FFE79C" title="" data-toggle="button" tabindex="-1" data-original-title="#FFE79C" onClick="addStyle(\'color\',\'#FFE79C\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#B5D6A5" data-event="foreColor" data-value="#B5D6A5" title="" data-toggle="button" tabindex="-1" data-original-title="#B5D6A5" onClick="addStyle(\'color\',\'#B5D6A5\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#A5C6CE" data-event="foreColor" data-value="#A5C6CE" title="" data-toggle="button" tabindex="-1" data-original-title="#A5C6CE" onClick="addStyle(\'color\',\'#A5C6CE\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#9CC6EF" data-event="foreColor" data-value="#9CC6EF" title="" data-toggle="button" tabindex="-1" data-original-title="#9CC6EF" onClick="addStyle(\'color\',\'#9CC6EF\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#B5A5D6" data-event="foreColor" data-value="#B5A5D6" title="" data-toggle="button" tabindex="-1" data-original-title="#B5A5D6" onClick="addStyle(\'color\',\'#B5A5D6\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#D6A5BD" data-event="foreColor" data-value="#D6A5BD" title="" data-toggle="button" tabindex="-1" data-original-title="#D6A5BD" onClick="addStyle(\'color\',\'#D6A5BD\');"></button>\
									</div>\
									<div class="note-color-row">\
										<button type="button" class="note-color-btn" style="background-color:#E76363" data-event="foreColor" data-value="#E76363" title="" data-toggle="button" tabindex="-1" data-original-title="#E76363" onClick="addStyle(\'color\',\'#E76363\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#F7AD6B" data-event="foreColor" data-value="#F7AD6B" title="" data-toggle="button" tabindex="-1" data-original-title="#F7AD6B" onClick="addStyle(\'color\',\'#F7AD6B\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#FFD663" data-event="foreColor" data-value="#FFD663" title="" data-toggle="button" tabindex="-1" data-original-title="#FFD663" onClick="addStyle(\'color\',\'#FFD663\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#94BD7B" data-event="foreColor" data-value="#94BD7B" title="" data-toggle="button" tabindex="-1" data-original-title="#94BD7B" onClick="addStyle(\'color\',\'#94BD7B\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#73A5AD" data-event="foreColor" data-value="#73A5AD" title="" data-toggle="button" tabindex="-1" data-original-title="#73A5AD" onClick="addStyle(\'color\',\'#73A5AD\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#6BADDE" data-event="foreColor" data-value="#6BADDE" title="" data-toggle="button" tabindex="-1" data-original-title="#6BADDE" onClick="addStyle(\'color\',\'#6BADDE\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#8C7BC6" data-event="foreColor" data-value="#8C7BC6" title="" data-toggle="button" tabindex="-1" data-original-title="#8C7BC6" onClick="addStyle(\'color\',\'#8C7BC6\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#C67BA5" data-event="foreColor" data-value="#C67BA5" title="" data-toggle="button" tabindex="-1" data-original-title="#C67BA5" onClick="addStyle(\'color\',\'#C67BA5\');"></button>\
									</div>\
									<div class="note-color-row">\
										<button type="button" class="note-color-btn" style="background-color:#CE0000" data-event="foreColor" data-value="#CE0000" title="" data-toggle="button" tabindex="-1" data-original-title="#CE0000" onClick="addStyle(\'color\',\'#CE0000\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#E79439" data-event="foreColor" data-value="#E79439" title="" data-toggle="button" tabindex="-1" data-original-title="#E79439" onClick="addStyle(\'color\',\'#E79439\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#EFC631" data-event="foreColor" data-value="#EFC631" title="" data-toggle="button" tabindex="-1" data-original-title="#EFC631" onClick="addStyle(\'color\',\'#EFC631\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#6BA54A" data-event="foreColor" data-value="#6BA54A" title="" data-toggle="button" tabindex="-1" data-original-title="#6BA54A" onClick="addStyle(\'color\',\'#6BA54A\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#4A7B8C" data-event="foreColor" data-value="#4A7B8C" title="" data-toggle="button" tabindex="-1" data-original-title="#4A7B8C" onClick="addStyle(\'color\',\'#4A7B8C\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#3984C6" data-event="foreColor" data-value="#3984C6" title="" data-toggle="button" tabindex="-1" data-original-title="#3984C6" onClick="addStyle(\'color\',\'#3984C6\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#634AA5" data-event="foreColor" data-value="#634AA5" title="" data-toggle="button" tabindex="-1" data-original-title="#634AA5" onClick="addStyle(\'color\',\'#634AA5\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#A54A7B" data-event="foreColor" data-value="#A54A7B" title="" data-toggle="button" tabindex="-1" data-original-title="#A54A7B" onClick="addStyle(\'color\',\'#A54A7B\');"></button>\
									</div>\
									<div class="note-color-row">\
										<button type="button" class="note-color-btn" style="background-color:#9C0000" data-event="foreColor" data-value="#9C0000" title="" data-toggle="button" tabindex="-1" data-original-title="#9C0000" onClick="addStyle(\'color\',\'#9C0000\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#B56308" data-event="foreColor" data-value="#B56308" title="" data-toggle="button" tabindex="-1" data-original-title="#B56308" onClick="addStyle(\'color\',\'#B56308\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#BD9400" data-event="foreColor" data-value="#BD9400" title="" data-toggle="button" tabindex="-1" data-original-title="#BD9400" onClick="addStyle(\'color\',\'#BD9400\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#397B21" data-event="foreColor" data-value="#397B21" title="" data-toggle="button" tabindex="-1" data-original-title="#397B21" onClick="addStyle(\'color\',\'#397B21\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#104A5A" data-event="foreColor" data-value="#104A5A" title="" data-toggle="button" tabindex="-1" data-original-title="#104A5A" onClick="addStyle(\'color\',\'#104A5A\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#085294" data-event="foreColor" data-value="#085294" title="" data-toggle="button" tabindex="-1" data-original-title="#085294" onClick="addStyle(\'color\',\'#085294\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#311873" data-event="foreColor" data-value="#311873" title="" data-toggle="button" tabindex="-1" data-original-title="#311873" onClick="addStyle(\'color\',\'#311873\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#731842" data-event="foreColor" data-value="#731842" title="" data-toggle="button" tabindex="-1" data-original-title="#731842" onClick="addStyle(\'color\',\'#731842\');"></button>\
									</div>\
									<div class="note-color-row">\
										<button type="button" class="note-color-btn" style="background-color:#630000" data-event="foreColor" data-value="#630000" title="" data-toggle="button" tabindex="-1" data-original-title="#630000" onClick="addStyle(\'color\',\'#630000\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#7B3900" data-event="foreColor" data-value="#7B3900" title="" data-toggle="button" tabindex="-1" data-original-title="#7B3900" onClick="addStyle(\'color\',\'#7B3900\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#846300" data-event="foreColor" data-value="#846300" title="" data-toggle="button" tabindex="-1" data-original-title="#846300" onClick="addStyle(\'color\',\'#846300\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#295218" data-event="foreColor" data-value="#295218" title="" data-toggle="button" tabindex="-1" data-original-title="#295218" onClick="addStyle(\'color\',\'#295218\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#083139" data-event="foreColor" data-value="#083139" title="" data-toggle="button" tabindex="-1" data-original-title="#083139" onClick="addStyle(\'color\',\'#083139\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#003163" data-event="foreColor" data-value="#003163" title="" data-toggle="button" tabindex="-1" data-original-title="#003163" onClick="addStyle(\'color\',\'#003163\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#21104A" data-event="foreColor" data-value="#21104A" title="" data-toggle="button" tabindex="-1" data-original-title="#21104A" onClick="addStyle(\'color\',\'#21104A\');"></button>\
										<button type="button" class="note-color-btn" style="background-color:#4A1031" data-event="foreColor" data-value="#4A1031" title="" data-toggle="button" tabindex="-1" data-original-title="#4A1031" onClick="addStyle(\'color\',\'#4A1031\');"></button>\
									</div>\
								</div>\
							</div>\
						</div>\
					</li>\
				</div>\
			</div>\
		</div>\
		<div class="note-btn-group btn-group note-para">\
			<button type="button" class="note-btn btn btn-default btn-sm" title="" data-original-title="Unordered list (⌘+⇧+NUM7)" onClick="addTag(\'ul\');"><i class="note-icon-unorderedlist"></i></button>\
			<button type="button" class="note-btn btn btn-default btn-sm" title="" data-original-title="Ordered list (⌘+⇧+NUM8)" onClick="addTag(\'ol\');"><i class="note-icon-orderedlist"></i></button>\
			<div class="note-btn-group btn-group">\
				<button type="button" class="note-btn btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" title="" data-original-title="Paragraph">\
					<i class="note-icon-align-left"></i> <span class="note-icon-caret"></span>\
				</button>\
				<div class="dropdown-menu">\
					<div class="note-btn-group btn-group note-align">\
						<button type="button" class="note-btn btn btn-default btn-sm" title="" data-original-title="Align left (⌘+⇧+L)" onClick="addStyle(\'textAlign\',\'left\'); addStyle(\'display\',\'block\');"><i class="note-icon-align-left"></i></button>\
						<button type="button" class="note-btn btn btn-default btn-sm" title="" data-original-title="Align center (⌘+⇧+E)" onClick="addStyle(\'textAlign\',\'center\'); addStyle(\'display\',\'block\');"><i class="note-icon-align-center"></i></button>\
						<button type="button" class="note-btn btn btn-default btn-sm" title="" data-original-title="Align right (⌘+⇧+R)" onClick="addStyle(\'textAlign\',\'right\'); addStyle(\'display\',\'block\');"><i class="note-icon-align-right"></i></button>\
						<button type="button" class="note-btn btn btn-default btn-sm" title="" data-original-title="Justify full (⌘+⇧+J)" onClick="addStyle(\'textAlign\',\'justify\'); addStyle(\'display\',\'block\');"><i class="note-icon-align-justify"></i></button>\
					</div>\
					<div class="note-btn-group btn-group note-list">\
						<button type="button" class="note-btn btn btn-default btn-sm" title="" data-original-title="Outdent (⌘+[)" onClick="addStyle(\'marginLeft\',\'-25px\');"><i class="note-icon-align-outdent"></i></button>\
						<button type="button" class="note-btn btn btn-default btn-sm" title="" data-original-title="Indent (⌘+])" onClick="addStyle(\'marginLeft\',\'25px\');"><i class="note-icon-align-indent"></i></button>\
					</div>\
				</div>\
			</div>\
		</div>\
		<div class="note-btn-group btn-group note-link">\
				<button type="button" class="note-btn btn btn-default btn-sm" title="" data-original-title="Link" onClick="maintainLinkStart();"><i class="note-icon-link"></i></button>\
		</div>\
		<div class="note-btn-group btn-group note-hr">\
			<button type="button" class="note-btn btn btn-default btn-sm" title="" data-original-title="Insert Horizontal Rule (⌘+ENTER)" onClick="addTag(\'hr\');"><i class="note-icon-minus"></i></button>\
		</div>\
		';
/*
		<div class="note-btn-group btn-group note-undo">\
			<button type="button" class="note-btn btn btn-default btn-sm" title="" data-original-title="Undo (⌘+Z)"><i class="note-icon-undo"></i></button>\
		</div>\
		<div class="note-btn-group btn-group note-redo">\
			<button type="button" class="note-btn btn btn-default btn-sm" title="" data-original-title="Redo (⌘+⇧+Z)"><i class="note-icon-redo"></i></button>\
		</div>\
		<div class="note-btn-group btn-group note-insert">\
			<div class="note-btn-group btn-group">\
				<button type="button" class="note-btn btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" title="" data-original-title="Insert Template">\
					<span class="template"></span> Template <span class="caret"></span>\
				</button>\
				<div class="dropdown-menu dropdown-template">\
					<li><a href="#" data-value="homepage-picture-right">homepage-picture-right</a></li>\
					<li><a href="#" data-value="homepage-picture-left">homepage-picture-left</a></li>\
					<li><a href="#" data-value="1-column">1-column</a></li>\
					<li><a href="#" data-value="2-column">2-column</a></li>\
					<li><a href="#" data-value="3-column">3-column</a></li>\
					<li><a href="#" data-value="4-column">4-column</a></li>\
					<li><a href="#" data-value="6-column">6-column</a></li>\
					<li><a href="#" data-value="25-75-column">25-75-column</a></li>\
					<li><a href="#" data-value="75-25-column">75-25-column</a></li>\
					<li><a href="#" data-value="pic-and-rows">pic-and-rows</a></li>\
					<li><a href="#" data-value="pic-title-and-list">pic-title-and-list</a></li>\
					<li><a href="#" data-value="offset-pictures">offset-pictures</a></li>\
				</div>\
			</div>\
		</div>\
		<div class="note-btn-group btn-group note-table">\
			<div class="note-btn-group btn-group">\
				<button type="button" class="note-btn btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" title="" data-original-title="Table"><i class="note-icon-table"></i> <span class="note-icon-caret"></span></button>\
				<div class="dropdown-menu note-table">\
					<div class="note-dimension-picker">  \
						<div class="note-dimension-picker-mousecatcher" data-event="insertTable" data-value="1x1" style="width: 10em; height: 10em;"></div>  \
						<div class="note-dimension-picker-highlighted"></div>  \
						<div class="note-dimension-picker-unhighlighted"></div>\
					</div>\
					<div class="note-dimension-display">1 x 1</div>\
				</div>\
			</div>\
		</div>\
		<div class="note-btn-group btn-group note-codeview">\
			<button type="button" class="note-btn btn btn-default btn-sm btn-codeview" title="" data-original-title="Code View"><i class="note-icon-code"></i></button>\
		</div>\
*/
	toolbar_html = toolbar_html + '\
	</div>\
</div>\
<div class="modal fade in" id="maintainLink" role="dialog">\
	<div class="modal-dialog">\
		<div class="modal-content" style="height: fit-content;">\
			<div class="modal-body">\
				<button type="button" class="close" data-dismiss="modal" onClick="maintainLinkNoChange()";>&times;</button>\
				<h5 class="modal-title">Insert Link</h5>\
<!--				<div class="form-group">\
					<label for="linkText">Text to display</label>\
					<input type="text" class="form-control" id="linkText" placeholder="" onFocus="this.style.borderColor=\'#ccc\';">\
				</div>-->\
				<div class="form-group">\
					<label for="LinkUrl">To what URL should this link go?</label>\
					<input type="text" class="form-control" id="linkUrl" placeholder="" onFocus="this.style.borderColor=\'#ccc\';">\
				</div>\
				<div class="checkbox">\
                	<label>\
                		<input type="checkbox" id="linkWindow">Open in new window\
                	</label>\
                </div>\
				<div class="row">\
					<div class="col-sm-6">\
					</div>\
					<div class="col-xs-12 hidden-sm hidden-md hidden-lg"></div>\
					<div class="col-sm-6">\
						<button type="button" class="submit primaryCTA" onClick="maintainLinkEnd();">Insert Link</button>\
					</div>\
				</div>\
			</div>\
		</div>\
	</div>\
</div>\
<div class="modal fade in" id="editingEnabled" role="dialog">\
	<div class="modal-dialog" style="margin-top: 75px;">\
		<div class="modal-content" style="height: fit-content;">\
			<div class="modal-body">\
				<button type="button" class="close" data-dismiss="modal">&times;</button>\
				<h5 class="modal-title">Page Editing Enabled</h5>\
				<div class="row">\
					<div class="col-sm-12">\
						<button type="button" class="submit primaryCTA" onClick="closeModal();">Start Editing</button>\
					</div>\
				</div>\
			</div>\
		</div>\
	</div>\
</div>\
';
	return toolbar_html;
}
function editingEnabled() {
	$('#editingEnabled').modal('show');
}
function clicker() {
	$('.editing-on').click(function(){
		var sel = window.getSelection();
		size = window.getComputedStyle(sel.anchorNode.parentElement, null).getPropertyValue('font-size');
		size = parseInt(size,10);
		document.getElementById("current-fontsize").innerHTML = size;
	});
}
function closeModal() {
	$('#editingEnabled').modal('hide');	
}
$(document).ready(function(){
clicker();
});