/**
 * Open a popup which loads via ajax a separate view's component
 *
 * @param getId - Id of the component from the separate view to select to insert into popup.
 * @param retrieveData - Object of data used to passed to generate the separate view.
 * @param formAction - The action param of the popup inner form.
 * @param popupStyle - Object of css styling to apply to the initial inner div of the popup (will be replaced with remote component)
 * @param popupOptions - Object of settings to pass to the Bubble Popup jQuery Plugin.
 * @param e - An object containing data that will be passed to the event handler.
 */
function openPopup(getId, retrieveData, formAction, popupStyle, popupOptions, e) {
    stopEvent(e);
    fnCloseAllPopups();

    var popupOptionsDefault = {
        themePath:"../ks-myplan/jquery-popover/jquerypopover-theme/",
        manageMouseEvents:true,
        selectable:true,
        tail:{align:"middle", hidden:false},
        position:"left",
        align:"center",
        alwaysVisible:false,
        themeMargins:{total:"20px", difference:"5px"},
        themeName:"myplan",
        distance:"0px",
        openingSpeed:5,
        closingSpeed:5
    };

    var target = (e.currentTarget) ? e.currentTarget : e.srcElement;
    var popupItem = (typeof popupOptions.selector == "undefined") ? jQuery(target) : jQuery(target).parents(popupOptions.selector);

    if (!popupItem.HasPopOver()) popupItem.CreatePopOver({manageMouseEvents:false});
    var popupSettings = jQuery.extend(popupOptionsDefault, popupOptions);
    var popupHtml = jQuery('<div />').attr("id", "KSAP-Popover");
    if (popupStyle) {
        jQuery.each(popupStyle, function (property, value) {
            popupHtml.css(property, value);
        });
    }
    popupSettings.innerHtml = popupHtml.wrap("<div>").parent().clone().html();

    popupItem.ShowPopOver(popupSettings, false);
    popupItem.FreezePopOver();

    var popupId = popupItem.GetPopOverID();

    fnPositionPopUp(popupId);
    clickOutsidePopOver(popupId, popupItem);

    var retrieveForm = '<form id="retrieveForm" action="' + retrieveData.action + '" method="post" />'
    jQuery("body").append(retrieveForm);

    var elementToBlock = jQuery("#KSAP-Popover");

    var successCallback = function (htmlContent) {
        var component;
        if (jQuery("#requestStatus", htmlContent).length <= 0) {
            var popupForm = jQuery('<form />').attr("id", "popupForm").attr("action", formAction).attr("method", "post");
            component = jQuery("#" + getId, htmlContent).wrap(popupForm).parent();
        } else {
            var pageId = jQuery("#pageId").val();
            eval(jQuery("input[data-role='script'][data-for='" + pageId + "']", htmlContent).val().replace("#" + pageId, "body"));
            var errorMessage = '<img src="/student/ks-myplan/images/pixel.gif" alt="" class="icon"><div class="message">' + jQuery("#plan_item_action_response_page", htmlContent).data(kradVariables.VALIDATION_MESSAGES).serverErrors[0] + '</div>';
            component = jQuery("<div />").addClass("myplan-feedback error").html(errorMessage);
        }
        if (jQuery("#KSAP-Popover").length) {
            popupItem.SetPopOverInnerHtml(component);
            fnPositionPopUp(popupId);
            if (popupOptions.close || typeof popupOptions.close === 'undefined') jQuery("#" + popupId + " .jquerypopover-innerHtml").append('<img src="../ks-myplan/images/btnClose.png" class="myplan-popup-close"/>');
            jQuery("#" + popupId + " img.myplan-popup-close").on('click', function () {
                popupItem.HidePopOver();
                fnCloseAllPopups();
            });
        }
        runHiddenScripts(getId);
        elementToBlock.unblock();
    };

    ksapAjaxSubmitForm(retrieveData, successCallback, elementToBlock, "retrieveForm");
    jQuery("form#retrieveForm").remove();
}

