dojo.addOnLoad(function() {
	dojo.query("select").forEach(textSelector);
});

var init = {
	event : function(event) {
		if (typeof event.target != "undefined") {      
			var event = event.target;
			
		} else {      
			var event = dojo.byId(event.srcElement);
		}
		return event;
	},
	userPrompt : function(event) {
		//dojo.stopEvent(event);
		// Create the overlay
		var overlay = dojo.doc.createElement('div');
		overlay.id = 'Overlay';
		dojo.style(overlay, {
			opacity: '0.5'
		});
		
		// Create the prompt div
		var UserPromptDiv = dojo.doc.createElement('div');
		UserPromptDiv.id = 'UserPrompt';
		dojo.style(UserPromptDiv, {
			opacity: '1'
		});
		
		// Create header
		var UserPromptHeader = dojo.doc.createElement('div');
		UserPromptHeader.id = 'UserPromptHeader';
		var UserPromptHeaderTitle = dojo.doc.createElement('span');
		UserPromptHeaderTitle.className = 'UserPromptHeaderTitle';
		UserPromptHeaderTitle.innerHTML = 'Register';
		var UserPrompotHeaderClose = dojo.doc.createElement('a');
		UserPrompotHeaderClose.className = 'UserPrompotHeaderClose';
		UserPrompotHeaderClose.href = "#";
		UserPrompotHeaderClose.innerHTML = ' ';
		dojo.connect(UserPrompotHeaderClose, 'click', closeRegister);
		
		// Create form div
		var UserPrompotFormDiv = dojo.doc.createElement('div');
		UserPrompotFormDiv.id = 'UserPrompotFormDiv';
		var UserPromptForm = dojo.doc.createElement('form');
		UserPromptForm.id = 'UserPromptForm';
		UserPromptForm.method = 'post';
		UserPromptForm.action = '/Login';
		var UserPrompotFormInnerDiv = dojo.doc.createElement('div');
		UserPrompotFormInnerDiv.className = 'UserPrompotFormInnerDiv';
		
		// Create form elements
		var formElements = {'list': [
		                       {name: 'display_name', title: 'Name:', style: 'narrow', description: '<div class="UserPromptFormDescription">4 - 64 characters</div>'}, 
		                       {name: 'password', title: 'Password:', style: 'narrow', description: '<div class="UserPromptFormDescription">6 - 32 characters</div>'}, 
		                       {name: 'password_confirmation', title: 'Password confirmation:', description: '', style: 'narrow'}, 
		                       {name: 'reports', title: 'Send me weekly reports:', description: '', style: 'narrow'},
		                       {name: 'email', title: 'Email:', description: '', style: 'wide'}, 
		                       {name: 'domains', title: 'Domain name you own:', description: '<div class="UserPromptFormDescription">Must begin with http:// or https://</div>', style: 'wide'}
		                   ]};
		
		dojo.forEach(formElements.list, function(element) {
			var fieldset = dojo.doc.createElement('div');
			fieldset.className = 'UserPromptElementFieldset';
			var formLabel = dojo.doc.createElement('span');
			formLabel.className = 'UserPromptElementLabel';
			
			formLabel.innerHTML = element.title + element.description;
			var formInput = dojo.doc.createElement('span');
			formInput.className = 'UserPromptElementInput';
			var input = dojo.doc.createElement('input');
			if (element.name == 'password' || element.name == 'password_confirmation') {
				input.type = 'password';
			} else if (element.name == 'reports') {
				input.type = 'checkbox';
				input.checked = 1;
		 	} else {
				input.type = 'text';
			}
			input.className = 'inputElement UserPromptFloatLeft';
			input.className += ' ' + element.style;
			input.name = element.name;
			input.value = '';
			
			if (element.name == 'domains') {
				input.id = 'domain_url'
				var domainAdd = dojo.doc.createElement('a');
				domainAdd.className = 'UserPrompotDomainAdd';
				domainAdd.href = '#';
				domainAdd.innerHTML = '&nbsp;';
				dojo.connect(domainAdd, 'click', addDomain);
				dojo.place(domainAdd, formInput, 'last');
				if (dojo.byId('users_domain')) {
					input.value = dojo.byId('users_domain').value;
				}
			}
			
			dojo.place(input, formInput, 'first');
			dojo.place(formLabel, fieldset, 'first');
			dojo.place(formInput, fieldset, 'last');
			dojo.place(fieldset, UserPrompotFormInnerDiv, 'last');
		});
		
		// Ad domains div
		var UserPromptDomainsDiv = dojo.doc.createElement('div');
		UserPromptDomainsDiv.id = 'UserPrompotDomainsDiv';
		
		/*
		 * Delete adding user domain to list and instead adding to input field.
		if (dojo.byId('users_domain')) {
			var domain = dojo.doc.createElement('div');
			domain.className = 'UserPrompotDomain';
			domain.innerHTML = dojo.byId('users_domain').value;
			domain.id = dojo.byId('users_domain').value;
			
			var domainDelete = dojo.doc.createElement('a');
			domainDelete.className = 'UserPrompotDomainDelete';
			domainDelete.href = '#';
			domainDelete.innerHTML = '&nbsp;';
			dojo.connect(domainDelete, 'click', removeDomain);
						
			dojo.place(domain, UserPromptDomainsDiv, 'first');
			dojo.place(domainDelete, domain, 'last');
		}*/

		// Ad form controls
		var UserPromptFormControls = dojo.doc.createElement('div');
		UserPromptFormControls.id = 'UserPromptFormControls';
		var UserPromptFormOk = dojo.doc.createElement('a');
		UserPromptFormOk.id = 'registerUser';
		UserPromptFormOk.href = '#';
		UserPromptFormOk.innerHTML = '&nbsp;';
		UserPromptFormOk.className = 'buttonOk';
		dojo.connect(UserPromptFormOk, 'click', register);
		var UserPromptFormCancel = dojo.doc.createElement('a');
		UserPromptFormCancel.href = '#';
		UserPromptFormCancel.innerHTML = '&nbsp;';
		UserPromptFormCancel.className = 'buttonCancel';
		dojo.connect(UserPromptFormCancel, 'click', closeRegister);
		
		dojo.place(overlay, dojo.body(), 'first');
		dojo.place(UserPromptDiv, dojo.body(), 'first');
		dojo.place(UserPromptHeader, UserPromptDiv, 'first');
		dojo.place(UserPromptHeaderTitle, UserPromptHeader, 'first');
		dojo.place(UserPrompotHeaderClose, UserPromptHeader, 'last');
		dojo.place(UserPrompotFormDiv, UserPromptDiv, 'last');
		dojo.place(UserPromptForm, UserPrompotFormDiv, 'first');
		dojo.place(UserPrompotFormInnerDiv, UserPromptForm, 'first');
		dojo.place(UserPromptDomainsDiv, UserPrompotFormInnerDiv, 'last');
		dojo.place(UserPromptFormControls, UserPrompotFormInnerDiv, 'last');
		dojo.place(UserPromptFormOk, UserPromptFormControls, 'first');
		dojo.place(UserPromptFormCancel, UserPromptFormControls, 'last');
		
		// Allow member login, but only if at the end of the process.
		if (allowLogin) {
			var UserPromptLogin = dojo.doc.createElement('div');
			UserPromptLogin.id = 'UserPromptLogin';
			UserPromptLogin.innerHTML = '<br /><br />Already a member?&nbsp;'
			var UserPromptLoginLink = dojo.doc.createElement('a');
			UserPromptLoginLink.id = 'memberLogin';
			UserPromptLoginLink.href = '#';
			UserPromptLoginLink.innerHTML = 'Log in and save ad';
			dojo.connect(UserPromptLoginLink, 'click', register);
			
			dojo.place(UserPromptLoginLink, UserPromptLogin, 'last');
			dojo.place(UserPromptLogin, UserPrompotFormInnerDiv, 'last');
		}
	}
};

