var SearchList = Class.create({
    initialize: function() {

    },
    updateList: function(url) {
	var container = $('search-results-and-pagination');
	var f = $('search-form');
	var handle;

	new Ajax.Request(url || window.location.href, {
	    parameters: f.serialize(true),
	    onCreate: function() { 
		handle = (function() { container.update($('ajax-bar').innerHTML); }).delay(0.5);
	    },
	    onSuccess: function(transport, json) {
		container.update(transport.responseText);
		image_data = json.images;
		imageHandler.handleImages();
		searchForm.onSuccess(transport, json);
	    },
	    onComplete: function(transport) {
		if(handle) window.clearTimeout(handle);
	    }
	});
    }

});

var searchlist = new SearchList();

function updateSearchResults() {
    searchlist.updateList();
}


// image swapping on mouseover
// image_data is a global hash (pk => array of image urls).
var ImageHandler = Class.create({
    initialize: function() {
	this.preloaded = [];
	this.handles = [];
	this.reset_handles = [];
	this.not_first = [];
	$onLoad(this.handleImages.bind(this));
    },
    preload: function(url) {
	var im = new Image();
	im.src = url;
	this.preloaded.push(im);
    },
    nextUrl: function(container, urls) {
	var src = container.down('img').src;
	for(var i = 0; i < urls.length; ++i)
	    if(src.endsWith(urls[i]))
		return urls[(i + 1) % urls.length];
	return urls[0];
    },
    showNextImage: function(container, urls, pk) {
	var img = container.down('img');
 
	Effect.Fade(img, { 
	    duration: 0.5,
	    afterFinish: function() {
		if(this.handles[pk]) {
		    this.onMouseout(pk);
		    this.onMouseover(container, pk, urls);
		}
		img.src = this.nextUrl(container, urls);
		Effect.Appear(img, {
		    duration: 0.5
		});
	    }.bind(this)
	});
	// preload next image
	this.preload(this.nextUrl(container, urls));
    },
	
    handleImages: function() {	
	$$('.image-container').each(this.handleImage.bind(this));
    },
    handleImage: function(c) {
	var id = c.readAttribute('id');
	var pk = parseInt(id.replace(/^image-container-/, ''));
	if(!image_data[pk] || image_data[pk].length == 0) return;
	var image_urls = image_data[pk];
	// much timeout trickery because mouseout is triggered when the image fades and mouseover when it appears.

	// preload first image.
	this.preload(this.nextUrl(c, image_urls));

	c.observe("mouseover", this.onMouseover.curry(c, pk, image_urls).bind(this));
	c.observe("mouseout", this.onMouseout.curry(pk).bind(this));
    },
    onMouseover: function(c, pk, image_urls) {
	if(this.handles[pk]) return;
	
	var initial_delay = 1;
	var delay_between_images = 1;
	this.handles[pk] = this.showNextImage.curry(c, image_urls, pk).bind(this).delay(this.not_first[pk] ? delay_between_images : initial_delay);
	this.not_first[pk] = true;
	if(this.reset_handles[pk]) clearTimeout(this.reset_handles[pk]);
    },
    onMouseout: function(pk) {
	if(this.handles[pk]) {
	    clearInterval(this.handles[pk]); 
	    this.handles[pk]=null;
	}
	this.reset_handles[pk] = (function() { this.not_first = []; }).bind(this).delay(0.25);
    }
});

var imageHandler = new ImageHandler();