var Lancome = Lancome ? Lancome : new Object()

Lancome.ProductPage = new Class({
								
	Implements: [Options, Lancome.Tools],
	
	favRankImageURL: '/img/_ja/_ja/00catalog/product/favrank{n}.{ext}',
	favRankSmallImageURL: '/img/_ja/_ja/00catalog/product/favrank{n}_small.png',
								
	shadeFamilyName: {
		"00_NEW": "新色",
		"01_N": "ベーシック",
		"02_OR": "オレンジからレッドまで",
		"03_BB": "ベージュからブラウンまで",
		"04_RV": "ピンクからヴァイオレットまで"
	},
	
	priceSuffix: ' 円(税込)',

	initialize: function(options, favRanks){
		
		this.setOptions(options);
		
		this.variantSelector = $('content').getElement('select[name$=VarList]')
		this.priceField = $('content').getElement('input[name=eanprice]')
		this.quantityField = $('content').getElement('input[name$=QtyList]')
		this.shadeElements = $('content').getElements('.all-colors .shade')
		
		this.writeShadeFamilyNames()
		
		this.createVariantsList(this.options.favRanks)
		
		if(this.options.hasShades){
			this.initShadeList()
		}
		
		this.initVariantSelector()
		this.initQuantityField()
		
		
		// Select variant
		var eancode = this.getDefaultVariant()
		
		if(eancode){
			this.selectVariant(eancode)
		}else{
			this.selectFirstVariant()
		}
		
		if(this.options.useShadeTip){
			this.initShadeTip()
		}
		
		
		/* BETA */		
		this.initAjaxAddToCart()
	},
	
	
	createVariantsList: function(favRanks){
		
		if(this.variantSelector){
			//this.variantPrices = new Array()
			this.variants = new Array()
			
			Array.each(this.variantSelector.options, function(option, index){
															  
				var variant = this.variantSelector.options[index].value
				var props = this.getVariantProps(variant)
				
				this.variants[props.sku] = {
					price: props.price
				}
				
				// Check if favorite variant
				if(favRanks && favRanks.get(props.sku)){
					this.variants[props.sku].favrank = favRanks.get(props.sku)
					this.addVariantFavRankIcon(props.sku, favRanks.get(props.sku))
				}
				
			}, this)
		}
		
	},
	
	
	initQuantityField: function(){
		
		if(this.quantityField){
			this.quantityField.addEvent('keyup', this.stripAlphaKeys.bind(this, this.quantityField))
			this.quantityField.addEvent('blur', (function(){
			
				if(this.quantityField.value > this.options.maxItems){
					this.quantityField.value = this.options.maxItems
				}
				
			}).bind(this))
		}
		
	},
	
	
	initShadeList: function(){
		
		this.shadeElements.each(function(el){
		
			el.addEvent('mouseover', (function(){
				el.addClass('hover')
			}).bind(this))
		
			el.addEvent('mouseout', (function(){
				el.removeClass('hover')
			}).bind(this))
		
			el.addEvent('click', (function(){
				this.selectVariant(el.getElement('img').getAttribute('name'))
			}).bind(this))
		
		},this)
		
	},
	
	
	initVariantSelector: function(){
		
		if(this.variantSelector){
			this.variantSelector.addEvent('change', (function(){
			
				var sku = this.getVariantProps(this.variantSelector.value).sku
				this.selectVariant(sku)
			
			}).bind(this))
		}
		
	},
	
	
	selectVariant: function(sku){
		
		if(sku == this.selectedSKU){
			return
		}
		
		this.updatePriceIndicator(this.variants[sku].price)
		this.selectVariantInShadeSelector(sku)

		if(this.options.hasShades){
			this.selectVariantInShadeList(sku)
			this.updateShadePreview(sku)
		}
		
		// Remove previous favorite icon
		var favRankIcon = $('content').getElement('.shade-preview img.favrank')
		if(favRankIcon){

			// Remove VML shapes if any (IE6 only)
			if(typeof(DD_belatedPNG) != "undefined" && favRankIcon.vml){
				favRankIcon.parentNode.removeChild(favRankIcon.vml.color.shape)
				favRankIcon.parentNode.removeChild(favRankIcon.vml.image.shape)
			}
			
			favRankIcon.destroy()
		}
		
		// Show favorite icon
		if(this.variants[sku].favrank){

			var shadeImage = $('content').getElement('.shade-preview img.shade')
			
			var imageURL = this.favRankImageURL.substitute({
															   n: this.variants[sku].favrank,
															   ext: (Browser.Engine.trident && Browser.Engine.version < 5) ? 'gif' : 'png'
														   })
			var favRankIcon = new Element('img', {
			
				'src': imageURL,
				'class': 'favrank'
			
			}, 'bottom')
			
			favRankIcon.inject(shadeImage, 'after')
		}
		
		//
		this.selectedSKU = sku
		
	},
	
	
	selectVariantInShadeList: function(sku){
		
		if(!$('content').getElement('.all-colors')){
			return
		}
		
		var el
		
		if(this.selectedSKU){
			el = $('content').getElement('.all-colors img[name=' + this.selectedSKU + ']')
			el.getParent().removeClass('selected')
		}

		el = $('content').getElement('.all-colors img[name=' + sku + ']')
		if(el){
			el.getParent().addClass('selected')
		}
		
	},
	
	
	selectVariantInShadeSelector: function(sku){
		
		Array.each(this.variantSelector.options, function(option, index){
			var variant = this.variantSelector.options[index].value
			var props = this.getVariantProps(variant)
			
			if(sku == props.sku){
				this.variantSelector.selectedIndex = index
			}

		}, this)
		
	},
	
	
	updateShadePreview: function(sku){
		
		var el = $('content').getElement('.shade-preview')
		
		el.getElement('.shade').src = '/img/space.gif'
		el.getElement('.name').src = '/img/space.gif'
		
		el.getElement('.shade').src = '/img/_db/variants/s/s_' + sku + '.gif'
		el.getElement('.name').src = '/img/_db/variants/t/t_' + sku + '.gif'
		
	},
	
	
	updatePriceIndicator: function(price){
		
		this.priceField.value = price + this.priceSuffix
		
	},
	
	
	getVariantProps: function(variant){
		
		var propsArray = variant.split('#')
		var sku = propsArray[0]
		var price = propsArray[1]
		
		var o = {
			'sku': sku,
			'price': price
		}
		
		return o
		
	},
	
	
	getDefaultVariant: function(){
		
		var hash = location.hash
		var eancode
		if(hash.contains('ean')){
			eancode = hash.replace('#ean','')
		}else{
			var uri = new URI(location.href)
			 eancode = uri.get('data').eancode
		}
		
		if(eancode && this.variants[eancode]){
			return eancode
		}else{
			return false
		}
		
	},
	
	
	selectFirstVariant: function(){
		if(!this.variantSelector || !this.variantSelector.options[0]){
			return
		}
		
		var firstVariant =  this.variantSelector.options[0].value
		var sku = this.getVariantProps(firstVariant).sku
		this.selectVariant(sku)
	},
	
	
	writeShadeFamilyNames: function(){
		
		$('content').getElements('.all-colors .family').each(function(el){
			
			var className = el.className
			var familyCode = className.replace('family ','')
			
			if(familyCode != '' && familyCode != 'family'){
												 
				var familyName = this.shadeFamilyName[familyCode]
				el.appendText(familyName)
				
			}else{
				el.destroy()
			}
		
		},this)
		
	},
	
	
	initShadeTip: function(){
		if(!Tips.Pointy){
			return
		}
		
		var toolTipWidth = Browser.Engine.trident ? '100' : 'auto'
		var toolTip = new Tips.Pointy($('content').getElements('.all-colors .thumbnail'), {

		
			pointyTipOptions: {
			
				width: toolTipWidth,
				point: 'left',
				offset: {
					x: -15,
					y: 0
				}
				
			}
			
			
		})
		
	},
	
	
	addVariantFavRankIcon: function(sku, favrank){
		
		/* Add icon to favorite variants */
		var shadeThumbnail = $('content').getElement('.all-colors img[name=' + sku + '].thumbnail')
		var favRankIcon = new Element('img', {
		
			'src': this.favRankSmallImageURL.substitute({n: favrank}),
			'class': 'favrank'
		
		}, 'bottom')
		favRankIcon.inject(shadeThumbnail, 'after')

	},
	
	
	initAjaxAddToCart: function(){
		
		if(Lancome.Cart && Lancome.Cart.getInstance()){
			
			$('content').getElements('a.addtocart').each(function(el){
				el.addEvent('click', this.addToCartAjax.bind(this))
			},this)
			
		}
		
	},
	
	
	addToCartAjax: function(){
		
		if(Lancome.Cart.getInstance() && this.quantityField.value > 0){
			Lancome.Cart.getInstance().addProduct(this.options.productCode, this.selectedSKU, this.quantityField.value, this.options.productName)
		}
		
	}
	
	
})