/* 

	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 = "Enter text...";	
	
	// 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 = '1\" round tube,1\" slot surface mount wall standards,1/2\" slot surface mount wall standards,1/2\" slot surface mount wall standards,1-1/4\" round tube,2 way connector,3 way connector,3/8 stem caster,4 arm rack,4 way connector,4 way rack,5/16 stem caster,accessories,acrylic,acrylic case,acrylic display case,acrylic display cases,acrylic fixtures,acrylic hosiery bin,acrylic shelving,acrylic tray,acrylics,adjustable faceout,adjustable shelf bracket,almond,almond slatwall,apparel,apparel fixtures,apparel rack,ball waterfall,banister oak,banister oak slatwall,baskets,belt rack,birch,birch slatwall,black,black slatwall,braced acrylic shelving,cable tie,cap display,cardholders,case,cases,casters,checkout,checkout counters,chrome 2 way connector,chrome 3 way connector,chrome 4 way connector,chrome hasp,chrome hinge,chrome standard,clothes,clothes rack,clothing,clothing racks,commercial,commercial display cases,commercial showcases,concealed standard,corner connectors,corner forms,corners,cornice bracket,counter,counters,countertop,countertop displays,cube waterfall,cubes,custom,custom displays,custom fixtures,custom retail fixtures,custom store fixtures,design,display,display counter,display fixtures,display stud,displays,double slot standard,dressing room hook,end cap,extended end cap,faceout,fingernail end cap,fixture,fixture design,fixtures,floor,floor baskets,floor merchandisers,forms,garment,garment racks,glass,glass cube connector,global,gondola,grey,grey slatwall,grid,grid 4way display,grid acrylic tray,grid adjustable shelf bracket,grid ball waterfall,grid bin,grid braced acrylic shelving,grid card racks,grid cube waterfall,grid double hook,grid freestanding display,grid h display,grid hang rod bracket,grid hangrod bracket,grid hook,grid hosiery bin,grid j hook waterfall,grid j racks,grid literature holders,grid milly bracket,grid mirrors,grid panel,grid panel hanger,grid peg hook,grid picture hook,grid quarter circle hangrod,grid scarecrow,grid shelf brace,grid shelf bracket,grid sign holders,grid straight faceout,grid straight hangrod,grid tray,grid triangle display,grid u bar,grid utility hook,grid waterfall,grid wide hook,grid wire baskets,grid wire shelving,gridwall,gridwall panel,handbag rack,hang rod bracket,hang rod bracket adapter,hangers,hangrod bracket,hard rock maple,hard rock maple slatwall,hardware,hasp,heavy duty 1\" slot chrome standard,heavy duty 1\" slot concealed standard,heavy duty 1\" slot cornice bracket,heavy duty 1\" slot double slot standard,heavy duty 1\" slot narrow standard,heavy duty 1\" slot single slot standard,heavy duty 1\" slot standard,heavy duty 1\" slot standard ball waterfall,heavy duty 1\" slot standard hangrod bracket,heavy duty 1\" slot standard j hook waterfall,heavy duty 1\" slot standard knife bracket with tip,heavy duty 1\" slot standard shelf bracket,heavy duty 1\" slot standard shelf bracket with tip,heavy duty 1\" slot standard straight faceout,heavy duty 1\" slot standard waterfall,heavy duty 1\" slot standard wood shelf bracket,heavy duty 1\" slot surface mount wall standard,heavy duty 1\" slot surface mount wall standards,heavy duty 1\" slot t standard,heavy duty 1\" slot wall standard,heavy duty 1\" slot zinc standard,heavy duty 1/2\" slot chrome standard,heavy duty 1/2\" slot concealed standard,heavy duty 1/2\" slot cornice bracket,heavy duty 1/2\" slot double slot standard,heavy duty 1/2\" slot narrow standard,heavy duty 1/2\" slot single slot standard,heavy duty 1/2\" slot standard,heavy duty 1/2\" slot standard ball waterfall,heavy duty 1/2\" slot standard hangrod bracket,heavy duty 1/2\" slot standard j hook waterfall,heavy duty 1/2\" slot standard knife bracket with tip,heavy duty 1/2\" slot standard shelf bracket,heavy duty 1/2\" slot standard shelf bracket with tip,heavy duty 1/2\" slot standard straight faceout,heavy duty 1/2\" slot standard waterfall,heavy duty 1/2\" slot standard wood shelf bracket,heavy duty 1/2\" slot surface mount wall standard,heavy duty 1/2\" slot surface mount wall standards,heavy duty 1/2\" slot t standard,heavy duty 1/2\" slot wall standard,heavy duty 1/2\" slot zinc standard,heavy duty slot standard ball waterfall,heavy duty slot standard hangrod bracket,heavy duty slot standard j hook waterfall,heavy duty slot standard knife bracket with tip,heavy duty slot standard shelf bracket,heavy duty slot standard shelf bracket with tip,heavy duty slot standard straight faceout,heavy duty slot standard waterfall,heavy duty slot standard wood shelf bracket,hinge,holders,hosiery bin,hosiery pocket,import,importer,j hook,j hook waterfall,j racks,join sleeve,knife bracket,knife bracket with tip,knotty pine,knotty pine slatwall,laminate,laminated,light grey,light grey slatwall,light oak,light oak slatwall,lingerie faceout,literature,literature display,literature holders,literature racks,locking caster,mahogany,mahogany slatwall,mannequin,mannequin alternatives,mannequins,manufacture,maple,maple slatwall,merchandise,merchandise case,merchandisers,merchandising,merchandising table,metal,metal fixtures,milly bracket,milly bracket,mini grid cubes,mirrors,mixed arm 2 way rack,mixed arm 4 way rack,narrow standard,o flange,out,paint ready,paint ready slatwall,pan base,pan base mixed arm 2 way rack,pan base rack,pan base straight arm 2 way rack,pan base waterfall arm 2 way rack,panel connector,pegboard,pegboard fixtures,pilaster hook,plastic 2 way,plastic 3 way,plastic 4 way,plastic end cap,point,point of purchase display,POPs,puck,purchase,rack,racks,ready to paint,ready to paint slatwall,recessed wall standards,recessed wall studs,rectangular straight faceout,rectangular straight faceout,rectangular tube,rectangular tube ball waterfall,rectangular tube j hook waterfall,rectangular tube peg hook,rectangular tube straight faceout,rectangular tube waterfall,red oak,red oak slatwall,retail,retail counter,retail counters,retail display,retail fixtures,retail hardware,retail showcase,retail showcases,retail store display,retail store fixtures,retail supplies,retail wall systems,retail wood shelves,retail wood shelving,roll,rolling,rolling racks,round,round faceout,round rack,round tube end cap,round tubing,rubber mallet,saddle,saddle mount peg hooks,scarecrow,shelf bracket,shelf bracket with tip,shelf rests,shelves,shelving,showcase,showcases,sign,sign holders,signage,signs,single slot standard,slant shelf with lip,slat grid panel,slatgrid,slatgrid 4way display,slatgrid freestanding display,slatgrid h display,slatgrid panel,slatgrid triangle display,slatwall,slatwall acrylic tray,slatwall adjustable shelf bracket,slatwall ball waterfall,slatwall bin,slatwall braced acrylic shelving,slatwall card racks,slatwall cube,slatwall cube waterfall,slatwall double hook,slatwall fixtures,slatwall h display,slatwall hang rod bracket,slatwall hangrod bracket,slatwall hosiery bin,slatwall j hook waterfall,slatwall j racks,slatwall literature holders,slatwall milly bracket,slatwall mirrors,slatwall peg hook,slatwall picture hook,slatwall pinwheel,slatwall scanner hook,slatwall scarecrow,slatwall shelf brace,slatwall shelf bracket,slatwall sign holders,slatwall straight faceout,slatwall tombstone,slatwall tray,slatwall u bar,slatwall utility hook,slatwall waterfall,slatwall wide hook,slatwall wire baskets,slatwall wire shelving,source,square faceout,square faceout,standard,standard retail fixtures,steamers,store,store display,store fixture,store fixtures,store supplies,straight arm 2 way rack,straight arm 4 way rack,straight faceout,straight shelf,straight shelf with lip,super quad,supplies,surface mount wall standard,swivel shoe displays,systems,t standard,table,tables,tags,tie rack,twist on arms,u bar,u flange,universal 1/2\" slot chrome standard,universal 1/2\" slot concealed standard,universal 1/2\" slot double slot standard,universal 1/2\" slot narrow standard,universal 1/2\" slot single slot standard,universal 1/2\" slot standard,universal 1/2\" slot standard ball waterfall,universal 1/2\" slot standard hangrod bracket,universal 1/2\" slot standard j hook waterfall,universal 1/2\" slot standard knife bracket with tip,universal 1/2\" slot standard shelf bracket,universal 1/2\" slot standard shelf bracket with tip,universal 1/2\" slot standard straight faceout,universal 1/2\" slot standard waterfall,universal 1/2\" slot standard wood shelf bracket,universal 1/2\" slot surface mount wall standard,universal 1/2\" slot surface mount wall standards,universal 1/2\" slot t standard,universal 1/2\" slot wall standard,universal 1/2\" slot zinc standard,universal slot standard ball waterfall,universal slot standard hangrod bracket,universal slot standard j hook waterfall,universal slot standard knife bracket with tip,universal slot standard shelf bracket,universal slot standard shelf bracket with tip,universal slot standard straight faceout,universal slot standard waterfall,universal slot standard wood shelf bracket,wall,wall hardware,wall mount ball waterfall,wall mount bracket,wall mount hardware,wall mount j hook waterfall,wall mount straight faceout,wall mount waterfall,wall standard,waterfall,waterfall arm 2 way rack,waterfall arm 4 way rack,wheels,white,white slatwall,wire,wire baskets,wire display racks,wire displays,wire fixtures,wire grid panel,wire mini grid cubes,wire shelving,wood,wood shelf bracket,wood shelves,wood shelving,x base,x base mixed arm 2 way rack,x base straight arm 2 way rack,x base waterfall arm 2 way rack,zinc standard'; 
	
	// 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 = "inline";				
				} 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);