/* 

	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(storeId){
	
	// 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 = "";	
	
	// 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 = ""; 
	
	// END CONFIG (do not edit below this line, well unless you really, really want to change something :) )
	
	// Peace, 
	// Alen
	
	//
	// Gets an array of suggestions from server matching input string 'str'.
	// Function 'callback' with the array of suggestions as parameter will be
	// called after a successful request.
	//
	// Uses jquery for Ajax request.
	//
	this.autocomplete = function(str, type, storeId, callback) {		 
		$.post("/Magellan/pages/ajax/autoCompleteJSON.jsp", { prefix: encodeURIComponent(str), type: type, storeId: storeId },
			function(response) {
				callback(response.texts);
			}, "json");
	}

	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 = "260px"; //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;
					document.getElementById('searchForm').submit();
					return false;
				};	
			};
			
			field.onkeydown = function(e) {
				// catch 'up' and 'down' keys (and return false) at key down to prevent FF from moving cursor.
				var key = getKeyCode(e);
		
				switch(key){
				case 38: // up
					navList("up");
					return false;
					break;
				case 40: // down
					navList("down");
					return false;
					break;
				};
			};
			
			field.onkeyup = function(e){
			
				var key = getKeyCode(e);
		
				switch(key){
				case 13: // enter
					return false;
					break;			
				case 27:  // esc
					field.value = "";
					selectedIndex = 0;
					clearList();
					break;
				case 37: // left
				case 38: // up
				case 39: // right
				case 40: // down
					return false;
					break;
				default:
					startList();			
					break;
				};
			};
			
			this.startList = function(){
				if(field.value.length > 0){
					getListItems(field.value);
				} else {
					clearList();
				};	
			};
			
			this.getListItems = function(prefix){
				// trim leading and double spaces
				prefix = prefix.replace(/^\s*/, "").replace(/\s{2,}/g, " ");
			
				var func = function(texts) {
					createList(prefix, texts);
				};
				
				var selectedType = document.getElementById('searchForm').searchType.value;
				var type = "";
				
				if (selectedType == "TRACK") {
					type = "track";
				} else if (selectedType == "ARTIST_TRACK") {
					type = "artist";
				}
				
				if (prefix.length > 0) {
					this.autocomplete(prefix, type, storeId, func);
				}
			};
			
			this.createList = function(prefix, 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 = "<span class='prefix'>" + arr[i].substring(0, prefix.length) + "</span>" + arr[i].substring(prefix.length);
						a.searchString = 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.searchString;
				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;
	};
	
};