//
//seperate functions for the recorder
//
function recorderStart(id, type) {
	$('recorder-wrapper').setStyle({'overflow': 'visible', 'width': 'auto'});

	window.setTimeout(function () {
		$('recorder-holder').setSpecs(id, type);
		
		$$('#word-itself object', '#word-itself embed').each(function (el) {
			el.setStyle({'visibility': 'hidden'});
		});
	}, 1000);
}

function recorderClose() {
	$('recorder-wrapper').setStyle({'overflow': 'hidden', 'width': '0'});

	$$('#word-itself object', '#word-itself embed').each(function (el) {
		el.setStyle({'visibility': 'visible'});
	})
} 

function recorderSuccess(filename) {
	if (typeof filename == 'string') {
		var recordBtn = WordEditor.activeRecordBtn;

		if (recordBtn.previous().nodeName.toLowerCase() == 'embed' || recordBtn.previous().nodeName.toLowerCase() == 'object') {
			recordBtn.previous().remove();
		}

		var speechHolder = new Element('span');
		Element.insert(recordBtn, {'before': speechHolder});
		var speechHolderID = speechHolder.identify();

		var vars = {file: filename}
		var params = {quality: 'high'}

		swfobject.embedSWF('/flash/player.swf', speechHolderID, '23', '17', '8.0.0', '/flash/expressInstall.swf', vars, params);

		WordEditor.activeRecordBtn = undefined;

		$$('#word-itself object', '#word-itself embed').each(function (el) {
			el.setStyle({'visibility': 'hidden'});
		});
	}
}



//
// Object with utility functions
//
var Util = {
	adjustHeight: function () {
		var height = $('container').getHeight();

		if ($('content'))	{
  			$('wrapper').setStyle({
  				height: (Element.cumulativeOffset($('content')).top + $('content').getHeight()) + 'px'
  			});
  		}
	},

	//fix png alpha transparency only for IE 6 using conditonal compilation
	pngFix: function () {
		/*@cc_on
			@if (@_jscript_version < 5.7)
			for (var i=0; i<document.images.length; i++) {
				var img = document.images[i];
				var imgSrc = img.src;

				if (imgSrc.substring(imgSrc.length-3, imgSrc.length).toLowerCase() == "png") {
					img.src = '/images/blank.gif';
					img.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + imgSrc + '")';
				}
			}
			@end
		@*/
	},

	parseRelParams: function (element) {
		var params = element.getAttribute('rel').split('|');
		var output = {};

		for (i=0; i<params.length; i++) {
			param = params[i].split('=');
			output[param[0]] = param[1];
		}

		return output;
	},

	parseDataParams: function (element) {
		var paramString = element.readAttribute('data');
		
		if (typeof paramString == 'string') {
			var params = paramString.split('|');
			var output = {};

			for (var i=0; i<params.length; i++) {
				var param = params[i].split('=');
				output[param[0]] = param[1];
			}

			return output;
		} else {
			return;
		}
	}
}


/*
 * TABS NEXT TO THE WORD EDITOR
 */
var DictionaryTabs = {
	defaultActive: 'zoek',

	init: function () {
		if ($('dictionary-tabs')) {
			//set the click events for the tabs and set the default tab actives
			var tabs = $('dictionary-tabs').getElementsByTagName('li');

			for (i=0; i<tabs.length; i++) {
				Event.observe(tabs[i], 'click', DictionaryTabs.switchTab);
			}
		}
	},

	switchTab: function (event) {
		var tabs = $('dictionary-tabs').getElementsByTagName('li');

		for (i=0; i<tabs.length; i++) {
			if (tabs[i].id == Event.element(event).id) {
				tabs[i].addClassName('active');
				$(tabs[i].id.replace(/tab$/, 'content')).show();
			} else {
				tabs[i].removeClassName('active');
				$(tabs[i].id.replace(/tab$/, 'content')).hide();
			}
		}
		
		Util.adjustHeight();
	},

	search: function (request, json) {
		Element.select($('search-results'), 'h3')[0].innerHTML = json.term;

		var resultsUL = Element.select($('search-results'), 'ul')[0];
		resultsUL.innerHTML = '';

		var resultLI = document.createElement('li');
		var resultA  = document.createElement('a');
		resultA.href = json.searchresult[0].url;
		resultA.appendChild(document.createTextNode(json.searchresult[0].word));
		resultLI.appendChild(resultA);
		resultsUL.appendChild(resultLI);

		for (var i=1; i<json.searchresult.length; i++) {
			resultLI = document.createElement('li');
			resultA  = document.createElement('a');
			resultA.href = json.searchresult[i].url;
			resultA.appendChild(document.createTextNode(json.searchresult[i].word));
			resultLI.appendChild(resultA);
			resultsUL.appendChild(resultLI);
		}
	},

	searchIndex: function (request, json) {
		Element.select($('abc-results'), 'h3')[0].innerHTML = json.term;

		var resultsUL = Element.select($('abc-results'), 'ul')[0];
		resultsUL.innerHTML = '';

		var resultLI = document.createElement('li');
		var resultA  = document.createElement('a');
		resultA.href = json.searchresult[0].url;
		resultA.appendChild(document.createTextNode(json.searchresult[0].word));
		resultLI.appendChild(resultA);
		resultsUL.appendChild(resultLI);

		for (var i=1; i<json.searchresult.length; i++) {
			resultLI = document.createElement('li');
			resultA  = document.createElement('a');
			resultA.href = json.searchresult[i].url;
			resultA.appendChild(document.createTextNode(json.searchresult[i].word));
			resultLI.appendChild(resultA);
			resultsUL.appendChild(resultLI);
		}
	}
}


/*
 * WORD EDITOR
 */
