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) {
		var isAccessory = false;
		var isAccessoryInput = document.getElementById('isAccessory');
		var productId = this.productData.productId;
		//if there is the isAccessoryInput element
		//this function is being performed on BluetoothOverlayPage
		if(isAccessoryInput)
		{
			
			var elemClicked = '';
			var tagName = e.target.tagName;
			
			if(tagName ==  'A'){
				elemClicked = 'text'; 
			}
			if(tagName == 'IMG'){
				elemClicked = 'thumbnail';
			}
			
			var dcsExt1 = '.cmbaccessories';
			var dcsExt2 = '.cmbmobilephone';
			var selection = 'Accessories';
			isAccessory =  isAccessoryInput.value;
			if(isAccessory == 'true')
			{
				dcsExt1 = '.cmbmobilephone';
				dcsExt2 = '.cmbaccessories';
				selection = 'Mobile Phone';
			}
			dcsMultiTrack('WT.ti', 'Connect My Bluetooth – Step1', 'WT.cg_n', 'Connect My Bluetooth', 'WT.cg_s', selection +' Selection', 'DCSext.action', 'Connect My Bluetooth;Product1 Selection','WT.pn.id',productId ,'DCSext'+dcsExt1, elemClicked , 'DCSext'+dcsExt2,'', 'WT.si_n', 'Connect my Bluetooth', 'WT.si_x', '2' ,'WT.si_cs', '0');
		}
		else //else, this function is being performed on support browser page
		{
			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 = 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);
	}
});