function loadStyles(def, frame_style, door_count) {
	new Ajax.Updater("style_field", "store_colour_selector/csProcessor.php?action=getStyleMenu", {
		  method: 'get',
		  onComplete: function() {
			if(typeof(def) == "string") {
				$('styleName').value = def;
			}
				var s = $('styleName').value;
    		styleChange(s, frame_style, door_count);
		  }
	});
}

function styleChange(val, frame_style, door_count) {
	updateInfoDiv(val);
	var dc = 2;
	if($('door_count')) dc = $('door_count').value; 
	if(door_count !== undefined) { dc = door_count; }
	new Ajax.Updater("doors_field", "store_colour_selector/csProcessor.php?action=getDoorsMenu&style="+val+"&doors="+dc, {
		  method: 'get',
		  onComplete: function() {
		  showFrameKit(val);
		new Ajax.Updater("frames_field", "store_colour_selector/csProcessor.php?action=getFramesMenu&style="+val, {
			  method: 'get',
			  onComplete: function() {	
			new Ajax.Updater("framesPanel", "store_colour_selector/csProcessor.php?action=getPanelsMenu&style="+val, {
				  method: 'get',
				  onComplete: function() {
				
				if(frame_style !== undefined) {  $('frame_style').value = frame_style; }
				new Ajax.Updater("swatchPanel", "store_colour_selector/csProcessor.php?action=getSwatchMenu&style="+val, {
					  method: 'get',
					  onComplete: function() {
						var swatch_array = ($('swatchcount').value).split("|"); 
						for(var i=0; i<(swatch_array.length)-1; i++) { new Draggable(swatch_array[i], {revert: true}); }
						var frame_array = ($('framecount').value).split("|"); 
						var first = frame_array[0].substring(frame_array[0].length-1, frame_array[0].length);
						//var p = '';
						var o = {};
						  for(var i=0;i<frame_array.length;i++)
						  {
							p = frame_array[i].substring(frame_array[i].length-1, frame_array[i].length);
							if(!isNaN(p) && p != '') { o[p]='';}
						  }
						  

						for(var i=0; i<(frame_array.length)-1; i++) { new Draggable(frame_array[i], {revert: true}); }
						for(var i in frames) {
							if(!(frames[i] in o)) { frames[i] = first; }	
							i++;
						}
						if(val == "heritage" || val == "manhattan") { $('framesPanel').innerHTML = ''; $('framestext').innerHTML = "";}
						else { $('framestext').innerHTML = "Drag and drop a frame from those shown to the right onto the image below to select the desired layout for each door."; }
						//alert(frames);

						//frames = [p,p,p,p,p];
						doorChange(dc);
					} // swatchPanel onComplete
				});	// swatchPanel updater
				} // framesPanel onComplete
			}); // framesPanel updater
			} // frames_field onComplete
		}); // frame_field Updater
		} // doors_field onComplete
	}); // doors_field Updater
}

function updateInfoDiv(style) {
	new Effect.Fade($('infoDiv'), { afterFinish: function() { 
		$('infoDiv').innerHTML = $(style+"_info").innerHTML;
		new Effect.Appear($('infoDiv')); 
	} 
	});
}

function updateSwatch(className) {
	$('swatchDiv').className = className+"_zoom";	
	$('swatchTitle').innerHTML = className.replace(/_/g, " ").toUpperCase();
}

function doorChange(val) {

	var d = $('door_count').value;
	var w = (parseInt(d)*110);
	var pw = (parseInt(d)*110)+246;
	if(parseInt(d) < 4) {
		$('topTable').style.position= 'relative';
		$('topTable').style.margin = '0px auto 0px auto';
		$('lowerTable').style.marginTop = '0px';
	} else {
		$('topTable').style.position= 'absolute';	
		$('topTable').style.absolutize;	
		$('topTable').style.margin = '0px';	
		$('lowerTable').style.marginTop = '311px';
	}
	$('parentDiv').style.width = pw+'px';
	$('doorsGrid').style.width = w+'px';
	$('doorsTable').style.width = w+'px';
	frameStyleChange();

}

