$("#twistUIEditorForm").hide();
$("#twistUIEditorButton").click(function() {
		twistUIEditor()
});

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

function twistUIEditor() {
	$("#twistUIEditorForm").slideToggle(500);
	if (document.getElementById("twistUIEditorMode").value=="minimized") { 
		document.getElementById("twistUIEditorMode").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("twistUIEditorMode").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);
	}
});

$('.twistUIWidget').mouseenter(function() {
	if ($('#twistUIEditorMode').val()=="maximized") {
		var uiWidgetDOMID = $(this).attr('id');
		var webSectionID = $(this).attr('id');
		$('.webEditorMedia').click(function(event) {
			var er = 'uiEditorMediaUpdateForm' +
								'&mediaID=' + $(this).attr('id') +
								'&uiWidgetDOMID=' + uiWidgetDOMID;
								'&webPageID=' + $('#webPageID').val();
		});		
		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 uiWidgetID = this.id;
		var uiWidgetDOMID = this.id;
		var sectionOptionID = this.id+"SectionMenu";
		var uiWidgetOptionID = this.id+"UIWidgetMenu";
		var numChildren = $('#'+uiWidgetDOMID).find('.twistUIWidget').length;

		if ($('#'+uiWidgetOptionID).length==0) { // if not already created, add icon to edit parent
			$('.overlay').remove();
			$('<div class="overlay" id="' + uiWidgetDOMID + 'UIWidgetMenu" style="background-color:pink; padding:5px; width:100px;">' +
				'<img class="twist_modal" id="' + uiWidgetDOMID + 'UIWidgetInsertButton" 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="' + uiWidgetDOMID + 'UIWidgetEditButton" src="https://www.twistwebsite.com/image/icon/svg/settings.svg" style="height:15px; width:15px;" title="Edit ' + $(this).data('webSectionTitle') + '">' +
				'</div>').insertAfter($(this));

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

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

			<!-- click enable twistUIWidget edit buton -->
			$('#' + uiWidgetID + 'UIWidgetEditButton').on('click', function() {
				webPageID = $('#webPageID').html();
				$('#'+uiWidgetDOMID).html('This Widget has been edited.  <button class="twistButton" onclick="location.reload()" style="background-color:red; color:#fff;">Reload</button>');
				$.post("/twist/webEditorUIWidgetUpdateForm", {
					mode:'old',
					uiWidgetDOMID: uiWidgetDOMID,
					uiWidgetID: uiWidgetID,
					webSectionDOMID: webSectionID,
					webPageID: $('#webPageID').val()
				},
				
				function(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 insert buton -->
			$('#' + webSectionID + 'SectionInsertButton').on('click', function() {
				webPageID = $('#webPageID').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 uiWidgetOptionID = this.id+"UIWidgetMenu";

				if ($('#twistWebSectionEditButton' + uiWidgetDOMID).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="' + uiWidgetOptionID + '" 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);
					$('#'+uiWidgetOptionID).css('position','absolute');
					//var newLeft = offset.left + w - 100;
					//var newTop = offset.top;
					$('#'+uiWidgetOptionID).css('background-color','#ff4f6e');
					$('#'+uiWidgetOptionID).css('border-radius','6px');						
					$('#'+uiWidgetOptionID).css('height','40px');
					$('#'+uiWidgetOptionID).css('left',newLeft);
					$('#'+uiWidgetOptionID).css('padding-top','6px');
					$('#'+uiWidgetOptionID).css('top',newTop);
					$('#'+uiWidgetOptionID).css('visibility','visible');
					$('#'+uiWidgetOptionID).css('width','60px');
					$('#'+uiWidgetOptionID).css('z-index','100');

					/*
					$('#'+uiWidgetOptionID).css('background-color','#eee');
					$('#'+uiWidgetOptionID).css('cursor','pointer');
					$('#'+uiWidgetOptionID).css('height','20px');
					$('#'+uiWidgetOptionID).css('left',newLeft);
					$('#'+uiWidgetOptionID).css('padding-top','6px');
					$('#'+uiWidgetOptionID).css('position','absolute');
					$('#'+uiWidgetOptionID).css('top',newTop);
					$('#'+uiWidgetOptionID).css('visibility','visible');
					$('#'+uiWidgetOptionID).css('width','15px');
					$('#'+uiWidgetOptionID).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('twistUIEditorPanelCode');
	$('#twist-web-editor-main-panel').load("/twist/master/webEditor/loadMainPanelSecure.php?panelCode="+panelCode);
});

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

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