<!--

	//===========================================================================
	// VARIABLES DECLARATION
	//===========================================================================
	var flagFirst = true, flagSubscribe = false, flagContact = false, flagRetailer = false, flagSearch = false, flagEnlargement = false, flagReady = true, flagOrderSample = false, flagRetailer = false;
	var win_width;
	var arrColourGroup, arrTransparency, arrFabricType, arrColourType;
	var menuHover, activeColourGroup, activeTransparency, activeFabricType, activeColourType;
	var assetBackgrounds, bgNow, transparencyNow, selectedColourGroup;

	var MARGIN_TOP = 5, NAV_SHORT = 65, NAV_HOVER = 135;

	//===========================================================================
	// AJAX FUNCTIONS
	//===========================================================================
	function showEnlargementImage(id, productID)
	{
		var div = $('container_enlargement');
		var url = "get_enlargement.asp";
		var data = "imageID=" + id + "&productID=" + productID

		var req = new Request( {url: '' + url,

			onSuccess: function(txt) {
				$(div).set('html', txt);

				showEnlargement();

				//repositioned
				var img_w = $('enlargement_image').getChildren()[0].getWidth();
				$('container_enlargement').setStyle('width', img_w + 'px');

				var w = window.getWidth() / 2;
				var div_w = $('container_enlargement').getWidth() / 2;

				$('container_enlargement').setStyle('top', '60px');
				$('container_enlargement').setStyle('left', (w - div_w) + 'px');
			},

			onFailure: function() {
				$(div).set('html', '<div class="ajax_white">Error loading... Please refresh the browser</div>');
			},

			onRequest: function() {
				$(div).set('html', '<div class="ajax_white"></div>');
			}

		}).send(data);
	}

	function showContainerOrderSample(productID, clientID)
	{
		var div = $('container_order_sample');
		var url = "get_order_sample.asp";
		var data = "productID=" + productID + "&clientID=" + clientID;

		var req = new Request( {url: '' + url,

			onSuccess: function(txt) {
				$(div).set('html', txt);

				showOrderSample();

				//repositioned
				var w = window.getWidth() / 2;
				var div_w = $('container_enlargement').getWidth() / 2;

				$('container_order_sample').setStyle('top', '100px');
				$('container_order_sample').setStyle('left', (w - div_w - 140) + 'px');
			},

			onFailure: function() {
				$(div).set('html', '<div class="ajax_white">Error loading... Please refresh the browser</div>');
			},

			onRequest: function() {
				$(div).set('html', '<div class="ajax_white"></div>');
			}

		}).send(data);
	}

	function showEnlargementMap()
	{
		var div = $('container_enlargement');
		var url = "get_enlargement.asp";
		var data = "type=map"
		
		var req = new Request( {url: '' + url, 
			
			onSuccess: function(txt) {				
				$(div).set('html', txt);	
				
				showEnlargement();

				//repositioned
				var w = window.getWidth() / 2;				
				var div_w = $('container_enlargement').getWidth() / 2;
				$('container_enlargement').setStyle('top', '60px');
				$('container_enlargement').setStyle('left', (w - div_w) + 'px');				
			},
			
			onFailure: function() {
				$(div).set('html', '<div class="ajax_white">Error loading... Please refresh the browser</div>');
			},
			
			onRequest: function() {
				$(div).set('html', '<div class="ajax_white"></div>');
			}
		
		}).send(data);		
	}	
	
	function sendEnquiry(fullname, company, address, suburb, state, postcode, email, phone, application, fabric, colour)
	{
		var url = "process.asp";

		var data = "process=contact";
		data = data + "&fullname=" + fullname;
		data = data + "&company=" + company;
		data = data + "&address=" + address;
		data = data + "&suburb=" + suburb;
		data = data + "&state=" + state;
		data = data + "&postcode=" + postcode;
		data = data + "&email=" + email;
		data = data + "&phone=" + phone;
		data = data + "&application=" + application;
		data = data + "&fabric=" + fabric;
		data = data + "&colour=" + colour;
		data = data + "&sid=" + Math.random();		
		
		var req = new Request( {method: 'get', url: '' + url, 

			onSuccess: function(txt) {
				alert(txt);
				
				hideContact();
				
				//clear form
				var form = document.contactform;
				form.fullname.value = "Name";
				form.address.value = "Address";
				form.suburb.value = "Suburb";
				form.state.value = "State";
				form.postcode.value = "Postcode";
				form.email.value = "Email";
				form.phone.value = "Phone";			
				form.application.value = "0";				
			},
			
			onFailure: function() {
				alert("Error connecting to server. Please refresh this page...");
			}
			
		}).send(data);
	}

	function signupNewsletter(listID, fullname, company, position, email)
	{
		var url = "process.asp";

		var data = "process=recipient";
		data = data + "&action=add-jax";
		data = data + "&listID=" + listID;
		data = data + "&fullname=" + fullname;
		data = data + "&company=" + company;
		data = data + "&position=" + position;
		data = data + "&email=" + email;
		data = data + "&sid=" + Math.random();		
		
		var req = new Request( {method: 'get', url: '' + url, 

			onSuccess: function(txt) {
				alert(txt);
				
				hideSubscribe();				

				//clear form
				var form = document.sigupform;				
				form.fullname.value = 'Full Name';
				form.company.value = 'Company';
				form.position.value = 'Position';
				form.email.value = 'Email Address';				
			},
			
			onFailure: function() {
				alert("Error connecting to server. Please refresh this page...");
			}
			
		}).send(data);
	}

	function sendMailToFriend(fullname, email, productID)
	{
		var url = "process.asp";

		var data = "process=email_friend";
		data = data + "&fullname=" + fullname;
		data = data + "&email=" + email;
		data = data + "&productID=" + productID;
		data = data + "&sid=" + Math.random();

		var req = new Request( {method: 'get', url: '' + url, 

			onSuccess: function(txt) {
				alert(txt);
			},

			onFailure: function() {
				alert("Error connecting to server. Please refresh this page...");
			}

		}).send(data);	
	}

	function sendOrderSample(fullname, company, address, suburb, state, postcode, email, phone, occupation, texture, colour, transparency)
	{
		var url = "process.asp";

		var data = "process=ordersample";
		data = data + "&fullname=" + fullname;
		data = data + "&company=" + company;
		data = data + "&address=" + address;
		data = data + "&suburb=" + suburb;
		data = data + "&state=" + state;
		data = data + "&postcode=" + postcode;
		data = data + "&email=" + email;
		data = data + "&phone=" + phone;
		data = data + "&occupation=" + occupation;
		data = data + "&texture=" + texture;
		data = data + "&colour=" + colour;
		data = data + "&transparency=" + transparency;
		data = data + "&sid=" + Math.random();		

		var req = new Request( {method: 'get', url: '' + url, 

			onSuccess: function(txt) {
				alert(txt);
				
				hideOrderSample();			
			},

			onFailure: function() {
				alert("Error connecting to server. Please refresh this page...");
			}

		}).send(data);
	}

	function showState()
	{
		var form = document.retailerform;
		var countryID = form.country.value;
	
		var div = $('state_div');
		var url = "get_retailer.asp";
		var data = "process=state&countryID=" + countryID;

		var req = new Request( {url: '' + url, 
			
			onSuccess: function(txt) {
				$(div).set('html', txt);		
			},

			onFailure: function() {
				$(div).set('html', '<br /><div class="ajax">Error loading... Please refresh the browser</div>');
			},

			onRequest: function() {
				$(div).set('html', '<br /><div class="ajax">Loading states...</div>');
			}

		}).send(data);
	}

	function showSuburb()
	{
		var form = document.retailerform;
		var countryID = form.country.value;
		var stateName = form.state.value.replace(" ", "+");
		
		var div = $('suburb_div');
		var url = "get_retailer.asp";
		var data = "process=suburb&stateName=" + stateName + "&countryID=" + countryID;

		var req = new Request( {url: '' + url, 
			
			onSuccess: function(txt) {
				$(div).set('html', txt);		
			},

			onFailure: function() {
				$(div).set('html', '<br /><div class="ajax">Error loading... Please refresh the browser</div>');
			},

			onRequest: function() {
				$(div).set('html', '<br /><div class="ajax">Loading suburbs...</div>');
			}

		}).send(data);
	}

	//===========================================================================
	// FORM FUNCTIONS
	//===========================================================================
	function submitEnquiry()
	{
		var form = document.contactform;
		
		var c_fullname = form.fullname.value;
		var c_company = form.company.value;
		var c_address = form.address.value;
		var c_suburb = form.suburb.value;
		var c_state = form.state.value;
		var c_postcode = form.postcode.value;
		var c_email = form.email.value;
		var c_phone = form.phone.value;
		var c_application = form.application.value;
		var c_fabric = form.fabric.value;
		var c_colour = form.colour.value;
		
		var valid = true;
		
		if ((c_fullname == "") || (c_fullname == "Full Name")) 
		{
			valid = false;
			alert("Please make sure you have entered your full name.");		
		} 
		else if ((c_address == "") || (c_address == "Address")) 
		{
			valid = false;
			alert("Please make sure you have entered your street address.");		
		} 
		else if ((c_suburb == "") || (c_suburb == "Suburb")) 
		{
			valid = false;
			alert("Please make sure you have entered your suburb.");		
		} 
		else if ((c_state == "") || (c_state == "State")) 
		{
			valid = false;
			alert("Please make sure you have entered your state.");		
		} 
		else if ((c_postcode == "") || (c_postcode == "Postcode")) 
		{
			valid = false;
			alert("Please make sure you have entered your postcode.");		
		} 
		else if (!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(c_email)))
		{
			valid = false;
			alert("Please make sure you have entered a valid e-mail address.");		
		}
		else if ((c_phone == "") || (c_phone == "Phone")) 
		{
			valid = false;
			alert("Please make sure you have entered your phone number.");		
		} 
		else if ((c_application == "") || (c_application == "0")) 
		{
			valid = false;
			alert("Please make sure you have selected the application.");		
		} 
		
		if (valid == true) 
		{
			sendEnquiry(c_fullname, c_company, c_address, c_suburb, c_state, c_postcode, c_email, c_phone, c_application, c_fabric, c_colour);			
		}		
	}	
	
	function submitSignUpNewsletter()
	{
		var form = document.sigupform;
		
		var c_listID = form.listID.value;
		var c_fullname = form.fullname.value;
		var c_company = form.company.value;
		var c_position = form.position.value;
		var c_email = form.email.value;
		
		var valid = true;
		
		if ((c_fullname == "") || (c_fullname == "Full name")) 
		{
			valid = false;
			alert("Please make sure you have entered your full name.");		
		} 
		else if (!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(c_email)))
		{
			valid = false;
			alert("Please make sure you have entered a valid e-mail address.");		
		}
		
		if (valid == true) 
		{
			signupNewsletter(c_listID, c_fullname, c_company, c_position, c_email);
		}		
	}
	
	function processSendToFriendLink(productID)
	{
		var fullname, email;
		var valid = true;

		fullname = prompt("Please enter your name", "");

		if(fullname == "")
		{
			valid = false;
			alert("You must leave the name blank.");
		}
		else
		{
			email = prompt("Please enter your friend's email address", "");

			if (!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)))
			{
				valid = false;
				alert("Invalid email format.");
			}
		}

		if (valid == true)
		{
			if (confirm("Hi " + fullname + ", do you really want to email this page to " + email + "?"))
			{
				sendMailToFriend(fullname, email, productID);
			}
		}
		else
		{
			alert("Email hasn't been sent yet due to invalid inputs.");
		}
	}

	function submitOrderSample()
	{
		var form = document.ordersampleform;
		
		var c_fullname = form.fullname.value;
		var c_company = form.company.value;
		var c_address = form.address.value;
		var c_suburb = form.suburb.value;
		var c_state = form.state.value;
		var c_postcode = form.postcode.value;
		var c_email = form.email.value;
		var c_phone = form.phone.value;
		var c_occupation = form.occupation.value;
		var c_texture = form.texture.value;
		var c_colour = form.colour.value;
		var c_transparency = form.transparency.value;
		
		var valid = true;
		
		if ((c_fullname == "") || (c_fullname == "Full Name")) 
		{
			valid = false;
			alert("Please make sure you have entered your full name.");		
		} 
		else if ((c_address == "") || (c_address == "Address")) 
		{
			valid = false;
			alert("Please make sure you have entered your street address.");		
		} 
		else if ((c_suburb == "") || (c_suburb == "Suburb")) 
		{
			valid = false;
			alert("Please make sure you have entered your suburb.");		
		} 
		else if ((c_state == "") || (c_state == "State")) 
		{
			valid = false;
			alert("Please make sure you have entered your state.");		
		} 
		else if ((c_postcode == "") || (c_postcode == "Postcode")) 
		{
			valid = false;
			alert("Please make sure you have entered your postcode.");		
		} 
		else if (!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(c_email)))
		{
			valid = false;
			alert("Please make sure you have entered a valid e-mail address.");		
		}
		else if ((c_phone == "") || (c_phone == "Phone")) 
		{
			valid = false;
			alert("Please make sure you have entered your phone number.");		
		} 
		
		if (valid == true) 
		{
			sendOrderSample(c_fullname, c_company, c_address, c_suburb, c_state, c_postcode, c_email, c_phone, c_occupation, c_texture, c_colour, c_transparency);			
		}		
	}
	
	//===========================================================================
	// GENERAL INIT FUNCTIONS 
	//===========================================================================
	function initBackgrounds()
	{
		var container = 'background';
		var path = 'images/backgrounds/';
		var images;
		
		if ($chk($(container)))
		{
			var bg = $(container).getChildren('div');
			var bg_id = bg[0].get('id');

			/* preloading */  			
			images = [	path + bg_id + '.jpg' ];

			//create the asset.images
			assetBackgrounds = new Asset.images(images, {  

				onComplete: function() { 
					images.each(function(imgsrc) {  
						new Element('img',{ src: imgsrc, width: $('container_background').getWidth(), style: 'width:auto; height:auto;' }).inject($(bg_id)); 
					});					

					$(container).setStyle('opacity', 0);
					bgFull(container, 100);

					$(container).removeClass('bg_hide');					
					new Fx.Tween($(container)).start('opacity', 0, 1).chain(function () {
						(function () {
							begin();
						}).delay(1000);
					});
				}  

			});					
		}
	}	
	
	function initOpacity()
	{
		//left hand side navs
		if ($chk($$('.main_nav')))
		{
			$$('.main_nav').setStyle('opacity', 0.5);
		}			
	
		if ($chk($('container_colour_group')))
		{
			if ($('container_colour_group').hasClass('nav_short'))
			{
				$$('.nav_cg').setStyle('opacity', 0.4);
				$$('.nav_selected').setStyle('opacity', 1);
			}
			else
			{
				$$('.nav_cg').setStyle('opacity', 0.8);			
			}						
		}
			
		if ($chk($('container_transparency')))
		{
			$$('.nav_trans').setStyle('opacity', 0.5);
		}			
		
		if ($chk($('indicator')))
		{
			$('indicator').setStyle('opacity', 0.9);
		}		
		
		if ($chk($('container_details')))
		{
			$('product_details_bg').setStyle('opacity', 0.8);
		}		

		if ($chk($('container_search_details')))
		{
			$('search_details_bg').setStyle('opacity', 0.8);
		}				
	}		
		
	//===========================================================================
	// INDICATOR FUNCTIONS
	//===========================================================================
	function initIndicator()
	{
		if ($chk($('indicator')))
		{			
			var div_h = menuHover.getHeight();
			var indicator = $('indicator');
			
			indicator.setStyles({
				'display' : 'block',
				'top' : MARGIN_TOP,
				'height' : div_h,
				'left' : indicator.getWidth()
			});
			
			if ($chk($('container_details')))
			{
				$('container_details').setStyle('display', 'none');
				$('container_indicator').setStyle('display', 'block');
			}

			if (menuHover == activeTransparency)
			{
				new Fx.Tween(indicator).start('left', indicator.getWidth(), 0).chain(function() {
					setupTransparencyActions();
				});
			}
			else if (menuHover == activeFabricType)
			{
				new Fx.Tween(indicator).start('left', indicator.getWidth(), 0).chain(function() {
					setupFabricActions();
				});			
			}			
			else
			{
				new Fx.Tween(indicator).start('left', indicator.getWidth(), 0);			
			}
		}	
	}
	
	function showProductDetails(colour_id)
	{
		new Fx.Scroll($('details_set')).toElement(colour_id);
	}
		
	//===========================================================================
	// STEP 1: COLOUR GROUP FUNCTIONS (HOME PAGE)
	//===========================================================================
	function initMenuHome()
	{
		var win_h = window.getHeight();
		var div_h;
	
		if ($chk($('container_colour_group')))
		{
			//get the divs
			arrColourGroup = $$('.nav_cg');

			//set the height
			div_h = ( (win_h - ((arrColourGroup.length + 1) * MARGIN_TOP)) / arrColourGroup.length).toInt();			
			
			if ($('container_colour_group').hasClass('no_tween') == false)
			{
				arrColourGroup.setStyles({ 
					'margin-left' : '-135px',
					'display' : 'block',
					'height' : div_h,
					'line-height' : div_h
				});
				
				arrColourGroup.each(function(element, index) {
					new Fx.Tween($(element)).start('margin-left', '-135px', '0px');
					
					if (index == 0)
					{
						element.setStyle('opacity', 1);
						element.addClass('nav_hover');	
						element.set('html', element.get('id') + '&nbsp;&nbsp;');
						
						//for indicator
						activeColourGroup = element;
						menuHover = activeColourGroup;
					}
				});
			}
		}		
	}
	
	function setupColourGroupActions()
	{
		if ($chk($('container_colour_group')))
		{
			arrColourGroup.addEvents({
			
				'mouseover' : function() {
				
					if (!(this.hasClass('nav_short')))
					{
						if (this != activeColourGroup)
						{
							activeColourGroup.setStyle('opacity', 0.8);					
							var myEffect = new Fx.Morph(activeColourGroup, {duration: 'short'});
							myEffect.start('.nav_normal');					
							
							this.setStyle('opacity', 1);
							var myEffect = new Fx.Morph(this, {duration: 'short'});
							myEffect.start('.nav_hover');
							
							menuHover = this;
							activeColourGroup = this;

							setIndicatorPosition($('indicator'), arrColourGroup, this);						
							
							$$('.nav_cg').set('html', '');
							this.set('html', this.get('id') + '&nbsp;&nbsp;');
						}
					}
					else
					{
						this.set('html', this.get('id') + "&nbsp;&nbsp;");
						this.setStyle('opacity', 1);	
					}
				},

				'mouseout' : function() {
					
					//set opacity back to 0.4 if on product page
					if (!(this.hasClass('nav_selected')) && this.hasClass('nav_short'))
					{
						this.empty();
						this.setStyle('opacity', 0.4);	
					} 
				}				
				
			});
			
			$('container_colour_group').addEvents({

				'mouseover' : function() {
				
					if (this.hasClass('nav_short'))
					{
						arrColourGroup.set('morph', {duration: 'short'});
						arrColourGroup.morph({ 'width' : NAV_HOVER });						

						this.set('morph', {duration: 'short'});						
						this.morph({ 'width' : NAV_HOVER });
					}
					
				},

				'mouseout' : function() {
					
					if (this.hasClass('nav_short'))
					{				
						arrColourGroup.set('morph', {duration: 'short'});
						arrColourGroup.morph({ 'width' : NAV_SHORT });						

						this.set('morph', {duration: 'short'});						
						this.morph({ 'width' : NAV_SHORT });
					}
				}
				
			});
		}			
	}	
	
	//===========================================================================
	// STEP 1: COLOUR GROUP FUNCTIONS (PRODUCT PAGE)
	//===========================================================================
	function initMenuProduct()
	{
		var win_h = window.getHeight();
		var div_h;
	
		if ($chk($('container_colour_group')))
		{
			//get the divs
			arrColourGroup = $$('.nav_cg');

			//set the height
			div_h = ( (win_h - ((arrColourGroup.length + 1) * MARGIN_TOP)) / arrColourGroup.length).toInt();			
			
			arrColourGroup.setStyles({ 
				'margin-left' : '0px',					
				'display' : 'block',
				'height' : div_h,
				'line-height' : div_h
			});
			
			if (!$chk($('background_search')) && !$chk($('background_retailer')))
			{
				$$('.nav_selected')[0].set('html', $$('.nav_selected')[0].get('id') + "&nbsp;&nbsp;");
				selectedColourGroup = $$('.nav_selected')[0].get('id');
				if (!$('container_background').hasClass('background_details'))
				{
					$$('.nav_selected').addClass('nav_hover');
				}
			}
		}
	}		
	
	//===========================================================================
	// STEP 2: TRANSPARENCY FUNCTIONS
	//===========================================================================
	function initMenuTransparency()
	{
		var win_h = window.getHeight();
		var div_h;

		if ($chk($('container_transparency')))
		{
			//get the divs
			arrTransparency = $$('.nav_trans');

			//set the height
			div_h = ( (win_h - ((arrTransparency.length + 1) * MARGIN_TOP)) / arrTransparency.length).toInt();			
			
			if ($('container_transparency').hasClass('no_tween') == false)
			{
				arrTransparency.setStyles({ 
					'margin-left' : '-135px',
					'display' : 'block',
					'height' : div_h,
					'line-height' : div_h
				});
				
				arrTransparency.each(function(element, index) {
					new Fx.Tween($(element)).start('margin-left', '-135px', '0px');
					
					if (index == 0)
					{
						element.setStyle('opacity', 1);
						element.addClass('nav_hover');	
						element.set('html', element.get('id') + "&nbsp;&nbsp;");					
						
						//for indicator
						transparencyNow = 'transparent';
						activeTransparency = element;
						menuHover = activeTransparency;
					}
				});
			}
			else
			{
				//product details: no_tween
				arrTransparency.setStyles({ 
					'display' : 'block',
					'height' : div_h,
					'line-height' : div_h
				});
				
				$('container_transparency').setStyles({ 'width' : NAV_SHORT });
				activeTransparency = $$('.nav_selected')[1];
				activeTransparency.setStyle('opacity', 1);
				activeTransparency.set('html', activeTransparency.get('id') + "&nbsp;&nbsp;");
				transparencyNow = activeTransparency.get('id');
				menuHover = activeTransparency;
				
				initFabrics(transparencyNow);
				setupTransparencyActions();			
			}
		}	
	}
	
	function setupTransparencyActions()
	{
		if ($chk($('container_transparency')))
		{
			$$('.nav_trans').addEvents({
			
				'click' : function() {
				
					//hide details
					if ($chk($('container_details'))) 
					{
						$('container_details').setStyle('display', 'none');
					}
				
					if (this.getWidth() > NAV_SHORT)
					{
						$$('.nav_trans').morph('.nav_short');
						$('container_transparency').set('morph', {duration: 'short'});
						$('container_transparency').morph('.nav_short');

						$$('.nav_trans').addClass('nav_short');
						$('container_transparency').addClass('nav_short');

						$('container_fabric_type').setStyles({ 'display' : 'block', 'width' : 0 });
						$('container_fabric_type').morph('.nav_hover');
					}
					
					//set the clicked to opacity 1
					if (!this.hasClass('nav_selected')) 
					{
						activeTransparency.setStyle('opacity', 0.5);
						this.setStyle('opacity', 1);
						
						$$('.nav_trans').removeClass('nav_selected');
						$$('.nav_trans').set('html', '');
						
						this.addClass('nav_selected');
						this.set('html', this.get('id') + '&nbsp;&nbsp;');
						
						activeTransparency = this;
					}
					
					//change the indicator to fabric
					var indicator = $('container_indicator');
					if (indicator.getStyle('display') == 'block')
					{
						var hdr_indicator = $('indicator_hdr');
						hdr_indicator.removeClass('select_transparency');						
						hdr_indicator.addClass('select_fabric');
						
						indicator.setStyle('display', 'block');
						$('indicator').removeClass('indicator_transparency');
						$('indicator').addClass('indicator_fabric');												
					}	
					
					//start stage 3 animation
					transparencyNow = this.get('id');
					initFabrics(this.get('id'));
					initIndicator();					
				},
			
				'mouseover' : function() {
				
					if (!this.hasClass('nav_short'))
					{				
						if (this != activeTransparency)
						{				
							activeTransparency.setStyle('opacity', 0.5);					
							var myEffect = new Fx.Morph(activeTransparency, {duration: 'short'});
							myEffect.start('.nav_normal');					
							
							this.setStyle('opacity', 1);
							var myEffect = new Fx.Morph(this, {duration: 'short'});
							myEffect.start('.nav_hover');
															
							activeTransparency = this;
							menuHover = this;
							
							setIndicatorPosition($('indicator'), arrTransparency, this);					
							
							$$('.nav_trans').set('html', '');
							this.set('html', this.get('id') + '&nbsp;&nbsp;');					
						}
					}
					else
					{							
						//user has selected
						$$('.nav_trans').set('html', '');
						$$('.nav_selected')[1].set('html', $$('.nav_selected')[1].get('id') + '&nbsp;&nbsp;');
						this.set('html', this.get('id') + '&nbsp;&nbsp;');
						this.setStyle('opacity', 1);
					}
				},

				'mouseout' : function() { 
					
					if (!this.hasClass('nav_selected') && this.hasClass('nav_short'))
					{	
						this.empty();
						this.setStyle('opacity', 0.5);
					}					
				}
				
			});
			
			$('container_transparency').addEvents({

				'mouseover' : function() {
				
					if (this.hasClass('nav_short'))
					{
						arrTransparency.set('morph', {duration: 'short'});
						arrTransparency.morph({ 'width' : NAV_HOVER });						

						this.set('morph', {duration: 'short'});						
						this.morph({ 'width' : NAV_HOVER });					
					}
					
				},

				'mouseout' : function() {
					
					if (this.hasClass('nav_short'))
					{				
						arrTransparency.set('morph', {duration: 'short'});
						arrTransparency.morph({ 'width' : NAV_SHORT });						

						this.set('morph', {duration: 'short'});						
						this.morph({ 'width' : NAV_SHORT });											
					}
				}
				
			});			

		}	
	}	
	
	//===========================================================================
	// STEP 3: FABRICS FUNCTIONS
	//===========================================================================
	function initFabrics(transparency)
	{
		if ($chk($('container_fabric_type')))
		{
			var win_h = window.getHeight();
			var div_h;
			
			//reset displays
			$$('.nav_fabric_type').setStyle('display', 'none');
			$$('.fabric_options').setStyle('display', 'none');

			//get the divs
			arrFabricType = $$('.fabric_' + transparency);

			//set the height
			div_h = ( (win_h - ((arrFabricType.length + 1) * MARGIN_TOP)) / arrFabricType.length).toInt();			
			
			if ($('container_fabric_type').hasClass('no_tween') == false)
			{
				arrFabricType.setStyles({ 
					'margin-left' : '-100px',
					'display' : 'block',
					'height' : div_h,
					'opacity' : 0.5,
					/*'line-height' : div_h,*/
					'width' : '200px' /* 135 */
				});
								
				$$('.swatch_image').setStyle('height', div_h);
				$$('.swatch_text').setStyle('height', div_h);
				$$('.swatch_text').setStyle('display', 'none');
								
				//reset elements
				arrFabricType.removeClass('nav_hover');
				arrFabricType.removeClass('nav_short');
				$('fabric_type_' + transparency).setStyle('display', 'block');
				$('container_fabric_type').removeClass('nav_short');
				
				arrFabricType.each(function(element, index) {
					new Fx.Tween($(element)).start('margin-left', '-200px', '0px');
					
					if (index == 0)
					{					
						element.setStyle('opacity', 1);
						element.addClass('nav_hover');	
						element.getChildren('div')[1].setStyle('display', 'block');
						
						//for indicator
						activeFabricType = element;					 
						menuHover = activeFabricType;
					}
				});
			}
			else
			{
				arrFabricType.setStyles({ 
					'margin-left' : '0px',
					'display' : 'block',
					'height' : div_h,
					'opacity' : 0.5,
					/*'line-height' : div_h,*/
					'width' : '200px' /* 135 */
				});
				
				$$('.swatch_image').setStyle('height', div_h);
				$$('.swatch_text').setStyle('height', div_h);
				$$('.swatch_text').setStyle('display', 'none');				
				
				//reset elements
				$('fabric_type_' + transparency).setStyle('display', 'block');
				$$('.nav_fabric_type').addClass('nav_short');										
				$('container_fabric_type').addClass('nav_normal');						
				
				activeFabricType = $$('.nav_selected')[2];				
				activeFabricType.setStyle('opacity', 1);							
				activeFabricType.getChildren('div')[1].setStyle('display', 'block');
				
				menuHover = activeFabricType;
				
				initProductDetails();
				showProductDetails('details ' + transparencyNow + ' ' + activeFabricType.get('id'));
				
				$('container_fabric_type').removeClass('no_tween');
				setupFabricActions();
			}
		}
	}	
	
	function setupFabricActions()
	{
		if ($chk($('container_fabric_type')))
		{
			arrFabricType.addEvents({
			
				'click' : function() {
				
					if (!this.hasClass('nav_short'))
					{
						$$('.nav_fabric_type').addClass('nav_short');												
						$('container_fabric_type').addClass('nav_normal');						

						initProductDetails();
					}
					
					if (!this.hasClass('nav_selected')) 
					{
						activeFabricType.getChildren('div')[1].setStyle('display', 'none');
						activeFabricType.setStyle('opacity', 0.5);
						
						$$('.nav_fabric_type').removeClass('nav_selected');
						$$('.nav_fabric_type').getChildren('div')[1].setStyle('display', 'none');
												
						this.setStyle('opacity', 1);
						this.addClass('nav_selected');
						this.getChildren('div')[1].setStyle('display', 'block');
						
						activeFabricType = this;	
						$$('.swatch_image').setStyle('display', 'block');
					}	
					
					showProductDetails('details ' + transparencyNow + ' ' + this.get('id'));
								
				},
			
				'mouseover' : function() {
				
					if (!this.hasClass('nav_short'))
					{
						if (this != activeFabricType)
						{
							activeFabricType.setStyle('opacity', 0.5);					
							activeFabricType.getChildren('div')[1].setStyle('display', 'none');							

							this.setStyle('opacity', 1);
							
							menuHover = this;
							activeFabricType = this;
							activeFabricType.getChildren('div')[1].setStyle('display', 'block');

							setIndicatorPosition($('indicator'), arrFabricType, this);						
						}
					}
					else
					{
						if (this != activeFabricType)
						{
							this.setStyle('opacity', 1);	
							
							$$('.swatch_text').setStyle('display', 'none');
							$$('.nav_selected')[2].getChildren('div')[1].setStyle('display', 'block');
							this.getChildren('div')[1].setStyle('display', 'block');		
						}
					}
				},

				'mouseout' : function() {

					if (!this.hasClass('nav_selected') && this.hasClass('nav_short') && this != activeFabricType)
					{
						this.getChildren('div')[1].setStyle('display', 'none');						
						this.setStyle('opacity', 0.5);	
					}
				}
				
			});
			
	
		}
	}		
	
	//===========================================================================
	// FINAL STEP: PRODUCT DETAILS FUNCTIONS
	//===========================================================================	
	function initProductDetails()
	{
		if ($chk($('container_details')))
		{
			var win_h = window.getHeight();
			var details = $('product_details_bg');
			var container = $('container_details');
			
			details.setStyles({
				'display' : 'block',
				'height' : win_h - 10,
				'margin-bottom' : -1 * (win_h - 10)
			});
			
			container.setStyles({
				'width' : 0,
				'display' : 'block'
			});
		
			$('container_indicator').setStyle('display', 'none');
			container.morph({ 'width' : '530px' });						
		}	
	}	
		
	//===========================================================================
	// LAYOUT FUNCTIONS 
	//===========================================================================		
	function initProductSearch()
	{
		if ($chk($('container_search_details')))
		{
			var win_h = window.getHeight();
			var details = $('search_details_bg');
			var container = $('container_search_details');
			
			details.setStyles({
				'display' : 'block',
				'height' : win_h - 10,
				'margin-bottom' : -1 * (win_h - 10)
			});
			
			container.setStyles({
				'width' : 0,
				'display' : 'block'
			});
		
			container.morph({ 'width' : '720px' });	
			
			$('product_result').setStyle('height', win_h - 140);	
			$('scrollable_result').setStyle('height', win_h - 140);	
			
			if ($chk($('container_scrollbar')))
			{
				$('scrollbar_area').setStyle('height', win_h - 200);	
				setupScrollbars();
			}
		}	
	}	
		
	function setIndicatorPosition(element, navs, nav_active)
	{
		var idx = navs.indexOf(nav_active);
		var top = MARGIN_TOP * (idx + 1) + idx * nav_active.getHeight();
		element.setStyle('top', top);				
	}
	
	function setupDraggableDivs()
	{
		if ($chk($('container_enlargement')))
		{
			var dragEnlargement = new Drag('container_enlargement');
		}
	}	
		
	function showContact()
	{
		hideSubscribe();
		hideSearch();
		hideRetailer();
		
		if (!flagContact)
		{
			$('container_contact').setStyle('display', 'block');
			flagContact = true;
		}
	}
	
	function hideContact()
	{
		if (flagContact)
		{
			hideRetailer();
			
			$('container_contact').setStyle('display', 'none');
			flagContact = false;
		}
	}	

	function toggleContact()
	{
		if (!flagContact)
		{
			showContact();
		}
		else
		{
			hideContact();
		}
	}	

	function showOrderSample()
	{
		if (!flagOrderSample)
		{
			$('container_order_sample').setStyle('display', 'block');
			flagOrderSample = true;
		}
	}

	function hideOrderSample()
	{
		if (flagOrderSample)
		{
			$('container_order_sample').setStyle('display', 'none');
			flagOrderSample = false;
		}
	}

	function showEnlargement()
	{
		if (!flagEnlargement)
		{
			$('container_enlargement').setStyle('display', 'block');
			flagEnlargement = true;
		}
	}
	
	function hideEnlargement()
	{
		if (flagEnlargement)
		{
			$('container_enlargement').setStyle('display', 'none');
			flagEnlargement = false;
		}
	}	

	function toggleEnlargement()
	{
		if (!flagEnlargement)
		{
			showEnlargement();
		}
		else
		{
			hideEnlargement();
		}
	}

	function showSearch()
	{		
		hideContact();
		hideSubscribe();
		hideRetailer();

		if (!flagSearch)
		{
			$('container_search').setStyle('display', 'block');
			flagSearch = true;
		}
	}
	
	function hideSearch()
	{
		if (flagSearch)
		{
			$('container_search').setStyle('display', 'none');
			flagSearch = false;
		}
	}	

	function toggleSearch()
	{
		if (!flagSearch)
		{
			showSearch();
		}
		else
		{
			hideSearch();
		}
	}

	function showRetailer()
	{
		hideContact();
		hideSubscribe();
		hideSearch();

		if (!flagRetailer)
		{
			$('container_retailer').setStyle('display', 'block');
			flagRetailer = true;
		}
	}
	
	function hideRetailer()
	{
		if (flagRetailer)
		{
			$('container_retailer').setStyle('display', 'none');
			flagRetailer = false;
		}
	}	

	function toggleRetailer()
	{
		if (!flagRetailer)
		{
			showRetailer();
		}
		else
		{
			hideRetailer();
		}
	}

	function showSubscribe()
	{
		hideContact();
		hideSearch();
		hideRetailer();
		
		if (!flagSubscribe)
		{
			$('container_subscribe').setStyle('display', 'block');
			flagSubscribe = true;
		}
	}
	
	function hideSubscribe()
	{
		if (flagSubscribe)
		{
			$('container_subscribe').setStyle('display', 'none');
			flagSubscribe = false;
		}
	}	

	function toggleSubscribe()
	{
		if (!flagSubscribe)
		{
			showSubscribe();
		}
		else
		{
			hideSubscribe();
		}
	}
	
	function resetMenuHeights()
	{
		var win_h = window.getHeight();
		var div_h;
		
		if ($chk($('container_colour_group')))
		{
			div_h = ( (win_h - ((arrColourGroup.length + 1) * MARGIN_TOP)) / arrColourGroup.length).toInt();
			
			$$('.nav_cg').setStyles({
				'height' : div_h,
				'line-height' : div_h
			});
		}	

		if ($chk($('container_transparency')))
		{
			div_h = ( (win_h - ((arrTransparency.length + 1) * MARGIN_TOP)) / arrTransparency.length).toInt();

			$$('.nav_trans').setStyles({
				'height' : div_h,
				'line-height' : div_h
			});
		}
		
		if ($chk($('container_fabric_type')) && $chk(arrFabricType))
		{
			div_h = ( (win_h - ((arrFabricType.length + 1) * MARGIN_TOP)) / arrFabricType.length).toInt();

			arrFabricType.setStyles({
				'height' : div_h
				/* 'line-height' : div_h */
			});
			
			$$('.swatch_image').setStyle('height', div_h);
			$$('.swatch_text').setStyle('height', div_h);
		}

		if ($chk($('indicator')))
		{
			var indicator = $('indicator');
			
			indicator.setStyle('height', div_h);
							
			var navs;
			if (menuHover == activeColourGroup)
			{
				navs = arrColourGroup;
			}
			else if (menuHover == activeTransparency)
			{
				navs = arrTransparency;
			}
			else if (menuHover == activeFabricType)
			{
				navs = arrFabricType;
			}
			
			if ($('container_indicator').getStyle('display') == 'block')
			{
				setIndicatorPosition(indicator, navs, menuHover);
			}
		}		
		
		if ($chk($('container_colour_type')) && $chk(arrColourType))
		{
			div_h = ( (win_h - ((arrColourType.length + 1) * MARGIN_TOP)) / arrColourType.length).toInt();

			$$('.nav_colour_type').setStyles({
				'height' : div_h,
				'line-height' : div_h
			});
		}		

		if ($chk($('container_details')))
		{
			$('product_details_bg').setStyles({
				'height' : win_h - 10,
				'margin-bottom' : -1 * (win_h - 10)
			});					
		}
		
		if ($chk($('container_search_details')))
		{
			$('search_details_bg').setStyles({
				'height' : win_h - 10,
				'margin-bottom' : -1 * (win_h - 10)
			});	
			
			$('product_result').setStyle('height', win_h - 140);	
			$('scrollable_result').setStyle('height', win_h - 140);	
			if ($chk($('container_scrollbar')))
			{
				$('scrollbar_area').setStyle('height', win_h - 200);
				setupScrollbars();				
			}
		}		
		
	}

	//===========================================================================
	// GENERAL EVENTS FUNCTIONS
	//===========================================================================
	function setupActions()
	{
		//left hand side navs
		if ($chk($$('.main_nav')))
		{
			$$('.main_nav').addEvents({
			
				'mouseover' : function() {				
					this.setStyle('opacity', 1);	
				},

				'mouseout' : function() {
					this.setStyle('opacity', 0.5);	
				}
				
			});
		}	
		
		if ($chk($$('.image_hover')))
		{
			$$('.image_hover').addEvents({
			
				'mouseover' : function() {			
					var img = this.getChildren('img')[0];
					img.setStyle('padding-top', '4px');	
				},

				'mouseout' : function() {
					var img = this.getChildren('img')[0];
					img.setStyle('padding-top', '0px');	
				}
				
			});
		}		
	}	
	
	function begin()
	{
		if ($chk($('background_home')))
		{
			initMenuHome();	
			initIndicator();
			setupColourGroupActions();				
		}
		else if ($chk($('container_search_details')))
		{
			arrColourGroup.morph({ 'width' : NAV_SHORT });
			var myEffect = new Fx.Morph($('container_colour_group'));
			myEffect.start({ 'width' : NAV_SHORT }).chain(
				function() {
					arrColourGroup.addClass('nav_short');
					initProductSearch();				
					setupColourGroupActions();
				}
			);

			if($chk($('background_search')))
				showSearch();
			else if($chk($('background_retailer')))
				showRetailer();
		}
		else
		{
			if ($('container_background').hasClass('background_details'))
			{
				setupColourGroupActions();
				$('container_colour_group').setStyles({ 'width' : NAV_SHORT });
				initMenuTransparency();
			}
			else
			{
				//animate
				arrColourGroup.set('morph', {duration: 'short'});			
				arrColourGroup.morph({ 'width' : NAV_SHORT });
				
				var myEffect = new Fx.Morph($('container_colour_group'), {duration: 'short'});
				myEffect.start({ 'width' : NAV_SHORT }).chain(
					function() {
						arrColourGroup.addClass('nav_short');
						initMenuTransparency();				
						initIndicator();			
						setupColourGroupActions();
					}
				);	
			}
		}					
	}
	
	function setupScrollbars()
	{
		if ($chk($('container_scrollbar')))
		{
			makeScrollbar( $('scrollable_result'), $('scrollbar_area'), $('scrollbar_handle'), false );
		}		
	}		
	
	//===========================================================================
	// FULL SCREEN BACKGROUND
	//===========================================================================
	function $E(tag,el){return $(el||document).getElement(tag)}
	
	kina={
		doc:{x:0,y:0},
		fix:
			function()
			{				
				if(kina.bg.complete&&(db.offsetWidth!=kina.doc.x||db.offsetHeight!=kina.doc.y||kina.fix.src!=kina.bg.src))
				{
					var bg=kina.bg.getSize();
					kina.doc={x:db.offsetWidth,y:db.offsetHeight};
					kina.fix.src==kina.bg.src||$extend(kina.fix,{p:bg.x/bg.y,src:kina.bg.src});
					kina.bg.setStyles({width:(bg.y=kina.doc.x>(bg.x=Math.round(kina.doc.y*kina.fix.p)))?kina.doc.x:bg.x,height:bg.y?Math.round(kina.doc.x/kina.fix.p):kina.doc.y})			
				}								
			}
	}

	function bgFull(container, interval)
	{
		if ($chk($(container)))
		{
			$extend
			(
				kina,{bg:$E('img',$E('#' + container,db=$(document.body))),timer:setInterval(kina.fix,interval)}
			);			
		}		
	}
	
	//===========================================================================
	// START THIS WHEN PAGE DOM READY
	//===========================================================================
	window.addEvents({
	
		'domready' : function(e) {
			initBackgrounds();
			
			if (!$chk($('background_home')))
			{
				initMenuProduct();
			}
			
			initOpacity();
			setupActions();
			setupDraggableDivs();
		},
		
		'resize' : function() {
			resetMenuHeights();
		}
		
	});
	

//-->