var SUM = 100;
var db;
var data;
var fcnt;
var flen;
var flist;
var $park;
var $fbox;
var $tmpl_animal;
var $tmpl_filter;

init();


function init(){

	$park = $('#park');
	$fbox = $('#filters .filterbox');
	$tmpl_animal = $('#template .animal');
	$tmpl_filter = $('#template .filter');
	$('.prev').click(onPrevClick);
	$('.next').click(onNextClick);

	db = new AnimalData();
	data = db.get(SUM);
	makePark();
	makeFilters();
}

function makePark(){

	var keys = ['name', 'sort', 'food', 'sex', 'age', 'from', 'mind'];
	
	for(var i=0; i<SUM; i++){
		var $animal = $tmpl_animal.clone();
		var mydata = data[i];
		for(var j=0, len=keys.length; j<len; j++){
			var key = keys[j];
			var val = mydata[key] + '';
			var cname = val.toLowerCase();
			$animal.find('.'+key).html(val);
			if(key!='name' || key!='age') $animal.addClass(cname);
		}
		$animal.appendTo($park);
	}
}


function makeFilters(){

	var keys = ['sort', 'food', 'sex', 'from', 'mind'];
	var $tmpl_option = $tmpl_filter.find('.option').eq(0);

	fcnt = 0;
	flen = keys.length;
	flist = [];

	for(var i=0; i<flen; i++){
		var key = keys[i];
		var arr = db.getList(key);
		var $filter = $tmpl_filter.clone();
		var $options = $filter.find('.options');
		$options.empty();
		for(var j=0; j<arr.length; j++){
			$tmpl_option
			.clone()
			.appendTo($options)
			.find('a')
			.html(arr[j])
			.click(onOptionClick);
		}
		$filter.appendTo($fbox).find('.ttl').html(key);
	}
}


function applyFilter(){
	var selector = flist.join(', .');
	if(flist.length!=0) selector = '.' + selector;
	$park.find('.animal').removeClass('on');
	$park.find(selector).addClass('on');
}


function addFilter(_cname){
	var cname = _cname;
	var exist = $.inArray(cname, flist);
	if(exist==-1) flist.push(cname);
}


function removeFilter(_cname){
	var cname = _cname;
	var exist = $.inArray(cname, flist);
	if(exist!=-1) flist.splice(exist, 1);
}


function resetFilter(){
  flist = [];
  applyFilter();
}


function onOptionClick(_e){
	var $self = $(this);
	var cname = $self.text().toLowerCase();
	$self.toggleClass('on');
	if($self.hasClass('on')){
		addFilter(cname);
	}else{
		removeFilter(cname);
	}
	applyFilter();
}


function onPrevClick(_e){
	fcnt = (fcnt-1+flen)%flen;
	$fbox.css('margin-top', (-50*fcnt)+"px");
  resetFilter();
}


function onNextClick(_e){
	fcnt = (fcnt+1)%flen;
	$fbox.css('margin-top', (-50*fcnt)+"px");
  resetFilter();
}