/**
 *   Gathers information for submission to the controller via ajax
 *
 * @param data - Variables and data to be submitted to the controller
 * @param successCallback - Code block to run after a successful return from the controller
 * @param elementToBlock - The html object being effected by the controller call
 * @param formId - Id of the form the submit is being called on
 * @param blockingSettings - Settings for the html object
 */
function ksapAjaxSubmitForm(data, successCallback, elementToBlock, formId, blockingSettings) {
	data = ksapAdditionalFormData(data);

    var submitOptions = {
        data:data,
        success:function (response) {
            var tempDiv = document.createElement('div');
            tempDiv.innerHTML = response;
            var hasError = checkForIncidentReport(response);
            if (!hasError) successCallback(tempDiv);
            jQuery("#formComplete").empty();
        },
        error:function(jqXHR, textStatus,
                errorThrown) {
	         hideLoading();
	         showGrowl(textStatus + " "
	             + errorThrown,
	             "Error");
	     },
	     statusCode : {
	         400 : function() {
	             showGrowl(
	                 "400 Bad Request",
	                 "Fatal Error");
	         },
	         500 : function() {
	             showGrowl(
	                 "500 Internal Server Error",
	                 "Fatal Error");
	         }
	     }
    };

    if (elementToBlock != null && elementToBlock.length) {
        var elementBlockingOptions = {
            beforeSend:function () {
                if (elementToBlock.hasClass("unrendered")) {
                    elementToBlock.append('<img src="' + getConfigParam("kradImageLocation") + 'loader.gif" alt="Loading..." /> Loading...');
                    elementToBlock.show();
                }
                else {
                    var elementBlockingDefaults = {
                        baseZ:500,
                        message:'<img src="../ks-myplan/images/ajaxLoader16.gif" alt="loading..." />',
                        fadeIn:0,
                        fadeOut:0,
                        overlayCSS:{
                            backgroundColor:'#fff',
                            opacity:0
                        },
                        css:{
                            border:'none',
                            width:'16px',
                            top:'0px',
                            left:'0px'
                        }
                    };
                    elementToBlock.block(jQuery.extend(elementBlockingDefaults, blockingSettings));
                }
            },
            complete:function () {
                elementToBlock.unblock();
            },
            error:function(jqXHR, textStatus,
                    errorThrown) {
	   	         hideLoading();
		         showGrowl(textStatus + " "
		             + errorThrown,
		             "Error");
                if (elementToBlock.hasClass("unrendered")) {
                    elementToBlock.hide();
                }
                else {
                    elementToBlock.unblock();
                }
            }
        };
    }
    jQuery.extend(submitOptions, elementBlockingOptions);
    var form = jQuery("#" + ((formId) ? formId : "kualiForm"));
    form.ajaxSubmit(submitOptions);
}

function DmPopup(innerViewId, action, data, e) {
	this.wrapperId = innerViewId + "_popup";
	this.formId = innerViewId + "_form";

	this.action = action;
	this.data = jQuery.extend(data, {
		pageId : innerViewId + "_page"
	});

	this.target = (e.currentTarget) ? e.currentTarget : e.srcElement;

	// TODO: move jquery-popover to KRAD, or switch to delivered equivalent
	this.appUrl = getConfigParam("kradUrl") + '/..';
	this.closeImageUrl = this.appUrl + '/ks-myplan/images/btnClose.png';
	this.loadingImageUrl = this.appUrl + '/ks-myplan/images/ajaxLoader16.gif';
	this.innerViewOptions.themePath = this.appUrl
			+ '/ks-myplan/jquery-popover/jquerypopover-theme/';
}

