var conn = new Ext.data.Connection();

Ext.namespace("Ext.ux.menu.TextItem");

Ext.ux.menu.TextItem = function(text) {
	Ext.ux.menu.TextItem.superclass.constructor.call(this, text);
};

Ext.extend(Ext.ux.menu.TextItem, Ext.menu.TextItem, {

	setText : function(text) {
		var element = Ext.get(this.el);
		element.update(text);
	}

});

var pageLabel = new Ext.ux.menu.TextItem({
	text : ' ',
	style : {
		marginLeft : '10px'
	}
})

Ext.BLANK_IMAGE_URL = processstepperURL + 'static/ext-2.2/resources/images/default/s.gif';
var loadingMask = new Ext.LoadMask(Ext.getBody(), {
	msg : "Loading - Please wait..."
});
/**
 * @author wutz
 */
function getFormContent(obj) {
	var getstr = "&";
	for (i = 0; i < obj.getElementsByTagName("input").length; i++) {
		if (obj.getElementsByTagName("input")[i].type == "text") {
			getstr += obj.getElementsByTagName("input")[i].name + "=" + obj.getElementsByTagName("input")[i].value + "&";
		}
		if (obj.getElementsByTagName("input")[i].type == "password") {
			getstr += obj.getElementsByTagName("input")[i].name + "=" + obj.getElementsByTagName("input")[i].value + "&";
		}
		if (obj.getElementsByTagName("input")[i].type == "checkbox") {
			if (obj.getElementsByTagName("input")[i].checked) {
				getstr += obj.getElementsByTagName("input")[i].name + "=" + obj.getElementsByTagName("input")[i].value + "&";
			} else {
				getstr += obj.getElementsByTagName("input")[i].name + "=&";
			}
		}
		if (obj.getElementsByTagName("input")[i].type == "radio") {
			if (obj.getElementsByTagName("input")[i].checked) {
				getstr += obj.getElementsByTagName("input")[i].name + "=" + obj.getElementsByTagName("input")[i].value + "&";
			}
		}
		if (obj.getElementsByTagName("input")[i].tagName == "select") {
			var sel = obj.getElementsByTagName("input")[i];
			getstr += sel.name + "=" + sel.options[sel.selectedIndex].value + "&";
		}
	}
	for (i = 0; i < obj.getElementsByTagName("select").length; i++) {
		var sel = obj.getElementsByTagName("select")[i];
		getstr += sel.name + "=" + sel.options[sel.selectedIndex].value + "&";
	}
	for (i = 0; i < obj.getElementsByTagName("textarea").length; i++) {
		getstr += obj.getElementsByTagName("textarea")[i].name + "=" + obj.getElementsByTagName("textarea")[i].value.replace(/\n\r?/g, '<br />');
	}

	return getstr;
}

var navHandler = function(direction) {
	loadingMask.show();
	nextbutton.disable();
	prevbutton.disable();
	startbutton.disable();
	var stepurl;
	// forward step
	if (direction == 0) {
		// handled in models.js
		// stepurl = processstepperURL + 'create.do?processId=' + modelid +
		// '&uniqueId=' + uniqueId;
	} else if (direction == 1) {
		stepurl = 'direction=1&userId=' + userId + '&uniqueId=' + uniqueId + '&save=' + doSave;
	}
	// backward step
	else {
		stepurl = 'direction=-1&userId=' + userId + '&uniqueId=' + uniqueId + '&save=' + doSave;
	}

	conn.request({
		url : processstepperURL + 'step.do',
		method : 'POST',
		params : stepurl + getFormContent(document.getElementById('questionPage')) + '&processName=' + processName + '&walkthrough=' + isWalkthrough,
		success : function(responseObject) {
			temp = responseObject.responseText.split('@');
			userId = temp[0];
			contentHtml = temp[1];
			currentPage = temp[2];
			allPages = temp[3];
			pageLabel.setText('Page ' + currentPage + '  of ' + allPages);
			questionnaireContent.body.update('<form id=\"questionPage\" action=\"../adowf/processstepper/step.do\">' + contentHtml + '</form>');

			questionnaireContent.body.dom.scrollTop = 0;
			// enable and disable buttons
			prevbutton.disable();
			nextbutton.disable();
			if (currentPage != 1) {
				nextbutton.show();
				finishbutton.hide();
				nextbutton.enable();
				prevbutton.enable();
			}

			if (currentPage < allPages) {
				nextbutton.show();
				finishbutton.hide();
				nextbutton.enable();
			}
			if (currentPage == allPages) {
				nextbutton.hide();
				finishbutton.show();
				prevbutton.enable();
			}

			loadingMask.hide();
			document.location.href = window.location.href.split('#')[0] + '#page=' + currentPage;

		},
		failure : function() {

			alert("Exception occured - please retry");
			loadingMask.hide();
		}
	});

};

