var formAjax = {

	requestCategories: function(categoryId, showParent, categoryLevel) {
	
		categoryLevel = categoryLevel + 1;
		// BUILD URL
		if(!categoryId) {
			var requestUrl = '/get-categories.html';
		} else {
			var requestUrl = '/get-categories/' + categoryId + '/' + showParent + '.html';
		}
		
		var jsonQuery = new Request.JSON({
			url: requestUrl,
			method: 'GET',
			onRequest: function() {
				for(var i = categoryLevel; i < 5; i++) {
					if($('categoryP' + i)) {
						$('ajaxCategories').removeChild($('categoryP' + i));
					}
				}
			}.bind(this),
			
			onComplete: function(categories) {
			
				var optGroup = false;
				
				var pTag = document.createElement('p');
				pTag.id = 'categoryP' + categoryLevel;
				/*pTag.addClass('selectContainer');*/
				
				var selBox = document.createElement('select');
				selBox.name = 'category[' + categoryLevel + ']';
				selBox.id = 'category' + categoryLevel;
				
				var pleaseSelectShown = false;

				categories.each(function(category) {
					
					optGroup = document.createElement('optgroup');
					optGroup.label = category.categoryName;
					
					if(category.subCategories.length == 0) {
					
						var optOption = document.createElement('option');
						optOption.text = 'No Sub-categories';
						optGroup.appendChild(optOption);
						selBox.disabled = true;
						
					} else {
						if(!pleaseSelectShown) {
							var optOption = document.createElement('option');
							optOption.innerHTML = 'Please Select';
							optOption.value = 'Please Select';
							selBox.appendChild(optOption);
							//selBox.options.add(optOption);
							pleaseSelectShown = true;
						}
						
						category.subCategories.each(function(subCat) {
							var optOption = document.createElement('option');
							optOption.innerHTML = subCat.categoryName;
							optOption.value = subCat.categoryId;
							optGroup.appendChild(optOption);
							//optGroup.add(optOption);
							
						});
						selBox.disabled = false;
					}
						
					if(optGroup) {
						selBox.appendChild(optGroup);
						pTag.appendChild(selBox);
						$('ajaxCategories').appendChild(pTag);
					}	
				});

				$(selBox.id).addEvent('change', function() {
					if(this.value != 'Please Select') {
						formAjax.requestCategories(this.value, true, categoryLevel);
					} else {
						for(var i = categoryLevel + 1; i < 5; i++) {
							if($('categoryP' + i))
								$('ajaxCategories').removeChild($('categoryP' + i));
						}
					}
				});					
			}
		}).send();
	},
	clearCurrent: function() {
		for(var i = categoryLevel; i < 5; i++) {
			if($('categoryP' + i)) {
				$('ajaxCategories').removeChild($('categoryP' + i));
			}
		}
	}
}

window.addEvent('domready', function() {
	if($('ajaxCategories')) {
		if(!$('categoryP1')) {
			formAjax.requestCategories(false, false, 0);
		} else {
			for(var i = 0; i < 5; i++) {
				if($('categoryP' + i)) {
				
					var selectBox = $('category[' + i + ']');
					
					selectBox.addEvent('change', function() {
						var categoryLevel = this.id.toString().substring(9, this.id.length - 1).toInt();
						if(this.value != 'Please Select') {
							formAjax.requestCategories(this.value, true, categoryLevel);
						} else {
							for(var i = categoryLevel + 1; i < 5; i++) {
								if($('categoryP' + i))
									$('ajaxCategories').removeChild($('categoryP' + i));
							}
						}
					});
				}
			}
		}
	}
});