// JScript File
var ImageCollection = new Class({
	options: {
		baseURL: 'http://www.endureed.com/products/'	
	}, 
	initialize: function(images, el, mainImage, collectionTitle) {
		this.collectionTitle = collectionTitle;
		this.images = $A(images);
		this.el = $(el);
		this.mainImage = $(mainImage);
		this.loadImages();
	},
	loadImages: function() {
		this.el.empty(); // Clears HTML in case they click it twice
		//this.el.setHTML('<span style="float: left; line-height: 20px;">More images:</span>');
		this.images.each(function(value, key, obj) {
			if (key === 0) this.loadImage(value); //Set first image to main
 
			this.el.adopt(
				new Element('a', {
					events: {
						click: function(){
							this.loadImage(value); //something to do on click
						}.bind(this)
					},
					'class': 'galleryNumbers' //	class must be in quotes; it is a reserved word in IE
				}).setHTML(key + 1)
			);
		}, this);
	},
	loadImage: function(img) {
	
	    $('collectionTitle').empty(); //Set collection title
		$('collectionTitle').setHTML(this.collectionTitle);
							
		this.mainImage
			.setStyle('opacity', 0)
			.empty()
			.adopt(
				new Asset.image(this.options.baseURL + img + '___Selected.jpg', {
					id: img, 
					title: 'Click to Enlarge', 
					border: 0, 
					onload: this.showImage.bind(this)
				})
				.addEvent('click',function(){enlargeImage(img + '___Source.jpg')})
			);
	},
	showImage: function(cont) {
		this.fx = this.fx || this.mainImage.effect('opacity');
		this.fx.start(0, 1);
	}
});
ImageCollection.implement(new Options);

function enlargeImage(img) {
    window.open('/products/' + img);
}