var prevbutton = new Ext.Button({
	id : 'card-prev',
	text : '<b>&laquo; Previous</b>',
	handler : navHandler.createDelegate(this, [-1]),
	style : {
		marginTop : '7px'
	}
});
var nextbutton = new Ext.Button({
	id : 'card-next',
	text : '<b>Next &raquo;</b>',
	handler : navHandler.createDelegate(this, [1]),
	style : {
		marginTop : '7px'
	}
});
var startbutton = new Ext.Button({
	id : 'card-start',
	text : '<b>Start assessment</b>',
	style : {
		marginTop : '7px'
	}

});

var finishbutton = new Ext.Button({
	id : 'card-finish',
	text : '<b>Finish</b>',
	style : {
		marginTop : '7px'
	},
	handler : function() {
		var conn = new Ext.data.Connection();
		conn.request({
			url : processstepperURL + 'finish.do',
			method : 'POST',
			params : 'userId=' + userId + '&uniqueId=' + uniqueId + getFormContent(document.getElementById('questionPage')) + '&save=' + doSave + '&walkthrough=' + isWalkthrough + '&walkthrough=' + isWalkthrough,

			success : function(responseObject) {
				location.href = window.location.href.split('#')[0];
			}
		});
		// FIXME: add warning
	}
});

//
// Extend the XmlTreeLoader to set some custom TreeNode attributes specific to
// our application:
//
Ext.app.ModelTreeLoader = Ext.extend(Ext.ux.XmlTreeLoader, {
	processAttributes : function(attr) {
		if (attr.idclass == 'Assessment model') {
			attr.href = attr.modelid;
			attr.modelid = attr.id;
			attr.text = attr.name;
			attr.leaf = true;
			attr.loaded = true;
			attr.allowDrag = true;
			attr.allowDrop = false;
			attr.id = attr.uuid;
			attr.version = attr.version;
		} else if (attr.idclass == 'Trash') {
			attr.text = attr.name;
			attr.leaf = false;
			attr.loaded = true;
			attr.iconCls = 'trash';
			attr.allowDrag = false;
			attr.allowDrop = true;
			attr.id = 1234567;
			attr.hidden = true;
		} else if (attr.idclass == 'Category') {
			attr.text = attr.name;
			attr.leaf = false;
			attr.loaded = true;
			attr.iconCls = 'category';
			attr.allowDrag = false;
			attr.allowDrop = true;
			if (attr.name == 'Uncategorized') {
				attr.id = 8901234;
			}
		} else {
		}
	}
});

NavigationPanel = function() {
	NavigationPanel.superclass.constructor.call(this, {
		id : 'navigationPanel-tree',
		title : 'Available questionnaires',
		region : 'west',
		cmargins : '0 0 0 0',
		width : 280,
		rootVisible : false,
		lines : false,
		autoScroll : true,
		margins : '0 0 0 0',
		border : false,
		animate : true,
		animCollapse : true,
		collapsible : true,
		enableDD : false,
		ddAppendOnly : true,
		useArrows : true,
		trackMouseOver : true,
		border : true,
		bodyBorder : false,
		hideBorders : true,
		bodyStyle : 'border-right: solid #99BBE8 1px;',

		loader : new Ext.app.ModelTreeLoader({
			dataUrl : processstepperURL + 'processlist.do?userId=' + userId
		}),
		listeners : {
			'render' : function(tp) {
				navigationPanel.getSelectionModel().on('selectionchange', function(tree, node) {
					// FIXME: update fields load!
					if (node && node.isLeaf()) {
						// content.remove(centerContent);
						questionnaireContent.load({

							url : processstepperURL + 'model.do?uniqueId=' + node.id + '&processId=' + node.attributes.modelid + "&questionnairename=" + node.text + '&isWalkthrough=' + isWalkthrough,
							scripts : true,
							scope : this
						});
						// loading header and footer
						conn.request({
							url : processstepperURL + 'headerfooterreader.do',
							method : 'POST',
							params : 'uniqueId=' + node.id,
							success : function(responseObject) {
								temp = responseObject.responseText.split('@');
								headerHTML = temp[0];
								footerHTML = temp[1];
								questionnaireHeader.body.update(headerHTML);
								questionnaireFooter.body.update(footerHTML);
								questionnairePanel.doLayout();
							},
							failure : function() {
								// ignore this problem
							}
						});
						if (isWalkthrough == "1")
							bottomToolbar.enable();
					}
				});
				navigationPanel.on('load', function(node) {
					// hard coded remove of Trash and Uncategorized
					navigationPanel.getNodeById(1234567).remove();
					navigationPanel.getNodeById(8901234).remove();
				});
			}
		},

		root : new Ext.tree.AsyncTreeNode({
			text : 'Models',
			id : 'root',
			expanded : true,
			loaded : false,
			allowDrag : false,
			allowDrop : false
		})
	});

};