function updatePrice() {
	var d = $('door_count').value;
	var p = frames.join("");
	var s = panels.join("|");
	var st = $('styleName').value;
	var width = parseInt($('dimension_width').value);
	var ep = parseInt($('end_panels').value);
	var hf = parseInt($('header_fillers').value);
	var cp = false; //$('closet_pack').checked;
	var sr = false; //$('shoe_rack').checked;
	new Ajax.Updater("priceDiv", 'store_colour_selector/csProcessor.php?action=calculatePrice&style='+st+'&inserts='+p+'&width='+width+'&doors='+d+'&closetPack='+cp+'&shoerack='+sr+'&endpanel='+ep+'&headerfillers='+hf+'&panels='+s, {
		  method: 'get',
		  onComplete: function() {
				var pm = $('errorField').value;
				if(pm != '') {
				$('lowerTable2').style.display = 'inline-table';
    			$('priceMessageDiv').innerHTML = "<strong><span class='bodytextgreen'><small>"+pm+"</small></span></strong>";
				} else {
					$('lowerTable2').style.display = 'none';
	    			$('priceMessageDiv').innerHTML = "";
				}
    			
		  }
		});
}

function frameStyleChange() {
	getDoors();
}

function getDoors() { 
	var d = $('door_count').value;
	var p = frames.join("");
	var f = $('frame_style').value;
	var st = $('styleName').value;

	new Ajax.Updater("doorsGrid", 'store_colour_selector/csProcessor.php?action=getDoors&style='+st+'&inserts='+p+'&doors='+d+'&frames='+f, {
		  method: 'get',
		  onComplete: function() {
		Droppables.drops = []; // remove all current drop targets - replaced below (IE throws a strop if you declare the same target twice. Firefox is fine. Funny that...)
				//alert(d);
				for(var i=0; i<d; i++) {
					//alert('door_'+i+'_1');
					//alert($('door_'+i+'_1').id);
				
				Droppables.add('door_'+i+'_1', {onDrop: changeInsert}); 
				Droppables.add('door_'+i+'_2', {onDrop: changeInsert});
				Droppables.add('door_'+i+'_3', {onDrop: changeInsert});
				}
				refreshInserts();
			}
		});
}

function changeInsert(source, target) {
	if(source.id.substring(0,10) == "frameImage") { 
		frames[target.id.substring(5,6)] = source.id.substring(11,12);
		getDoors();
		
	}
	else {
	var d = target.id.substring(5,6);
	var p = target.id.substring(7);
	var c = source.id.substring(7);
	panels[d][p-1] = c;
	target.className = c;
	}
	updatePrice();
}

function refreshInserts() {
	var d = $('door_count').value;
	for(var i=0; i<d; i++) {
	document.getElementById("door_"+i+"_1").className = panels[i][0];
	document.getElementById("door_"+i+"_2").className = panels[i][1];
	document.getElementById("door_"+i+"_3").className = panels[i][2];
	}
	updatePrice();
}

function showFrameKit(style) {
	if(style == 'metro' || style == 'manhattan') { $('frameKitRow').style.display = '';$('frameKitRow2').style.display = ''; }
	else { $('frameKitRow').style.display = 'none'; $('frameKitRow2').style.display = 'none';  }
}

function defaultFrameKit(style) {
 $('frameOptB').selected = 'selected';  $('frameOpt2B').selected = 'selected'; 
}

function inchesInput(dim) {
	$('currentDim').value = dim;
	var i = $('inchesConvertor');
	i.style.height = '130px';
	i.style.visibility = 'visible';
	i.style.position =  'absolute';
	var os = document.viewport.getScrollOffsets();
	var screenSize = document.viewport.getDimensions();
	 var xPos = (screenSize.width - 200) / 2;
	 var yPos = ((screenSize.height - 130) / 2) + os.top;	 
	if(yPos < 500) { yPos = 500; }
		i.style.top = (yPos)+'px';
	i.style.left = xPos+'px';

	
}

function convertInches() {
	var d = $('currentDim').value;
	var v = $('dimension').value;
	var vf = $('dimension_fraction').value;
	if(v == '' || v == null) { v = 0; }
	if(vf == '' || vf == null) { vf = 0; }
	v = (parseInt(v)+parseFloat(vf))*25.4;
	v = Math.floor(v);
	$('currentDim').value = '';
	$('dimension').value = '';
	$('inchesConvertor').style.visibility = 'hidden';
	$('dimension_'+d).value = v;
	if(d == 'width') {
		widthUpdated(v);		
	} else {
		heightUpdated(v);
	}
}

function validate() {
	$("framesField").value = frames.join("|");
	$("panelsField").value = panels.join("|");
	for(var i=0; i<$('door_count').value; i++) {
		for(var j=0; j<frames[i]; j++) { 
			if(panels[i][j] == 'no') { alert("Door "+(i+1)+", insert "+(j+1)+" must be set to place order"); return false; }
		}
	}
	if (widthUpdated() == true && heightUpdated() == true) {
		if(exitAndSave()) {
			$('csForm').submit();
		}
	}
}

