var boxWidth = 180;
var morphDuration = 200;
var ProductPreviewBox = new Class({
	initialize: function(object){
		this.box = object;
		this.productImageSide = 'front';
		this.productImageView = 'onmodel';
		this.flipBtn = this.box.getElement('a.flipButton');
		if (this.box.getElement('div.productImage img')) {
			this.box.getElements('div.productImage img').setStyles({opacity: 0.9});
		}
		if (!this.box.getElement('div.productImage img.back') && this.flipBtn) {
			this.flipBtn.setStyle('display', 'none');
		}
		this.box.addEvents({
			'mouseenter': function(){
				this.rollover();
			}.bind(this),
			'mouseleave': function(){
				this.rollout();
			}.bind(this),
			'click': function(){
				this.go();
				return false;
			}.bind(this)
		});
		if (this.flipBtn) {
			this.flipBtn.addEvent('click', function(){
				this.flip();
				return false;
			}.bind(this));
		}
	},
	rollover: function(){
		this.box.addClass('productPreviewBoxOver');
		this.box.setStyles({width: boxWidth + 4, marginLeft: -2});
		if (this.box.getElements('div.productImage img')) this.box.getElements('div.productImage img').setStyles({opacity: 1});
	},
	rollout: function(){
		this.box.removeClass('productPreviewBoxOver');
		this.box.setStyles({width: boxWidth, marginLeft: 0});
		if (this.box.getElements('div.productImage img')) this.box.getElements('div.productImage img').morph({opacity: 0.9});
	},
	go: function(){
		document.location = this.box.getElement('h2.productNameLabel a').get('href');
	},
	flip: function(){
		this.box.removeEvents('mouseleave');
		this.box.removeClass('productPreviewBoxOver');
		this.box.getParent().addEvent('mouseleave', function (){this.box.addEvent('mouseleave', function (){this.rollout();}.bind(this));this.box.fireEvent('mouseleave');}.bind(this));
		this.hide(function () {
			this.productImageSide = (this.productImageSide == 'front') ? 'back': 'front';
			this.show();
		}.bind(this));
	},
	show: function(options){
		if (!options) {
			this.setProductImage(this.productImageSide, this.productImageView);
		} else if (options.productImageSide == 'locked') {
			this.setProductImage(this.productImageSide, options.productImageView);
		} else {
			this.setProductImage(options.productImageSide, options.productImageView);
		}
		this.box.set('morph', {onComplete: function() {this.box.getElements('div.productDetails').morph({opacity: 1});this.box.getElements('div.collectionLogo').morph({opacity: 1});this.box.getElements('div.specialFeatureLabel').morph({opacity: 1});if (this.box.shadow) this.box.shadow.fade('in');if($chk(this.box.getParent('td')))this.box.getParent('td').setStyle('display','');}.bind(this)});
		this.box.morph({width: boxWidth, marginLeft: 0});
		if (this.box.getElements('div.productImage img')) this.box.getElements('div.productImage img').morph({opacity: 0.9});
	},
	hide: function(callback){
		if (this.box.getElements('div.productImage img')) this.box.getElements('div.productImage img').morph({opacity: 0});
		this.box.getElements('div.productDetails').setStyles({opacity: 0});
		this.box.getElements('div.collectionLogo').setStyles({opacity: 0});
		this.box.getElements('div.specialFeatureLabel').setStyles({opacity: 0});
		if (!callback) {
			var options = {duration:morphDuration}
		} else {
			var options = {duration:morphDuration, onComplete: callback}
		}
		this.box.set('morph', options);
		this.box.morph({width: 0, marginLeft: boxWidth/2});
		if (this.box.shadow) this.box.shadow.fade('hide');
	},
	update: function(product){
		this.box.getElements('div.productImage img').each(function(item,index){
			item.set('src','');
		});
		this.box.getElement('h2.productNameLabel a').set('text', product.NAME);
		this.box.getElements('div.productImage img').set('alt', product.NAME);
		this.box.getElement('div.productImage a').set('href', product.LINK);
		this.box.getElement('h2.productNameLabel a').set('href', product.LINK);
		var specialFeatureLabel = this.box.getElement('div.specialFeatureLabel');
		if (product.SPECIAL_FEATURES != '') {  // Add/set special feature label
			specialFeatureLabel.getElement('img').set('src', '/' + languageCode + '/images/shop/features/' + product.SPECIAL_FEATURES + '.png');
			specialFeatureLabel.setStyle('display', 'block');
		} else {  // Remove any existing special feature label
			specialFeatureLabel.setStyle('display', 'none');
		}
		if (!product.PROMOTION) {
			this.box.getElement('span.priceLabel span.price').set('text', product.PRICE).setStyle('display', 'block');
			if (this.box.getElement('span.promotionLabel')) {
				this.box.getElement('span.promotionLabel').setStyle('display', 'none');
			}
			this.box.getElement('span.priceLabel span.newprice').setStyle('display', 'none');
			this.box.getElement('span.priceLabel span.oldprice').setStyle('display', 'none');
		} else {
			this.box.getElement('span.priceLabel span.price').setStyle('display', 'none');
			this.box.getElement('span.promotionLabel').set('text', product.PROMOTION.PROMOTION_AMOUNT).setStyle('display', 'block');
			this.box.getElement('span.priceLabel span.newprice').set('text', product.PROMOTION.REDUCED_PRICE).setStyle('display', 'block');
			this.box.getElement('span.priceLabel span.oldprice').set('text', product.PRICE).setStyle('display', 'block');
		}
		this.box.getElement('div.collectionLogo img').set('src', '/common/images/shop/collections/' + product.COLLECTION.CODE + '-small.gif').setProperty('alt',product.COLLECTION.NAME).setProperty('title',product.COLLECTION.NAME);
		var imagesArray = new Array();
		if (this.box.getElement('div.productImage img.front.onmodel')) { 
			if (product.FRONT_ONMODEL_IMAGE != '') {
				this.box.getElement('div.productImage img.front.onmodel').set('src', product.FRONT_ONMODEL_IMAGE);
				imagesArray.push(product.FRONT_ONMODEL_IMAGE);
			} else {
				this.box.getElement('div.productImage img.front.onmodel').set('src', product.FRONT_PRODUCTONLY_IMAGE);
				imagesArray.push(product.FRONT_PRODUCTONLY_IMAGE);
			} 
		}
		if (this.box.getElement('div.productImage img.front.productonly')) { 
			if (product.FRONT_PRODUCTONLY_IMAGE != '') {
				this.box.getElement('div.productImage img.front.productonly').set('src', product.FRONT_PRODUCTONLY_IMAGE);
				imagesArray.push(product.FRONT_PRODUCTONLY_IMAGE);
			} else {
				this.box.getElement('div.productImage img.front.productonly').set('src', product.FRONT_ONMODEL_IMAGE);
				imagesArray.push(product.FRONT_ONMODEL_IMAGE);
			}
		}
		var loader = new Asset.images(imagesArray, {onComplete: function() {
			var side = !this.viewSide ? this.productImageSide : this.viewSide;
			var view = !this.viewMode ? this.productImageView : this.viewMode;
			this.show({'productImageSide': side, 'productImageView': view});
		}.bind(this)});

		var frontImagesOnly = true;
		if (this.box.getElement('div.productImage img.back.onmodel')) {
			if (product.BACK_ONMODEL_IMAGE != '') {
				this.box.getElement('div.productImage img.back.onmodel').set('src', product.BACK_ONMODEL_IMAGE);
				frontImagesOnly = false;
			} else {
				this.box.getElement('div.productImage img.back.onmodel').set('src', product.BACK_PRODUCTONLY_IMAGE);
			}
		}

		if (this.box.getElement('div.productImage img.back.productonly')) {
			if (product.BACK_PRODUCTONLY_IMAGE != '') {
				this.box.getElement('div.productImage img.back.productonly').set('src', product.BACK_PRODUCTONLY_IMAGE);
				frontImagesOnly = false;
			} else {
				this.box.getElement('div.productImage img.back.productonly').set('src', product.BACK_ONMODEL_IMAGE);
			}
			
		}

		// Active/deactivate the flip button
		if (this.flipBtn) {this.flipBtn.setStyle('display', frontImagesOnly ? 'none' : 'block');}
	},
	setProductImage: function(imageSide, imageView){
		this.productImageSide = imageSide;
		this.productImageView = imageView;
		if (this.box.getElement('div.productImage img')) this.box.getElements('div.productImage img').setStyle('display', 'none');
		if (this.box.getElement('div.productImage img.'+ this.productImageSide +'.'+ this.productImageView).getProperty('src')) this.box.getElements('div.productImage img.'+ this.productImageSide +'.'+ this.productImageView).setStyle('display', 'inline');
		else{
			imageView = (this.productImageView == 'onmodel')? 'productonly' : 'onmodel';
			this.box.getElements('div.productImage img.'+ this.productImageSide +'.'+ imageView).setStyle('display', 'inline');
		}
	}
});

var boxObjects = new Array();
window.addEvent('domready', function(){
	$$('div.productPreviewBox').each(function(object, index){
		var box = new ProductPreviewBox(object);
		boxObjects.push(box);
		//box.show();
	});
});