(function($){

$.fn.screenshots = function(cfg)
{
	 var container = this.eq(0);
	 
	 var settings = {
	 
	 };
	 
	 jQuery.extend(settings,cfg);
	 
	 var thumbPanel = $("<div>").addClass('ss-panel-thumb');
	 var imagePanel = $("<div>").addClass('ss-panel-image');
	 
	 container.append(thumbPanel);
	 container.append(imagePanel);
	 
	 var images = settings.images;
	 
	 $.each(images,function(idx){
	 	var img_full = $("<div>").addClass("ss-img").append($("<img>").attr('src',this.image)).attr('idx',idx)
			.append( $("<div>").addClass("ss-caption").html(this.caption))
			.hide()
			;

	 	var img_thumb = $("<div>").addClass("ss-thumb").append($("<img>").attr('src',this.thumb)).attr('idx',idx);
		img_thumb.bind( 'click', {idx:idx, thumb:img_thumb, img: img_full } , selectScreenshot );
		
	 	thumbPanel.append(img_thumb);
	 	imagePanel.append(img_full);
	 });
	 
	 container.find('.ss-thumb').eq(0).trigger('click');
	 
	 
	 function selectScreenshot(evt)
	 {
		// hide all full images, show the active one
		container.find('.ss-img').hide();
		container.find('.ss-thumb').removeClass("ss-thumb-on");
		evt.data.img.fadeIn(200);				
		evt.data.thumb.addClass("ss-thumb-on");
	 }

}
	
})(jQuery);