function collection(collection, imageData) {

	// set properties ------------------------------------------------------------------------------------------------------------------------------------------------
	this.imageData = imageData; // the widths of the images
	
	this.collectionDirectory = 'http://www.tomcodydesign.com/collection/'+collection+'/'; // the directory for images in the defined collection
	
	
	this.swatchContainerID = 'swatch'; // the container that hold the swatch
	this.imageContainerID = 'collection_container'; // the container that holds the full size images
	this.thumbContainerID = 'thumbnails'; // the container that holds the thumbnails
	
	this.currentImage = 0; // the currently active image (front and center)
	
// define methods --------------------------------------------------------------------------------------------------------------------------------------------------------

	// preload all the images in the show
	this.loadImages = function() {

		var loadedThumbnails = {};
		var loadedImages = {};
		var loadedSwatch = new Image();
		loadedSwatch.src = this.collectionDirectory+'swatch.png';
		
		for (var i=0; i<this.imageData.length; i++) // loop over the thumbnails and load them
		{
			loadedThumbnails[i] = new Image();
			loadedThumbnails[i].src = this.collectionDirectory+i+'tn.jpg';
		}

		for (var i=0; i<this.imageData.length; i++) // loop over the images and load them
		{
			loadedImages[i] = new Image();
			loadedImages[i].src = this.collectionDirectory+i+'.jpg';
		}
	}

	this.init = function() {
		
		var swatchSource = '<img src="'+this.collectionDirectory+'swatch.png" />';
		var imageSource = '';
		var thumbSource = '';
		var collectionContainerWidth = 0;

		for (var i=0; i< this.imageData.length; i++)
		{
			imageSource = imageSource + '<img id="img_'+i+'" src="'+this.collectionDirectory+i+'.jpg" class="img "/>';
			thumbSource = thumbSource + '<a href="javascript:void(0)" id="tn_'+i+'" class="thumbnail" onclick="collection.select('+i+')"><img src="'+this.collectionDirectory+i+'tn.jpg" /></a>';
			collectionContainerWidth = collectionContainerWidth + this.imageData[i] + 10;
		}

		$(this.swatchContainerID).update(swatchSource); // update the swatch container
		$(this.imageContainerID).update(imageSource); // update the image container
		$(this.thumbContainerID).update(thumbSource); // update the thumbnail container
		
		this.initalLeftOffset = 440; // the inital left offset of the collection
		this.currentLeftOffset = this.initalLeftOffset - (this.imageData[this.currentImage] / 2); // move the container offset so the first image is in the
		//var newOffset = this.currentLeftOffset +'px';
		$(this.imageContainerID).setStyle({width: collectionContainerWidth+'px',left: this.currentLeftOffset+'px'});
		$('collection').setStyle({width: collectionContainerWidth+'px'});
		
		$('tn_0').className = 'thumbnail_a';
		$('img_0').className = 'img_a';
		
		new Effect.Fade($('loading'), {
			duration:.5,
			afterFinish: function () {
				new Effect.Appear($('swatch'), {duration:1});
				new Effect.Appear($('collection'), {duration:1});
				new Effect.Appear($('thumbnails'), {duration:1});
			}
		});
		
		
	}
	

	this.select = function(imageID) {
		
		if (this.currentImage != imageID) // if the selected image is not already activated
		{
			var pixels = 0;
			
			for (var i=0; i<imageID; i++)
			{
				pixels = pixels + this.imageData[i] + 10;
			}
			
		//	pixels = pixels + (this.imageData[imageID] / 2).floor();
			//pixels = (this.initalLeftOffset - pixels) +'px';
			//$(this.container).setStyle({left: pixels});
			
			if ($('tn_'+this.currentImage)) $('tn_'+this.currentImage).className = 'thumbnail';
			$('tn_'+imageID).className = 'thumbnail_a';
			
			if ($('img_'+this.currentImage)) $('img_'+this.currentImage).className = 'img';
			$('img_'+imageID).className = 'img_a';
			
			this.currentImage = imageID;
			// 					
			move = this.currentLeftOffset - pixels;
			// 					
			new Effect.Move(this.imageContainerID, { x: move, y: 0, mode: 'absolute' });
			
		}
		
	}

}