﻿///<summary>
///Manages the menu control with the categories.
///</summary>

var CategoriesMenuControl = Class.create({
	initialize: function (configurator, container) {
		this.options = arguments[2] || {};

		this.container = $(container);
		this.configurator = configurator;

		document.observe("menu:changed", this.updateSubcategories.bind(this));
		Event.observe(window, "unload", this.destroy.bind(this));
	},
	getCategories: function () {
		this.categories = this.configurator.getCategories();

		this.buildMenu();
	},
	buildMenu: function () {
		removeChildrenRecursively(this.container);

		this.buildCategoriesList(this.categories, this.container);

		this.menuDepth = null;
	},
	buildCategoriesList: function (list, container) {
		var htmlList = $(newElement("ul", container, { className: "categories" }));

		list.each(function (category) {
			this.buildCategoryRecursively(category, htmlList);
		} .bind(this));

		return htmlList;
	},
	buildCategoryRecursively: function (category, container) {
		var li = this.buildCategory(category, container);
		var subs = this.configurator.getSelectedSubcategoriesForId(category.Id);

		this.buildCategoriesListWithSiteLinks(subs, li, category).hide();
	},
	buildCategoriesListWithSiteLinks: function (list, container, parentCategory) {
		var htmlList = $(newElement("ul", container, { className: "categories" }));

		list.each(function (category) {
			this.buildCategoryWithSiteLink(category, htmlList);
		} .bind(this));

		this.buildConfigurationLink(newElement("li", htmlList), parentCategory.Id);

		return htmlList;
	},
	buildCategoryWithSiteLink: function (category, container) {
		var li = this.buildCategory(category, container);
		var link = $(newElement("a", null, { href: $globals.root + category.Url, title: category.Name }));
		newElement("img", link, { src: $globals.root + "content/images/seite.gif" });
		li.down().insert({ top: link });

		return li;
	},
	buildCategory: function (category, container) {
		var li = $(newElement("li", container, { id: "category" + category.Id }));
		var categoryContainer = newElement("div", li);
		var checkBox = $(newElement("input", categoryContainer, { type: "checkbox", id: "catCheck" + category.Id, name: "category" }));

		if (category.Checked)
			checkBox.checked = true;
		else if (category.Selected) {
			var parent = category.Parent;
			while (parent) {
				if (parent.Checked) {
					checkBox.checked = true;
					break;
				}

				parent = parent.Parent;
			}
		}

		checkBox.setAttribute("data-category", category.Id);
		checkBox.observe("click", this.onCheckboxChecked.bind(this));
		var link = $(newElement("a", categoryContainer, { title: category.Name, href: "javascript: void 0;" }));
		link.appendChild(document.createTextNode(category.Name));
		link.observe("click", this.toggleSubcategory.bind(this, li));

		return li;
	},
	buildConfigurationLink: function (container, id) {
		var link = $(newElement("a", container, { href: "javascript: void 0;" })).update("mehr...").observe("click", this.showConfigurator.bind(this, id));
	},
	updateSubcategories: function (event) {
		var categoryContainer = $("category" + event.memo.category.Id);
		var list = categoryContainer.down("ul.categories");
		removeChildSafe(list);
		this._showSubcategory(this.buildCategoriesListWithSiteLinks(this.configurator.getSelectedSubcategoriesForId(event.memo.category.Id), categoryContainer, event.memo.category));
	},
	showConfigurator: function (id) {
		this.configurator.toggleCategory(id);
	},
	///toggle categories
	toggleSubcategory: function (container) {
		var list = this.getSubcategoryAsDomElement(container);
		if (!list) return;
		if (list.style.display == "none") {
			var openList = this.getOpenSubcategory();
			if (openList)
				this.hideCategory(openList);

			this.showSubcategory(container);
		}
		else
			this.hideSubcategory(container);
	},
	showSubcategory: function (container) {
		var list = this.getSubcategoryAsDomElement(container);
		this._showSubcategory(list);
	},
	_showSubcategory: function (list) {
		list.style.display = "block";
		list.addClassName("open");
	},
	hideSubcategory: function (container) {
		var list = this.getSubcategoryAsDomElement(container);
		this.hideCategory(list);
	},
	hideCategory: function (list) {
		list.style.display = "none";
		list.removeClassName("open");
		this.configurator.tryHide();
	},
	///data collecting
	getChosenCategories: function () {
		var catIDs = [];
		var subCatCheckboxes = this.container.select(">ul>li>ul>li :checkbox:checked");
		subCatCheckboxes.each(function (checkbox) { catIDs.push(parseInt(this.getCategoryId(checkbox))) } .bind(this));

		return catIDs;
	},
	///checkbox methods
	checkAllSubcategoryCheckboxes: function (parentCheckbox) {
		var checkboxes = this.getSubcategoryCheckboxes(parentCheckbox);
		if (checkboxes.length != 0)
			checkboxes.each(function (checkbox) { this.checkboxCheck(checkbox, parentCheckbox.checked); } .bind(this));
	},
	checkboxCheck: function (checkbox, checked) {
		checkbox.checked = checked;
	},
	///state checkers
	onCheckboxChecked: function (event) {
		var checkbox = event.element();
		this.configurator.markCategory(this.getCheckboxCatId(checkbox), checkbox.checked);

		if (this.isCheckboxTopLevel(checkbox))
			this.checkAllSubcategoryCheckboxes(checkbox);
		else {
			this.checkboxCheck(this.getParentCategoryCheckbox(checkbox), this.allNeighbourCheckBoxesChecked(checkbox));
		}

		this.onMenuChecked();
	},
	onMenuChecked: function () {
		if (this.options.changeHandler)
			this.options.changeHandler(this.getChosenCategories());
	},
	isCheckboxTopLevel: function (checkbox) {
		return $(checkbox).up("ul").up().id == this.container.id;
	},
	allNeighbourCheckBoxesChecked: function (checkbox) {
		var checkboxes = this.getNeighbourSubcategoryCheckboxes(checkbox);
		return checkboxes.all(function (checkbox) { return checkbox.checked; });
	},
	///getters
	getCategoryListById: function (id) {
		var categoryContainer = $("category" + id);
		return categoryContainer ? this.getSubcategoryAsDomElement(categoryContainer) : null;
	},
	getNeighbourSubcategoryCheckboxes: function (checkbox) {
		return $(checkbox).up("ul").select(":checkbox");
	},
	getSubcategoryCheckboxes: function (checkbox) {
		var subcategoryList = $(checkbox).up("li").down("ul");
		return subcategoryList ? subcategoryList.select(":checkbox") : [];
	},
	getSubcategoryAsDomElement: function (container) {
		return container.down("ul");
	},
	getParentCategoryCheckbox: function (checkbox) {
		return $(checkbox).up("li").up("li").down(":checkbox");
	},
	getOpenSubcategory: function () {
		return this.container.down("ul.open");
	},
	getCheckboxCatId: function (checkbox) {
		return checkbox.getAttribute("data-category");
	},
	getCategoryId: function (checkbox) {
		return parseInt(this.getCheckboxCatId(checkbox));
	},
	destroy: function () {
		this.container = null;
	} /*,
	checkAllCategories: function (element) {
		if (element.checked) {
			this.configurator.hide();
			this.configurator.treeManager.tree.each(function (cat) {
				this.configurator.markCategory(cat.Id);

				var topCat = $("catCheck" + cat.Id);
				topCat.checked = true;
				this.checkAllSubcategoryCheckboxes(topCat);
			});
		}
		else {
			this.configurator.treeManager.tree.each(function (cat) {
				this.configurator.markCategory(cat.Id);

				var topCat = $("catCheck" + cat.Id);
				topCat.checked = false;
				this.checkAllSubcategoryCheckboxes(topCat);
			});
		}
	}*/
});
