(function($)
{
	function dropdownHelper(data)
	{
		var h = ['<select>', ''];
		for (var i = 0, len = data.length; i < len; i++)
		{
			h.push(['<option value="', data[i].id, '">', data[i].text, '</option>'].join(''));
		}
		h.push('</select>');
		return h.join('');
	};
	var app = window.app = 
	{
		config: {$container: null, mode: 'byCarModel', dataUrl: '/webservices/JSONService.asmx', dataProviderType: 'asp.net'},
		$step1d: null,
		$step2d: null,
		$step3d: null,
		$step4d: null,
		carBrand: null,
		carModel: null,
		tyreSize: null,
		step1: function(loadText)
		{
			app.config.$container.find("div.step2, div.step3, div.step4, div.results").wrapAll('<div id="fgvWrapper"></div>');
			$("#fgvWrapper").stop().fadeOut(function()
			{
				app.config.$container.find("div.step2, div.step3, div.step4, div.results").hide().unwrap();
			});
			switch (app.config.mode)
			{
				case "byCarModel":
					app.dataManager.getCarBrand(function(r)
					{
						if (r.status)
						{
							app.$step1d.html(dropdownHelper(r.data));
							app.carBrand = '';
							app.$step1d.find("select").change(function()
							{
								app.carBrand = $(this).val();
								if (app.carBrand == '')
								{
									app.step1(loadText);
								}else
									app.step2(true, loadText);
							});
						}
					}, new dataloader(app.$step1d, loadText));
					break;
				case "byTyreSize":
					app.dataManager.getCarType(function(r)
					{
						if (r.status)
						{
							app.$step1d.html(dropdownHelper(r.data));
							app.carType = '';
							app.$step1d.find("select").change(function()
							{
								app.carType = $(this).val();
								if (app.carType == '')
								{
									app.step1(loadText);
								}else
									app.step2(true, loadText);
							});
						}
					}, new dataloader(app.$step1d, loadText));
					break;
				case "byChainSize":
					app.dataManager.getChainType(function(r)
					{
						if (r.status)
						{
							app.$step1d.html(dropdownHelper(r.data));
							app.chainType = '';
							app.$step1d.find("select").change(function()
							{
								app.chainType = $(this).val();
								if (app.chainType == '')
								{
									app.step1(loadText);
								}else
									app.step2(true, loadText);
							});
						}
					}, new dataloader(app.$step1d, loadText));
					break;
			};
		},
		step2: function(reload, loadText)
		{
			app.config.$container.find("div.step3, div.step4, div.results").wrapAll('<div id="fgvWrapper"></div>');
			$("#fgvWrapper").stop().fadeOut(function()
			{
				app.config.$container.find("div.step3, div.step4, div.results").hide().unwrap();
			});
			switch (app.config.mode)
			{
				case "byCarModel":
					if (reload)
					{
						if (!app.config.$container.find("div.step2").is(":visible"))
							app.config.$container.find("div.step2").fadeIn();
						app.dataManager.getCarModel(app.carBrand, function(r)
						{
							if (r.status)
							{
								app.$step2d.html(dropdownHelper(r.data));
								app.carModel = '';
								app.$step2d.find("select").change(function()
								{
									app.carModel = $(this).val()
									if (app.carModel == '')
									{
										app.step2(false, loadText);
									}else
										app.step3(true, loadText);
								});
							}
						}, new dataloader(app.$step2d, loadText));
					}
					break;
				case "byTyreSize":
					if (reload)
					{
						if (!app.config.$container.find("div.step2").is(":visible"))
							app.config.$container.find("div.step2").fadeIn();
						app.dataManager.getTyreSizeByCarType(app.carType, function(r)
						{
							if (r.status)
							{
								app.$step2d.html(dropdownHelper(r.data));
								app.tyreSize = '';
								app.$step2d.find("select").change(function()
								{
									app.tyreSize = $(this).val();
									if (app.tyreSize == '')
									{
										app.step2(false, loadText);
									}else
										app.step3(true, loadText);
								});
							}
						}, new dataloader(app.$step2d, loadText));
					}
					break;
				case "byChainSize":
					if (reload)
					{
						if (!app.config.$container.find("div.step2").is(":visible"))
							app.config.$container.find("div.step2").fadeIn();
						app.dataManager.getChainNumber(app.chainType, function(r)
						{
							if (r.status)
							{
								app.$step2d.html(dropdownHelper(r.data));
								app.chainNumber = '';
								app.$step2d.find("select").change(function()
								{
									app.chainNumber = $(this).val();
									if (app.chainNumber == '')
									{
										app.step2(false, loadText);
									}else
										app.getProducts(loadText);
								});
							}
						}, new dataloader(app.$step2d, loadText));
					}
					break;
			};
			
		},
		step3: function(reload, loadText)
		{
			app.config.$container.find("div.step4, div.results").wrapAll('<div id="fgvWrapper"></div>');
			$("#fgvWrapper").stop().fadeOut(function()
			{
				app.config.$container.find("div.step4, div.results").hide().unwrap();
			});
			switch (app.config.mode)
			{
				case "byCarModel":
					if (reload)
					{
						if (!app.config.$container.find("div.step3").is(":visible"))
							app.config.$container.find("div.step3").fadeIn();
						app.dataManager.getTyreSize(app.carBrand, app.carModel, function(r)
						{
							if (r.status)
							{
								app.$step3d.html(dropdownHelper(r.data));
								app.tyreSize = '';
								app.$step3d.find("select").change(function()
								{
									app.tyreSize = $(this).val();
									if (app.tyreSize == '')
									{
										app.step3(false, loadText);
									}else
										app.getProducts(loadText);
								});
							}
						}, new dataloader(app.$step3d, loadText));
					}
					break;
				case "byTyreSize":
					if (reload)
					{
						if (!app.config.$container.find("div.step3").is(":visible"))
							app.config.$container.find("div.step3").fadeIn();
						app.dataManager.getWidth(app.carType, app.tyreSize, function(r)
						{
							if (r.status)
							{
								app.$step3d.html(dropdownHelper(r.data));
								app.width = '';
								app.$step3d.find("select").change(function()
								{
									app.width = $(this).val();
									if (app.width == '')
									{
										app.step3(false, loadText);
									}else
										app.step4(true, loadText);
								});
							}
						}, new dataloader(app.$step3d, loadText));
					}
					break;
				case "byChainSize":
					break;
			};
			
		},
		step4: function(reload, loadText)
		{
			app.config.$container.find("div.results").wrapAll('<div id="fgvWrapper"></div>');
			$("#fgvWrapper").stop().fadeOut(function()
			{
				app.config.$container.find("div.results").hide().unwrap();
			});
			switch (app.config.mode)
			{
				case "byCarModel":
					break;
				case "byTyreSize":
					if (reload)
					{

						if (!app.config.$container.find("div.step4").is(":visible"))
							app.config.$container.find("div.step4").fadeIn();
						app.dataManager.getProfile(app.carType, app.tyreSize, app.width, function(r)
						{
							if (r.status)
							{
								app.$step4d.html(dropdownHelper(r.data));
								app.profile = '';
								app.$step4d.find("select").change(function()
								{
									app.profile = $(this).val();
									if (app.width == '')
									{
										app.step4(false, loadText);
									}else
										app.getProducts(loadText);
								});
							}
						}, new dataloader(app.$step4d, loadText));
					}
					break;
				case "byChainSize":
					break;
			};
		},
		getProducts: function(loadText)
		{
			function renderProducts(data)
			{
				var h = [];
				for (var i = 0, len = data.length; i < len; i++)
				{
					var img = data[i].img.length > 0 ? '<img src="' + data[i].img + '?h=101">' : '<img src="/images/fitguide/no-photo.png">';
					var hasLink = data[i].url.length > 0;
					var linkStart1 = hasLink ? '<a href="' + data[i].url + '" class="product_photo">' : '';
					var linkEnd1 = hasLink ? '</a>' : '';
					var linkStart2 = hasLink ? '<a href="' + data[i].url + '" class="product_name">' : '';
					var linkEnd2 = hasLink ? '</a>' : '';
					h.push(['<div class="product_wrapper" id="'+i+'">', linkStart1, img, linkEnd1, '<div class="product_info">', '<h3>', linkStart2, data[i].name, linkEnd2, '</h3>','<p>',data[i].description,'</p>','</div></div>'].join(''));
				}
				app.$results.html(h.join('')).fadeIn();
				app.$results.find("img").load(function()
				{
					var thisHeight = $(this).height();
					var offset = Math.floor((170 - thisHeight) / 2) - 10;
					$(this).css({ marginTop: offset + 'px' });
				});

			}
			function renderTyres(data)
			{
				var h = ['<ul>'];
				for (var i = 0, len = data.length; i < len; i++)
				{
					h.push(['<li>', data[i].text, '</li>'].join(''));
				}
				h.push('</ul>');
				app.$results.html(h.join('')).fadeIn();
			}
			switch (app.config.mode)
			{
				case "byCarModel":
					app.dataManager.getProductsByCar(app.carBrand, app.carModel, app.tyreSize, function(r)
					{
						if (r.status)
						{
							renderProducts(r.data);
						}
					}, new dataloader(app.$results, loadText));
					break;
				case "byTyreSize":
					app.dataManager.getProductsByTyreSize(app.carType, app.tyreSize, app.width, app.profile, function(r)
					{
						if (r.status)
						{
							renderProducts(r.data);
						}
					}, new dataloader(app.$results, loadText));
					break;
				case "byChainSize":
					app.dataManager.getProductsByChainSize(app.chainType, app.chainNumber, function(r)
					{
						if (r.status)
						{
							renderTyres(r.data);
						}
					}, new dataloader(app.$results, loadText));
					break;
			}
		},
		start: function(opts,loadText)
		{
			app.config = $.extend(app.config, opts);
			app.$step1d = app.config.$container.find("div.step1 div.dropdown");
			app.$step2d = app.config.$container.find("div.step2 div.dropdown");
			app.$step3d = app.config.$container.find("div.step3 div.dropdown");
			app.$step4d = app.config.$container.find("div.step4 div.dropdown");
			app.$results = app.config.$container.find("div.product_grid");
			app.step1(loadText);
		},
		dataManager:
		{
			keys: {},
			xhrs: {},
			active: false,
			getCarBrand: function(callback, loader)
			{
				this.processRequest("getCarBrand", app.config.dataUrl, {action: "getCarBrand"}, callback, loader);
			},
			getCarModel: function(carBrand, callback, loader)
			{
				this.processRequest("getCarModel", app.config.dataUrl, {action: "getCarModel", carBrand: carBrand}, callback, loader);
			},
			getTyreSize: function(carBrand, carModel, callback, loader)
			{
				this.processRequest("getTyreSize", app.config.dataUrl, {action: "getTyreSize", carBrand: carBrand, carModel: carModel}, callback, loader);
			},
			getProductsByCar: function(carBrand, carModel, tyreSize, callback, loader)
			{
				this.processRequest("getProductsByCar", app.config.dataUrl, {action: "getProductsByCar", carBrand: carBrand, carModel: carModel, tyreSize: tyreSize}, callback, loader);
			},		
			
			
			getCarType: function(callback, loader)
			{
				this.processRequest("getCarType", app.config.dataUrl, {action: "getCarType"}, callback, loader);
			},
			getTyreSizeByCarType: function(carType, callback, loader)
			{
				this.processRequest("getTyreSizeByCarType", app.config.dataUrl, {action: "getTyreSizeByCarType", carType: carType}, callback, loader);
			},
			getWidth: function(carType, tyreSize, callback, loader)
			{
				this.processRequest("getWidth", app.config.dataUrl, {action: "getWidth", carType: carType, tyreSize: tyreSize}, callback, loader);
			},
			getProfile: function(carType, tyreSize, width, callback, loader)
			{
				this.processRequest("getProfile", app.config.dataUrl, {action: "getProfile", carType: carType, tyreSize: tyreSize, width: width}, callback, loader);
			},
			getProductsByTyreSize: function(carType, tyreSize, width, profile, callback, loader)
			{
				this.processRequest("getProductsByTyreSize", app.config.dataUrl, {action: "getProductsByTyreSize", carType: carType, tyreSize: tyreSize, width: width, profile: profile}, callback, loader);
			},
			


			getChainType: function(callback, loader)
			{
				this.processRequest("getChainType", app.config.dataUrl, {action: "getChainType"}, callback, loader);
			},
			getChainNumber: function(chainType, callback, loader)
			{
				this.processRequest("getChainNumber", app.config.dataUrl, {action: "getChainNumber", chainType: chainType}, callback, loader);
			},
			getProductsByChainSize: function(chainType, chainNumber, callback, loader)
			{
				this.processRequest("getProductsByChainSize", app.config.dataUrl, {action: "getProductsByChainSize", chainType: chainType, chainNumber: chainNumber}, callback, loader);
			},
			processRequest: function(key, url, postData, callback, loader)
			{
				
				var that = this;
				if ((typeof(loader) != "undefined") && loader)
				{
					this.active = true;
					loader.activate();
				}
				var reqCallback = function(data)
				{
					this.active = false;
					callback(data);
					if (typeof(loader) != "undefined" && loader)
						loader.deactivate();
				};
				this.sendRequest(key, url, postData, reqCallback);
				return true;
			},
			registerRequest: function(key, reqCallback)
			{
				if (typeof(this.keys[key]) == "undefined")
					this.keys[key] = 1;
				else
					this.keys[key]++;
				reqCallback.id = key;
				reqCallback.index = this.keys[key];
			},
			unregisterRequest: function(key)
			{
				delete this.keys[key];
			},
			checkLatestRequest: function(callback)
			{
				return this.keys[callback.id] == callback.index;
			},
			sendRequest: function(key, url, postData, callback)
			{
				var that = this;
				this.registerRequest(key, callback);
				postData.hiddenSender = "ajax";
				if (key.indexOf("get") == 0)
				{
					if (typeof(this.xhrs[key]) != "undefined")
					{
						for (var item in this.xhrs)
							this.xhrs[item].abort();
						//this.xhrs[key].abort();
					}
				};
				if (app.config.dataProviderType == "php")
					this.xhrs[key] = $.ajax(
					{
						type: "POST",
						url: url,
						data: postData,
						dataType: "json",
						success: function(data)
						{
							if (that.checkLatestRequest(callback))
							{
								that.unregisterRequest(callback.id);
								callback(data);
							}
						}
					});
				else if (app.config.dataProviderType == "asp.net")
				{
					var url = url + "/" + postData.action;
					delete postData.action;
					this.xhrs[key] = $.ajax(
					{
						type: "POST",
						url: url,
						data: JSON.stringify(postData),
						contentType: "application/json; charset=utf-8",
						dataType: "json",
						success: function(data)
						{
							if (that.checkLatestRequest(callback))
							{
								that.unregisterRequest(callback.id);
								callback(JSON.parse(data.d));
							}
						}
					});
				}
			}
		}
	};
})(jQuery);
dataloader = function(target,loadText)
{
	var that = this;
	this.target = target;
	this.active = false;
	this.activate = function(options)
	{
		this.target.html('<div class="loading"><p>'+ loadText +'</p></div>');
		this.active = true;
	};
	this.deactivate = function(options)
	{
		this.target.find("div.loading").remove();
		this.active = false;
	};
};