/**
 * Class for creating listing fields section.
 * @class This is the Listing fields class.  
 *
 * @param {Array} conf
 *
 * @param {String} conf.id The id div of fields element
 * @param {Array} conf.session The array of last state
 * @param {Boolean} conf.restore Restoring data after updating box
 *
 */
esyndicat.fields = function(conf)
{
	var obj = (-1 != conf.id.indexOf('#')) ? $(conf.id) : $('#' + conf.id);
	var restore = conf.restore ? conf.restore : false;
	var lastState = (typeof conf.session != 'undefined') ? conf.session : new Array();

	var listingFields = new Array();
	

	/**
	 * Return id current category 
	 *
	 * @return {Integer}
	 */
	var getIdCategory = function()
	{
		return $('#category_id').val();
	};

	/**
	 * Return id current plan
	 *
	 * @return {Integer}
	 */
	var getIdPlan = function()
	{
		var id_plan = '';

		if($('#plans').length > 0)
		{
			$("#plans > p > input[@type=radio]").each(function()
			{
				if($(this).attr("checked"))
				{
					id_plan = $(this).val();
				}
			});
		}

		return id_plan;
	};

	/**
	 * Create a listing field
	 *
	 * @param {Array} conf Array of setting listing field
	 */
	var createField = function(conf)
	{
		var html = '';
		var length = conf.length.split(',');

		var min = parseInt(length[0]);
		var max = parseInt(length[1]);

		//html += '<p class="field" id="form_field_'+ conf.name +'">';
		//html += '<strong>' + conf.title + ':</strong>&nbsp;';

		//html += '<br />';

		switch(conf.type)
		{
			case 'text':
                html += '<div class="block_input"><div class="field_textarea" id="form_field_'+ conf.name +'">';
        		html += '<b>' + conf.title + ':</b>';
                html += '<input type="text" class="text" size="45" id="f_' + conf.name + '" value="'+ conf['default'] +'" name="' + conf.name + '" />';
                html += '<span class="instructiuni">&nbsp; ' + conf.tooltip + '</span>';
                html += '</div></div>';
				break;
			case 'textarea':
		        html += '<div class="block_input"><div class="field_textarea" id="form_field_'+ conf.name +'">';
                html += '<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr>';
                html += '<td valign="top" width="85"><b>' + conf.title + ':</b></td>';
                html += '<td valign="top"><textarea cols="55" rows="8" id="f_' + conf.name + '" name="' + conf.name + '">'+ conf['default'] +'</textarea>';
                html += '</td><td valign="top" style="padding-left: 5px; padding-right: 3px;"><span class="instructiuni">' + conf.tooltip + '</span></td></tr></table>';

				if(!isNaN(min) || !isNaN(max))
				{
					html += '<input type="text" id="counter_'+ conf.name +'" />&nbsp;' + esyndicat.lang.characters_count;
				}
                html += '</div></div>';
				break;
			case 'image':
           		html += '<div class="block_input"><div class="field_textarea" id="form_field_'+ conf.name +'">';
        		html += '<b>' + conf.title + ':</b>';
                html += '<input type="file" id="f_' + conf.name + '" name="'+ conf.name +'" size="30" />';
                html += '<span class="instructiuni">&nbsp; ' + conf.tooltip + '</span>';
                html += '</div></div>';
                break;
			case 'combo':
          		html += '<div class="block_input"><div class="field_textarea" id="form_field_'+ conf.name +'">';
        		html += '<b>' + conf.title + ':</b>';
                var values = conf.values.split(',');
				var selected = '';
				
				html += '<select name="'+ conf.name +'" id="f_' + conf.name + '">';

				for(var i = 0; i < values.length; i++)
				{
					selected = '';
					selected = (conf['default'] == values[i]) ? 'selected="selected"' : "";

					html += '<option value="'+ values[i] +'" '+ selected +'>';
					html += conf.labels[values[i]];
					html += '</option>';
				}

				html += '</select>';
                html += '</div></div>';
				break;
			case 'radio':
				var values = conf.values.split(',');
				var checked = '';

				for(var i = 0; i < values.length; i++)
				{
					checked = '';
					checked = (conf['default'] == values[i]) ? 'checked="checked"' : "";

                    html += '<div class="block_input"><div class="field_textarea" id="form_field_'+ conf.name +'">';
		            html += '<b>' + conf.title + ':</b>';
                    html += '<input type="radio" name="'+ conf.name +'" id="f_'+ conf.name + '_' + i +'" value="'+ values[i] +'"'+ checked +'/>';
					html += '<label for="f_'+ conf.name + '_' + i +'">'+ conf.labels[values[i]] +'</label>';
                    html += '</div></div>';
				}

				break;
			case 'checkbox':
				var values = conf.values.split(',');
				var defaults = conf['default'].split(',');
				var checked = '';

				for(var i = 0; i < values.length; i++)
				{
					checked = '';
					checked = (esyndicat.inArray(defaults, values[i])) ? 'checked="checked"' : "";

                    html += '<div class="block_input"><div class="field_textarea" id="form_field_'+ conf.name +'">';
		            html += '<b>' + conf.title + ':</b>';
                    html += '<input type="checkbox" name="'+ conf.name +'[]" id="f_'+ conf.name + '_' + i +'" value="'+ values[i] +'"'+ checked +'/>';
					html += '<label for="f_'+ conf.name + '_' + i +'">'+ conf.labels[values[i]] +'</label>';
                    html += '</div></div>';
				}

				break;
			case 'storage':
                html += '<div class="block_input"><div class="field_textarea" id="form_field_'+ conf.name +'">';
		        html += '<b>' + conf.title + ':</b>';
                html += '<input type="file" id="f_' + conf.name + '" name="'+ conf.name +'" size="25" />';
                html += '</div></div>';
				break;
			case 'number':
           		html += '<div class="block_input"><div class="field_textarea" id="form_field_'+ conf.name +'">';
        		html += '<b>' + conf.title + ':</b>';
                html += '<input type="text" class="text" size="35" id="f_' + conf.name + '" value="'+ conf['default'] +'" name="' + conf.name + '" />';
                html += '</div></div>';
				break;
			default:
				break;
		}

		//html += '</p>';
		html += '<p class="field" id="val_field_'+ conf.name +'" style="display: none;">';
		html += '<strong>' + conf.title + ':</strong>&nbsp;';
		html += '<img class="edit-field" title="'+ esyndicat.lang.edit + ' '+ conf.title +'" alt="'+ esyndicat.lang.edit + ' '+ conf.title +'" src="templates/'+ template_name +'/img/sp.gif" id="edit_button_'+ conf.name +'" />';
		html += '<span></span>';
		html += '</p>';

		obj.append(html);

		// help tooltip initialization
		if('' != conf.tooltip)
		{
			$('#field_tooltip_' + conf.name).tooltip(
			{
				showURL: false, 
				showBody: " - "
			});
		}

		// textcounter for textarea fields initialization
		if('textarea' == conf.type && !isNaN(min) || !isNaN(max))
		{
			var textcounter = new esyndicat.textcounter(
			{
				textarea_el: 'f_' + conf.name,
				counter_el: 'counter_' + conf.name,
				min: min,
				max: max
			});

			textcounter.init();
		}

		if('number' == conf.type)
		{
			$('#f_' + conf.name).keydown(function(e)
			{
				var code = e.which || e.keyCode;

				if(code > 31 && (code < 48 || code > 57))
				{
					return false;
				}

				return true;
			});
		}

		// edit button event handler
		$('#edit_button_'+ conf.name).click(function()
		{
			var nameField = $(this).attr('id').replace('edit_button_', '');

			esyndicat.display('#divSuggestButton', 'hide');
			esyndicat.display('#saveChanges', 'show');

			esyndicat.display('#val_field_' + nameField, 'hide');
			esyndicat.display('#form_field_' + nameField, 'show');

			esyndicat.display('#divSuggestButton', 'hide');
			esyndicat.display('#saveChanges', 'show');
		});
	};

	/**
	 * Fill up the fields section 
	 */
	this.fillFields = function()
	{
		// Save current values
		if(restore)
		{
			saveState();
		}

		// Clearing field box
		obj.empty();

		esyndicat.display(obj, 'hide');

		// Get default ids category and plan
		var idCategory = getIdCategory();
		var idPlan = getIdPlan();

		$.ajaxSetup({async: false});

		// Getting listings fields by AJAX
		$.getJSON('get-fields.php', {action: 'getfields', idcategory: idCategory, idplan: idPlan}, function(fields)
		{
			for(var i = 0; i < fields.length; i++)
			{
				if(restore && '' != lastState)
				{
					for(var j = 0; j < lastState.length; j++)
					{
						if(fields[i].name == lastState[j].name)
						{
							fields[i]['default'] = lastState[j].value;
						}
					}
				}
				createField(fields[i]);
			}
			listingFields = fields;
		});
		
		$.ajaxSetup({async: true});

		esyndicat.display(obj, 'show');
	};

	/**
	 * Conversion the form
	 */
	this.conversion = function()
	{
		for(var i = 0; i < listingFields.length; i++)
		{
			var html = '';

			switch(listingFields[i].type)
			{
				case 'text':
					html += '<br />';
					html += '<i>';
					html += $('#f_' + listingFields[i].name).val();
					html += '</i>';
					break;
				case 'textarea':
					html += '<br />';
					html += '<i>';
					html += $('#f_' + listingFields[i].name).val();
					html += '</i>';
					break;
				case 'combo':
					html += '<br />';
					html += '<i>';
					html += listingFields[i].labels[$('#f_' + listingFields[i].name).val()];
					html += '</i>';
					break;
				case 'radio':
					// TODO: use selectors for getting selected radio element
					var values = listingFields[i].values.split(',');

					for(var j = 0; j < values.length; j++)
					{
						if($('#f_' + listingFields[i].name + '_' + values[j]).attr('checked'))
						{
							html += '<br />';
							html += '<i>';
							html += listingFields[i].labels[$('#f_' + listingFields[i].name + '_' + values[j]).val()];
							html += '</i>';
						}
					}
					break;
				case 'checkbox':
					// TODO: use selectors for getting selected radio element
					var values = listingFields[i].values.split(',');
					var firstElement = true;

					html += '<br />';
					html += '<i>';

					for(var j = 0; j < values.length; j++)
					{
						if($('#f_' + listingFields[i].name + '_' + values[j]).attr('checked'))
						{
							if(values.length > 1)
							{
								if(!firstElement)
								{
									html += ',&nbsp;';
								}
								else
								{
									firstElement = false;
								}
							}
							html += listingFields[i].labels[$('#f_' + listingFields[i].name + '_' + values[j]).val()];
						}
					}

					html += '</i>';
					break;
				case 'storage':
					html += '<br />';
					html += '<i>';
					html += $('#f_' + listingFields[i].name).val();
					html += '</i>';
					break;
				case 'image':
					html += '<br />';
					html += '<i>';
					html += $('#f_' + listingFields[i].name).val();
					html += '</i>';
					break;
				case 'number':
					html += '<br />';
					html += '<i>';
					html += $('#f_' + listingFields[i].name).val();
					html += '</i>';
					break;
				default:
					break;
			}

			$('#val_field_' + listingFields[i].name + ' > span').empty();
			$('#val_field_' + listingFields[i].name + ' > span').append(html);

			esyndicat.display('form_field_' + listingFields[i].name, 'hide');
			esyndicat.display('val_field_' + listingFields[i].name, 'show');
		}
	};

	/**
	 * Saving the values in the form
	 *
	 * @return {Array}
	 *
	 * TODO: Optimize function
	 */
	var saveState = function()
	{
		for(var i = 0; i < listingFields.length; i++)
		{
			switch(listingFields[i].type)
			{
				case 'text':
					lastState[i] = {name: listingFields[i].name, value: $('#f_' + listingFields[i].name).val()};
					break;
				case 'textarea':
					lastState[i] = {name: listingFields[i].name, value: $('#f_' + listingFields[i].name).val()};
					break;
				case 'image':
					lastState[i] = {name: listingFields[i].name, value: $('#f_' + listingFields[i].name).val()};
					break;
				case 'combo':
					lastState[i] = {name: listingFields[i].name, value: $('#f_' + listingFields[i].name).val()};
					break;
				case 'radio':
					var values = listingFields[i].values.split(',');

					for(var j = 0; j < values.length; j++)
					{
						if($('#f_' + listingFields[i].name + '_' + values[j]).attr('checked'))
						{
							lastState[i] = {name: listingFields[i].name, value: $('#f_' + listingFields[i].name + '_' + values[j]).val()};
						}
					}
					break;
				case 'checkbox':
					// TODO: use selectors for getting selected radio element
					var values = listingFields[i].values.split(',');
					var firstElement = true;
					var save = '';

					for(var j = 0; j < values.length; j++)
					{
						if($('#f_' + listingFields[i].name + '_' + values[j]).attr('checked'))
						{
							if(values.length > 1)
							{
								if(!firstElement)
								{
									save += ',';
								}
								else
								{
									firstElement = false;
								}
							}
							save += $('#f_' + listingFields[i].name + '_' + values[j]).val();
						}
					}

					lastState[i] = {name: listingFields[i].name, value: save};
					break;
				case 'storage':
					lastState[i] = {name: listingFields[i].name, value: $('#f_' + listingFields[i].name).val()};
					break;
				case 'number':
					lastState[i] = {name: listingFields[i].name, value: $('#f_' + listingFields[i].name).val()};
				default:
					break;
			}
		}

		return lastState;
	};

	/**
	 * Return the array of last values
	 *
	 * @return {Array} 
	 */
	this.getLastState = function()
	{
		return saveState();
	};

	/**
	 * Return the current id category
	 *
	 * @return {Integer}
	 */
	this.getIdCategory = function()
	{
		return getIdCategory();
	};

	/**
	 * Return the current id plan
	 *
	 * @return {Integer}
	 */
	this.getIdPlan = function()
	{
		return getIdPlan();
	};
}