/**
 * => Mootools 1.2
 * 	=> Core
 * @classDescription
 * Classe permettant de changer une image principale par une image miniature au passage de la souris,
 * ou changer l'image principale en fonction d'un attribut.
 * @author M@nu/Baphira
 */
var ImagesViewer = new Class({

	/**
	 * La mini image et l'image principale sont intervertis.
	 */
	TOGGLE: 1,
	/**
	 * La mini image est copiée et remplace l'image principale.
	 * L'image principale revient quand la zone de la mini image est quittée par la souris.
	 * Lors d'un click la mini image devient image principale.
	 */
	REPLACE: 2,
	
	/**
	 * Constructor.
	 * @param {String} idMainPicture <img id="idMainPicture" />
	 * @param {String} idMiniPicturesBox (optional)
	 * ex: 
	 * 	<div id="idMiniPicturesBox">
	 * 		<div><img src="1"/></div>
	 * 		<div><img src="2"/></div>
	 * 		<div class="spacer"></div>
	 *	</div>
	 */
	initialize: function(idMainPicture, idMiniPicturesBox){
		this.viewerType = this.REPLACE;
		
		this.miniPicturesBox = $(''+idMiniPicturesBox);
		if($chk(this.miniPicturesBox)) {
			this.pictureBoxes = this.miniPicturesBox.getElements('div');
		}
		this.mainPictureImg = $(idMainPicture);
		if(!$chk(this.mainPictureImg)) {
			return;
		}
		
		if(this.viewerType == this.REPLACE) {
			this.mainSrc = this.mainPictureImg.getProperty('src');
			this.mainLink = this.mainPictureImg.getParent();
			if(this.mainLink.get('tag') == 'a') {
				this.mainHref = this.mainLink.getProperty('href');
			}
		}
		
		this.productOptions = $('productOptions');
		 
		this.addEvents();
	},
	
	addEvents: function(){
		var me = this;
		
		if($chk(this.productOptions)) {
			var action = function(el, value) {
					var optionValueId = value;
					if(optionValueId != '-1') {
						var productId = $('products_id').value;
						var optionId = el.getProperty('id').replace('product_option','').replace(/[\[\]]/ig,'').replace(/id/ig,'');
						var imgAttr = $('pai-'+productId+'-'+optionId+'-'+optionValueId);
						if($chk(imgAttr)) {
							me.changeMainImg(imgAttr);
						} else {
							// attribut sans image
							me.mainPictureImg.setProperty('src', me.mainSrc);
							me.mainLink.setProperty('href', me.mainHref);
						}
					} else {
						me.mainPictureImg.setProperty('src', me.mainSrc); 
						me.mainLink.setProperty('href', me.mainHref);
					}
			};
			//select
			this.productOptions.getElements('select').each(function(select) {
				select.addEvent('change', function(e) {
					action(select, select.get('value'));
				});
			});
			//radios
			this.productOptions.getElements('input[type=radio]').each(function(input) {
				input.addEvent('click', function(e) {
					action(input, input.value);
				});
			});
		}
		
		if($chk(this.pictureBoxes)) {
			this.pictureBoxes.each(function(pictureDiv) {
				if($chk(pictureDiv.getElement('img'))) {
					this.addMouseEvents(pictureDiv);
				}
			}.bind(this));			
		}
	},
	
	addMouseEvents: function(parentImg) {
		var me = this;
		if(this.viewerType == this.TOGGLE) {
			parentImg.addEvent('mouseenter', function(){
				me.toggleMainPictureImg(this.getElement('img'));
			});
		} else if(this.viewerType == this.REPLACE) {
			parentImg.addEvent('mouseenter', function(){
				me.mainPictureImg.setProperty('src', this.getElement('img').getProperty('src'));
			});
			parentImg.addEvent('mouseleave', function(){
				me.mainPictureImg.setProperty('src', me.mainSrc); 
			});
		}
	},
	
	changeMainImg: function(secondImg) {
		if(this.viewerType == this.TOGGLE) {
			this.toggleMainPictureImg(secondImg);
		} else if(this.viewerType == this.REPLACE) {
			var src = secondImg.getProperty('src');
			this.mainPictureImg.setProperty('src', src);
			if(this.mainLink.get('tag') == 'a') {
				this.mainLink.setProperty('href', src==this.mainSrc?this.mainHref:src);
			}
		}
	},
	
	toggleMainPictureImg: function(otherImg){
		var tmpSrc = this.mainPictureImg.getProperty('src');
		this.mainPictureImg.setProperty('src', otherImg.getProperty('src'));
		otherImg.setProperty('src', tmpSrc);
	}
});