var FilterModel = Backbone.Model.extend({

	// model attribute

	filter: {
		category: undefined
	},
	
	ids: undefined,
	
	setFilter: function(category) {
		this.set({filter: {
			category: category
		}});
	}
	
/*
	// when using type of monument:
	
	filter: {
		type: undefined,
		category: undefined
	},
	
	setFilter: function(type, category) {
		this.set({filter: {
			type: type,
			category: category
		}});
	}
*/
	
});

var FilterView = PanelView.extend({
	
	// constants
	
	FILTER_SHOW_DURATION: 200,
	FILTER_HIDE_DURATION: 150,
	
	templates: undefined,
	
	initialize: function(options) {
		// call super.initialize(options)		
		PanelView.prototype.initialize.call(this, this.attributes, options);
	
		this.templates = options.templates;

		this.model.bind('change:filter', this.onFilterChanged, this);
		
		this._initInterface();
		
		var self = this;
		$('fieldset :radio.groupfilter').livequery('click', function () {
			self._toggleGroupFilterVisibility($(this));
		});
		$(':radio').livequery("click", function () {
			self._markFiltersUpdated(this);
		});
	},
	
	show: function() {
		// call super.show()
		PanelView.prototype.show.call(this);
	},
	
	hide: function() {
		// call super.hide()
		PanelView.prototype.hide.call(this);
	},
	
	onFilterChanged: function(model) {
		var filter = model.get('filter');
		if (!filter || filter.category === 0) {
			// reset
//			$('input[name="type"]', this.el)[0].checked = true;
			$('input[name="category"]', this.el)[0].checked = true;
			$('fieldset fieldset fieldset', this.el).hide();
		} else {

			// update interface to filter
			// get group category code: 100 or 200, 300 etc.
			var groupCategoryCode = Math.floor(filter.category / 100) * 100;
			// select the group checkbox
			var $groupRadioButton = $("input[name=category]").filter("[value=" + groupCategoryCode + "]");
			if ($groupRadioButton && $groupRadioButton.length > 0) {
				$groupRadioButton.attr('checked', true);
				this._toggleGroupFilterVisibility($groupRadioButton);
			}

			if (filter.category !== groupCategoryCode) {
				// select the category checkbox			
				var $cb = $("input[name=category]").filter("[value=" + filter.category + "]");
				if ($cb && $cb.length > 0) {
					$cb.attr('checked', true);
				}
			}
		}
		this.render();
	},
	
	updateContentWidth: function () {
    	var innerWidth = PanelView.prototype.updateContentWidth.call(this);
    	    	
    	var fieldsetLabelWidth = innerWidth - (2 * CONSTANTS.layout.PANEL_SIDE_PADDING + CONSTANTS.layout.PANEL_SIDE_PADDING);
		var nestedFieldsetLabelWidth = fieldsetLabelWidth - CONSTANTS.layout.PANEL_SIDE_PADDING;
		
		$('fieldset label', this.el).css({
			width: fieldsetLabelWidth
		});
		$('fieldset fieldset label', this.el).css({
			width: nestedFieldsetLabelWidth
		});
	},
	
	_toggleGroupFilterVisibility: function ($groupRadioButton) {
		var $fieldset = $groupRadioButton.parent().next();
		if ($fieldset.is(":visible")) {
			return;
		}		
		var self = this;
		var after = function() {
			self.updateIScrollbar();
			return this;
		};
		if ($groupRadioButton.attr('checked')) {
			if (this.visibleFilterFieldSet) {
				if (this.visibleFilterFieldSet.is(":visible")) {
					this.visibleFilterFieldSet.hide(this.FILTER_HIDE_DURATION, function () {
						self.updateIScrollbar();
						$fieldset.show(self.FILTER_HIDE_DURATION, after);
					});
				} else {
					$fieldset.show(this.FILTER_SHOW_DURATION, after);
				}
			} else {
				$fieldset.show(this.FILTER_SHOW_DURATION, after);
			}
			this.visibleFilterFieldSet = $fieldset;
		} else {
			$fieldset.hide(this.FILTER_HIDE_DURATION, after);
			this.visibleFilterFieldSet = undefined;
		}
	},
	
	_markFiltersUpdated: function(radioButton) {
		var category = parseInt($(radioButton).val(), 10);
		this.model.setFilter(category);
	},
	
	_initInterface: function() {
		var TEMPLATE = _.template(this.templates.filter.view);
		this.el.html(TEMPLATE());
	}
});