/*
	Preload down states of buttons
*/

var Preload = [];
Preload[0] = "includes/templates/wallwik/images/global/buttons/add_to_cart_down.png";
Preload[1] = "includes/templates/wallwik/images/global/buttons/add_to_cart_lg_down.png";
Preload[2] = "includes/templates/wallwik/images/global/buttons/choose_a_kit_down.png";
Preload[3] = "includes/templates/wallwik/images/global/buttons/how_it_works_down.png";
Preload[4] = "includes/templates/wallwik/images/global/buttons/watch_a_video_down.png";
Preload[5] = "includes/templates/wallwik/buttons/english/button_buy_now_orig_down.gif";
Preload[6] = "includes/templates/wallwik/buttons/english/button_checkout_down.gif";
Preload[7] = "includes/templates/wallwik/buttons/english/button_continue_checkout_down.gif";
Preload[8] = "includes/templates/wallwik/buttons/english/button_continue_shopping_down.gif";
Preload[9] = "includes/templates/wallwik/buttons/english/button_in_cart_down.gif";
Preload[10] = "includes/templates/wallwik/buttons/english/button_update_cart_down.gif";

for (var i=0;i<Preload.length;i++) {
	var PreloadImg = new Image;
	PreloadImg.src = Preload[i];
}

Rvlt = (typeof(Rvlt)=="undefined"?{}:Rvlt); //Namespace Revelate

Rvlt.Wallwik = {}; //Namespace Wallwik

Rvlt.Wallwik.onLoad = function (){
		Rvlt.Wallwik.BuildGetStartedForm();                                      
}

Rvlt.Wallwik.BuildGetStartedForm = function () {
	var FormDiv = document.getElementById('GetStartedForm');
	if (FormDiv == null) {return;} //No form on this page
	var Recommendations = [
		['Ordinary wallpaper',
			[
				 ['2 Large Rooms (750 Sq Ft)', '<a href="standard-kit-p-1.html">Standard kit</a>'], 
				 ['4 large Rooms (1500 Sq Ft)','<a href="professional-kit-p-2.html">Professional kit</a>'], 
				 ['Over 4 large rooms','<a href="professional-kit-p-2.html">Professional kit</a><br /> <small>Additional solution will be needed and can be obtained from the <a href="wallpaper-removal-products-c-2.html">single products</a> page</small>']
			]
		]
		,
		['Strippable / peelable wallpaper', 
			[
				 ['2 Large Rooms (750 Sq Ft)','<a href="strippablepeelable-wallpaper-removal-kit-p-3.html">Strippable / peelable kit</a>'], 
				 ['4 large Rooms (1500 Sq Ft)','<a href="strippablepeelable-wallpaper-removal-kit-p-3.html">Strippable / peelable kit</a> <br /><small>Additional solution will be needed and can be obtained from the <a href="wallpaper-removal-products-c-2.html">single products</a> page</small>'], 
				 ['Over 4 large rooms','<a href="strippablepeelable-wallpaper-removal-kit-p-3.html">Strippable / peelable kit</a> <br /><small>Additional solution will be needed and can be obtained from the <a href="wallpaper-removal-products-c-2.html">single products</a> page</small>']
			]
		]
		,
		['Borders',
			[
				 ['2 Large Rooms (80 Feet)', '<a href="borders-kit-p-11.html">Borders kit</a>'],  
				 ['Over 2 large rooms', '<a href="borders-kit-p-11.html">Borders kit</a><br /><small>Additional solution will be needed and can be obtained from the <a href="wallpaper-removal-products-c-2.html">single products</a> page</small>']
			]
		]
	];
	
	/* Build the form */
	FormDiv.innerHTML = '\
						<h3>Find the right kit for you</h3>\
						<form>\
							<div class="Left">\
								<p>\
									<strong> <label for="WallpaperType">Wallpaper type</label></strong><br />\
									<select name="select" id="WallpaperType" name="WallpaperType">\
									<option value="-1">Choose one</option>\
									</select>\
								</p>\
							</div>\
							<div class="Left">\
							<p>\
								<strong> <label for="Surface">Surface</label></strong><br />\
								<select name="select" id="Surface" name="Surface">\
									<option value="-1">Choose one</option>\
								</select>\
							</p>\
							</div>\
							<div class="Clear">&nbsp;</div>\
							<div id="RecommendationText">&nbsp;</div>\
							<hr />\
							<p class="Small">\
								<img src="includes/templates/wallwik/images/global/information_icon.png" alt="" width="23" height="22" class="Left" style="margin: -2px 6px 0 0" /> <a href="whats-my-wallpaper-type">Unsure about your wallpaper type?</a>\
							</p>\
						</form>\
						';
		
		
		MakeDropDown(Recommendations, 'WallpaperType', 'Choose one');
		UpdateSurfaceDropDown();
		
		function MakeDropDown (theArray, SelectID, EmptyLabel){
			var theSelect = document.getElementById(SelectID);
			theSelect.innerHTML = '';
	
			AddOption (EmptyLabel, -1) //create default item

			for (var i=0;i<theArray.length;i++) {
				AddOption (theArray[i][0], i)
			}
			theSelect.onchange = getRecommendation;
			
			function AddOption (Label, Value) {
				var theOption = document.createElement('option');
				theOption.value = Value;
				theOption.innerHTML = Label;
				theSelect.appendChild(theOption);
			}
		}
		
		function UpdateSurfaceDropDown(){
			var WallpaperValue = document.getElementById('WallpaperType').value;
			if (FormDiv.CurrentWallpaper != WallpaperValue) {
				if (WallpaperValue > -1) {
					MakeDropDown(Recommendations[WallpaperValue][1], 'Surface', 'Choose one');
				}
				else {
					MakeDropDown([], 'Surface', 'Please select a wallpaper type');
				}
				
				FormDiv.CurrentWallpaper = WallpaperValue
			}
		}
		
		function getRecommendation() {
			UpdateSurfaceDropDown();
			var WallpaperValue = document.getElementById('WallpaperType').value;
			var SurfaceValue = document.getElementById('Surface').value;
			var RecommendationText = document.getElementById('RecommendationText');
			if (WallpaperValue == -1 || SurfaceValue == -1) {
				RecommendationText.innerHTML = '&nbsp;';
			}
			else {
				RecommendationText.innerHTML = '<p><strong>Recommended kit: </strong>' + Recommendations[WallpaperValue][1][SurfaceValue][1] + '</p>';
			}
		}
}
window.onload = Rvlt.Wallwik.onLoad;