// Set up global error handling
$().ready(function(){
	$.ajaxSetup({
		error:function(x,e){
			if(x.status==0){
				alert('You are offline!!\n Please Check Your Network.');
			} else if(x.status==404){
				alert('Requested URL not found.');
			}else if(x.status==500){
				alert('Internal Server Error.');
			}else if(e=='parsererror'){
				alert('Error.\nParsing JSON Request failed.');
			}else if(e=='timeout'){
				alert('Request Time out.');
			}else {
				alert('Unknown Error.\n'+x.responseText);
			}
		}
	});
});

// Global index that is incremented at each appAddRow operation
var addRowIndex = 0;

var uispinServlet = 'uispin';


/**
 * Called when the user clicks Add to add a new row to a widget.
 * This takes the prototype with the given id and clones it,
 * replacing the system Ids.
 * @param id  the id of the div containing the editor prototype
 * @param single  to hide the 
 */
function appAddRow(id, single) {
	var prototype = $('#' + id);
	var clone = prototype.clone();
	var uid = clone.find('.appEditorHiddenField').attr('name').substring(8);
	var newUid = 'addedRowUid' + addRowIndex;
	var initializer = null;
	clone.attr('id', clone.attr('id') + '-' + addRowIndex);
	clone.find('*').each(function(index, element) {
		if($(element).hasClass('appDeleteRowButton')) {
			$(element).removeAttr('onclick');
			$(element).click(function() {
				appDeleteRow(newUid);
			});
		}
		if($(element).hasClass('appWidgetInitializer')) {
			initializer = $(element);
		}
		$.each(this.attributes, function(i, attrib) {
			var name = attrib.name;
			var oldValue = attrib.value;
			if(oldValue.indexOf(uid) != -1) {
				var newValue = oldValue.replace(uid, newUid);
				$(element).attr(name, newValue);
			}
		});
	});
	addRowIndex++;
	clone.children().insertBefore(prototype.parent());
	if(initializer) {
		eval('(' + initializer.attr('content') + ')');
		initializer.remove();
	}
	if(single) {
		prototype.parent().parent().find('.appAddButtonDiv').each(function(i,item) {
			$(item).css('display', 'none');
		});
	}
}


/**
 * Programmatically closes and destroys the elements of a dialog that was previously
 * loaded through a ui:loadable.
 * @param loadId  the id of the loadable surrounding the dialog
 */
function appCloseDialog(loadId) {
	var div = $('#div-' + loadId);
	div.dialog("destroy");
	div.remove();
}


/**
 * Called when the user clicks delete to delete a row from a widget.
 * This completely deletes the element with the given id.
 * The hidden fields to instruct the server that the given object
 * shall be deleted are kept, and moved under the parent of the row. 
 * The function also makes sure that the add button is visible.
 * @param id  the id of the element to delete
 */
function appDeleteRow(id) {
	var row = $('#' + id);
	
	row.parent().parent().find('.appAddButtonDiv').each(function(index, item) {
		$(item).css('display', '');
	});
	
	row.find('.appEditorHiddenField').appendTo(row.parent());
	row.remove();
}


/**
 * Turns an input element with a given id into a jQuery auto-complete.
 * The actually selected resource will be returned to the server with
 * a hidden field that needs to be passed into this function as well.
 * @param id  the id of the visible input element
 * @param hiddenId  the id of the hidden field
 * @param link  the link for the server callback 
 */
function appInitAutoComplete(id, hiddenId, link) {
	$('#' + id).autocomplete({
		dataType : 'json',
		source : link,
		formatItem : function(item) {
			return item.label;
		},
		select : function(event, ui) {
			$('#' + hiddenId).val('<' + ui.item.resource + '>');
		}
	});
}


/**
 * Turns an input element with a given widget id into a jQuery datepicker.
 * @param id  the uid of the widget
 * @param altId  (optional) the id of the hidden widget
 */
