/*
	Describe a product box.
	Used on home page, search result grid and top/bottom visualisation
*/

var boxWidth = 180;
var morphDuration = 200;
var ProductPreviewBox = new Class({
	/* Initialise product box */
	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(false);
				return false;
			}.bind(this));
		}
	},
	/* set Events on the box */
	rollover: function(){
		//this.flip(true);
		
		this.box.addClass('productPreviewBoxOver');
		this.box.setStyles({width: boxWidth + 4, marginLeft: -1, marginRight: -1, marginTop: -1, marginBottom: -1});
		if (this.box.getElements('div.productImage img')) this.box.getElements('div.productImage img').setStyles({opacity: 1});
		this.box.setStyle("z-index",5);
		if (this.box.getParent("div") != null && this.box.getParent("div").getElement('div.shadowBig') != null) {
			this.box.getParent("div").getElement('div.shadowBig').setStyle("display","block");
		}
		//this.box.addShadow4Directions();
	},
	rollout: function(){
		this.box.removeClass('productPreviewBoxOver');
		//this.flip(false);
		this.box.setStyles({width: boxWidth, marginLeft: +1, marginRight: +1, marginTop: +1, marginBottom: +1});
		if (this.box.getElements('div.productImage img')) this.box.getElements('div.productImage img').morph({opacity: 0.9});
		this.box.setStyle("z-index",1);
		if (this.box.getParent("div") != null && this.box.getParent("div").getElement('div.shadowBig') != null) {
			this.box.getParent("div").getElement('div.shadowBig').setStyle("display","none");
		}
		
		//$$('div.shadowBig').dispose();
	},
	go: function(){
		document.location = this.box.getElement('h2.productNameLabel a').get('href');
	},
	/* initialise box animations */
	flip: function(isActive){
		this.box.removeEvents('mouseenter');
		this.box.removeEvents('mouseleave');
		this.box.removeClass('productPreviewBoxOver');
		this.box.getParent().addEvent('mouseenter', function (){this.box.addEvent('mouseenter', function (){this.rollover();}.bind(this));this.box.fireEvent('mouseenter');}.bind(this));
		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();
			//this.show({'isActive': isActive});
		}.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.specialFeatureLabel').morph({opacity: 1});
            if (this.box.shadow) this.box.shadow.setStyle('visibility','');
        }.bind(this)});	
        	this.box.morph({width: boxWidth, marginLeft: +1, marginRight: +1, marginTop: +1, marginBottom: +1});        
		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.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.setStyle('visibility','hidden');
	},
	/* update box content */
	update: function(product){
		this.box.getElements('div.productImage img').each(function(item,index){
			item.set('src','/ecom/common/images/pix-trans.gif');
		});
		this.box.getElement('h2.productNameLabel a').set('text', product.SHORTLABEL);
		this.box.getElements('div.productImage img').set('alt', product.SHORTLABEL);
		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_IMAGE != '' && product.SPECIAL_FEATURES_IMAGE != undefined) {
			specialFeatureLabel.getElement('img').set('src', product.SPECIAL_FEATURES_IMAGE);
			specialFeatureLabel.setStyle('display', 'block');
		} else if (product.SPECIAL_FEATURES != ''  && product.SPECIAL_FEATURES != undefined) {  // Add/set special feature label
			specialFeatureLabel.getElement('img').set('src', '/ecom/' + 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) {
			if(this.box.getElement('span.priceLabel span.price') != null){
				this.box.getElement('span.priceLabel span.price').set('text', product.PRICE).setStyle('display', 'block');
				if (this.box.getElement('div.promotionLabel-block')) {
					this.box.getElement('div.promotionLabel-block').setStyle('display', 'none');
				}
				this.box.getElement('span.priceLabel span.newprice').setStyle('display', 'none');
				this.box.getElement('span.priceLabel span.oldprice').setStyle('display', 'none');
			}	
		} else {
			if(this.box.getElement('span.priceLabel span.price') != null){
				this.box.getElement('span.priceLabel span.price').setStyle('display', 'none');
				if (this.box.getElement('div.promotionLabel-block')) {
					this.box.getElement('div.promotionLabel-block').setStyle('display', 'block');
				}
				if(this.box.getElement('span.promotionLabel') != null){
					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');
			}	
		}
		
		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 {
				if (product.FRONT_PRODUCTONLY_IMAGE != '') {
					this.box.getElement('div.productImage img.front.onmodel').set('src', product.FRONT_PRODUCTONLY_IMAGE);
					imagesArray.push(product.FRONT_PRODUCTONLY_IMAGE);
				} else {
					this.box.getElement('div.productImage img.front.onmodel').set('src', '/ecom/common/images/pix-trans.gif');
				}
			}
		}
		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 {
				if (product.FRONT_ONMODEL_IMAGE != '') {
					this.box.getElement('div.productImage img.front.productonly').set('src', product.FRONT_ONMODEL_IMAGE);
					imagesArray.push(product.FRONT_ONMODEL_IMAGE);
				} else {
					this.box.getElement('div.productImage img.front.productonly').set('src', '/ecom/common/images/pix-trans.gif');
				}
			}
		}
		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 {
				if (product.BACK_PRODUCTONLY_IMAGE != '') {
					this.box.getElement('div.productImage img.back.onmodel').set('src', product.BACK_PRODUCTONLY_IMAGE);
				} else {
					this.box.getElement('div.productImage img.back.onmodel').set('src', '/ecom/common/images/pix-trans.gif');
					this.box.setStyles({width: boxWidth, marginLeft: +1, marginRight: +1, marginTop: +1, marginBottom: +1});
					this.box.getElements('div.productDetails').setStyles({opacity: 1});		
					this.box.getElements('div.specialFeatureLabel').setStyles({opacity: 1});
				}
			}
		}

		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 {
				if (product.BACK_ONMODEL_IMAGE != '') {
					this.box.getElement('div.productImage img.back.productonly').set('src', product.BACK_ONMODEL_IMAGE);
				} else {
					this.box.getElement('div.productImage img.back.productonly').set('src', '/ecom/common/images/pix-trans.gif');
					
				}
			}

		}
		
		//if no image was set, set 1px image so no "red cross" will be displayed (missing img) in IE
		if(this.box.getElement('div.productImage img.front.onmodel').get('src') == null){
			this.box.getElement('div.productImage img.front.onmodel').set('src', "/ecom/common/images/pix-trans.gif");
		}
//		if(this.box.getElement('div.productImage img.front.productonly').get('src') == null){
//			this.box.getElement('div.productImage img.front.productonly').set('src', "/ecom/common/images/pix-trans.gif");
//		}
		if(this.box.getElement('div.productImage img.back.onmodel').get('src') == null){
			this.box.getElement('div.productImage img.back.onmodel').set('src', "/ecom/common/images/pix-trans.gif");
		}
//		if(this.box.getElement('div.productImage img.back.productonly').get('src') == null){
//			this.box.getElement('div.productImage img.back.productonly').set('src', "/ecom/common/images/pix-trans.gif");
//		}

		// Active/deactivate the flip button
		if (this.flipBtn) {this.flipBtn.setStyle('display', frontImagesOnly ? 'none' : 'block');}
	},
	/* set box image */
	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) != null){		
            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);
	});
});