var PortfolioDisplay = {
	sets: [],
	viewlinks: [],
	selectSet: function() {
		var image_set = $($(this).parent()[0]);
		
		// set first photo
		image_set.data('current',1);
		PortfolioDisplay.setImage(image_set);
		// PortfolioDisplay.viewlinkHighlight(image_set);
		
		// set description
		PortfolioDisplay.description.html(image_set.data('description'));
		
		// preload other images	
		for(var i=2,total=image_set.data('items');i<=total;i++) {
			jQuery("<img>").attr("src", 'images/' + image_set.data('key') + '-' + i + '.jpg');
		} 
		
		// show viewlinks
		$('.viewlinks').hide();
		$('.viewlinks',image_set).fadeIn("fast");
		return false;
	},

	viewlinkClick: function() {
		var el = $(this);
		var image_set = $(el.closest('li'));
		var current;
		// get the right index
		switch(el.attr('className')) {
			case 'next':
				current = image_set.data('current') + 1;
				if(current > image_set.data('items')) {
					current = 1;
				}
				break;
			case 'prev':
				current = image_set.data('current') - 1;
				if(current == 0) {
					current = image_set.data('items');
				}
				break;
			default:
				current = parseInt(el.html());
		}
		// set the image
		image_set.data('current',current);
		PortfolioDisplay.setImage(image_set);
		// and highlight 
		PortfolioDisplay.viewlinkHighlight(image_set);
		return false;
	},
	viewlinkHighlight: function(el) {
		var viewlinks = $('.viewlinks a',el);
		viewlinks.removeClass('current');
		viewlinks.eq(el.data('current')).addClass('current');
	},
	setImage: function(image_set) {
		
		// PortfolioDisplay.main_image.hide();
		PortfolioDisplay.main_image.attr('src','images/' + image_set.data('key') + '-' + image_set.data('current') + '.jpg');
		// PortfolioDisplay.main_image.fadeIn('slow');
		
		PortfolioDisplay.viewlinkHighlight(image_set);
	},
	preloadFirst: function() {
		var image_set = $($(this).parent()[0]);
		jQuery("<img>").attr("src", 'images/' + image_set.data('key') + '-1.jpg');
	},
	setup: function() {
		this.thumbs = $('#portfolio-thumbs');
		this.main_image = $('#portfolio-image img');
		this.description = $('#portfolio-description');
		
		// build thumbnails
		var counter = 1;
		jQuery.each(this.sets, function() {
			PortfolioDisplay.buildSet(this,counter);
			counter += this.images;
		});
		// thumb clicks
		this.thumblinks = $('#portfolio-thumbs li>a');
		this.thumblinks.click(this.selectSet);
		this.thumblinks.mouseover(this.preloadFirst);
		$(this.thumblinks[0]).click();
		
		// viewlinks click
		this.viewlinks = $('.viewlinks a');
		this.viewlinks.click(this.viewlinkClick);
		
	},
	buildSet: function(image_set,counter) {
		var item = '<li><a href="#" class="thumb-link"><img src="thumbs/' + image_set.thumb + '.jpg" /></a>';
		if(image_set.images > 1) {
			item += '<div class="viewlinks" style="display: none">';
			item += '<a href="#" class="prev">&lt;</a>&nbsp;';
			for(var i=1;i<=image_set.images;i++) {
				item += '<a href="#" class="number">' + i + '</a>&nbsp;';
			}
			item += '<a href="#" class="next">&gt;</a></div>'			
		}
		item += "</li>";
		var el = jQuery(item);
		el.data('items',image_set.images);
		el.data('key',image_set.thumb);
		el.data('description',image_set.description);
		this.thumbs.append(el);
	}
}
// clear main image as soon as we're loaded

jQuery(document).ready(function() {	
	PortfolioDisplay.setup();
});