function appInitDatePicker(id, altId) {
	if(!altId) {
		altId = 'new-' + id;
	}
	var eid = '#dateEditor' + id;
	$(eid).datepicker({ 
		altField: '#' + altId, 
		altFormat: 'yy-mm-dd', 
		dateFormat: 'yy-mm-dd',
	});
	
	// Work-around to bug: Make sure that hidden field is cleared if field is empty 
	$(eid).change(function() {
		if('' == $(eid).val()) {
			$('#' + altId).val('');
		}
	});
}


/**
 * Replaces the content of a given jQuery element with a loading indicator
 * (spinning wheel).
 * @param e  the jQuery element
 */
function appInsertLoadingIndicator(e) {
	e.html('<div class="appLoadingIndicator" />');
}


/**
 * Reloads a ui:loadable using a jQuery Ajax call.
 * In addition to the id of the loadable, this function can take a JavaScript
 * object with name-value pairs.  The names will become pre-bound variables
 * in the reloaded view.  The values must be parsable RDF nodes (in SPARQL
 * syntax, e.g. '<http://example.org/MyClass>' or '"2011-11-11"^^xsd:date'. 
 * @param id  the id of the loadable
 * @param args  a JavaScript object with additional parameters
 * @param callback  an optional callback that is called after loading
 */
function appLoad(id, args, callback) {
	var e = $('#' + id);
	var base = e.attr('uistate');
	if(!base) {
		alert('Error: Invalid use of appLoad: Missing uistate attribute at ' + id);
		return;
	}
	var url = base;
	if(args) {
		var c = {};
		for(var key in args) {
			c['_scope' + key] = args[key]; 
		}
		var p = jQuery.param(c);
		url = p + "&" + base;
	}
	url += '&_snippet=true';
	appInsertLoadingIndicator(e);
	// TODO: Error handling may not work yet
	e.load(uispinServlet, url, function() {
		appLoadPostProcessAll(e);
		if(callback) {
			callback.call();
		}
	});
}


// Private
function appLoadPostProcessAll(e) {
	appLoadPostProcess(e, 'north');
	appLoadPostProcess(e, 'east');
	appLoadPostProcess(e, 'south');
	appLoadPostProcess(e, 'west');
	appLoadPostProcess(e, 'center');
}


// Private function to make sure that the scrollbars are
// updated if a ui:loadable has been loaded into a layout pane
function appLoadPostProcess(e, pane) {
	// TODO: Test if this also works for panes that don't have a ui-layout-content
	if(e.hasClass('ui-layout-' + pane)) {
		e.parent().layout().initContent(pane);
	}
}


/**
 * Replaces a form with another mode.
 * This is for example called as handler of the Edit and Cancel buttons.
 * @param formId  the id of the form to replace
 * @param mode  the name of the new mode
 * @param resourceURI  the URI of the resource
 * @param resourceTypeURI  the URI of the resource type (optional)
 * @param queryGraphURI  the URI of the query graph
 * @returns false to stop further processing
 */
function appLoadForm(formId, mode, resourceURI, resourceTypeURI, queryGraphURI) {
	var data = {
		formId: formId,
		modeName: mode,
		_viewClass: 'app:FormSelector',
		_snippet: true
	};
	if(resourceURI) {
		data.resource = '<' + resourceURI + '>';
	}
	if(resourceTypeURI) {
		data.resourceType = '<' + resourceTypeURI + '>';
	}
	if(queryGraphURI) {
		data._base = '<' + queryGraphURI + '>';
	}
	appInsertLoadingIndicator($('#' + formId).parent());
	$.get(uispinServlet, data, function(data) {
		$('#' + formId).parent().html(data); 
	});
	return false;
}


/**
 * Loads a SearchResultsGrid based on the selections in a form with
 * a given id.  Will replace the content of a given target element.
 * @param formId  the form id
 * @param targetId  the target id
 * @param onSelect  the value for onSelect of the generated grid 
 */