DmPopup.prototype = {
	innerViewOptions : {
		manageMouseEvents : true,
		selectable : true,
		tail : {
			align : 'middle',
			hidden : true
		},
		position : 'right',
		align : 'top',
		close : true,
		alwaysVisible : false,
		themeMargins : {
			total : '20px',
			difference : '5px'
		},
		sticky : true,
		themeName : 'transparent',
		distance : '0px',
		openingSpeed : 5,
		closingSpeed : 5,
	},

	open : function() {
		var _this = this;
		this.close();

		var target = jQuery(this.target);
		if (!target.HasPopOver())
			target.CreatePopOver({
				manageMouseEvents : false
			});

		var loadingImage = jQuery('<img />')
		loadingImage.attr('src', this.loadingImageUrl);
		loadingImage.attr('alt', 'Loading...');
		loadingImage.addClass('arm-dm-popup-loading');

		var wrapper = jQuery('<div />');
		wrapper.attr('id', this.wrapperId);
		wrapper.addClass('arm-dm-popup');
		wrapper.append(loadingImage);

		this.innerViewOptions.innerHtml = wrapper.wrap('<div>').parent()
				.clone().html();
		target.ShowPopOver(this.innerViewOptions, false);

		var submitData = ksapAdditionalFormData(this.data);
		var submitOptions = {
			data : submitData,

			success : function(response) {
				var closeImage = jQuery('<img />');
				closeImage.attr('src', _this.closeImageUrl);
				closeImage.attr('alt', 'Close');
				closeImage.addClass('arm-dm-popup-close');

				var innerViewForm = jQuery("#kualiForm", response);
				innerViewForm.attr("id", _this.formId);

				// TODO: refactor planner, then remove these workarounds
				innerViewForm.find(".myplan-view").removeClass("myplan-view");
				innerViewForm.find(".ks-Popover").removeClass("ks-Popover");

				var innerView = jQuery('<div />');
				innerView.addClass('arm-dm-popup-inner');
				innerView.append(innerViewForm);

				var innerViewWrapper = jQuery('#' + _this.wrapperId);
				innerViewWrapper.children('.arm-dm-popup-loading').remove();
				innerViewWrapper.append(innerView);
				innerViewWrapper.append(closeImage);

				jQuery('#' + _this.wrapperId + ' .arm-dm-popup-close').click(
						function() {
							_this.close();
						});

				// TODO: make KRAD not jump to the top when loading inner view
				var body = jQuery('body');
				var bodyWidth = body.width() - 50;
				var oScrollTop = body.scrollTop();
				var oScrollLeft = body.scrollLeft();

				runHiddenScripts(_this.formId);

				body.scrollTop(oScrollTop);
				body.scrollLeft(oScrollLeft);

				var innerViewOuter = jQuery('#' + target.GetPopOverID());

				var innerViewWidth = innerViewOuter.width();
				var innerViewRight = innerViewOuter.position().left
						+ innerViewWidth;

				if (innerViewRight > bodyWidth)
					innerViewOuter.css('left', (bodyWidth - innerViewWidth)
							+ 'px');

				_this.innerView = innerView;
			},

			error : function(jqXHR, textStatus, errorThrown) {
				_this.close();
			},

			statusCode : {
				400 : function() {
					showGrowl("400 Bad Request", "Fatal Error");
				},
				500 : function() {
					showGrowl("500 Internal Server Error", "Fatal Error");
				}
			}
		};

		var aform = jQuery('<form />');
		aform.attr('id', 'dm_ajax_form');
		aform.attr('action', this.action);
		aform.attr('method', 'POST');
		aform.ajaxSubmit(submitOptions);
	},

	close : function() {
		var wrapper = jQuery(this.target);
		wrapper.HidePopOver();
		wrapper.RemovePopOver();
		jQuery('#' + this.formId).parents("div.jquerypopover").remove();
		this.innerView = null;
	}

};

<bean parent="Uif-ActionLinkField" p:label="Courses"
	p:actionLabel="@\{#line.courseLink\}"
	p:actionScript="sdm_courseLink('@\{#line.refObjectId\}','@\{#line.displayTerm\}',@\{#line.singleCourse\},e)"
	p:render="@\{#line.courseLink ne null\}" />

function sdm_courseLink(refid, termId, singleCourse, e) {
	var popup;
	if (singleCourse)
		popup = new DmPopup("planner_course_summary",
				getConfigParam("kradUrl")+"/../myplan/planner",
				{ methodToCall : "startDialog",
					"courseId" : refid,
					"termId" : termId
				}, e);
	else
		popup = new DmPopup("sdm_coursegrid", "coursegrid",
				{ methodToCall : "startDialog",
					"placeholderId" : refid,
					"termId" : termId
				}, e);
	stopEvent(e);
	popup.open();
}