Base.modules.SupportCaseRegister = {
	init: function () {
		this.textareaHeight();
		this.dynamicSelects();
	}, 

	dynamicSelects: function () {
		// This function can be used to build the HTML for a select element and its label
		// You may want to create separate functions to build textareas etc as well
		var buildSelect = function (label, name, elements) {
			var html	= '<p><label>' + label + '<br/><select name="' + name + '">';
			var numEls	= elements.length;
			var i;

			for (i = 0; i < numEls; i++) {
				html += '<option value="' + elements[i].value + '">' + elements[i].label + '</option>';
			}

			html += '</select></label></p>';

			return html;
		};

		// This is an example demonstrating how to build a new select when select[name=foo] has the value 1
		// and hide the new select otherwise. You'll probably use ajax to fetch the elements of the new select
		var foo = $('#support-case-register select[name=foo]');
		var newFooSelect = false;

		// This function builds or removes the new select
		var buildFooSelect = function () {
			if (foo.val() == 1) {
				newFooSelect = $(buildSelect('New select dependant on "foo" being "1"', 'new_select', [
					{label: 'Foo', value: '0'}, 
					{label: 'Bar', value: '1'}
				])).insertAfter(foo.parents('p').eq(0));
			}
			else {
				if (newFooSelect) {
					newFooSelect.remove();
					newFooSelect = false;
				}
			}

			// Remember to adjust the right columns height afterwards
			Base.modules.SupportCaseRegister.textareaHeight();
		};

		// Build on page load and on change
		buildFooSelect();
		foo.change(buildFooSelect);

		// Add your own...
	}, 

	textareaHeight: function () {
		var scr			= $('#support-case-register');
		var left		= scr.find('div.first').eq(0);
		var right		= scr.find('div.second').eq(0);
		var textarea	= right.find('textarea').eq(0);
		var tHeight		= textarea.height();
		var lHeight		= left.height();
		var rHeight		= right.height();

		if (lHeight > rHeight) {
			right.find('textarea').css('height', (tHeight + (lHeight - rHeight)) + 'px');
		}
		else {
			right.find('textarea').css('height', (tHeight - (rHeight - lHeight)) + 'px');
		}
	}
};

