/**
 * Эта штука делает "сложные списки для фильтрации":
 * ComplexListFilter.show() - показывает попап (модальный, остальное взаимодействие юзера с интерфейсом блокируется),
 * в нем находятся список (или списки) ссылок, можно выбрать от 0 до <скока-хошь> значений из этих списков.
 * Также там находится список выбранных пунктов (определяется в опциях: options.selected - это селектор jquery,
 * чтобы получить элемент списка выбранных пунктов (сам объект jquery для этого списка кэшируется в 
 * объекте ComplexListFilter, в свойстве links_pane)).
 * А еще там должна быть кнопка (<button>) - по клику на нее выбор будет "финализирован" и окно выбора закрыто.
 *
 * При вызове ComplexListFilter.finalize() мод. окно исчезает, и список выбранных пунктов появляется 
 * в панельке #filters-selection (например, "Метро: Бабушкинская, Киевская"). также там появляются скрытые инпуты
 * с именем, которое определяется в опциях (options.hidden) - например, <input type="hidden" name="brand_id[]" /> - 
 * это для случая, когда options.hidden = "brand_id".
 */

ComplexListFilter = function(name, url, options) {
	this.name			= name;
	this.url			= url;
	this.pane			= $('<div/>');// панель выбора
	this.links_pane		= null;// панель с выбранными ссылками (внутри попапа)
	this.selection_pane	= null;// панель, в которой показываем, что выбрано в данном фильтре (на странице)
	this.selected		= {};
	this.options		= {
		width:			800,
		height:			450,
		selected:		null,
		hidden:			null
	};
	$.extend(this.options, options);
	
	this.context		= {};// will be sent as data when loading the panel
	
	if (! this.options.selected) {
		throw "options.selected must be specified";
	}
	if (! this.options.hidden) {
		throw "options.hidden must be specified";
	}
	
	this.loaded = false;
}

ComplexListFilter.prototype = {
	/**
	 * Задать выбранные пункты (обычно при начальной отрисовке, таким образом можно обозначить, какие 
	 * пункты были выбраны юзером при отправке формы на пред. странице)
	 */
	setSelected: function(list) {
		for (var i in list) {
			this.selected[list[i].id] = list[i].name;
		}
		this.updateSelectedList();
	},
	setContext: function(context) {
		this.context = context;
	},
	/**
	 * Показываем мод. окно выбора.
	 */
	show: function() {
		$.blockUI({
			message: this.pane,
			centerX: true, 
    		centerY: true,
    		css: {
    			width:	this.options.width + 'px',
    			height:	this.options.height + 'px',
    			top:	'50%',
    			left:	'50%',
    			margin:	'-' + (Math.floor(this.options.height / 2)) + 'px 0 0 -' + (Math.floor(this.options.width / 2)) + 'px',
    			cursor:	'normal'
    		}
		});
		if (! this.loaded) {// загружаем только 1 раз
			this.loaded = true;
			this.pane.html('loading...');
			var that = this;
			this.pane.load(this.url, this.context, function() {
				that.onload.call(that);
			});
		}
	},
	/**
	 * Вызываем при загрузке ХТМЛ в мод. окно
	 */
	onload: function() {
		var that = this;
		this.pane.find('a[element-id]').click(function(){ return that.add.call(that, this); });
		this.links_pane = this.pane.find(this.options.selected);
		for (var id in this.selected) {
			this.addRemoveLink(id, this.selected[id]);
		}
		var finalizer = function(){ return that.finalize.call(that); };
		$('button.filters-ok', this.pane).click(finalizer);
		$('button.filters-apply', this.pane).click(finalizer);
		$('button.filters-apply', this.pane).click(function() {
			$('form#filter-extended').trigger('submit');
		});
	},
	// добавить к списку выбранных
	add: function(a) {
		a = $(a);
		var id = a.attr('element-id');
		if (id in this.selected) {
			this.remove(this.links_pane.find('a[element-id="' + id + '"]').get(0));
			return false;
		}
		
		a.parent('li').addClass('filter-selected');
		var name = a.text();
		this.selected[id] = name;
		this.addRemoveLink(id, name);
		return false;
	},
	// добавить ссылку в список выбранных в панели выбора.
	// при клике на нее - элемент удаляется из списка выбранных
	addRemoveLink: function(id, name) {
		var a = $('<a href="" element-id="' + id + '">' + name + ' [&times;]</a>');
		var that = this;
		a.click(function() { return that.remove.call(that, this); });
		var li = $('<li/>');
		li.append(a);
		$(this.options.selected).append(li);
	},
	// собсно удаляем элемент из списка выбранных
	remove: function (a) {
		var buf = {};
		var thisid = a.getAttribute('element-id');
		for (var id in this.selected) {
			if (id != thisid) {
				buf[id] = this.selected[id];
			}
		}
		this.selected = buf;

		this.pane.find('a[element-id="' + thisid + '"]').each(function(){
			$(this).parent('li').removeClass('filter-selected');
		});
		
		$(a).parent('li').remove();
		
		return false;
	},
	// выбор сделан, нужно закрыть blockUI,
	// и показать выбранные элементы в панели филтьра 
	finalize: function() {
		$.unblockUI();
		this.updateSelectedList();
	},
	// показываем выбранные элементы в фильтре
	updateSelectedList: function() {
		
		if (! this.selection_pane) {
			this.selection_pane	= $('<div/>');// панель, в которой показываем, что выбрано в данном фильтре
			$('#filters-selection').append(this.selection_pane);
		}
		
		if (this.selectionPaneVisible()) {
			this.selection_pane.show();
		} else {
			this.selection_pane.hide();
		}
		
		this.selection_pane.html('<div><b>' + this.name + '</b>: ' + this.getSelectionHtml() + '</div>');
		var hidden = this.getHiddenInputs();
		for (var i in hidden) {
			this.selection_pane.append('<input type="hidden" name="' + hidden[i].name + '" value="' + hidden[i].value + '" />');
		}
		
		var clear_filter_button = $('<button class="filter-clear">&times;</button>');
		var that = this;
		clear_filter_button.click(function() {
			that.selection_pane.empty();
			that.selection_pane.hide();
			that.selected = {};
			that.links_pane.empty();
			that.pane.find('a[element-id]').each(function(){
				$(this).parent('li').removeClass('filter-selected');
			});
		});
		this.selection_pane.append(clear_filter_button);
	},
	selectionPaneVisible: function() {
		return to_array(this.selected).length;
	},
	getSelectionHtml: function() {
		return to_array(this.selected).join(', ');
	},
	getHiddenInputs: function() {
		var ret = [];
		for (var id in this.selected) {
			ret.push({name: this.options.hidden + '[]', value: id});
		}
		return ret;
	}
}