function removeDomain(event) {
	dojo.stopEvent(event);
	dojo.query(event.target.parentNode).orphan();
}

function addDomain(event) {
	dojo.stopEvent(event);
	var domainName = event.target.parentNode.children[0].value;
	dojo.xhrPost({
		url: '/API',
		content: {action: 'checkUrl', url: domainName},
		handleAs: 'json',
		load: function (response) {
			if (response.status == 1) {
				var domainsDiv = dojo.byId('UserPrompotDomainsDiv');
				
				var domain = dojo.doc.createElement('div');
				domain.className = 'UserPrompotDomain';
				domain.innerHTML = domainName;
				domain.id = domainName;
				
				var domainDelete = dojo.doc.createElement('a');
				domainDelete.className = 'UserPrompotDomainDelete';
				domainDelete.href = '#';
				domainDelete.innerHTML = '&nbsp;';
				dojo.connect(domainDelete, 'click', removeDomain);
							
				dojo.place(domain, domainsDiv, 'last');
				dojo.place(domainDelete, domain, 'last');
				event.target.parentNode.children[0].value = '';
				
			} else {
				var errors ='';
				dojo.forEach(response.errors, function (error) {
					errors += error + '\n';
				})
				alert (errors);
			}
			return response;
		},
		error: function (response) {
			alert (response);
		}
	});
}