var WordEditor = {
	activeRecordBtn: undefined,

	init: function () {
		if ($('word-editor')) {
			var editor, i;

			//catch the events for the click event of all the cancel buttons
			var cancelBtns = Element.select($('word-editor'), 'td div.editor button.cancel');

			for (i=0; i<cancelBtns.length; i++) {
				Event.observe(cancelBtns[i], 'click', function(event){
					//prevent submit
					event.stop();

					var cancelBtn = Event.element(event);

					cancelBtn.up('div.editor').hide();
					cancelBtn.up('div.editor').previous().show();
					Util.adjustHeight();
				});
			}


			//by default, hide all the editor divs
			var divEditors = Element.select($('word-editor'), 'div.editor');

			for (i=0; i<divEditors.length; i++) {
				divEditors[i].hide();
			}

			Util.adjustHeight();

			//embed the recorder
			var recorderSettings = {settingsfile: '/xml/recordersettings'}
			var recorderFlashVars = {menu: 'false', wmode: 'transparent'}
			var recorderAttributes = {id: 'recorder-holder', name: 'recorder-holder'}
			$('recorder-wrapper').setStyle({'overflow': 'hidden', 'width': '0'});
			swfobject.embedSWF("/flash/recorder.swf", "recorder-holder", "420", "270", "8.0.0", "/flash/expressInstall.swf", recorderSettings, recorderFlashVars, recorderAttributes);

			//set the mouseover and mouseout functionality for the editables
			var editSpans = Element.select($('word-editor'), 'span.edit');
			for (i=0; i<editSpans.length; i++) {
				Event.observe(editSpans[i], 'mouseover', function (event) {
					if (Event.element(event).hasClassName('edit')) {
						Event.element(event).addClassName('hover');
					} else {
						Event.element(event).up('span.edit').addClassName('hover');
					}
				});

				Event.observe(editSpans[i], 'mouseout', function (event) {
					if (Event.element(event).hasClassName('edit')) {
						Event.element(event).removeClassName('hover');
					} else {
						Event.element(event).up('span.edit').removeClassName('hover');
					}
				});

				Event.observe(editSpans[i], 'click', function () { window.setTimeout(Util.adjustHeight, 250)});
			}

			//embed all the speech players
			var dataSpans = Element.select($('word-view'), 'span[data]');
			var speechSO, vars, params;
			var speechHolders = new Array();

			for(i=0; i<dataSpans.length; i++) {
				if (dataSpans[i].readAttribute('data').indexOf("filename=") > -1) {
					speechHolders.push(dataSpans[i]);
				}
			}

			for (i=0; i<speechHolders.length; i++) {
				var fileName = Util.parseDataParams(speechHolders[i]).filename;
				var speechHolderId = speechHolders[i].identify();

				vars = {file: fileName}
				params = {quality: 'high'}

				swfobject.embedSWF('/flash/player.swf', speechHolderId, '23', '17', '8.0.0', '/flash/expressInstall.swf', vars, params);
			}



			//----------------------------------------------------------
			//word itself editor
			//----------------------------------------------------------

			editSpan = Element.select($('word-itself'), 'td span.edit')[0];		
			Event.observe(editSpan, 'click', function () {
				Element.select($('word-itself'), 'td div.static')[0].hide();
				Element.select($('word-itself'), 'td div.editor')[0].show();
				Util.adjustHeight();
			});

			var recordBtn = Element.select($('word-itself'), 'td img.recorder')[0];

			Event.observe(recordBtn, 'click', function (event) {
				var wordSpan = Event.element(event).previous('span.edit');
				var params = Util.parseDataParams(wordSpan);

				WordEditor.activeRecordBtn = this;

				recorderStart(params.id, 'word');
			});

			if ($('is_noun').checked == true) { 
				$('noun-params').show();
			} else {
				$('noun-params').hide();
			}

			//set the show/hide functionality for the is_noun checkbox
			Event.observe($('is_noun'), 'click', function(event){
				var checkBox = Event.element(event);

				if (checkBox.checked == true) 
					$('noun-params').show();
				else 
					$('noun-params').hide();
			});



			//----------------------------------------------------------
			//definition editor
			//----------------------------------------------------------

			editSpan = Element.select($('word-definition'), 'td span.edit')[0];
			Event.observe(editSpan, 'click', function () {
				Element.select($('word-definition'), 'td div.static')[0].hide();
				Element.select($('word-definition'), 'td div.editor')[0].show();
				Util.adjustHeight();
			});

			addBtn = Element.select($('word-definition'), 'td button.add')[0];

			if (addBtn) {
				Event.observe(addBtn, 'click', function () {
					Element.select($('word-definition'), 'td div.static')[0].hide();
					Element.select($('word-definition'), 'td div.editor')[0].show();
					Util.adjustHeight();
				});
			}



			//----------------------------------------------------------
			// images editor
			//----------------------------------------------------------

			deleteBtns = Element.select($('word-images'), 'td div.images button.delete');
			for(i=0; i<deleteBtns.length; i++) {
				Event.observe(deleteBtns[i], 'click', function (event) {
					if (!confirm(i18n.deleteImageConfirm)) {
						Event.stop(event);
					}
				});
			}

			addBtn = Element.select($('word-images'), 'td div.static button.add')[0];
			Event.observe(addBtn, 'click', function () {
				Element.select($('word-images'), 'td div.static')[0].hide();
				Element.select($('word-images'), 'td div.editor')[0].show();
				Util.adjustHeight();
			});



			//----------------------------------------------------------
			//links editor
			//----------------------------------------------------------

			var editBtns = Element.select($('word-links'), 'td div.static span.edit');

			for (i=0; i<editBtns.length; i++) {
				Event.observe(editBtns[i], 'click', function (event) {
					var editSpan = Event.element(event).up('span.edit');
					
					if (editSpan) {
						var params   = Util.parseDataParams(editSpan);
	
						if (!Event.element(event).hasClassName('delete')) {
							$('url').value = params.url;
							$('link_title').value = editSpan.select('span.background')[0].innerHTML.replace('&nbsp;', '').strip();
							$('link_id').value = params.id;
	
							Element.select($('word-links'), 'td div.static')[0].hide();
							Element.select($('word-links'), 'td div.editor')[0].show();
							Util.adjustHeight();
						} else {
							if (confirm(i18n.deleteLinkConfirm)) {
								var ajaxOptions;
	
								ajaxOptions = {
									method: 'post',
									asynchronous: true,
									evalScripts: false,
									onComplete: function (request, json) {
										WordEditor.deleteLink(request, json)
									},
									parameters: 'id=' + params.id
								}
	
								new Ajax.Request('/word/deleteWordLink', ajaxOptions);
								return false;
							}
						}
					}
				});
			}

			addBtn = Element.select($('word-links'), 'td button.add')[0];
			Event.observe(addBtn, 'click', function (event) {
				$('url').value = 'http://';
				$('link_title').value = '';
				$('link_id').value = '0';

				Element.select($('word-links'), 'td div.static')[0].hide();
				Element.select($('word-links'), 'td div.editor')[0].show();
				Util.adjustHeight();
			});


			//----------------------------------------------------------
			//related words editor
			//----------------------------------------------------------

			var deleteBtns = Element.select($('word-related'), 'td div.static img.delete');

			for (i=0; i<deleteBtns.length; i++) {
				Event.observe(deleteBtns[i], 'click', function (event) {
					var editSpan = Event.element(event).up();

					if (editSpan) {
						var params = Util.parseDataParams(editSpan);
	
						if (confirm(i18n.deleteRelatedConfirm)) {
							var ajaxOptions;
	
							ajaxOptions = {
								method: 'post',
								asynchronous: true,
								evalScripts: false,
								onComplete: function (request, json) {
									WordEditor.deleteRelated(request, json)
								},
								parameters: 'to_word_id=' + params.id + '&word_id=' + params.word
							}
	
							new Ajax.Request('/word/deleteRelatedWord', ajaxOptions);
							return false;
						}
					}
				});				
			}

			addBtn = Element.select($('word-related'), 'td button.add')[0];
			Event.observe(addBtn, 'click', function (event) {
				$('related').value = '';
				$('related_id').value = '0';

				Element.select($('word-related'), 'td div.static')[0].hide();
				Element.select($('word-related'), 'td div.editor')[0].show();
				Util.adjustHeight();
			});

			// ajax assisted search
			Event.observe($('related'), 'keyup', function (event) {
				var searchFor = Event.element(event).value.strip();
				var ajaxOptions;

				ajaxOptions = {
					method: 'post',
					asynchronous: true,
					evalScripts: false,
					onComplete: function (request, json) {
						WordEditor.searchRelated(request, json)
					},
					parameters: 'term=' + searchFor + '&dictionary_id=' + $('related_word_dictionary_id').value
				}

				new Ajax.Request('/word/searchRelated', ajaxOptions);
				return false;
			});

			Event.observe(document.body, 'click', function(event) {
				var theUL = Event.findElement(event, 'ul');

				if (!theUL) {
					$('related-word-suggestions').hide();
				}
			});



			//----------------------------------------------------------
			//translations editor
			//----------------------------------------------------------

			var editBtns = Element.select($('word-translations'), 'td div.static span.edit');

			for (i=0; i<editBtns.length; i++) {
				Event.observe(editBtns[i], 'click', function (event) {
					var editSpan = Event.element(event).up('span.edit');
					
					if (editSpan) {
						var params   = Util.parseDataParams(editSpan);
	
						if (Event.element(event).hasClassName('delete')) {
							if (confirm(i18n.deleteTranslationConfirm)) {
								var ajaxOptions;
	
								ajaxOptions = {
									method: 'post',
									asynchronous: true,
									evalScripts: false,
									onComplete: function (request, json) {
										WordEditor.deleteTranslation(request, json)
									},
									parameters: 'id=' + params.id
								}
	
								new Ajax.Request('/word/deleteWordTranslation', ajaxOptions);
								return false;
							}
						} else if (Event.element(event).hasClassName('recorder')) {
	
							WordEditor.activeRecordBtn = Event.element(event);
							recorderStart(params.id, 'translation');
						} else {
	
							$('translation').value = $(editSpan).select('span[lang]')[0].innerHTML.replace('&nbsp;', '').strip();
							$('translation_id').value = params.id;
	
							for (var i=0; i<$('language_id').options.length; i++) {
								if ($('language_id').options[i].value == $(editSpan).select('span[lang]')[0].readAttribute('lang')) {
									$('language_id').options[i].selected = true;
								}
							}
	
							Element.select($('word-translations'), 'td div.static')[0].hide();
							Element.select($('word-translations'), 'td div.editor')[0].show();
							Util.adjustHeight();
						}
					}
				});
			}

			addBtn = Element.select($('word-translations'), 'td button.add')[0];
			Event.observe(addBtn, 'click', function (event) {
				$('translation_id').value = '0';
				$('translation').value = '';
				$('language_id').options[0].selected = true;

				Element.select($('word-translations'), 'div.static')[0].hide();
				Element.select($('word-translations'), 'div.editor')[0].show();
				Util.adjustHeight();
			});

			var recordBtns = Element.select($('word-translations'), 'td div.static img.recorder');

			for (i=0; i<recordBtns.length; i++) {
				Event.observe(recordBtns[i], 'click', function (event) {
					var span   = Event.element(event).up('span.edit');
					var params = Util.parseDataParams(span);

					recorderStart(params.id, 'translation');
				});
			}



			//----------------------------------------------------------
			//examples editor
			//----------------------------------------------------------

			var editBtns = Element.select($('word-examples'), 'td span.edit');

			for(i=0; i<editBtns.length; i++) {
				Event.observe(editBtns[i], 'click', function (event) {
					var editSpan = Event.element(event).up('span.edit');
					
					if (editSpan) {
						var params = Util.parseDataParams(editSpan);
	
						if (Event.element(event).hasClassName('delete')) {
							if (confirm(i18n.deleteSentenceConfirm)) {
								var ajaxOptions;
	
								ajaxOptions = {
									method: 'post',
									asynchronous: true,
									evalScripts: false,
									onComplete: function (request, json) {
										WordEditor.deleteExample(request, json)
									},
									parameters: 'id=' + params.id
								}
	
								new Ajax.Request('/word/deleteWordSentence', ajaxOptions);
								return false;
							}
						} else {
							$('sentence').value = editSpan.select('span.background')[0].innerHTML.replace('&nbsp;', '').strip();
							$('sentence_id').value = params.id;
	
							Element.select($('word-examples'), 'div.static')[0].hide();
							Element.select($('word-examples'), 'div.editor')[0].show();
							Util.adjustHeight();
						}
					}
				});
			}

			addBtn = Element.select($('word-examples'), 'td button.add')[0];
			Event.observe(addBtn, 'click', function (event) {
				$('sentence').value = '';
				$('sentence_id').value = '0';

				Element.select($('word-examples'), 'div.static')[0].hide();
				Element.select($('word-examples'), 'div.editor')[0].show();
				Util.adjustHeight();
			});
		}
	},

	/*
	 * UPDATE THE STATIC WORD FIELDS
	 */
	updateWord: function (request, json) {
		window.setTimeout(function () {
			$('ajax-feedback').hide();
			Util.adjustHeight();
		}, 10000);

		if (json.result == false) {
			$('ajax-feedback').innerHTML = '<p>' + json.error + '</p>';
			$('ajax-feedback').className = 'feedback-failure';
			$('ajax-feedback').show();
			return;

		} else {
			$('ajax-feedback').innerHTML = '<p>' + i18n.saveWordSuccess + '</p>';
			$('ajax-feedback').className = 'feedback-success';
			$('ajax-feedback').show();
		}

		var spanWord    = Element.select($('word-itself'), 'td div.static span.word')[0];
		var spanPlural  = Element.select($('word-itself'), 'td div.static span.plural')[0];
		var spanDivider = Element.select($('word-itself'), 'td div.static span.divider')[0];

		spanWord.innerHTML    = json.values.word;
		spanPlural.innerHTML  = json.values.is_noun == '1' ? json.values.word_plural : '';

		if (json.values.is_noun == '1') {
			spanDivider.show();
		} else {
			spanDivider.hide();
		}

		Element.select($('word-itself'), 'td div.static')[0].show();
		Element.select($('word-itself'), 'td div.editor')[0].hide();

		Util.adjustHeight();
	},


	/*
	 * UPDATE THE STATIC WORD DEFINITION FIELDS
	 */
	updateWordDefinition: function (request, json) {
		window.setTimeout(function () {
			$('ajax-feedback').hide();
			Util.adjustHeight();
		}, 10000);

		if (json.result == false) {
			$('ajax-feedback').innerHTML = '<p>' + json.error + '</p>';
			$('ajax-feedback').className = 'feedback-failure';
			$('ajax-feedback').show();

			return;

		} else {
			$('ajax-feedback').innerHTML = '<p>' + i18n.saveDefinitionSuccess + '</p>';
			$('ajax-feedback').className = 'feedback-success';
			$('ajax-feedback').show();
		}

		var divStatic = Element.select($('word-definition'), 'td span.background')[0];
		divStatic.innerHTML = json.values.definition;

		var addBtn = Element.select($('word-definition'), 'td button.add')[0];
		
		if (addBtn) {
			addBtn.stopObserving();
			addBtn.remove();
		}

		Element.select($('word-definition'), 'td div.static')[0].show();
		Element.select($('word-definition'), 'td div.static span.edit')[0].show();
		Element.select($('word-definition'), 'td div.editor')[0].hide();

		Util.adjustHeight();
	},


	/*
	 * delete an image
	 */
	deleteWordImage: function(request, json) {
		window.setTimeout(function () {
			$('ajax-feedback').hide();
			Util.adjustHeight();
		}, 10000);

		if (json.result == false) {
			$('ajax-feedback').innerHTML = '<p>' + json.error + '</p>';
			$('ajax-feedback').className = 'feedback-failure';
			$('ajax-feedback').show();

			return;

		} else {
			$('ajax-feedback').innerHTML = '<p>' + i18n.deleteImageSuccess + '</p>';
			$('ajax-feedback').className = 'feedback-success';
			$('ajax-feedback').show();
		}

		var deletedImageForm = $('image_' + json.values.image_id).up();
		deletedImageForm.parentNode.removeChild(deletedImageForm);

		Element.select($('word-images'), 'td div.static')[0].show();
		Element.select($('word-images'), 'td div.editor')[0].hide();

		Util.adjustHeight();
	},


	/*
	 * UPDATE THE LINKS
	 */
	updateLinks: function (request, json) {
		window.setTimeout(function () {
			$('ajax-feedback').hide();
			Util.adjustHeight();
		}, 10000);

		if (json.result == false) {
			$('ajax-feedback').innerHTML = '<p>' + json.error + '</p>';
			$('ajax-feedback').className = 'feedback-failure';
			$('ajax-feedback').show();

			return;

		} else {
			$('ajax-feedback').innerHTML = '<p>' + i18n.saveLinkSuccess + '</p>';
			$('ajax-feedback').className = 'feedback-success';
			$('ajax-feedback').show();
		}

		//search for the right element based on the id
		var links = Element.select($('word-links'), 'td div.static span.edit');
		var params;

		for (i=0; i<links.length; i++) {
			params = Util.parseDataParams(links[i]);

			if (params.id == json.values.id) {
				var editedLink = $(links[i]); 
				break;
			}
		}

		if (editedLink) {
			//update the edited link
			editedLink.select('span.background')[0].update('&nbsp;' + json.values.title);
			editedLink.writeAttribute('data', 'id=' + json.values.id + '|url=' + json.values.url); 

		} else {

			//create the elements for the new link
			var editSpan = new Element('span', {'class': 'edit', 'data': 'id=' + json.values.id + '|url=' + json.values.url});
			var backgroundSpan = new Element('span', {'class': 'background'}).update('&nbsp;' + json.values.title);

			var editBtn   = new Element('img', {'src': '/images/edit-icon.gif', 'class': 'edit'});
			var deleteBtn = new Element('img', {'src': '/images/delete-icon.gif', 'class': 'delete'});

			//construct the part of the DOM
			editSpan.appendChild(editBtn);
			editSpan.appendChild(backgroundSpan);
			editSpan.appendChild(deleteBtn);

			var newLinkBtn = Element.select($('word-links'), 'td div.static button.add')[0];
			newLinkBtn.insert({'before': editSpan});

			//set the event handler for the edit click
			Event.observe(editSpan, 'click', function (event) {
				var editSpan = Event.element(event).up('span.edit');
				var params   = Util.parseDataParams(editSpan);

				if (!Event.element(event).hasClassName('delete')) {
					$('url').value = params.url;
					$('link_title').value = $(editSpan).select('span.background')[0].innerHTML.replace('&nbsp;', '').strip();
					$('link_id').value = params.id;

					Element.select($('word-links'), 'td div.static')[0].hide();
					Element.select($('word-links'), 'td div.editor')[0].show();
					Util.adjustHeight();
				} else {
					if (confirm(i18n.deleteLinkConfirm)) {
						var ajaxOptions;

						ajaxOptions = {
							method: 'post',
							asynchronous: true,
							evalScripts: false,
							onComplete: function (request, json) {
								WordEditor.deleteLink(request, json)
							},
							parameters: 'id=' + params.id
						}

						new Ajax.Request('/word/deleteWordLink', ajaxOptions);
						return false;
					}
				}
			});

			Event.observe(editSpan, 'mouseover', function (event) {
				if (Event.element(event).hasClassName('edit')) {
					Event.element(event).addClassName('hover');
				} else {
					Event.element(event).up('span.edit').addClassName('hover');
				}
			});

			Event.observe(editSpan, 'mouseout', function (event) {
				if (Event.element(event).hasClassName('edit')) {
					Event.element(event).removeClassName('hover');
				} else {
					Event.element(event).up('span.edit').removeClassName('hover');
				}
			});
		}

		Element.select($('word-links'), 'td div.static')[0].show();
		Element.select($('word-links'), 'td div.editor')[0].hide();

		Util.adjustHeight();
	},


	/*
	 * DELETE LINK
	 */
	deleteLink: function (request, json) {
		window.setTimeout(function () {
			$('ajax-feedback').hide();
			Util.adjustHeight();
		}, 10000);

		if (json.result === false) {
			$('ajax-feedback').innerHTML = '<p>' + json.error + '</p>';
			$('ajax-feedback').className = 'feedback-failure';
			$('ajax-feedback').show();

			return;

		} else {
			$('ajax-feedback').innerHTML = '<p>' + i18n.deleteLinkSuccess + '</p>';
			$('ajax-feedback').className = 'feedback-success';
			$('ajax-feedback').show();
		}

		var items = Element.select($('word-links'), 'td div.static span.edit');
		var params;

		for (var i=0; i<items.length; i++) {
			params = Util.parseDataParams(items[i]);

			if (params.id == json.values.id) {
				items[i].stopObserving();
				items[i].remove();
				break;
			}
		}

		Util.adjustHeight();
	},


	/*
	 * UPDATE THE RELATED WORDS
	 */
	updateRelated: function (request, json) {
		window.setTimeout(function () {
			$('ajax-feedback').hide();
			Util.adjustHeight();
		}, 10000);

		if (json.result == false) {
			$('ajax-feedback').innerHTML = '<p>' + json.error + '</p>';
			$('ajax-feedback').className = 'feedback-failure';
			$('ajax-feedback').show();

			return;

		} else {
			$('ajax-feedback').innerHTML = '<p>' + i18n.saveRelatedSuccess + '</p>';
			$('ajax-feedback').className = 'feedback-success';
			$('ajax-feedback').show();
		}

		var relatedWords = Element.select($('word-related'), 'td div.static span.edit');
		var params;

		for(i=0; i<relatedWords.length; i++) {
			params = Util.parseDataParams(relatedWords[i]);

			if (params.id == json.values.to_word_id) {
				var editedWord = $(relatedWords[i]);
				break;
			}
		}

		if (editedWord) {
			editedWord.writeAttribute('data', 'id=' + json.values.to_word_id + '|word=' + json.values.word_id + '|url=' + json.values.url);
			editedWord.select('span.background')[0].update('&nbsp;' + json.values.related);

		} else {

			var editSpan = new Element('span', {'data': 'id=' + json.values.to_word_id + '|word=' + json.values.word_id + '|url=' + json.values.url});
			var backgroundSpan = new Element('span', {'class': 'background'}).update('&nbsp;' + json.values.related);
			var deleteImg = new Element('img', {'class': 'delete', 'src' : '/images/delete-icon.gif'});

			editSpan.appendChild(backgroundSpan);
			editSpan.appendChild(deleteImg);

			var newRelatedWord = Element.select($('word-related'), 'td div.static button.add')[0];

			newRelatedWord.insert({'before': editSpan});

			//set an eventhandler to handle delete click
			Event.observe(editSpan, 'click', function (event) {
				var editSpan = Event.element(event).up('span');
				var params   = Util.parseDataParams(editSpan);

				if (!Event.element(event).hasClassName('delete')) {
					$('related').value = $(editSpan).select('span.background')[0].innerHTML.replace('&nbsp;', '').strip();
					$('related_id').value = params.id;
	
					Element.select($('word-related'), 'td div.static')[0].hide();
					Element.select($('word-related'), 'td div.editor')[0].show();
					Util.adjustHeight();
				} else {
					if (confirm(i18n.deleteRelatedConfirm)) {
						var ajaxOptions;
	
						ajaxOptions = {
							method: 'post',
							asynchronous: true,
							evalScripts: false,
							onComplete: function (request, json) {
								WordEditor.deleteRelated(request, json)
							},
							parameters: 'to_word_id=' + params.id + '&word_id=' + params.word
						}
	
						new Ajax.Request('/word/deleteRelatedWord', ajaxOptions);
						return false;
					}
				}
			});
		}

		Element.select($('word-related'), 'td div.static')[0].show();
		Element.select($('word-related'), 'td div.editor')[0].hide();

		Util.adjustHeight();
	},


	/*
	 * Delete related
	 */
	deleteRelated: function (request, json) {
		window.setTimeout(function () {
			$('ajax-feedback').hide();
			Util.adjustHeight();
		}, 10000);

		if (json.result === false) {
			$('ajax-feedback').innerHTML = '<p>' + json.error + '</p>';
			$('ajax-feedback').className = 'feedback-failure';
			$('ajax-feedback').show();

			return;

		} else {
			$('ajax-feedback').innerHTML = '<p>' + i18n.deleteRelatedSuccess + '</p>';
			$('ajax-feedback').className = 'feedback-success';
			$('ajax-feedback').show();
		}

		var relatedWords = Element.select($('word-related'), 'td div.static span[data]');
		var params;

		for (var i=0; i<relatedWords.length; i++) {
			params = Util.parseDataParams(relatedWords[i]);

			if (params.id == json.values.to_word_id) {
				relatedWords[i].stopObserving();
				relatedWords[i].remove();
				break;
			}
		}

		Util.adjustHeight();
	},


	/*
	 * update after the modification or adding of an translation 
	 */
	updateTranslations: function (request, json) {
		window.setTimeout(function () {
			$('ajax-feedback').hide();
			Util.adjustHeight();
		}, 10000);

		if (json.result === false) {
			$('ajax-feedback').innerHTML = '<p>' + json.error + '</p>';
			$('ajax-feedback').className = 'feedback-failure';
			$('ajax-feedback').show();

			return;

		} else {
			$('ajax-feedback').innerHTML = '<p>' + i18n.saveTranslationSuccess + '</p>';
			$('ajax-feedback').className = 'feedback-success';
			$('ajax-feedback').show();
		}

		var translations = Element.select($('word-translations'), 'td div.static span.edit');

		for (i=0; i<translations.length; i++) {
			params = Util.parseDataParams(translations[i]);
			
			if (params.id == json.values.id) {
				var translation = $(translations[i]);
				break;
			}
		}

		for (i=0; i<$('language_id').options.length; i++) {
			if ($('language_id').options[i].value == json.values.language_id) {
				json.values.language_name = $('language_id').options[i].innerHTML.strip();
				break;
			}
		}

		if (translation) {
			translation.writeAttribute('data', 'id=' + json.values.id);
			translation.select('span[lang]')[0].writeAttribute('lang', json.values.language_id);
			translation.select('span[lang]')[0].update(json.values.translation);
			translation.select('span.language')[0].update('&nbsp;' + json.values.language_name);

		} else {
		
			var editSpan = new Element('span', {'class': 'edit', 'data': 'id=' + json.values.id});
			var backgroundSpan = new Element('span', {'class': 'background'});
			var languageSpan = new Element('span', {'class': 'language'}).update('&nbsp;' + json.values.language_name);
			var translationSpan = new Element('span', {'lang': json.values.language_id}).update('&nbsp;' + json.values.translation);

			var editImg = new Element('img', {'class': 'edit', 'src': '/images/edit-icon.gif'});
			var deleteImg = new Element('img', {'class': 'delete', 'src': '/images/delete-icon.gif'});
			var recorderImg = new Element('img', {'class': 'recorder', 'src': '/images/recorder-icon.gif'});

			editSpan.appendChild(editImg);
			backgroundSpan.appendChild(languageSpan);
			backgroundSpan.appendChild(document.createTextNode(': '));
			backgroundSpan.appendChild(translationSpan);
			editSpan.appendChild(backgroundSpan);
			editSpan.appendChild(deleteImg);
			editSpan.appendChild(recorderImg);

			var newTranslation = Element.select($('word-translations'), 'td div.static button.add')[0];
			newTranslation.insert({'before': editSpan});

			Event.observe(editSpan, 'click', function (event) {
				var editSpan = Event.element(event).up('span.edit');
				var params   = Util.parseDataParams(editSpan);

				if (Event.element(event).hasClassName('delete')) {
					if (confirm(i18n.deleteTranslationConfirm)) {
						var ajaxOptions;

						ajaxOptions = {
							method: 'post',
							asynchronous: true,
							evalScripts: false,
							onComplete: function (request, json) {
								WordEditor.deleteTranslation(request, json)
							},
							parameters: 'id=' + params.id
						}

						new Ajax.Request('/word/deleteWordTranslation', ajaxOptions);
						return false;
					}
				} else if (Event.element(event).hasClassName('recorder')) {
					WordEditor.activeRecordBtn = Event.element(event);
					recorderStart(params.id, 'translation');

				} else {
					$('translation').value = $(editSpan).select('span[lang]')[0].innerHTML.strip();
					$('translation_id').value = params.id;

					for (var i=0; i<$('language_id').options.length; i++) {
						if ($('language_id').options[i].value == $(editSpan).select('span[lang]')[0].readAttribute('lang')) {
							$('language_id').options[i].selected = true;
						}
					}
	
					Element.select($('word-translations'), 'td div.static')[0].hide();
					Element.select($('word-translations'), 'td div.editor')[0].show();
					Util.adjustHeight();
				}
			});

			Event.observe(editSpan, 'mouseover', function (event) {
				if (Event.element(event).hasClassName('edit')) {
					Event.element(event).addClassName('hover');
				} else {
					Event.element(event).up('span.edit').addClassName('hover');
				}
			});

			Event.observe(editSpan, 'mouseout', function (event) {
				if (Event.element(event).hasClassName('edit')) {
					Event.element(event).removeClassName('hover');
				} else {
					Event.element(event).up('span.edit').removeClassName('hover');
				}
			});
		}

		Element.select($('word-translations'), 'td div.static')[0].show();
		Element.select($('word-translations'), 'td div.editor')[0].hide();

		Util.adjustHeight();
	},


	/*
	 * delete a translation
	 */
	deleteTranslation: function (request, json) {
		window.setTimeout(function () {
			$('ajax-feedback').hide();
			Util.adjustHeight();
		}, 10000);

		if (json.result === false) {
			$('ajax-feedback').innerHTML = '<p>' + json.error + '</p>';
			$('ajax-feedback').className = 'feedback-failure';
			$('ajax-feedback').show();

			return;

		} else {
			$('ajax-feedback').innerHTML = '<p>' + i18n.deleteTranslationSuccess + '</p>';
			$('ajax-feedback').className = 'feedback-success';
			$('ajax-feedback').show();
		}

		var translations = Element.select($('word-translations'), 'td div.static span.edit');
		var params;

		for (var i=0; i<translations.length; i++) {
			params = Util.parseDataParams(translations[i]);

			if (params.id == json.values.id) {
				translations[i].stopObserving();
				translations[i].remove();
				break;
			}
		}

		Util.adjustHeight();
	},

	/*
	 * update an example
	 */
	updateExample: function (request, json) {
		window.setTimeout(function () {
			$('ajax-feedback').hide();
			Util.adjustHeight();
		}, 10000);

		if (json.result === false) {
			$('ajax-feedback').innerHTML = '<p>' + json.error + '</p>';
			$('ajax-feedback').className = 'feedback-failure';
			$('ajax-feedback').show();

			return;

		} else {
			$('ajax-feedback').innerHTML = '<p>' + i18n.saveSentenceSuccess + '</p>';
			$('ajax-feedback').className = 'feedback-success';
			$('ajax-feedback').show();
		}

		var examples = Element.select($('word-examples'), 'td div.static span.edit');
		var params;

		for (i=0; i<examples.length; i++) {
			params = Util.parseDataParams(examples[i]);

			if (params.id == json.values.id) {
				var example = $(examples[i]);
				break;
			}
		}

		if (example) {
			example.select('span.background')[0].update(json.values.sentence);
			example.writeAttribute('data', 'id=' + json.values.id);

		} else {
			var editSpan = new Element('span', {'class': 'edit', 'data': 'id=' + json.values.id});
			var backgroundSpan = new Element('span', {'class': 'background'}).update('&nbsp;' + json.values.sentence);

			var editImg = new Element('img', {'class': 'edit', 'src': '/images/edit-icon.gif'});
			var deleteImg = new Element('img', {'class': 'delete', 'src': '/images/delete-icon.gif'});

			editSpan.appendChild(editImg);
			editSpan.appendChild(backgroundSpan);
			editSpan.appendChild(deleteImg);

			var newExample = Element.select($('word-examples'), 'td div.static button.add')[0];
			newExample.insert({'before': editSpan});

			Event.observe(editSpan, 'click', function (event) {
				var editSpan = Event.element(event).up('span.edit');
				var params   = Util.parseDataParams(editSpan);

				if (Event.element(event).hasClassName('delete')) {
					if (confirm(i18n.deleteSentenceConfirm)) {
						var ajaxOptions;

						ajaxOptions = {
							method: 'post',
							asynchronous: true,
							evalScripts: false,
							onComplete: function (request, json) {
								WordEditor.deleteExample(request, json)
							},
							parameters: 'id=' + params.id
						}

						new Ajax.Request('/word/deleteWordSentence', ajaxOptions);
						return false;
					}
				} else {
					$('sentence').value = editSpan.select('span.background')[0].innerHTML.replace('&nbsp;', '').strip();
					$('sentence_id').value = params.id;

					Element.select($('word-examples'), 'div.static')[0].hide();
					Element.select($('word-examples'), 'div.editor')[0].show();
					Util.adjustHeight();
				}
			});

			Event.observe(editSpan, 'mouseover', function (event) {
				if (Event.element(event).hasClassName('edit')) {
					Event.element(event).addClassName('hover');
				} else {
					Event.element(event).up('span.edit').addClassName('hover');
				}
			});

			Event.observe(editSpan, 'mouseout', function (event) {
				if (Event.element(event).hasClassName('edit')) {
					Event.element(event).removeClassName('hover');
				} else {
					Event.element(event).up('span.edit').removeClassName('hover');
				}
			});
		}

		Element.select($('word-examples'), 'td div.static')[0].show();
		Element.select($('word-examples'), 'td div.editor')[0].hide();

		Util.adjustHeight();
	},
	
	/*
	 * delete an example
	 */
	deleteExample: function (request, json) {
		window.setTimeout(function () {
			$('ajax-feedback').hide();
			Util.adjustHeight();
		}, 10000);

		if (json.result === false) {
			$('ajax-feedback').innerHTML = '<p>' + json.error + '</p>';
			$('ajax-feedback').className = 'feedback-failure';
			$('ajax-feedback').show();

			return;

		} else {
			$('ajax-feedback').innerHTML = '<p>' + i18n.deleteSentenceSuccess + '</p>';
			$('ajax-feedback').className = 'feedback-success';
			$('ajax-feedback').show();
		}

		var examples = Element.select($('word-examples'), 'td div.static span.edit');

		for (i=0; i<examples.length; i++) {
			params = Util.parseDataParams(examples[i]);

			if (params.id == json.values.id) {
				examples[i].stopObserving();
				examples[i].remove();
				break;
			}
		}

		Util.adjustHeight();
	},

	/*
	 * SEARCH RESULTS FOR A RELATED WORD
	 */
	searchRelated: function (request, json) {
		$('related-word-suggestions').innerHTML = '';

		if (json.values.length > 0) {
			var theUL = document.createElement('ul');

			for (var i=0; i<json.values.length; i++) {
				theLI = new Element('li', {'data': 'id=' + json.values[i].related_id + '|word=' + json.values[i].word_id}).update(json.values[i].word);

				Event.observe(theLI, 'click', function (event) {
					var me = Event.element(event);
					var params = Util.parseDataParams(me);

					$('related').value = me.innerHTML;
					$('related_id').value = params.id;

					$('related-word-suggestions').hide();
				});

				theUL.appendChild(theLI);
			}

			$('related-word-suggestions').appendChild(theUL);

			$('related-word-suggestions').style.left = $('related').positionedOffset().left.toString() + 'px';
			$('related-word-suggestions').style.top  = ($('related').positionedOffset().top + $('related').getHeight()).toString() + 'px';

			$('related-word-suggestions').show();
		} else {
			$('related-word-suggestions').hide();
		}
	}
}



