/*
---
Class: ProductImageSwap

Swaps the thumbs with the large image.

Paramenters:
	- thumbsElement - (mixed) The Element or id that containes the thumbs.
	- largeElement - (mixed) The Element or id that containes the large image.
	- thumbPaths - (array) The paths to the thumb images as strings.
	- largePaths - (array) The paths to the large images as strings.
	- options - (object) (optional)
		- hrefs - (array) The hrefs that should wrap the large images as anchor hrefs.
		- trigger - (string) The event that should trigger the swap. This is attached to the thumbs.
		- thumbSize - (object) The maximum width and height of thumb images.
		- largeSize - (object) The maximum width and height of large images.
...
*/
var ProductImageSwap = new Class({
	Implements:[Options],
	
	options: {
		trigger: 'click'
	},
	
	initialize: function(thumbsElement, largeElement, thumbPaths, largePaths, options){
		this.thumbsElement = $(thumbsElement);
		this.largeElement = $(largeElement);
		this.thumbPaths = thumbPaths;
		this.largePaths = largePaths;
		this.setOptions(options);
		var bound = this.bound = {};
		bound.imagesLoaded = this.imagesLoaded.bind(this);
		this.largeElement.set('tween', {
			duration: 'short',
			transition: Fx.Transitions.Sine.easeOut
		});
		this.loadImages();
	},
	
	loadImages: function(){
		this.images = new Asset.images($A(this.thumbPaths).combine(this.largePaths), {
			onComplete: this.bound.imagesLoaded
		});
	},
	
	imagesLoaded: function(event){
		var trigger = this.options.trigger;
		
		var thumbImages = [];
		this.thumbPaths.each(function(path, index){
			if (index == 0) return;
			var el = new Element('img', {'src': path});
			el.addEvent(trigger, this.thumbTrigger(index).bindWithEvent(this));
			thumbImages.push(el);
		}, this);
		thumbImages = this.thumbImages = new Elements(thumbImages);
		
		var largeImages = [];
		this.largePaths.each(function(path, index){
			largeImages.push(new Element('img', {'src': path}));
		});
		this.largeImages = new Elements(largeImages);
		
		this.setLargeImage(0);
		this.thumbsElement.empty().adopt(thumbImages);
		thumbImages.each(function(thumb){
			this.checkThumbsSize(thumb);
		}, this);
	},
	
	thumbTrigger: function(index){
		return function(event){
			var largeIndex = this.largeImageIndex;
			this.setLargeImage(index);
			var thumb = event.target;
			thumb.set('src', this.thumbPaths[largeIndex]);
			this.checkThumbsSize(thumb);
			index = largeIndex;
		}
	},
	
	setLargeImage: function(index){
		this.largeImageIndex = index;
		var element = this.largeImages[index];
		var hrefs = this.options.hrefs;
		if (hrefs) element = new Element('a', {'href': hrefs[index]}).adopt(element);
		var largeElement = this.largeElement;
		largeElement.empty().adopt(element);
		var dim = this.checkLargeSize();
		largeElement.tween('height', dim.height);
	},
	
	checkLargeSize: function(){
		var largeSize = this.options.largeSize;
		if (largeSize) return this.checkSize(this.largeImages[this.largeImageIndex], largeSize);
	},
	
	checkThumbsSize: function(thumb){
		var thumbSize = this.options.thumbSize;
		if (thumbSize) return this.checkSize(thumb, thumbSize);
	},
	
	checkSize: function(element, maxDim){
		if (element.get('width')) element.erase('width');
		if (element.get('height')) element.erase('height');
		var dim = element.getSize();
		
		var width = dim.x;
		var height = dim.y;
		var maxWidth = maxDim.width;
		var maxHeight = maxDim.height;
		
		var ratio = 1;
		
		if (width > maxWidth) ratio = maxWidth / width;
		if (Math.floor(height * ratio) > maxHeight) ratio = maxHeight / height;
		
		var newWidth = Math.floor(width * ratio);
		var newHeight = Math.floor(height * ratio);
			
		element.set('width', newWidth);
		element.set('height', newHeight);
		
		return {'width': newWidth, 'height': newHeight};
	}
});