Event.observe(window, 'load', function(){
	var keyword = $('keyword');
	var size = $('size');
	Event.observe(size, 'change', (function(){
		if(Form.Element.getValue(size) == 'optional'){
			var input = document.createElement('input');
			input.name = 'size';
			input.size = '10';
			input.title = '横x縦';
			Element.addClassName(input, 'input-text');
			$('search').getElementsByTagName('fieldset')[0].replaceChild(input, size);
			//input.focus();
			setTimeout(function(){
				Field.focus(input);
			}, 100);
		}
		return arguments.callee;
	})());

	
	var results = $('results') || false;
	
	if(!results){
		return;
	}
	
	var ws = new WallpaperSearch(Form.Element.getValue(keyword), Form.Element.getValue(size));
	ws.addNextPage();

	var body = document.getElementsByTagName('body')[0];
	var res_width = parseInt(Element.getDimensions(results).width * 99 / 100);
	var res_height = parseInt(Element.getDimensions(results).height);
	var current = $('current_results');
	var total = $('total_results');

	var i = 1;
	Event.observe(results, 'scroll', (function(){
		var li = results.getElementsByTagName('li')[0];
		var li_width = (li) ? Element.getDimensions(li).width : 155;
		var li_height = (li) ? Element.getDimensions(li).height : 116;

		var cols = parseInt(res_width / li_width);
		var lines = parseInt(45 / cols);
		if(results.scrollTop >= (lines * li_height / 2) * i){
			ws.addNextPage();
			i++;
		}
		var scr = results.scrollTop;
		var start = parseInt(scr / li_height) * cols + 1;
		var end = parseInt((scr + res_height) / li_height) * cols;
		if(end > ws.getCurrentTotal())end = ws.getCurrentTotal();
		current.innerHTML = [start, end].join('-');

		if(end == ws.getCurrentTotal() && end != +total.innerHTML){
			ws.addNextPage();
			setTimeout(arguments.callee, 1000);
		}
		return arguments.callee;
	})());
	Event.observe(window, 'resize', function(){
		res_width = parseInt(Element.getDimensions(results).width * 99 / 100);
		res_height = parseInt(Element.getDimensions(results).height);
	});
});

var WallpaperSearch = Class.create();
WallpaperSearch.prototype = {
	initialize: function(keyword, size){
		this.keyword = keyword;
		this.size = size;
		this.page = 1;
		this.current_total = $A($('results').getElementsByTagName('li')).length;
	},
	addNextPage: function(){
		if(this.page >= 40)return false;
		var self = this;
		var results = $('results');
		var indicator = this.createIndicator();
		results.appendChild(indicator);
		new Ajax.Request('/search', {
			method: 'get',
			parameters: $H({
				keyword: self.keyword,
				size: self.size,
				page: ++self.page,
				alt: 'json'
			}).toQueryString(),
			onSuccess: function(json){
				eval('var response = ' + json.responseText);
				var total = $('total_results');
				results.removeChild(indicator);
				response.results.each(function(r){
					var li = document.createElement('li');
					var a = document.createElement('a');
					var img = document.createElement('img');

					a.title = r.summary;
					a.href = r.url;
					a.target = '_blank';

					var thumb = r.thumbnail;
					img.src = thumb.url;
					img.width = thumb.width;
					img.height = thumb.height;
					img.alt = r.title;

					a.appendChild(img);
					li.appendChild(a);
					results.appendChild(li);
				});
				total.innerHTML = +total.innerHTML - response.error_count;
				self.current_total += response.results.length;
			},
			onFailure: function(){
				results.removeChild(indicator);
			}
		});
	},
	getCurrentTotal: function(){
		return this.current_total;
	},
	getPage: function(){
		return this.page;
	},
	createIndicator: function(){
		var li = document.createElement('li');
		var img = document.createElement('img');
		img.src = '/images/indicator.gif';
		img.width = '16';
		img.height = '16';
		img.alt = 'Loading...';
		li.appendChild(img);
		return li;
	}
};