/*
 * module: dsbox_gui_module 
 * 
 * 
 * 
 * 	var gui_ingredient_list_items_module_cfg = {
		gui_uid : "ili",
		gui_node_id_status : "gui_ingredient_list_items_status_div",
		gui_node_id_data   : "gui_ingredient_list_items_table",
			
		cb_init : function(self) {
			self.load();
		},
			
		cb_load_data_start: function(self) {
			var data = {};
			self.load_data_done(data);
		},
			
		cb_save_data_start: function (self) {
			self.save_data_done();
		},

		cb_generate_html_show: function(self, data) {
			var html = "<tr><td>hej</td></tr> <tr><td>med</td></tr> <tr><td>dig</td></tr>";
			return html;
		},
		    
		cb_generate_html_edit: function(self, data) {
			var html = "<small>html_edit</small>";
			return html;
		}		    
	};
	var gui_ingredient_list_items_module = new Y.dsbox.GUIModule(gui_ingredient_list_items_module_cfg);

 */
YUI.add('dsbox_gui_module', function(Y) {
 
    Y.namespace('dsbox');

	var GUIStateLoading = 'loading', 
		GUIStateSaving = 'saving',
		GUIStateEdit = 'edit',
		GUIStateShow = 'show';
    
    Y.dsbox.GUIModule = function(config) {
    	this._state = GUIStateEdit;
    	this._config = config;
    	this._data = {}
    	this._enter_edit_after_loading = false;
    };
    
    Y.dsbox.GUIModule.prototype._get_class_item = function () {
    	return this._config.gui_uid +'_class_item';
    }
    
    Y.dsbox.GUIModule.prototype.start = function () {
    	if(this._config.gui_node_id_status !== undefined) {
        	this._init_status();
    	}
    	this._config.cb_init(this);
    	this.show();
    };
    
    Y.dsbox.GUIModule.prototype.get_delete_enabled = function () {
    	if(this._config.delete_enabled !== undefined) {
        	return this._config.delete_enabled;
    	}
    	return false;
    };

    Y.dsbox.GUIModule.prototype.get_delete_2_enabled = function () {
    	if(this._config.delete_2_enabled !== undefined) {
        	return this._config.delete_2_enabled;
    	}
    	return false;
    };

    Y.dsbox.GUIModule.prototype.show = function () {
    	this._state = GUIStateShow;
    	if (this._config.edit_mode_only) {
    		this.edit();
    	}
    	else {
    		this._update_gui();
    	}
    };

    Y.dsbox.GUIModule.prototype.edit = function () {
    	this._state = GUIStateEdit;
    	this._update_gui();
    	
    	var focus_node = Y.one("#"+this._config.form_node_id_focus);
    	if(focus_node) {
    		focus_node.focus();
    	}
    };

    Y.dsbox.GUIModule.prototype.enter_edit_mode = function () {
		if(this._state == GUIStateLoading) {
			this._enter_edit_after_loading = true;
		}
		else if(this._state == GUIStateSaving) {
			this._enter_edit_after_loading = true;
		}
		else if(this._state == GUIStateShow) {
			this.edit();
		}
		else if(this._state == GUIStateEdit) {
			this.edit();
		}
    };
    
    Y.dsbox.GUIModule.prototype.load = function () {
    	this._state = GUIStateLoading;
    	this._update_gui();
    	this._config.cb_load_data_start(this);
    };

    Y.dsbox.GUIModule.prototype.load_data_done = function (data) {
    	this._data = data;
    	if(this._enter_edit_after_loading) {
    		this.edit();
    	}
    	else {
    		this.show();
    	}
    	this._enter_edit_after_loading = false;
    };
    	
    Y.dsbox.GUIModule.prototype.save = function () {
    	this._state = GUIStateSaving;
    	this._update_gui();
    	this._config.cb_save_data_start(this);
    };
    	
    Y.dsbox.GUIModule.prototype.save_data_done = function () {
    	this.load();
    };
    
    Y.dsbox.GUIModule.prototype._update_gui = function () {
    	if(this._config.gui_node_id_status !== undefined) {
    		this._update_gui_status();
    	}
    	this._update_gui_data();
    };

    Y.dsbox.GUIModule.prototype._update_gui_status = function () {
    	var node_id_div_show = this._config.gui_uid +'_div_show';
    	var node_id_div_edit = this._config.gui_uid +'_div_edit';
    	var node_id_div_loading = this._config.gui_uid +'_div_loading';
    	var node_id_div_saving = this._config.gui_uid +'_div_saving';

		if(this._state == GUIStateShow) {
			Y.one("#"+node_id_div_show).setStyle('display', 'block');
			Y.one("#"+node_id_div_edit).setStyle('display', 'none');
			Y.one("#"+node_id_div_loading).setStyle('display', 'none');
			Y.one("#"+node_id_div_saving).setStyle('display', 'none');
		}    	
		if(this._state == GUIStateEdit) {
			Y.one("#"+node_id_div_show).setStyle('display', 'none');
			Y.one("#"+node_id_div_edit).setStyle('display', 'block');
			Y.one("#"+node_id_div_loading).setStyle('display', 'none');
			Y.one("#"+node_id_div_saving).setStyle('display', 'none');
		}    	
		if(this._state == GUIStateLoading) {
			Y.one("#"+node_id_div_show).setStyle('display', 'none');
			Y.one("#"+node_id_div_edit).setStyle('display', 'none');
			Y.one("#"+node_id_div_loading).setStyle('display', 'block');
			Y.one("#"+node_id_div_saving).setStyle('display', 'none');
		}    	
		if(this._state == GUIStateSaving) {
			Y.one("#"+node_id_div_show).setStyle('display', 'none');
			Y.one("#"+node_id_div_edit).setStyle('display', 'none');
			Y.one("#"+node_id_div_loading).setStyle('display', 'none');
			Y.one("#"+node_id_div_saving).setStyle('display', 'block');
		}    	
    }
    
    Y.dsbox.GUIModule.prototype._clear_data = function () {
    }

    Y.dsbox.GUIModule.prototype._update_gui_data = function () {
    	var node_data = Y.one("#"+this._config.gui_node_id_data);
		if(this._state == GUIStateShow) {
			this._clear_data();
			var html = '<div id="'+this._get_class_item()+'">' + this._config.cb_generate_html_show(this, this._data) + '</div'; 
			node_data.set("innerHTML", html);

		}
		if(this._state == GUIStateEdit) {
			this._clear_data();
			var html = '<div id="'+this._get_class_item()+'">' + this._config.cb_generate_html_edit(this, this._data) + '</div>'; 
			node_data.set("innerHTML", html);
			
			if(this._config.cb_generate_html_edit_post !== undefined) {
				this._config.cb_generate_html_edit_post(this, this._data);
			}
	    	if(this._config.gui_node_id_status !== undefined) {
	    		Y.on("submit", this._click_submit, "#"+this._config.form_node_id_submit, this);
	    	}
			if (this.get_delete_enabled()) {
		    	var node_id_button_delete = this._config.gui_uid +'_button_delete';
        		Y.one("#"+node_id_button_delete).removeAttribute('disabled');
				if(! this._config.cb_is_delete_enabled(this, this._data)) {
	        		Y.one("#"+node_id_button_delete).setAttribute('disabled', 'yes');
				}
			}	    	
			if (this.get_delete_2_enabled()) {
		    	var node_id_button_delete_2 = this._config.gui_uid +'_button_delete_2';
        		Y.one("#"+node_id_button_delete_2).removeAttribute('disabled');
				if(! this._config.cb_is_delete_2_enabled(this, this._data)) {
	        		Y.one("#"+node_id_button_delete_2).setAttribute('disabled', 'yes');
				}
			}	    	
		}
    };

    Y.dsbox.GUIModule.prototype._click_edit = function (e) {
    	this.edit();
    }

    Y.dsbox.GUIModule.prototype._click_cancel = function (e) {
    	this.load();
    }

    Y.dsbox.GUIModule.prototype._click_save = function (e) {
    	this.save();
    }

    Y.dsbox.GUIModule.prototype._click_delete = function (e) {
		if (this.get_delete_enabled()) {
			this._config.cb_delete(this, this._data);
		}
    }

    Y.dsbox.GUIModule.prototype._click_delete_2 = function (e) {
		if (this.get_delete_2_enabled()) {
			this._config.cb_delete_2(this, this._data);
		}
    }

    Y.dsbox.GUIModule.prototype._click_submit = function (e) {
    	this.save();
    	return false;
    }

    Y.dsbox.GUIModule.prototype._init_status = function () {
    	var node_id_button_edit = this._config.gui_uid +'_button_edit';
    	var node_id_button_save = this._config.gui_uid +'_button_save';
    	var node_id_button_delete = this._config.gui_uid +'_button_delete';
    	var node_id_button_delete_2 = this._config.gui_uid +'_button_delete_2';
    	var node_id_button_cancel = this._config.gui_uid +'_button_cancel';
    	
    	var node_id_div_show = this._config.gui_uid +'_div_show';
    	var node_id_div_edit = this._config.gui_uid +'_div_edit';
    	var node_id_div_loading = this._config.gui_uid +'_div_loading';
    	var node_id_div_saving = this._config.gui_uid +'_div_saving';

    	var node_id_div_container = this._config.gui_uid +'_div_container';

    	var html = ''; 
    	html += '<div id="'+node_id_div_show+'" class="dsbox_button_box">';
		html += '  <input class="dsbox_button" type="button" value="'+this._config.dictionary.button_name_edit+'" id="'+node_id_button_edit+'"/></input>';
		html += '</div>';
		html += '<div id="'+node_id_div_edit+'" class="dsbox_button_box">';
		html += '  <input class="dsbox_button" type="button" value="'+this._config.dictionary.button_name_save+'" id="'+node_id_button_save+'"/></input>';
		if (this.get_delete_enabled()) {
			html += '  <input class="dsbox_button dsbox_button_warning" type="button" value="'+this._config.dictionary.button_name_delete+'" id="'+node_id_button_delete+'"/></input>';
		}
		if (this.get_delete_2_enabled()) {
			html += '  <input class="dsbox_button dsbox_button_warning" type="button" value="'+this._config.dictionary.button_name_delete_2+'" id="'+node_id_button_delete_2+'"/></input>';
		}
		html += '</div>';
		html += '<div id="'+node_id_div_loading+'" class="dsbox_button_box_small_for_text">';
		html += this._config.dictionary.text_loading;
		html += '</div>';
		html += '<div id="'+node_id_div_saving+'" class="dsbox_button_box_small_for_text">';
		html += this._config.dictionary.text_saving;
		html += '</div>';
		html += '<br/>';
		Y.one("#"+this._config.gui_node_id_status).set("innerHTML", html);
		Y.on("click", this._click_edit, "#"+node_id_button_edit, this);
		Y.on("click", this._click_save, "#"+node_id_button_save, this);
		Y.on("click", this._click_cancel, "#"+node_id_button_cancel, this);
		Y.on("click", this._click_delete, "#"+node_id_button_delete, this);
		Y.on("click", this._click_delete_2, "#"+node_id_button_delete_2, this);
    };

    
}, '1.0.0', { requires: ['base', 'base-base'] });