/* 

	SearchField 
	written by Alen Grakalic, provided by Css Globe (cssglobe.com)
	please visit http://cssglobe.com/post/1202/style-your-websites-search-field-with-jscss/ for more info
	
*/

this.searchfield = function(){
	
	// CONFIG 
	
	// this is id of the search field you want to add this script to. 
	// You can use your own id just make sure that it matches the search field in your html file.
	var id = "searchfield";
	
	// Text you want to set as a default value of your search field.
	var defaultText = "Search for keywords...";	
	
	// set to either true or false
	// when set to true it will generate search suggestions list for search field based on content of variable below
	var suggestion = true;
	
	// static list of suggestion options, separated by comma
	// replace with your own
	var suggestionText = "Home Page, Essential Oil Burner, Candle, Oil Warmer, Burner, Tealight, Light, Choose By Mood, Protection Mood, Healing Mood, Aspirational Mood, Relaxation Mood, Seductive Mood, Empowering Mood, Standard Candles, Armour Standard Candle, Ego Standard Candle, Gilt Standard Candle, Immune Standard Candle, Off Standard Candle, Removal Standard Candle, Repair Standard Candle, Them Standard Candle, Us Standard Candle, Vixen Standard Candle, Lift Standard Candle, Serene Standard Candle, Armour Candle, Ego Candle, Gilt Candle, Immune Candle, Off Candle, Removal Candle, Repair Candle, Them Candle, Us Candle, Vixen Candle, My Desire Bespoke, Perfume Air, Armour Perfume Air, Clean Perfume Air, Cure Perfume Air, Ego Perfume Air, Fire Perfume Air, Gilt Perfume Air, Immune Perfume Air, Level Perfume Air, Off Perfume Air, Removal Perfume Air, Repair Perfume Air, Serene Perfume Air, Lift Perfume Air, Them Perfume Air, Us Perfume Air, Vixen Perfume Air, Armour, Clean, Cure, Ego, Fire, Gilt, Immune, Level, Lift, Off, Removal, Repair, Serene, Them, Us, Vixen, Botanical Bath Milk, Centred Bath Milk, Clarity Bath Milk, Smile Bath Milk, Spark Bath Milk, Vixen Bath Milk, Gift Set, Courage Gift Set, Plenty Gift Set, Renew Gift Set, Aphrodisia Gift Set, Ask Raef, Lime, Geranium, Rose Geranium, Geranium Rose, Vanilla, Elemi, Galangal, Myrrh, Sandalwood, Frankincense, Orange, Lemongrass, Bay, Juniper, Bergamot, Lavandin, Cinnamon Leaf, Clove, Nutmeg, Wild Thyme, Palmarosa, Mimosa, Chamomile, Vetivert, Allspice, Cedar, Sweet Orange, Marjoram, Roman Chamomile, Pine, Cypress, Peppermint, Rosemary, Pink Grapefruit, Ylang Ylang, Patchouli, Red Mandarin, Jasmine, Petit Grain, Coconut Oil, Rosehip Seed Oil, Wheatgerm Oil, Distilled Flower Water - Rose, Distilled Flower Water - Orange, Rose Distilled Flower Water, Orange Distilled Flower Water, Sweet, Citrus, Floral, Sensual, Oriental, Smokey, Woody, Wood, Fruit, Fresh, Warm, Exotic, Spice, Classic, Leatherly, Leather, Refreshing, Light, Leafy, Garden, Flowers, Grass, Vibrant, Crisp, Clean, Clear, Enable, Euphoria, Restore, Sedative, Body Balm, Face Balm, Skin Balm, Oily Skin, Combination Skin, Dehydrated Skin, Maturing Skin, Sensitive Skin"; 
	
	// END CONFIG (do not edit below this line, well unless you really, really want to change something :) )
	
	// Peace, 
	// Alen

	var field = document.getElementById(id);	
	var classInactive = "sf_inactive";
	var classActive = "sf_active";
	var classText = "sf_text";
	var classSuggestion = "sf_suggestion";
	this.safari = ((parseInt(navigator.productSub)>=20020000)&&(navigator.vendor.indexOf("Apple Computer")!=-1));
	if(field && !safari){
		field.value = defaultText;
		field.c = field.className;		
		field.className = field.c + " " + classInactive;
		field.onfocus = function(){
			this.className = this.c + " "  + classActive;
			this.value = (this.value == "" || this.value == defaultText) ?  "" : this.value;
		};
		field.onblur = function(){
			this.className = (this.value != "" && this.value != defaultText) ? this.c + " " +  classText : this.c + " " +  classInactive;
			this.value = (this.value != "" && this.value != defaultText) ?  this.value : defaultText;
			clearList();
		};
		if (suggestion){
			
			var selectedIndex = 0;
						
			field.setAttribute("autocomplete", "off");
			var div = document.createElement("div");
			var list = document.createElement("ul");
			list.style.display = "none";
			div.className = classSuggestion;
			list.style.width = field.offsetWidth + "px";
			div.appendChild(list);
			field.parentNode.appendChild(div);	

			field.onkeypress = function(e){
				
				var key = getKeyCode(e);
		
				if(key == 13){ // enter
					selectList();
					selectedIndex = 0;
					return false;
				};	
			};
				
			field.onkeyup = function(e){
			
				var key = getKeyCode(e);
		
				switch(key){
				case 13:
					return false;
					break;			
				case 27:  // esc
					field.value = "";
					selectedIndex = 0;
					clearList();
					break;				
				case 38: // up
					navList("up");
					break;
				case 40: // down
					navList("down");		
					break;
				default:
					startList();			
					break;
				};
			};
			
			this.startList = function(){
				var arr = getListItems(field.value);
				if(field.value.length > 0){
					createList(arr);
				} else {
					clearList();
				};	
			};
			
			this.getListItems = function(value){
				var arr = new Array();
				var src = suggestionText;
				var src = src.replace(/, /g, ",");
				var arrSrc = src.split(",");
				for(i=0;i<arrSrc.length;i++){
					if(arrSrc[i].substring(0,value.length).toLowerCase() == value.toLowerCase()){
						arr.push(arrSrc[i]);
					};
				};				
				return arr;
			};
			
			this.createList = function(arr){				
				resetList();			
				if(arr.length > 0) {
					for(i=0;i<arr.length;i++){				
						li = document.createElement("li");
						a = document.createElement("a");
						a.href = "javascript:void(0);";
						a.i = i+1;
						a.innerHTML = arr[i];
						li.i = i+1;
						li.onmouseover = function(){
							navListItem(this.i);
						};
						a.onmousedown = function(){
							selectedIndex = this.i;
							selectList(this.i);		
							return false;
						};					
						li.appendChild(a);
						list.setAttribute("tabindex", "-1");
						list.appendChild(li);	
					};	
					list.style.display = "block";				
				} else {
					clearList();
				};
			};	
			
			this.resetList = function(){
				var li = list.getElementsByTagName("li");
				var len = li.length;
				for(var i=0;i<len;i++){
					list.removeChild(li[0]);
				};
			};
			
			this.navList = function(dir){			
				selectedIndex += (dir == "down") ? 1 : -1;
				li = list.getElementsByTagName("li");
				if (selectedIndex < 1) selectedIndex =  li.length;
				if (selectedIndex > li.length) selectedIndex =  1;
				navListItem(selectedIndex);
			};
			
			this.navListItem = function(index){	
				selectedIndex = index;
				li = list.getElementsByTagName("li");
				for(var i=0;i<li.length;i++){
					li[i].className = (i==(selectedIndex-1)) ? "selected" : "";
				};
			};
			
			this.selectList = function(){
				li = list.getElementsByTagName("li");	
				a = li[selectedIndex-1].getElementsByTagName("a")[0];
				field.value = a.innerHTML;
				clearList();
			};			
			
		};
	};
	
	this.clearList = function(){
		if(list){
			list.style.display = "none";
			selectedIndex = 0;
		};
	};		
	this.getKeyCode = function(e){
		var code;
		if (!e) var e = window.event;
		if (e.keyCode) code = e.keyCode;
		return code;
	};
	
};

// script initiates on page load. 

this.addEvent = function(obj,type,fn){
	if(obj.attachEvent){
		obj['e'+type+fn] = fn;
		obj[type+fn] = function(){obj['e'+type+fn](window.event );}
		obj.attachEvent('on'+type, obj[type+fn]);
	} else {
		obj.addEventListener(type,fn,false);
	};
};
addEvent(window,"load",searchfield);