/*
 * WORD VIEW
 */
var WordView = {
	defaultComment: '',
	init: function () {
		if ($('word-view')) {
			var wordCell, definitonCell;

			var deleteBtn = Element.select($('word-actions'), 'a.delete')[0];
			if (deleteBtn) {
				Event.observe(deleteBtn, 'click', function (event) {
				  if (!confirm(($(deleteBtn).match('.delete_translations') ? i18n.deleteWordAndTranslationsConfirm : i18n.deleteWordConfirm))) {
						Event.stop(event);
						return false;
					}
				});
			}

			var avatar = Element.select($('user-avatar'), 'img')[0];
			if (avatar) {
				Event.observe(avatar, 'load', function () {
					$('user-avatar').show();
				});
			}

			//embed all the speech players
			var dataSpans = Element.select($('word-view'), 'span[data]');
			var speechSO, vars, params;
			var speechHolders = new Array();

			for(i=0; i<dataSpans.length; i++) {
				if (dataSpans[i].readAttribute('data').indexOf("filename=") > -1) {
					speechHolders.push(dataSpans[i]);
				}
			}

			for (i=0; i<speechHolders.length; i++) {
				var fileName = Util.parseDataParams(speechHolders[i]).filename;
				var speechHolderId = speechHolders[i].identify();

				vars = {file: fileName}
				params = {quality: 'high'}

				swfobject.embedSWF('/flash/player.swf', speechHolderId, '23', '17', '8.0.0', '/flash/expressInstall.swf', vars, params);
			}

			if ($('print-page')) {
				Event.observe($('print-page'), 'click', function () {
					window.print();
				});
			}

			//
			// set the events for the word itself
			//
			wordCell = Element.select($('word-itself'), 'td')[0];
			
			if (wordCell) {
				Event.observe(wordCell, 'mouseover', function (event) {
					var data = Util.parseDataParams(Event.element(event));
					var options = {}

					options.left  = Event.element(event).offsetLeft -35;
					options.top   = Event.element(event).cumulativeOffset().top;
					options.top  += Event.element(event).getHeight() / 2;
					options.top  -= 27;
					options.position = 'left';

					if (data) {
						if (data.avatar) {
							WordView.showAvatar(data.avatar, options);
						}
					}
				});

				Event.observe(wordCell, 'mouseout', WordView.hideAvatar);
			}



			//
			// set the events for the word definition
			//
			definitionCell = Element.select($('word-definition'), 'td')[0];
			if (definitionCell) {
				Event.observe(definitionCell, 'mouseover', function (event) {
					var data = Util.parseDataParams(Event.element(event));
					var options = {}

					options.left  = Event.element(event).offsetLeft -35;
					options.top   = Event.element(event).cumulativeOffset().top;
					options.top  += Event.element(event).getHeight() / 2;
					options.top  -= 27;
					options.position = 'left';

					if (data) {
						if (data.avatar) {
							WordView	.showAvatar(data.avatar, options);
						}
					}
				});

				Event.observe(definitionCell, 'mouseout', WordView.hideAvatar);
			}



			//
			// set the events for the images
			//
			var smallThumbs = Element.select($('word-images'), 'div.small-thumbs img');

			for (i=0; i<smallThumbs.length; i++) {
				Event.observe(smallThumbs[i], 'click', function (event) {
					var params = Util.parseDataParams(Event.element(event))
					$('big-thumb').writeAttribute('src', params.image);
					$('big-thumb').writeAttribute('data', 'avatar=' + params.avatar);
				});
			}

			if ($('big-thumb')) {
				Event.observe($('big-thumb'), 'mouseover', function (event) {
					var data = Util.parseDataParams(Event.element(event));
					var options = {}

					options.left  = Event.element(event).up('td').offsetLeft - 35;
					options.top   = Event.element(event).cumulativeOffset().top;
					options.position = 'left';

					if (data) {
						if (data.avatar) {
							WordView.showAvatar(data.avatar, options);
						}
					}
				});

				Event.observe($('big-thumb'), 'mouseout', WordView.hideAvatar);
				Event.observe($('big-thumb'), 'load', Util.adjustHeight);
			}



			//
			// set the events for the links
			//
			var theLinks = Element.select($('word-links'), 'td a');

			for (i=0; i<theLinks.length; i++) {
				Event.observe(theLinks[i], 'mouseover', function (event) {
					var data = Util.parseDataParams(Event.element(event));
					var options = {}

					options.left  = Event.element(event).up('td').offsetLeft - 35;
					options.top   = Event.element(event).cumulativeOffset().top;
					options.top  += Event.element(event).getHeight() / 2;
					options.top  -= 27;
					options.position = 'left';

					if (data) {
						if (data.avatar) {
							WordView.showAvatar(data.avatar, options);
						}
					}
				});

				Event.observe(theLinks[i], 'mouseout', WordView.hideAvatar);
			}

			var relatedWords = Element.select($('word-related'), 'td a');

			for (i=0; i<relatedWords.length; i++) {
				Event.observe(relatedWords[i], 'mouseover', function (event) {
					var data = Util.parseDataParams(Event.element(event));
					var options = {}

					options.left  = Event.element(event).up('td').offsetLeft -35;
					options.top   = Event.element(event).cumulativeOffset().top;
					options.top  += Event.element(event).getHeight() / 2;
					options.top -= 27;
					options.position = 'left';

					if (data) {
						if (data.avatar) {
							WordView.showAvatar(data.avatar, options);
						}
					}
				});

				Event.observe(relatedWords[i], 'mouseout', WordView.hideAvatar);
			}



			//
			// set the events for the translations
			//
			var translations = Element.select($('word-translations'), 'td table tr');

			for (i=0; i<translations.length; i++) {
				Event.observe(translations[i], 'mouseover', function (event) {
					var theRow  = Event.element(event).up();
					var data    = Util.parseDataParams(theRow);
					var options = {};

					options.left  = theRow.up('td').offsetLeft - 35;
					options.top   = theRow.cumulativeOffset().top;
					options.top  += theRow.getHeight() / 2;
					options.top  -= 27;
					options.position = 'left';

					if (data) {
						if (data.avatar) {
							WordView.showAvatar(data.avatar, options);
						}
					}
				});

				Event.observe(translations[i], 'mouseout', WordView.hideAvatar);
			}



			//
			// set the events for the example sentences
			//
			var examples = Element.select($('word-examples'), 'td span');

			for (i=0; i<examples.length; i++) {
				Event.observe(examples[i], 'mouseover', function (event) {
					var example = Event.element(event);
					example.makePositioned();
					var params = Util.parseDataParams(example);
					var options = {};

					options.left = example.up('td').offsetLeft - 35;
					options.top   = example.cumulativeOffset().top;
					options.top  += example.getHeight() / 2;
					options.top  -= 27;
					options.position = 'left';

					if (params.avatar) {
						WordView.showAvatar(params.avatar, options);
					}
				});

				Event.observe(examples[i], 'mouseout', WordView.hideAvatar);
			}

			//snatch the default comment from the comment form
			if ($('comment')) {
				WordView.defaultComment = $('comment').value;
			}

			//
			// set the delete confirms for the comments
			//
			var deleteComments = Element.select($('word-previous-comments')); // , 'a.delete' ??

			for (i=0; i<deleteComments.length; i++) {
				Event.observe(deleteComments[i], 'click', function (event) {
					if (!confirm(i18n.genericDeleteConfirm)) {
						Event.stop(event);
						return false;
					}
				});
			}
		}
	},

	showAvatar: function (avatarUrl, options) {
		Element.select($('user-avatar'), 'img')[0].writeAttribute('src', avatarUrl);
		$('user-avatar').setStyle({
			top: options.top + 'px',
			left: options.left + 'px'
		});

		if (options.position == 'left') {
			$('user-avatar').removeClassName('arrow-left');
			$('user-avatar').addClassName('arrow-right');
		} else if (options.position == 'right') {
			$('user-avatar').removeClassName('arrow-right');
			$('user-avatar').addClassName('arrow-left');
		}
	},

	hideAvatar: function () {
		$('user-avatar').hide();
	},

	/*
	 * add a comment to the list
	 */
	updateComments: function(request, json) {
		window.setTimeout(function () {
			$('ajax-feedback').hide();
			Util.adjustHeight();
		}, 10000);

		if (json.result === false) {
			$('ajax-feedback').innerHTML = '<p>' + json.error + '</p>';
			$('ajax-feedback').className = 'feedback-failure';
			$('ajax-feedback').show();

			return;

		} else {
			$('ajax-feedback').innerHTML = '<p>' + i18n.saveCommentSuccess + '</p>';
			$('ajax-feedback').className = 'feedback-success';
			$('ajax-feedback').show();
		}

		var commentsCell = Element.select($('word-previous-comments'), 'td')[0];

		var name = new Element('strong').update(json.values.user_name + ': ');
		var avatar = new Element('img', {'src': json.values.avatar_url});
		var paragraph = new Element('p', {'class': 'comment'}).update(json.values.comment);
		var theLineBreak = new Element('br');
		var deleteLink = new Element('a', {'href': '/word/deleteWordComment/id/' + json.values.id, 'class': 'delete'}).update(i18n.deleteLabel);

		Event.observe(deleteLink, 'click', function (event) {
			if (!confirm(i18n.genericDeleteConfirm)) {
				Event.stop(event);
				return false;
			}
		});

		Element.insert(paragraph, {'top': avatar});
		Element.insert(paragraph, {'top': name});
		Element.insert(paragraph, {'bottom': theLineBreak});
		Element.insert(paragraph, {'bottom': deleteLink});
		Element.insert(commentsCell, {'bottom': paragraph});

		$('comment').value = WordView.defaultComment;

		Util.adjustHeight();
	}
}