function widthUpdated(val) {
	if(typeof(val) == "undefined") { val = $('dimension_width').value; }
		if((val < 500) || isNaN(val)) {
			alert('Please enter a valid width\n(numerical value greater than 500)');
			return false;
		} else {
			var d = $('door_count').value;
			try {
				if(d == 2 && val > 2135 && val <= 3050) { 
					throw("3:Maximum span for up to 2 doors is 2135mm (7').\nWe have increased the number of doors to 3."); 
				}
				if(d <= 3 && val > 3050 && val <= 3660) { 
					throw("4:Maximum span for up to 3 doors is 3050mm (10').\nWe have increased the number of doors to 4."); 
				}
				if(d <= 4 && val > 3660 && val <= 4880) { 
					throw("5:Maximum span for up to 4 doors is 3660mm (12').\nWe have increased the number of doors to 5."); 
				}
				if(d == 5 && val > 4880) { 
					throw("0:Maximum span for 5 doors is 4880mm (16').\nPlease call us for a quote.");	 
				}			
			} catch(err) {
				alert(err.substr(2, err.length-2));
				if(err.substr(0,1) != 0) {
					$('door_count').value = err.substr(0,1);
				}
				doorChange(null);
				return false;
				//error handling code... (highlight, etc?);
			}		
			calcHeaderPanels();
			 
		return true;
		}
		
}

function heightUpdated(val) {
	if(typeof(val) == "undefined") { val = $('dimension_height').value; }
	if((val < 500) || isNaN(val)) {
		alert('Please enter a valid height\n(numerical value greater than 500)');
		return false;
	} else {
		var d = $('styleName').value;
		try {
			//if(d == 'rio' && val > 2520) { throw("Maximum height for Rio is 2520mm (8' 3\").\nCalculating required number of header panels."); }
			//if(d == 'metro' && val > 2600) { throw("Maximum height for Metro doors is 2600mm (8' 6\").\nCalculating required number of header panels."); }
			//if(d == 'heritage' && val > 2520) { throw("Maximum height for Heritage doors is 2520mm (8' 3\").\nCalculating required number of header panels."); }
			//if(d == 'manhatten' && val > 2520) { throw("Maximum height for Manhattan doors is 2520mm (8' 3\").\nCalculating required number of header panels."); }
			if(val > 2500) { throw("Maximum height is 2500mm (8' 2\").\nCalculating required number of header panels."); }
		} catch(err) {
			//alert(err);
			calcHeaderPanels();
			return true;
			//error handling code... (highlight, etc?);
		}			
	return true;
	}
	
}

function calcHeaderPanels() {
	if($('dimension_height').value > 2500) { //need header panels
		if($('dimension_width').value > 2700) {
			var fillmult = 2;

		} else {
			var fillmult = 1;
		} 
		var remainder = $('dimension_height').value - 2500;
		var headers = Math.ceil(remainder/200);
		$('header_fillers').value = fillmult*headers;	
	} else $('header_fillers').value = 0;
}

function deShoeRack() {
	if($('closet_pack').checked == true) { $('shoe_rack').disabled = false; }
	else { $('shoe_rack').disabled  = true; $('shoe_rack').checked  = false; }	
}

function exitAndSave() {
	if(null !== $('styleName')) { var s = $('styleName').value; } else { var s = 'metro'; }
	if(null !== $('door_count')) { var d = $('door_count').value; } else { var d = '2'; }
	if(null !== $('frame_style')) { var fs = $('frame_style').value; } else { var fs = 'aluminium'; }
	var dw = $('dimension_width').value;
	var dh = $('dimension_height').value;	
	var fr = $('framekit');
	var fr2 = $('framekit2');
	var fk = fr.options[fr.selectedIndex].id;
	var fk2 = fr2.options[fr2.selectedIndex].id;
	var ep = $('end_panels').value;
	var hf = $('header_fillers').value;
	
	var p = panels[0]+"|"+panels[1]+"|"+panels[2]+"|"+panels[3]+"|"+panels[4];
	var f = frames;

	
	new Ajax.Request("store_colour_selector/csProcessor.php?action=storeAll&door_count="+d+"&styleName="+s+"&panels="+p+"&frames="+f+"&frame_style="+fs+"&width="+dw+"&height="+dh+"&fkit="+fk+"&fkit2="+fk2+"&ends="+ep+"&headers="+hf);
	return true;
}

function restoreSaved() {

	new Ajax.Request("store_colour_selector/csProcessor.php?action=restoreAll");
}