function appLoadSearchResultsGrid(formId, targetId, onSelect) {
	
	// TODO: jQuery's serialize method has problems with attributes such as
	//       _base="<http://example.org/>" - it will convert those to something
	//       like _base=<http://example.org></http:>.  There may be other problems
	//       with special characters etc, but the specific bug above can be
	//       worked around by not having URIs end with '/'.
	
	var params = $('#' + formId).serialize();
	var escaped = '&params=' + escape(params);
	if(onSelect) {
		escaped += '&onSelect=' + escape(onSelect);
	}
	appInsertLoadingIndicator($('#' + targetId));
	$.get(uispinServlet + '?_viewClass=app:SearchResultsGrid&_snippet=true&' + 
			params + escaped, function(data) {
		$('#' + targetId).html(data);
		appLoadPostProcessAll($('#' + targetId).parent());
	});
}


/**
 * Loads a given ui:loadable with a given variable pre-bound to
 * a given URI resource.
 * This can be used as onSelect handler of tree and grid elements,
 * e.g. onSelect="appLoadWithResource('form', 'resource', resource)"
 * @param loadId  the id of the ui:loadable
 * @param varName  the name of the variable to set
 * @param resourceURI  the URI of the resource
 */
function appLoadWithResource(loadId, varName, resourceURI) {
	var params = {};
	params[varName] = '<' + resourceURI + '>';
	appLoad(loadId, params);
}


/**
 * Changes the location (URL) of the current browser window to the
 * URL of the uispin servlet with the default view of a given resource
 * and a given context graph
 * @param resourceURI  the URI of the resource to navigate to
 * @param queryGraphURI  the URI of the current query graph
 * @return false
 */
function appNavigateTo(resourceURI, queryGraphURI) {
	window.location = uispinServlet + '?_base=' + escape(queryGraphURI) + 
		'&_resource=' + escape(resourceURI);
}


/**
 * Opens a new tab or browser window with the URL of the uispin servlet
 * with the default view of a given resource and a given context graph
 * @param resourceURI  the URI of the resource to navigate to
 * @param queryGraphURI  the URI of the current query graph
 */
function appNavigateToInTab(resourceURI, queryGraphURI) {
	window.open('uispinServlet' + '?_base=' + escape(queryGraphURI) + 
		'&_resource=' + escape(resourceURI));
}


// Private
function appOpenIndexLetterDialog(loadId, letter) {
	appLoad(loadId, { letter: '"' + letter + '"' }, function() {
		var div = $('#div-' + loadId);
		var title = div.attr('title');
		var options = {
				modal: true,
				title: title,
				width: 500,
				height: 400
			};
		div.dialog(options);
	});
}


/**
 * Loads and then opens a dialog that was inserted into the current
 * document using app:ResourceViewDialog.
 * @param loadId  the id of the loadable (same as arg:loadId of the app:ResourceViewDialog)
 * @param resourceURI  the URI of the resource to display
 * @param width  (optional) the width in pixels
 * @param height  (optional) the height in pixels
 */
function appOpenResourceViewDialog(loadId, resourceURI, width, height) {
	appLoad(loadId, { resource: '<' + resourceURI + '>' }, function() {
		var div = $('#div-' + loadId);
		var title = div.attr('title');
		var options = {
				modal: true,
				title: title
			};
		if(width) {
			options.width = width;
		}
		if(width) {
			options.height = height;
		}
		div.dialog(options);
	});
}


/**
 * Walks up the parents of a 'link' element with a given id until it
 * finds a form. Then it replaces that form with a new form displaying
 * a given resource.
 * @param resourceURI  the URI of the resource to load
 * @param queryGraphURI  the current query graph
 * @param linkElement  an element that is contained within the form
 */
function appReloadForm(resourceURI, queryGraphURI, linkElementId) {
	var form = $('#' + linkElementId).closest('.appForm');
	if(!form) {
		alert('appReloadForm can only be called within an .appForm');
		return;
	}
	var id = form.attr('id');
	appLoadForm(id, 'view', resourceURI, null, queryGraphURI);
}


function appResizeGrid(pane, $Pane, paneState) {
	// TODO: not working well
	/*
	if(grid = $('.ui-jqgrid')) { //}-btable:visible')) {
	    grid.each(function(index) {
	    	var gridId = $(this).attr('id');
	    	$('#' + gridId).setGridWidth(paneState.innerWidth - 2);
	    });
	}*/
}