/*
 * AUTOMATIC PERMISSIONS SETTING
 */
var Permissions = {
	init: function () {
		if ($('permissions')) {
			$$('#permissions .permission').each(
				function (el) {
					Event.observe(el, 'click', Permissions.clickHandler)
				}
			);
		}
	},

	clickHandler: function () {
		if (this.disabled == true) return;

		var numID = this.id.split('_')[1];

		if (this.id.match(/^read/)) {
			if (this.checked) {
				Permissions.setReadOnly(numID);
			} else {
				Permissions.setNone(numID);
			}
		} else if (this.id.match(/^write/)) {
			if (this.checked) {
				Permissions.setReadWrite(numID);
			} else {
				Permissions.setReadOnly(numID);
			}
		}
	},

	setReadOnly: function (numID) {
		$('read_' + numID).checked = true;
		$('write_' + numID).checked = false;
	},

	setReadWrite: function (numID) {
		$('read_' + numID).checked = true;
		$('write_' + numID).checked = true;
	},

	setNone: function (numID) {
		$('read_' + numID).checked = false;
		$('write_' + numID).checked = false;
	}
}

var Euroklex = {
	init: function () {
		if (!$('euroklex')) return;

		if ($('search')) {
			Event.observe($('search'), 'keyup', Euroklex.searchRelated);
			Event.observe($('search'), 'focus', function () {
				if ($('relatedwords_suggestions')) {
					$('relatedwords_suggestions').setStyle({
						'left': $('search').positionedOffset().left,
						'top': $('search').positionedOffset().top + $('search').getDimensions().height,
						'display': 'block'
					});
				}
			});

			Event.observe($('search'), 'blur', function () {
				if ($('relatedwords_suggestions')) {
					if ($('relatedwords_suggestions').select('ul li.hover').length == 0) {
						$('relatedwords_suggestions').setStyle({'display': 'none'});
					}
				}
			});
		}

		if ($('euroklex_related')) {
			var deleteImgs = $('euroklex_related').select('img.delete');

			for (var i=0; i<deleteImgs.length; i++) {
				Event.observe(deleteImgs[i], 'click', Euroklex.deleteRelated);
			}
		}
	},

	searchRelated: function (event) {
		var searchValue = $('search').value;

		if (searchValue == '') return;

		new Ajax.Request('/euroklex/searchOnStart?search_term=' + searchValue + '&language=nl', {
			method: 'get',
			onComplete: Euroklex.showSuggestions
		});
	},

	showSuggestions: function (transport) {
		if (!$('relatedwords_suggestions')) {
			var suggestions = document.createElement('div');
			suggestions = $(suggestions);
			suggestions.writeAttribute('id', 'relatedwords_suggestions');
			suggestions.appendChild(document.createElement('ul'));

			Element.insert($('search').up(), suggestions);

			Event.observe(suggestions.select('ul')[0], 'mouseover', function (event) {
				Event.element(event).addClassName('hover');
			});

			Event.observe(suggestions.select('ul')[0], 'mouseout', function (event) {
				var listItem = Event.element(event);

				listItem.up().select('li').each(function (el) {
					$(el).removeClassName('hover');
				});
			});

			Event.observe(suggestions.select('ul')[0], 'click', Euroklex.selectRelated);
		} else {
			var suggestions = $('relatedwords_suggestions');
		}

		$('relatedwords_suggestions').setStyle({
			'position': 'absolute',
			'left': $('search').positionedOffset().left,
			'top': $('search').positionedOffset().top + $('search').getDimensions().height,
			'display': 'block'
		});

		var suggestionList = suggestions.select('ul')[0];
		suggestionList.innerHTML = '';

		var results = transport.headerJSON;

		if (results.length == 0) $('relatedwords_suggestions').setStyle({'display': 'none'});

		for (var i=0; i<results.length; i++) {
			resultItem = document.createElement('li');
			resultItem.innerHTML = results[i].word;
			resultItem.id = 'suggestion_' + results[i].id;
			suggestionList.appendChild(resultItem);
		}
	},
	
	selectRelated: function (event) {
		var listItem = Event.element(event);
		var selectedWord = listItem.innerHTML;
		var selectedWordId = listItem.id.split('_')[1];

		if ($('id_' + selectedWordId)) {
			$('relatedwords_suggestions').setStyle({'display': 'none'});
			return;
		}

		var span = $(document.createElement('span'));

		var hiddenInput   = document.createElement('input');
		hiddenInput.type  = 'hidden';
		hiddenInput.name  = 'id[' + selectedWordId + ']';
		hiddenInput.value = selectedWord;
		hiddenInput.id    = 'id_'  + selectedWordId;

		var deleteBtn = document.createElement('img');
		deleteBtn.src = '/images/delete-icon.gif';
		deleteBtn.alt = '';
		deleteBtn.className = 'delete';

		Event.observe(deleteBtn, 'click', Euroklex.deleteRelated);

		span.appendChild(hiddenInput);
		span.appendChild(document.createTextNode(selectedWord));
		span.appendChild(deleteBtn);

		$('euroklex_related').insert(span);
		$('relatedwords_suggestions').setStyle({'display': 'none'});
	},
	
	deleteRelated: function (event) {
		var deleteBtn = $(Event.element(event));

		if (confirm(i18n.deleteRelatedConfirm)) {
			deleteBtn.up().remove();
			Event.stop(event);
		}
	}
}