var sparkx = {};
sparkx.ui = {}
sparkx.ui.ThumbSlideshow = new Class({
	
	initialize : function(id, data)
	{
		this.el = $(id);
		if (!this.el) return;
		
		this.images = data;
		this._initUi();
	},
	
	_initUi : function()
	{
		var thumbs = this.el.getElements('img.thumb');
		thumbs.addEvent('click', this.thumbClicked.bind(this));
	},
	
	thumbClicked : function(ev)
	{
		var index = $(ev.target).getParent().getAllPrevious().length;
		this.changeImageFromData(index);
	},
	
	changeImageFromData : function(index)
	{
		this.setImage(this.images[index][0]);
		this.setCaption(this.images[index][1]);
	},
	
	setImage : function(url)
	{
		this.el.getElement('.sparkx-ui-thumbslideshow-inner').getElement('img').src = url;
	},
	
	setCaption : function(caption_html)
	{
		this.el.getElement('.sparkx-ui-thumbslideshow-caption').set('html', caption_html);
	}
});