/**
 * Selects a given node in a given tree.
 * Will expand if necessary, using a server-side shortest path algorithm.
 * @param treeId  the id of the tree
 * @param nodeURI  the URI of the resource to select
 * @param queryGraphURI  the result of calling ui:currentQueryGraph()
 */
function appSelectTreeNode(treeId, nodeURI, queryGraphURI) {
	
	// TODO: Currently this only works on the Tree that was created last
	//       but not if multiple trees are on a page
	
	var tree = $('#' + treeId);
	var dataProviderURI = tree.attr('treedataprovider');
	if(!dataProviderURI) {
		alert('Error: Element with id ' + treeId + ' does not have treedataprovider attribute');
		return;
	}
	
	var rootURI = tree.attr('treeroot');
	
	// Do nothing if it's already selected
	var sel = tree.jstree('get_selected');
	if(sel) {
		if(sel.attr('resource') == nodeURI) {
			return;
		}
	}

	// Load path to root from the server and then call helper function
	var data = {
			_base: '<' + queryGraphURI + '>',
			_format: 'json',
			_viewClass: 'app:TreeShortestPathCallback',
			dataProvider: '<' + dataProviderURI + '>',
			node: '<' + nodeURI + '>'
	};
	if(rootURI) {
		data.root = '<' + rootURI + '>';
	}
	$.get(uispinServlet, data, function(path) {
		appSelectTreeNodeHelper(tree, tree, path, 0);
	});
}


// Private helper function - walks an array, expanding nodes along the way
function appSelectTreeNodeHelper(tree, node, path, index) {
	
	var next = path[index];
	
	node.children("ul").children("li").each(function(i, o) {
		var child = $(o);
		if(child.attr('resource') == next) {
			if(index == path.length - 1) {
				// End reached: select this node
				tree.jstree('select_node', child, true);
				child[0].scrollIntoView();
			}
			else {
				tree.jstree('open_node', child, function() {
					appSelectTreeNodeHelper(tree, child, path, index + 1);
				});
			}
		}
	});
}


/**
 * Submits a form and switches it to viewing mode when done.
 * @param form  the id of the form
 * @param servlet  the optional name of the servlet
 * @returns false to stop further processing
 */
function appSubmitForm(form, servlet) {
	if(!servlet) {
		servlet = 'swpEdit';
	}
	var params = $(form).serialize();
	$.getJSON(servlet + '?' + params, function(data) {
		if(data.errors) {
			var msg = data.errors.length + ' Constraint violations:';
			$.each(data.errors, function(index, item) {
				msg += '\n - ' + item.message;
			});
			appUpdateFormErrors(form, data.errors);
			alert(msg);
		}
		else {
			var root = data.rootResource;
			appLoadForm(form, 'view', root);
		}
	});
	return false;
}


/**
 * Displays or clears the error indicators on a given form, based
 * on an array of errors (as produced by the SPIN constraint validation)
 * @param form  the id of the form containing the indicators 
 * @param errors  the errors to display
 */
function appUpdateFormErrors(form, errors) {
	$(form).find('.appErrorIndicator').each(function(index, itemElement) {
		var item = $(itemElement);
		var e = false;
		$.each(errors, function(i, error) {
			if(item.attr('id') == 'error-' + error.path) {
				e = true;
				item.addClass('ui-icon');
				item.addClass('ui-icon-alert');
				item.attr('title', error.message);
			}
		});
		if(!e) {
			item.removeClass('ui-icon');
			item.removeClass('ui-icon-alert');
			item.removeAttr('title');
		}
	});
}


/**
 * Validates a form and updates the errors.
 * @param form  the id of the form
 * @returns false to stop further processing
 */
function appValidateForm(form) {
	var params = $(form).serialize();
	$.getJSON('swpEdit?validateOnly=true&' + params, function(data) {
		if(data.errors) {
			appUpdateFormErrors(form, data.errors);
		}
		else {
			appUpdateFormErrors(form, []);
		}
	});
	return false;
}