function register(event) {
	dojo.stopEvent(event);
	
	var formAction = event.target.id;
	
	var userDomains = '';
	dojo.forEach(dojo.query('#UserPrompotDomainsDiv > *'), function(element, i, arr) {
		userDomains += element.id;
		if ((i + 1) < dojo.byId('UserPrompotDomainsDiv').children.length) {
			userDomains += '|';
		}
	});
	if (dojo.byId('domain_url').value) {
		if (userDomains != '') {
			userDomains += '|'
		}
		userDomains += dojo.byId('domain_url').value;
	}
	
	// Check if reports is checked and if it is set value to 1
	if (dojo.byId('UserPromptForm').reports.checked == 1) {
		dojo.byId('UserPromptForm').reports.value = 1;
	} else {
		dojo.byId('UserPromptForm').reports.value = 0;
	}
	
	dojo.xhrPost({
		url: '/API',
		content: {action: formAction, domains: userDomains},
		form: 'UserPromptForm',
		handleAs: 'json',
		load: function (response) {
			if (response.status == 1) {
				window.location = '/Process/Build';
			} else {
				var errors ='';
				dojo.forEach(response.errors, function (error) {
					errors += error + '\n';
				})
				alert (errors);
			}
			return response;
		},
		error: function (response) {
			alert (response);
		}
	});
}

function closeRegister(event) {
	dojo.stopEvent(event);
	dojo.query('#UserPrompt').orphan();
	dojo.query('#Overlay').orphan();
}

