<style type="text/css">
	span, input,textarea {
		font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
		margin:2px 2px 2px 2px;
		font-size:11px;
	}
	
	.header {
		display:table-cell;
		padding-left:4px;
		font-weight:bold;
	}
	
	.tool { 
		display:table-cell;
		vertical-align:top;
		cursor:pointer;
		text-decoration:underline;
		width:30px;
		padding-top:4px;
	}
</style>
<script language="JavaScript">
	
	parameters = {};
	parameters["whowish_word"] = ["word_id","content"];
	
	function get_parameters(module,id)
	{
		params = {id:id};
		
		for (var i=0;i<parameters[module].length;i++)
		{
			var key = parameters[module][i];
			try
			{
				params[key] = $('#'+module+'\\['+id+'\\]\\['+key+'\\]').val();
			} catch (e) {}
		}

		return params;
	}
	
	function clear(module,id)
	{
		$('#save_button\\['+module+'\\]\\['+id+'\\]').attr('class','add_icon');
		for (i in parameters[module])
		{
			try
			{
				params[i] = $('#'+module+'\\['+id+'\\]\\['+i+'\\]').val();
			} catch (e) {}
		}
	}
	
	function reset_error(module, id){
		$('#' + module + '\\[' + id + '\\]').removeClass('error_row');
		
		for (i = 0; i < parameters[module].length; i++) {
			$('#errors\\['+module+'\\]\\[' + id+'\\]\\['+parameters[module][i]+'\\]').css({'display': 'none'});
		}
	}
	
	function get_checked_values(id)
	{
		str = "";
		i = 0;
		while ($(id + '\\[' + i+'\\]'))
		{
			if ($(id + '\\[' + i+'\\]').checked)
			{
				if (str != "") str += ",";
				str += "" + $(id + '\\[' + i+'\\]').value;
			}
			
			i++;
		}
		
		return str;
	}

	function set_error(module,id,error_message)
	{
		$('#save_button\\['+module+'\\]\\['+id+'\\]').attr('class','error_icon');
		$('#'+module+'\\['+id+'\\]').addClass("error_row");
		
		for (i = 0; i < parameters[module].length; i++) {
			
			value = eval('error_message.'+parameters[module][i]+'[0]');
			if (value == null || value == undefined) continue;
			
			$('#errors['+module+'\\]\\[' + id+'\\]\\['+parameters[module][i]+'\\]').css({'display': 'block'});
			$('#errors['+module+'\\]\\[' + id+'\\]\\['+parameters[module][i]+'\\]').html(eval('error_message.'+parameters[module][i]+'[0]'));
		}
	}
	
	function save(module,id)
	{
		//if ($('#save_button_'+module+'_'+id).attr('class') == "ok_icon") return;
		
		$('#save_button\\['+module+'\\]\\['+id+'\\]').loading_button(true);
		
		reset_error(module,id);
		
		params = get_parameters(module,id);
		
		$.post('/'+module+'/change_word', params,
			function(json){
				if (json.ok == true) {
					$('#'+module+'\\['+id+'\\]').removeClass('edited');
				}
				else
				{					
					set_error(module,id,json.error_message);
				}
				
				$('#save_button\\['+module+'\\]\\['+id+'\\]').loading_button(false);
			},"json");
	}
	
	function remove_entry(module,id)
	{
		//if ($('#delete_button_'+module+'_'+id).attr('class') == 'loading_icon') return;
		
		if (!confirm('Are you sure you want to delete this entry?')) return;
		
		$('#delete_button\\['+module+'\\]\\['+id+'\\]').loading_button(true);
		
		reset_error(module,id);
		
		$.post('/'+module+'/delete', {id: id},
			function(json){
				if (json.ok == true) {
					$('#'+module+'\\['+id+'\\]').remove();
				}
				else
				{
					
					
					error_message = function() {};
					error_message[parameters[module][0]] = [json.error_message]; 
					
					set_error(module,id,error_message);
				}
				
				$('#delete_button\\['+module+'\\]\\['+id+'\\]').loading_button(false);
			},"json");
	}
	

	
	
	function add(module,id)
	{
		
		//if ($('#save_button_'+module+'_'+id).attr('class') == 'loading_icon') return;
		
		$('#save_button_'+module+'_'+id).loading_button(true);
		reset_error(module,id);
		
		params = get_parameters(module,id);
		
		$.post('/'+module+'/add', params,
			function(json){
				if (json.ok == true) {
					$('#'+module+'\\['+id+'\\]').removeClass('edited');
					clear(module,id);
					$('#'+module+'\\['+id+'\\]').before(json.new_row);
				}
				else
				{					
					set_error(module,id,json.error_message);
				}
				
				$('#save_button_'+module+'_'+id).loading_button(false);
			},"json");
	}
	
	$(document).ajaxError(function(){
		alert("Cannot connect to server. Please try again later");
	})
	
	function restart_server()
	{
		$.get('/'+module+'/restart', params,
			function(json){
				if (json.ok == true) {
					alert('The server is restarted')
				}
			},"json");
	}

	$(window).bind('beforeunload', function(){
		if ($('.edited').length > 0)
		{
			return "You have unsaved records. Are you sure you want to exits?";
		}
	});
	
</script>
<span style="margin-bottom:20px;width:740px;display:block;">
	* Please use "Finding" function of your browser to find the word you want. Trust me, it is easier.
</span>
<div>
	<div id="row_header" style="display:table-row;">
		<span class="header" style="width:30px;">&nbsp;</span>
		<span class="header" style="width:300px;">Word ID</span>
		<span class="header" style="width:350px;">Content</span>
		<span class="header" style="width:30px;">&nbsp;</span>
	</div>
	<% 
		WhowishWord.all().each do |word|
 	%>
	  	<%=render :partial=>"row", :locals=>{:entity=>word,:field_set=>@fs,:is_new=>false}%>
	<% end %>
	<%=render :partial=>"row", :locals=>{:entity=>WhowishWord.new,:field_set=>@fs,:is_new=>true}%>
</div>