Tower.CategoriesSelector = new Class({
/**
 * OPTIONS
 *
 * Required
 * instanceVar {string}: The instance variable for this class.
 * hiddenInput {string}: The hidden input used to pass in the current categories.
 * summarySpan {string}: The summary span to show the current categories.
 * availableOnly {boolean}: Whether or not extract only available categories.
 *
 * Optional
 * singleSelection {boolean}: If true the category selection will be exclusive.
 * sourceInput {string}: The input used as category tree root.
 * focus {boolean}: Whether the text input should be focused.
 *
 */
initialize: function(options) {
var instance = this;
instance._curCategories = [];
instance._excludes = [];
instance._categoryLabels = {};
instance.options = options;
instance._ns = instance.options.instanceVar || '';
instance._availableOnly = instance.options.availableOnly;
instance._singleSelection = instance.options.singleSelection;
instance._sourceInput = instance.options.sourceInput;
instance._mainContainer = jQuery('<div class="tower-dialog tower-category-select-container"/>');
instance._container = jQuery('<div class="tower-category-container"/>');
var hiddenInput = jQuery('#'+ options.hiddenInput);
instance._setupSelectCategories();
if(options.excludes != '') instance._excludes = options.excludes.split(',');
if(options.curCategories != '') { 
instance._curCategories = options.curCategories.split(',');
if(instance._excludes.length > 0) {
for (var i = 0; i < instance._excludes.length; i++) {
var currentIndex = instance._curCategories.indexOf(instance._excludes[i]);
if(currentIndex != -1) instance._curCategories.splice(currentIndex, 1);
}
}
}
Liferay.Util.actsAsAspect(window);
},
deleteCategory: function(id) {
var instance = this,
curCategories = instance._curCategories;
jQuery('#'+ instance._ns +'CurCategories'+ id).remove();
var value = curCategories.splice(id, 1);
if(instance._popupVisible) jQuery('input[value="'+ value +'"]:checkbox', instance.selectCategoryPopup).removeAttr('checked');
instance._update();
},
toggleTreeNode: function(id) {
var instance = this,
ns = instance._ns,
container = instance._container,
node = container.find('li#'+ ns +'selectCategoriesNode'+ id),
ulToggle = container.find('ul#'+ ns +'selectCategoriesTree'+ id),
ulHasChildren = ulToggle.children().length > 0;
if(ulToggle.is(':hidden')) {
var id = container.find('#'+ ns +'input'+ id).val();
if(!ulHasChildren) instance._populateCategoriesTree(id, ulToggle);
node.addClass('node-open');
} else {
node.removeClass('node-open');
}
ulToggle.toggle();
},
_createPopup: function() {
var instance = this,
ns = instance._ns,
container = instance._container,
mainContainer = instance._mainContainer,
saveBtn = jQuery('<input type="submit" id="'+ ns +'saveButton" value="'+ Liferay.Language.get('confirm') +'"/>'),
actionContainer = jQuery('<div class="tower-dialog-actions"/>');
saveBtn.click(function() {
instance._curCategories = instance._curCategories.length? instance._curCategories : [];
container.find('input:checkbox').each(function() {
var currentIndex = instance._curCategories.indexOf(this.value);
if (this.checked) {
if (currentIndex == -1) instance._curCategories.push(this.value);
} else {
if (currentIndex > -1) instance._curCategories.splice(currentIndex, 1);
}
});
instance._update();
Liferay.Popup.close(instance.selectCategoryPopup);
});
actionContainer.append(saveBtn).after('<div class="clear">&#160;</div>');
mainContainer.append(container).append(actionContainer);
if (!instance.selectCategoryPopup) {
var popup = Liferay.Popup({
modal: false,
resizable: false,
position: 'center',
title: Liferay.Language.get('select-categories'),
width: 700,
message: mainContainer[0],
onClose: function() {
instance._popupVisible = false;
instance.selectCategoryPopup = null;
}
});
instance.selectCategoryPopup = popup;
}
instance._popupVisible = true;
},
_setupSelectCategories: function() {
var instance = this,
options = instance.options,
ns = instance._ns,
input = jQuery('#'+ ns +'selectCategories');
input.click(function() {
instance._showSelectPopup();
});
},
_showSelectPopup: function() {
var instance = this,
options = instance.options,
ns = instance._ns,
mainContainer = instance._mainContainer,
container = instance._container,
sourceInput = instance._sourceInput;
mainContainer.empty();
var html = '<table cellpadding="0" cellspacing="0" class="tower-select-categories">';
html += '<tr>';
html += '<th class="tower-select-categories-head-l">'+ Liferay.Language.get('selection') +'</th>';
html += '<th class="tower-select-categories-head-r">'+ Liferay.Language.get('selected-categories') +'</th>';
html += '</tr>';
html += '<tr>';
html += '<td class="tower-select-categories-l">';
html += '<div class="tower-select-categories-tree">';
html += '<ul id="'+ ns +'selectCategoriesTree" class="tower-tree-list root-list"></ul>';
html += '</div>';
html += '</td>';
html += '<td class="tower-select-categories-r">';
html += '<div id="'+ ns +'selectCategoriesSummary" class="tower-select-categories-summary">';
html += '</div>';
html += '</td>';
html += '</tr>';
html += '</table>';
container.html(html);
var parentCategoryId = 0;
if (sourceInput) {
var sourceInputTarget = jQuery('#'+ sourceInput);
if (sourceInputTarget.length > 0) {
if (!isNaN(sourceInputTarget.val())) parentCategoryId = sourceInputTarget.val();
}
}
instance._populateCategoriesTree(parentCategoryId, container.find('#'+ ns +'selectCategoriesTree'));
instance._createPopup();
var curCategories = instance._curCategories;
jQuery(curCategories).each(function(i, curCategory) {
instance._updateCategoriesSummaryNode(curCategory, false);
});
},
_populateCategoriesTree: function(parentCategoryId, ulTarget) {
var instance = this,
ns = instance._ns,
availableOnly = instance._availableOnly;
var categories = '';
if (!availableOnly) {
categories = Liferay.Service.Tower.TCategory.getTCategories({
parentCategoryId: parentCategoryId
});
} else {
categories = Liferay.Service.Tower.TCategory.getTCategories({
serviceParameterTypes: 'long,boolean',
parentCategoryId: parentCategoryId,
available: availableOnly
});
}
jQuery.each(categories, function(i, category) {
var id = category.categoryId,
parentId = category.parentCategoryId,
name = category.name,
available = category.available,
catChildren = Liferay.Service.Tower.TCategory.getTCategories({ parentCategoryId: id }),
hasChildren = catChildren.length > 0,
ulHidden = ' hide';
var html = '<li id="'+ ns +'selectCategoriesNode'+ id +'" class="tower-tree-item';
if(parentCategoryId == 0 && hasChildren) html += ' node-open';
if(hasChildren) html += ' has-children';
if(i == categories.length -1) html += ' is-last';
html += '">';
html += '<div class="tower-tree-item-content';
if(instance._excludes.indexOf(id.toString()) == -1) html += ' has-selectable';
if(hasChildren) html += ' is-folder';
html += '">';
html += (hasChildren)? '<a href="javascript:void(0);" title="'+ Liferay.Language.get('category') +'"' : '<span';
html += ' id="'+ ns +'toggle'+ id +'" class="tower-tree-ico is-category">&nbsp';
html += (hasChildren)? '</a>' : '</span>';
if (instance._excludes.indexOf(id.toString()) == -1) {
var checked = (instance._curCategories.indexOf(id.toString()) > -1)? ' checked="checked"' : '';
html += '<input'+ checked +' type="checkbox" name="'+ ns +'input'+ id +'" id="'+ ns +'input'+ id +'" value="'+ id +'" class="tower-tree-select-state"/>';
} else {
html += '<input type="hidden" name="'+ ns +'input'+ id +'" id="'+ ns +'input'+ id +'" value="'+ id +'"/>';
}
html += '<label for="'+ ns +'input'+ id +'" class="tower-tree-item-elm'+ (!available? ' is-disabled' : '') +'">'+ name +'</label>';
html += '</div>';
if(parentCategoryId == 0 && hasChildren) ulHidden = '';
if(hasChildren) html += '<ul class="tower-tree-list'+ ulHidden +'" id="'+ ns +'selectCategoriesTree'+ id +'"></ul>';
html += '</li>';
ulTarget.append(html);
//alert(html +' - '+ parentCategoryId +' - '+ hasChildren);
ulTarget.find('a.tower-tree-ico#'+ ns +'toggle'+ id).click(function(){
instance.toggleTreeNode(id);
});
ulTarget.find('input#'+ ns +'input'+ id).click(function() {
var categoryId = this.value;
if (this.checked && instance._singleSelection) {
var categoryInputs = jQuery('#'+ ns +'selectCategoriesTree input[id!="'+ ns +'input'+ id +'"]:checkbox:checked');
categoryInputs.each(function(){
this.checked = false;
instance._updateCategoriesSummaryNode(this.value, true);
});
jQuery(instance._curCategories).each(function(i, curCategory) {
instance._updateCategoriesSummaryNode(curCategory, true);
});
}
instance._updateCategoriesSummaryNode(categoryId, !this.checked);
});
if(parentCategoryId == 0 && hasChildren) instance._populateCategoriesTree(id, ulTarget.find('#'+ ns +'selectCategoriesTree'+ id));
});
},
_updateCategoriesSummaryNode: function(categoryId, remove) {
var instance = this,
add = !remove,
ns = instance._ns,
categoriesSummary = jQuery('#'+ ns +'selectCategoriesSummary', instance.selectCategoryPopup),
categoryNodes = categoriesSummary.find('.tower-select-categories-summary-node'),
categoryNode = categoriesSummary.find('#'+ ns +'categoriesSummaryNode'+ categoryId),
categoryCheck = jQuery('#'+ ns +'input'+ categoryId, instance.selectCategoryPopup);
if (add && categoryNode.length == 0) {
var rowClass = 'even';
if(categoryNodes.length % 2 == 0) rowClass= 'odd';
var html = '<div class="tower-select-categories-summary-node '+ rowClass +'" id="'+ ns +'categoriesSummaryNode'+ categoryId +'">';
html += instance._getCategoryLabel(categoryId) +'&#160;';
html += '<a href="javascript:void(0);" id="'+ ns +'categoriesSummaryNodeDelete'+ categoryId +'">[x]</a>';
html += '</div>';
categoriesSummary.append(html);
categoriesSummary.find('#'+ ns +'categoriesSummaryNodeDelete' + categoryId).click(function() {
var obj = jQuery(this);
categoryCheck.removeAttr('checked');
obj.parent('.tower-select-categories-summary-node').remove();
if (!categoryCheck[0]) {
var currentIndex = instance._curCategories.indexOf(categoryId.toString());
if (currentIndex > -1) instance._curCategories.splice(currentIndex, 1);
}
});
} else if (remove) {
if (categoryNode[0]) categoryNode.remove();
if (!categoryCheck[0]) {
var currentIndex = instance._curCategories.indexOf(categoryId.toString());
if (currentIndex > -1) instance._curCategories.splice(currentIndex, 1);
}
}
},
_update: function() {
var instance = this;
instance._updateHiddenInput();
instance._updateSummarySpan();
},
_updateHiddenInput: function() {
var instance = this,
options = instance.options,
curCategories = instance._curCategories,
hiddenInput = jQuery('#'+ options.hiddenInput);
hiddenInput.val(curCategories.join(','));
},
_updateSummarySpan: function() {
var instance = this,
options = instance.options,
curCategories = instance._curCategories,
html = '';
jQuery(curCategories).each(function(i, curCategory) {
html += '<div class="tower-single-category';
if(i == curCategories.length - 1) html += ' is-last';
if(i % 2 == 0) html += ' odd';
html += '" id="'+ instance._ns +'CurCategories'+ i +'">';
html += instance._getCategoryLabel(curCategory) + '&#160;';
html += '<a href="javascript:'+ instance._ns +'.deleteCategory('+ i +');" title="'+ Liferay.Language.get('delete-category') +'">[x]</a>';
html += '</div>';
});
jQuery('#'+ options.summarySpan).html(html);
},
_getCategoryLabel: function(categoryId) {
var instance = this,
categoryLabels = instance._categoryLabels,
categoryLabel = categoryLabels[categoryId];
if (!categoryLabel) {
categoryLabel = '';
var categories = Liferay.Service.Tower.TCategory.getTCategoryFamilyTree({
categoryId: categoryId
});
jQuery.each(categories, function(i, category) {
if(i == categories.length - 1) categoryLabel += '<strong>';
categoryLabel += category.name;
if(categories.length > 1 && i < categories.length - 1)  categoryLabel += '&#160;/&#160';
if(i == categories.length - 1) categoryLabel += '</strong>';
});
categoryLabels[categoryId] = categoryLabel;
}
return categoryLabel;
}
});