Ext.extend(NavigationPanel, Ext.tree.TreePanel, { // additional methods if
// needed
});

prevbutton.hide();
nextbutton.hide();
finishbutton.hide();
startbutton.disable();
var bottomToolbar = new Ext.Toolbar({
	items : [pageLabel, '->', startbutton, prevbutton, nextbutton, '->', finishbutton],
	height : 40

});
bottomToolbar.enable();
var questionnaireHeader = new Ext.Panel({
	region : 'north',
	autoLoad : {
		url : processstepperURL + 'header.html',
		scope : this,
		callback : function(responseObject) {
			questionnairePanel.doLayout();
		}
	},
	bodyBorder : false,
	border : false,
	autoHeight : true
});
var questionnaireFooter = new Ext.Panel({
	region : 'south',
	layout : 'fit',
	autoLoad : {
		url : processstepperURL + 'footer.html',
		scope : this,
		callback : function(responseObject) {
			questionnairePanel.doLayout();
		}
	},
	bodyBorder : false,
	border : false,
	autoHeight : true
});
var questionnaireContent = new Ext.Panel({
	region : 'center',
	margins : '0 0 0 0',
	autoLoad : {
		url : processstepperURL + 'welcome.html',
		scope : this
	},
	autoScroll : true,
	bodyBorder : false
});

var content = new Ext.Panel({
	cmargins : '0 0 0 0',
	margins : '0 0 0 0',
	autoScroll : false,
	region : 'center',
	layout : 'border',
	bodyBorder : false,
	border : false,
	items : [questionnaireHeader, questionnaireFooter, questionnaireContent],
	bbar : bottomToolbar
});
var navigationPanel = new NavigationPanel();
navigationPanel.hide();
var questionnairePanel = new Ext.Viewport({
	cmargins : '0 0 0 0',
	margins : '0 0 0 0',
	bodyBorder : false,
	border : false,
	layout : 'border',
	renderTo : document.getElementById('mainPanel'),
	height : document.getElementById('mainPanel').offsetHeight,
	items : [content, navigationPanel]
});
questionnairePanel.hide();
if (window.location.href.indexOf('#') != -1) {
	location.href = window.location.href.split('#')[0]
}
uniqueId = window.location.href.split('?')[1];
if (uniqueId && listenToLinkIn) {

	// check for availability of parameters
	if (uniqueId && uniqueId.length != 0) {
		// navigationPanel.hide();
		// questionnairePanel.doLayout();
		navigationPanel.on('load', function(node) {
			var selectedNode = navigationPanel.getNodeById(uniqueId);
			navigationPanel.hide();
			// content.remove(centerContent);
			questionnaireContent.load({

				url : processstepperURL + 'model.do?uniqueId=' + selectedNode.id + '&processId=' + selectedNode.attributes.modelid + "&questionnairename=" + selectedNode.text + '&isWalkthrough=' + isWalkthrough,
				scripts : true,
				scope : this
			});
			// loading header and footer
			conn.request({
				url : processstepperURL + 'headerfooterreader.do',
				method : 'POST',
				params : 'uniqueId=' + selectedNode.id,
				success : function(responseObject) {
					temp = responseObject.responseText.split('@');
					headerHTML = temp[0];
					footerHTML = temp[1];
					questionnaireHeader.body.update(headerHTML);
					questionnaireFooter.body.update(footerHTML);
					questionnairePanel.doLayout();
				},
				failure : function() {
					// ignore this problem
				}
			});

			if (isWalkthrough == "1")
				bottomToolbar.enable();
		});

	} else {
		Ext.Msg.alert('Exception', 'The address entered does not point to a valid questionnaire! Please check the address and reenter!')
	}
} else {
	navigationPanel.show();
}
questionnairePanel.show();
questionnairePanel.doLayout();

function checkRadioButton(radioButton) {
	if (radioButton.type == 'radio') {
		// alert (radioButton.checked);
		if (radioButton.checked) {
			radioButton.checked = false;
		} else {
			// alert (radioButton.checked + ' change to true');
			radioButton.checked = true;
		}
		radioButton.blur();

	}
}

function showMouseOver(text, event) {
	document.getElementById('MouseOver').innerHTML = text;

	var topPixel = event.clientY + 20;
	var leftPixel = event.clientX + 20;
	document.getElementById('MouseOver').style.top = topPixel + "px";
	document.getElementById('MouseOver').style.left = leftPixel + "px";
	setTimeout("document.getElementById(\'MouseOver\').style.display = \'block\';", 1000);
}

function hideMouseOver() {
	document.getElementById('MouseOver').innerHTML = "";

	document.getElementById('MouseOver').style.top = "0px";
	document.getElementById('MouseOver').style.left = "0px";
	document.getElementById('MouseOver').style.display = "none";
}