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)
	{
		var img = this.images[index];
		
		if (img[0]=='html')
		{
			this.setContent(img[1]);
			this.setCaption('');
		} else {	
			this.setImage(img[0]);
			this.setCaption(img[1]);
		}
	},
	
	setContent : function(html)
	{
		html = html+'<div class="sparkx-ui-thumbslideshow-caption"></div>';
		this.el.getElement('.sparkx-ui-thumbslideshow-inner').set('html', html);
	},
	
	setImage : function(url)
	{
		this.setContent('<img src="'+url+'" />');
	},
	
	setCaption : function(caption_html)
	{
		//console.log(this.el);
		this.el.getElement('.sparkx-ui-thumbslideshow-caption').set('html', caption_html);
	}
});