$("#twistWebEditorForm").hide();
	$("#twistWebEditorButton").click(function() {
			twistEditor()
	});

	// control z to open and close web editor
	$(document).keydown(function(event) {
		if(event.which == 90 && event.ctrlKey){
			twistEditor()
		}
	});


	function twistEditor() {
		$("#twistWebEditorForm").slideToggle(500);

		if (document.getElementById("twistWebEditorMode").value=="minimized") { 
			document.getElementById("twistWebEditorMode").value="maximized";
			// this is a hack for twist.cloud top margin - need to fix for all sites
			$('#websiteHeaderTopMargin').css('margin-top','330px');
		} else { 
			$('#websiteHeaderTopMargin').css('margin-top','255px');
			document.getElementById("twistWebEditorMode").value="minimized";
			$('.overlay').remove();
		}
	}

	$( ".twistColorPaletteSquare" ).draggable({
		revert:true
	});

	$( ".twistMemberSection" ).draggable({
	});

	$( "#twistMemberSections" ).sortable({
		revert:true
	});

	$( ".twistColorDroppable" ).droppable({
		drop: function( event, ui ) {
			event.stopPropagation();
			var colorPaletteSquareID = ui.draggable.attr("id");
			var colorPaletteSquareColor = $('#'+colorPaletteSquareID).css('background-color');
			$(this).css('background-color',colorPaletteSquareColor);
		}
	});
	
	$(".twistWebSection").mouseenter(function() {


		if ($('#twistWebEditorMode').val()=="maximized") {
			var webSectionID = $(this).attr('id');
			$('.webEditorMedia').click(function(event) {
				var er = 'webEditorMediaUpdateForm' +
									'mediaID=' + $(this).attr('id') +
									'&webPageID=' + $('#webPageID').val() +
									'&webSectionID=' + webSectionID;
			});		

			var pageObject = $(this);
			var offset = pageObject.offset();
			var sectionLeft = offset.left;
			var sectionTop = offset.top;
		
			$(this).css('cursor', 'pointer');
			var h = $(this).height();
			var w = $(this).width();

			var webSectionID = this.id;
			var sectionOptionID = this.id+"SectionMenu";
			var numChildren = $('#'+webSectionID).find('.twistWebSection').length;

			if ($('#'+sectionOptionID).length==0) { // if not already created, add icon to edit parent
				$('.overlay').remove();
				$('<div class="overlay" id="' + webSectionID + 'SectionMenu" style="background-color:pink; padding:5px; width:100px;">' +
					'<img class="twist_modal" id="' + webSectionID + 'SectionInsertButton" src="https://www.twistwebsite.com/image/icon/svg/wand.svg" style="height:15px; width:15px;" title="Quick Edit ' + $(this).data('webSectionTitle') + '">' +
					'&nbsp;&nbsp;' +
					'<img class="twist_modal" id="' + webSectionID + 'SectionEditButton" src="https://www.twistwebsite.com/image/icon/svg/settings.svg" style="height:15px; width:15px;" title="Edit ' + $(this).data('webSectionTitle') + '">' +
					'</div>').insertAfter($(this));

				$('#'+sectionOptionID).css('position','absolute');
				var newLeft = offset.left + w - 100;
				var newTop = offset.top;
				$('#'+sectionOptionID).css('background-color','pink');
				$('#'+sectionOptionID).css('border-radius','6px');
				$('#'+sectionOptionID).css('height','40px');
				$('#'+sectionOptionID).css('left',newLeft);
				$('#'+sectionOptionID).css('padding-top','6px');
				$('#'+sectionOptionID).css('top',newTop);
				$('#'+sectionOptionID).css('visibility','visible');
				$('#'+sectionOptionID).css('width','60px');
				$('#'+sectionOptionID).css('z-index','100'); 

				<!-- click enable twistWebSection info buton -->
				$('#twistWebSectionInfoButton').on('click', function() {
					$('#twistWebSectionInfoButton').twistModalBox({
						description: 'Information about this section:<p>' + sectionData,
						title: 'Twist Web Section Information:<p>' + sectionData,
						width: '1000',
						zindex: '300'
					});
				});

				<!-- click enable twistWebSection edit buton -->
				$('#' + webSectionID + 'SectionEditButton').on('click', function() {
					$('#'+webSectionID).html('This section has been edited.  <button class="twistButton" onclick="location.reload()" style="background-color:pink; color:#555;">Reload</button>');
					twistWebPageID = $('#twistWebPageID').html();

				
					$.post("/twist/webSectionUpdateForm", {
						mode:'old',
						webSectionDOMID: webSectionID,
						webPageID: $('#webPageID').val()
					},
					function(sectionData) {
						//alert(sectionData);
						if (sectionData=='htmlEditor') {
							modalFormContent = '<p><textarea class="twistTextAreaEditor" style="font-family:arial; height:220px; width:740px;">'+ $('#'+webSectionID).html() + '</textarea></p><input id="twistModalTextButton" type="button" value="Save Changes"';
						} else {
							modalFormContent = sectionData;
						}
						var windowWidth = Math.floor($(window).width()*.9)
						$('#twistWebSectionEditButton').twistModalBox({
							description: modalFormContent,
							title: 'Twist! Web Section: ' + webSectionID + '<p>',
							left: (($(window).width() - windowWidth)/2),
							height: '800',
							width: windowWidth,
							zindex: '300'
						});
					});
				});
				
				<!-- click enable twistWebSection edit buton -->
				$('#' + webSectionID + 'SectionInsertButton').on('click', function() {
					twistWebPageID = $('#twistWebPageID').html();
					$.post("/twist/webSectionInsertDynamicForm", {
						entityRequestCode: $('#entityRequestCode').val(),
						portalID: $('#portalID').val(),
						webSectionDOMID: webSectionID,
						webPageID: $('#webPageID').val()
					},
					function(sectionData) {
						//alert(sectionData);
						modalFormContent = sectionData;
						$('#twistWebSectionEditButton').twistModalBox({
							description: modalFormContent,
							title: 'Twist! Web Section: ' + webSectionID + '<p>',
							left: (($(window).width() - 800)/2),
							height: '600',
							width: '800',
							zindex: '300'
						});

					});
				});
			}

			if (numChildren>0) { // create edit icon for each child
				$('#'+webSectionID).find('.twistWebSection').each(function(i) { 

					//$(this).offsetParent().css('background-color','red');
					var pageObject = $(this);
					var offset = pageObject.position();
				  event.stopPropagation();					
					var sectionLeft = offset.left;
					var sectionTop = offset.top;
					var sectionHeight = $(this).height();
					var sectionWidth = $(this).width();
					var webSectionID = this.id;
					var sectionOptionID = this.id+"SectionMenu";

					if ($('#twistWebSectionEditButton' + webSectionID).length==0) {

						var webSectionControls = '';
						if ($(this).hasClass('twistWebSectionElement')) {
							var icon='pencil-alt'
							var windowHeight = '600';
							var windowWidth = '800';
							webSectionControls = '<img class="twist_modal" id="twistWebSectionEditButton' + webSectionID + '" src="https://www.twistwebsite.com/image/icon/svg/' + icon + '.svg" style="height:15px; width:15px;" title="Edit ' + $(this).data('webSectionTitle') + '">';
						} else {
							var icon='settings'
							var windowHeight = '800';
							var windowWidth = '1300';
							webSectionControls = '<img class="twist_modal" id="twistWebSectionInsertButton' + webSectionID + '" src="https://www.twistwebsite.com/thirdParty/themify-icons/SVG/wand.svg" style="height:15px; width:15px;" title="Quick Edit ' + $(this).data('webSectionTitle') + '">&nbsp;&nbsp;' +
'<img class="twist_modal" id="twistWebSectionEditButton' + webSectionID + '" src="https://www.twistwebsite.com/image/icon/svg/' + icon + '.svg" style="height:15px; width:15px;" title="Edit ' + $(this).data('webSectionTitle') + '">';

						}
						
						$('<div class="overlay" id="' + sectionOptionID + '" style="background-color:yellow; padding:0px 5px 0px 5px;">' +
							webSectionControls + '</div>').insertAfter($(this));
						
						newLeft = offset.left + (sectionWidth/2) - 25;
						newTop = offset.top;

						//$('#websiteHeaderRow').html($('#websiteHeaderRow').text() + ' nl:' + newLeft + ' nt:' + newTop);

						$('#'+sectionOptionID).css('position','absolute');
						//var newLeft = offset.left + w - 100;
						//var newTop = offset.top;
						$('#'+sectionOptionID).css('background-color','#ff4f6e');
						$('#'+sectionOptionID).css('border-radius','6px');						
						$('#'+sectionOptionID).css('height','40px');
						$('#'+sectionOptionID).css('left',newLeft);
						$('#'+sectionOptionID).css('padding-top','6px');
						$('#'+sectionOptionID).css('top',newTop);
						$('#'+sectionOptionID).css('visibility','visible');
						$('#'+sectionOptionID).css('width','60px');
						$('#'+sectionOptionID).css('z-index','100');

						/*
						$('#'+sectionOptionID).css('background-color','#eee');
						$('#'+sectionOptionID).css('cursor','pointer');
						$('#'+sectionOptionID).css('height','20px');
						$('#'+sectionOptionID).css('left',newLeft);
						$('#'+sectionOptionID).css('padding-top','6px');
						$('#'+sectionOptionID).css('position','absolute');
						$('#'+sectionOptionID).css('top',newTop);
						$('#'+sectionOptionID).css('visibility','visible');
						$('#'+sectionOptionID).css('width','15px');
						$('#'+sectionOptionID).css('z-index','100'); 
						*/

						$('#twistWebSectionEditButton' + webSectionID).on('click', function() { // make button clickable
							$('#'+webSectionID).html.html('This section has been edited.  <button class="twistButton" onclick="location.reload()" style="background-color:pink; color:#555;">Reload</button>');
							twistWebPageID = $('#twistWebPageID').html();
							$.post("/twist/webSectionUpdateForm", {
								entityRequestCode: $('#entityRequestCode').val(),
								mode:'old',
								portalID: $('#portalID').val(),
								webSectionDOMID: webSectionID,
								webPageID: $('#webPageID').val()
							},
							function(sectionData) {
								//alert(sectionData);
								if (sectionData=='htmlEditor') {
									modalFormContent = '<p><textarea class="twistTextAreaEditor" style="font-family:arial; height:220px; width:740px;">'+ $('#'+webSectionID).html() + '</textarea></p><input id="twistModalTextButton" type="button" value="Save Changes"';
								} else {
									modalFormContent = sectionData;
								}

								$('#twistWebSectionEditButton').twistModalBox({
									description: modalFormContent,
									title: 'Twist! Web Section: ' + webSectionID + '<p>',
									left: (($(window).width() - windowWidth)/2),
									height: windowHeight,
									width: windowWidth,
									zindex: '300'
								});
		
								$('#twistModalTextButton').on('click', function() {
									$('.twistModalBox').remove();
									$('.twistModalVeil').remove();
								});
							});
						});

					}
				});
			}
		}
	});

	/* handle clicks for member action menu (deprecated)*/
	/* menu text is the parameter supplied to the routine */
	$('.twistMemberWebsiteAction').click(function(event) {
		event.preventDefault();
		buttonID = $(this).text().toLowerCase(); 
		webSectionID = '';
		twistMemberGUID = $('#twistInputMemberGUID').val();
		$.post("/twistMemberWebsiteMenu", {
			memberGUID: twistMemberGUID,
			memberMenuItemCode: buttonID
		},
		function(modalFormContent) {
			$(this).twistModalBox({
				description: modalFormContent,
				title: 'Twist! Web Section: ' + webSectionID + '<p>',
				left: (($(window).width() - 1200)/2),
				width: '1200',
				zindex: '300'
			});
		});
	});

	/* handle clicks for website member action */
	$('.twistWebsiteMemberAction').click(function(event) {
		event.preventDefault();
		actionID = $(this).attr('id'); 
		webSectionID = '';
		twistMemberGUID = $('#twistInputMemberGUID').val();
		$.post("/twistMemberWebsiteMenu", {
			memberGUID: twistMemberGUID,
			memberMenuItemCode: actionID
		},
		function(modalFormContent) {
			$(this).twistModalBox({
				description: modalFormContent,
				title: 'Twist! Web Section: ' + webSectionID + '<p>',
				left: (($(window).width() - 1200)/2),
				width: '1200',
				zindex: '300'
			});
		});
	});

function twistParseQueryString(queryString,parameter,delimiter)	{
	delimiter = (typeof delimiter === 'undefined') ? '=' : delimiter;
	var query = {};
	var a = queryString.split('&');
	for (var i in a) {
		var b = a[i].split(delimiter);
		if (b[0]==parameter) {
			return b[1];
		}
	}
	return '';
}

$(".twist-web-editor-link").click(function() {
	var panelCode = $(this).attr('twistWebEditorPanelCode');
	$('#twist-web-editor-main-panel').load("/twist/master/webEditor/loadMainPanelSecure.php?panelCode="+panelCode);
});

$(".twistWebEditorPopupPanel").click(function() {
	var panelCode = $(this).attr('twistWebEditorPopupPanelCode');
	$('#twistWebEditorPopup').load("/twist/master/webEditor/loadPopupPanel.php?panelCode="+panelCode);
});

/*
$('.twistWebSection').each(function(){
	var $el = $(this);
 $el.draggable({containment:$el.closest('.grandparent')    });
});
*/