/*
 * @Class Fangbole.Filter 列表式的条件过滤器
 * @param filter:Array [[value, name]],
 * @param options:Object
 */
 /*
	沙盘列表条件过滤:
	saleStatusFilter = new Fangbole.Filter({data: [["在售", 1], ["将售", 2], ["售罄", 3]], title: '销售：', style: 't1'}), 
 */
Fangbole.Filter = Class.create({
	initialize: function(options){
		this.options = Object.extend({
			data: [],//条件项列表数据
			current: null,//当前条件项
			title: '',
			style: 't1',//列表样式类型:t1(dl),t2(ul)
			id: '',
			className: '',
			enableSelectAll: true,
			enableSelectAllUrl:'',//存在全部选项是的“全部”的url
			redirect: false,//点击条件是否跳转页  不跳页，href属性加前缀#
			onSelect: Prototype.emptyFunction
		}, options || {})
		
		if(!Object.isArray(this.options.data[0]))//如果条件单项data不是[]
			this.options.data = this.options.data.collect(function(d, i){
				return [d, i];
			})
		
		if(this.options.current == null){//如果不存在当前条件项
			//this.options.current =this.options.enableSelectAllUrl==''?(this.options.enableSelectAll ? '' : this.options.data[0][1]):this.options.enableSelectAllUrl;
			if(this.options.enableSelectAllUrl==''){
				if(this.options.enableSelectAll){
					this.options.current='';
				}else{
					this.options.current=this.options.data[0][1]
				}
			}else{
				this.options.current=this.options.enableSelectAllUrl
			}
		}
		this.onSelect = this.options.onSelect;
		
		var wrapTag = {
			t1: 'dl',
			t2: 'ul'
		}
		
		this.element = new Element(wrapTag[this.options.style], {id: this.options.id, className: this.options.className});//根据列表类型构建框元素
		this.element.observe('click', this.onClick.bindAsEventListener(this));//为框元素绑定点击事件
		//Event.observe(document, 'filter:change', this.onChange.bind(this));
		this._update(this.options.data, this.options.current);//用列表项数据填充列表框元素，并制定当前选项
	},
	onClick: function(e){
		if(!this.options.redirect)
			e.stop();
		var elt = e.element();
		var rValue = /#(.*?)$/;
		
		if(elt.tagName.toUpperCase() == 'A'){
			if(elt.up().hasClassName('current'))return;
			var href = decodeURIComponent(elt.href),
				value = href.match(rValue)[1];
			this.select(value,{page:1});
		}
	},
	_update: function(filter, current){
		var itemTag = {
			t1: 'dd',
			t2: 'li'
		}
		if(this.options.enableSelectAll){//如果存在全部项把全部项添加进filter_data里['全部',enableSelectAllUrl]
			var allUrl=this.options.enableSelectAllUrl=='' ? '':this.options.enableSelectAllUrl;
			filter.unshift(['全部',allUrl]);//
		}
		this.filter = filter.collect(function(item, i){//重构filte_data{name:'全部',value:'',element:null}
			return {value: item[1], name: item[0], element: null};
		});
		var html = this.filter.collect(function(item){//根据filte_data构造htmlStr
			if(!this.options.redirect){
				var noredirectItem = {
					name: item.name,
					value: '#' + item.value || ''
				}
			}
			return Fangbole.Filter.template[this.options.style + 'Item'].evaluate(this.options.redirect ? item: noredirectItem);
		}, this).join('');
		//根据指定的模板把htmlStr和title渲染到文档
		this.element.update(Fangbole.Filter.template[this.options.style].evaluate({list: html, title: this.options.title}));
		var elements = this.element.select(itemTag[this.options.style]);//获取所有项列表元素
		this.filter.each(function(item, i){//把项列表元素对象补充到this.filter
			item.element = elements[i];
		})
		this.select(current);//渲染当前项
	},
	getValue: function(){
		return this.current.value;
	},
	select: function(value,options){
		var option = this.find(value);//根据value找到value值相等的filter_data,value==''返回['全部']
		var page=options&&options.page||null;
		if(option){
			this.update(value);
			Event.fire(this.element, 'filter:change', {value: value, filter: this,page:page});
			//该项被选择时出发绑定在该项上的filter:change事件
		}else
			throw 'option value not exist @ Fangbole.Filter::select';
	},
	update: function(value){//设置当前项样式
		var option = this.find(value);
		if(option){
			if(this.current)//如果已经存在当前项了就去掉当前项样式,设置指定的项为当前项并制定特定样式
				this.current.element.removeClassName('current');		
			this.current = option;
			this.current.element.addClassName('current');
		}
	},
	find: function(value){
		return this.filter.find(function(item){
			if(item.value == value)
				return item
		});
	},
	render: function(element, position){
		var position = position || 'bottom',
			insertion = {};
		insertion[position] = this.element;
		$(element).insert(insertion);
	},
	observe: function(callback){
		this.element.observe('filter:change', callback);
	}
	
})

Object.extend(Fangbole.Filter, {
	template: {
		t1Item: new Template('<dd><a href="#{value}" class="">#{name}</a></dd>'),
		t2Item: new Template('<li><a href="#{value}" class="">#{name}</a></li>'),
		t1: new Template('<dt>#{title}</dt>#{list}'),
		t2: new Template('#{list}')
	}
})