function textSelector(event) {
	// Change the name and Id of the current. 
	// Has to be done first to overcome IE misfunctionality with select options once the select element has gone.
	var elementOldId = event.id;
	var elementNewId = elementOldId + '_select';
	event.id = event.name = elementNewId;
	
	var options = dojo.byId(elementNewId).options;
	
	if (!event.parentNode.id) {
		var parentNodeId = event.id + '_parent';
		event.parentNode.id = parentNodeId;
	} else {
		parentNodeId = event.parentNode.id;
	}
	
	// Hide the old element but keep it for future reference.
	dojo.style(elementNewId, 'display', 'none');
	
	
	// Create a fake select element
	var selectText = dojo.doc.createElement('input');
	selectText.type = 'text';
	selectText.id = elementOldId;
	selectText.name = elementOldId;
	selectText.value = event.text == 'undefined' ? event.text : '';
	selectText.className = event.className;
	dojo.connect(selectText, 'change', enterNewOption);
	
	// Create a designed selector
	selectSelector = dojo.doc.createElement('a');
	selectSelector.id = elementOldId + '_selector';
	selectSelector.href = elementOldId;
	selectSelector.className = 'TextSelector';
	selectSelector.innerHTML = '&nbsp;';
	dojo.connect(selectSelector, 'click', toggleOptions);
	
	// create the options div
	var elementOptions = dojo.doc.createElement('div');
	elementOptions.id = elementOldId + "_options";
	dojo.style(elementOptions, {
		position: 'absolute',
		backgroundColor: 'white',
		border: '1px solid #C1C1C1',
		borderTop: 'none',
		display: 'none',
		zIndex: selectText.style.zIndex + 1
	});
	
	// Add the options into the div
	dojo.forEach(options, function(option) {
		if (option.text) {
			// check if this options is selected and set it as such
			if (option.selected) {
				selectText.value = option.text;
			}
			
			// Create the option as an anchor
			var currOption = dojo.doc.createElement('a');
			currOption.href = option.value;
			currOption.name = elementOldId + '|' + option.value;
			currOption.innerHTML = option.text;
			currOption.className = 'selectOption';
			dojo.style(currOption, {
				width: '100%'
			});
			
			// Connect the anchor to a select function
			dojo.connect(currOption, 'click', selectOption);
			
			// Place the anchor
			dojo.place(currOption, elementOptions, 'last');
		}
	});
	
	// Remove select element and insert new stylised element
	//event.parentNode.innerHTML = '';
	dojo.place(selectText, parentNodeId, 'first');
	dojo.place(selectSelector, parentNodeId, 'last');
	
	// Get select element position
	var e1=selectText, e2=selectText;
	var x=0, y=0;
	if(e1.offsetParent) {
		do {
			x += e1.offsetLeft;
			y += e1.offsetTop;
		} while(e1 = e1.offsetParent);
	}
	while((e2 = e2.parentNode) && e2.nodeName.toUpperCase() !== 'BODY') {
		x -= e2.scrollLeft;
		y -= e2.scrollTop;
	}
	
	var foo = selectText;
	while((foo = foo.parentNode) && foo.nodeName.toUpperCase() !== 'BODY') {
		var bar = foo.id;
	}
	
	dojo.style(elementOptions, {
		left: x + 'px',
		top: (y + selectText.offsetHeight - 1) + 'px',
		width: (selectText.offsetWidth - 2) + 'px'		
	});
	
	
	dojo.place(elementOptions, dojo.body(), 'first');
}

function selectOption(event) {
	dojo.stopEvent(event);
	var vars = event.target.name.split('|');
	dojo.byId(vars[0]).value = vars[1];
	dojo.byId(vars[0] + '_select').value = vars[1];
	dojo.byId(vars[0] + '').value = event.target.innerHTML;
	dojo.style(vars[0] + '_options', {
		display: 'none'
	});
	dojo.byId(vars[0] + '_selector').className = 'TextSelector';
}

function enterNewOption(event) {
	var elementName = event.target.id.split('_')[0];
	dojo.byId(elementName).value = event.target.value;
}

function toggleOptions(event) {
	dojo.stopEvent(event);
	var foo = event.target.href.split('/');
	var optionsDivId = foo[(foo.length - 1)] + '_options';
	if (dojo.byId(optionsDivId).style.display == 'none') {
		dojo.style(optionsDivId, {
			display: 'block'
		});
		event.target.className = 'TextSelectorOn';
	} else if (dojo.byId(optionsDivId).style.display == 'block') {
		dojo.style(optionsDivId, {
			display: 'none'
		});
		event.target.className = 'TextSelector';
	}
}

function updateDomainCategories(event) {
	dojo.stopEvent(event);
	alert (event.target.parentNode.id);
}

function loginSave() {
	alert ('foo');
}