motorola.controls.SupportProduct = new Class({
	Implements: [Events, Options],
	options: {
		badgeClass: 'remarks',
		el: null,
		highlightedStyles: '',
		init: true,
		unhighlightedStyles: ''
	},
	config: {
		productContent: '.productContent',
		productImgClass: 'productImg'
	},
	events: {
		highlight: $empty,
		removeHighlight: $empty,
		select: $empty
	},
	element: null,
	productData: null,
	initialize: function(productData, options) {
		this.setOptions(options);
		this.productData = productData;
		var el = this.options.el || motorola.controls.template.clone();
		var html = el.get('html').replace(/href="[^ "]*(?=%\w+%)/g,'href="').template(productData);
		el.set('html',html);
		this.element = motorola.utils.generateElementId(el);
		productData.elementId = this.element;
		this.productContent = el.getElement.pass([this.config.productContent],el);
		if (this.options.init) {
			this.initializeImage(el);
			this.initializeBadge(el);
			this.initializeFx(el);
			this.initializeEvents(el);
		}
		el.store('data',this);
		return el;
	},
	initializeImage: function(element) {
		var productData = this.productData;
		var productContent = this.productContent();
		var productImgClass = this.config.productImgClass;
		var image = productContent.getElement('.' + productImgClass);
		if (Browser.Engine.trident4) {
			image.setProperties({
				'src':productData.imageUrl,
				'alt':productData.name
			});
		} else {
			image = new Element('img',{
				'styles': {
					'position': 'absolute',
					'left': '-5000px'
				},
				'events': {
					'load': this.replaceProductImage.pass([productData.imageUrl,productData.name,productImgClass],element)
				}
			});
			image.inject(productContent);
			element.store(productData.name,image);
			image.src = productData.imageUrl;
		}
	},
	initializeBadge: function(element) {
		var productData = this.productData;
		var productContent = this.productContent();
		var badge;
		var remarks = productData.iconUrl;
		if (remarks && remarks !== '') {
			badge = productContent.getElement('.' + this.options.badgeClass);
			if (badge) {
				badge.setProperty('src',remarks);
			} else {
				badge = new Element('img',{
					'class': this.options.badgeClass,
					'src': remarks,
					'alt': productData.iconAltText
				});
				badge.inject(productContent,'top');
			}
			if (remarks.contains('.png') && !badge.hasClass('png')) {
				badge.addClass('png');
			}
		} else if (badge) {
			badge.destroy();
		}
	},
	initializeFx: function(element) {
		element.get('morph',motorola.fxoptions);
		this.productContent().get('morph',motorola.fxoptions);
	},
	initializeEvents: function(element) {
		var highlight = this.events.highlight = this.highlight.bind(this);
		var removeHighlight = this.events.removeHighlight = this.removeHighlight.bind(this);
		var select = this.events.select = this.select.bind(this);
		element.addEvents({
			'mouseenter': highlight,
			'mouseleave': removeHighlight,
			'click': select
		});
	},
	highlight: function() {
		this.productContent().morph(this.options.highlightedStyles);
		this.fireEvent('onHighlight',this);
	},
	removeHighlight: function() {
		this.productContent().morph(this.options.unhighlightedStyles);
		this.fireEvent('onRemoveHighlight',this);
	},
	replaceProductImage: function(src,alt,clazz) {
		var existingImg = this.getElement('.' + clazz);
		existingImg.setProperties({
			'src':src,
			'alt':alt
		});
		var retrieved = this.retrieve(alt);
		if (retrieved) {
			retrieved.destroy();
			this.store(alt,null);
		}
	},
	select: function(e) {
		//webtrends :: check if support browse page
		var isAccessoryInput = document.getElementById('isAccessory');
		if(!isAccessoryInput) { 
			var p1 = document.getElementById('productFamilyName').value + ' Support Home - View Product Support Click';
			var p2 = this.productData.name + ' Support Home;Product Support View;Product';
			var p3 = this.productData.productId;
			dcsMultiTrack('WT.ti', p1, 'WT.cg_n', 'Search by Model', 'WT.cg_s', 'Product Thumbnail', 'DCSext.action', p2, 'WT.pn.id', p3, 'WT.pn_sku');
		}
		this.fireEvent('onSelect',[e,this]);
	},
	forceUnhighlight: function() {
		this.productContent().get('morph').set(this.options.unhighlightedStyles);
	}
});