var TyrePicker = function()
{
	var ref = this;
	
	this.dom_root;
	this._domError;
	this._loading = false;
	
	// These are the select fields used to pick a tyre.
	this._domSecWidth;
	this._domAspectRatio;
	this._domRimDiameter;
	
	this.getSectionWidth = function()
	{
		return $(this._domSecWidth).val();
	}
	
	this.getAspectRatio = function()
	{
		return $(this._domAspectRatio).val();
	}
	
	this.getRimDiameter = function()
	{
		return $(this._domRimDiameter).val();
	}
	
	this.getCode = function()
	{
		// This tyre code seems to be a fairly standard format, although note that normally the second slash
		// would be a "speed rating" code (1 or 2 letters). Apparently this isn't needed for this site.
		return this.getSectionWidth() + '/' + this.getAspectRatio() + '/' + this.getRimDiameter();
	}
	
	this.isLoading = function()
	{
		return this._loading;
	}
	
	this.draw = function()
	{
		// Instructions / help text
		var dom_instructions = createElement('div', 'PartOptionsHelp');
		dom_instructions.appendChild(document.createTextNode('Please use the drop down menus to select the correct tyre size, the graphic below will assist you in locating where you can find the tyre size'));
		this.getDomRoot().appendChild(dom_instructions);
		
		// Error messages area.
		this._domError = createElement('div', 'error');
		this.getDomRoot().appendChild(this._domError);
		
		// Section Width field
		var dom_secWidthField = createElement('div', 'field sectionwidth');
		var dom_label = document.createElement('label');
		dom_label.appendChild(document.createTextNode('Width'));
		dom_label.setAttribute('for', 'tpSectionWidthSelect');
		dom_secWidthField.appendChild(dom_label);
		
		this._domSecWidth = document.createElement('select');
		this._domSecWidth.setAttribute('id', 'tpSectionWidthSelect');
		this._domSecWidth.disabled = true;
		this._domSecWidth.onchange = this._loadAspectRatios;
		
		// Load the Section Width options.
		this._loadSectionWidths();
		
		dom_secWidthField.appendChild(this._domSecWidth);
		this.getDomRoot().appendChild(dom_secWidthField);
		
		// Aspect Ratio field
		var dom_aspectRatioField = createElement('div', 'field aspectratio');
		dom_label = document.createElement('label');
		dom_label.appendChild(document.createTextNode('Profile'));
		dom_label.setAttribute('for', 'tpAspectRatioSelect');
		dom_aspectRatioField.appendChild(dom_label);
		
		this._domAspectRatio = document.createElement('select');
		this._domAspectRatio.setAttribute('id', 'tpAspectRatioSelect');
		this._domAspectRatio.disabled = true;
		this._domAspectRatio.onchange = this._loadRimDiameters;
		
		dom_aspectRatioField.appendChild(this._domAspectRatio);
		this.getDomRoot().appendChild(dom_aspectRatioField);
		
		// Rim diameter field
		var dom_rimDiameterField = createElement('div', 'field rimdiameter');
		dom_label = document.createElement('label');
		dom_label.appendChild(document.createTextNode('Rim size'));
		dom_label.setAttribute('for', 'tpRimDiameterSelect');
		dom_rimDiameterField.appendChild(dom_label);
		
		this._domRimDiameter = document.createElement('select');
		this._domRimDiameter.setAttribute('id', 'tpRimDiameter');
		this._domRimDiameter.disabled = true;
		dom_rimDiameterField.appendChild(this._domRimDiameter);
		this.getDomRoot().appendChild(dom_rimDiameterField);
		
		return this.getDomRoot();
	}
	
	this.showLoading = function(message)
	{
		if(this.getDomRoot().parentNode && this.getDomRoot().parentNode.style)
		{
			$(this.getDomRoot().parentNode).block({message: '<img src="/res/images/ajax-loader.gif"/> ' + message});
		}
	}
	
	this.hideLoading = function()
	{
		if(this.getDomRoot().parentNode)
		{
			$(this.getDomRoot().parentNode).unblock();
		}
	}
	
	this.validate = function()
	{
		$(this._domError).empty();
		var ok = true;
		
		if(!this.getSectionWidth())
		{
			this._domError.appendChild(document.createTextNode('Please choose the section width for your tyres'));
			ok = false;
		}
		else if(!this.getAspectRatio())
		{
			this._domError.appendChild(document.createTextNode('Please choose the aspect ratio for your tyres'));
			ok = false;
		}
		else if(!this.getRimDiameter())
		{
			this._domError.appendChild(document.createTextNode('Please choose the rim diameter for your tyres'));
			ok = false;
		}
		
		return ok;
	}
	
	this._loadSectionWidths = function()
	{
		this._loading = true;
		this.showLoading('Loading options, please wait...');
		$.get
		(
			'/api/tyre/getsectionwidths',
			{},
			function(data, textStatus){ref._processLoadResult(data, textStatus, ref._domSecWidth)},
			'json'
		);
	}
	
	this._processLoadResult = function(data, textStatus, dom_field)
	{
		$(dom_field).empty();
		
		var dom_option = document.createElement('option');
		dom_option.setAttribute('value', '');
		dom_field.appendChild(dom_option);
		
		for(var x = 0; x < data.data.length; x++)
		{
			dom_option = document.createElement('option');
			dom_option.setAttribute('value', data.data[x]);
			dom_option.appendChild(document.createTextNode(data.data[x]));
			
			dom_field.appendChild(dom_option);
		}
		
		this._loading = false;
		dom_field.disabled = false;
		ref.hideLoading();
	}
	
	this._loadAspectRatios = function()
	{
		ref._domAspectRatio.disabled = true;
		ref._domRimDiameter.disabled = true;
		
		$(ref._domAspectRatio).empty();
		$(ref._domRimDiameter).empty();
		
		if(ref.getSectionWidth())
		{
			ref._loading = true;
			ref.showLoading('Loading options, please wait...');
			$.post
			(
				'/api/tyre/getaspectratios',
				{sectionWidth: ref.getSectionWidth()},
				function(data, textStatus){ref._processLoadResult(data, textStatus, ref._domAspectRatio)},
				'json'
			);
		}
	}
	
	this._loadRimDiameters = function()
	{
		ref._domRimDiameter.disabled = true;
		$(ref._domRimDiameter).empty();
		
		if(ref.getSectionWidth() && ref.getAspectRatio())
		{
			ref._loading = true;
			ref.showLoading('Loading options, please wait...');
			$.post
			(
				'/api/tyre/getrimdiameters',
				{
					sectionWidth: ref.getSectionWidth(),
					aspectRatio: ref.getAspectRatio()
				},
				function(data, textStatus){ref._processLoadResult(data, textStatus, ref._domRimDiameter);},
				'json'
			);
		}
	}
}
TyrePicker.prototype = new DomModel();