var kevron = {
	
	init: function() {
		
		var docElement = document.documentElement;
		docElement.className = docElement.className.replace(/(^|\s)no-js(\s|$)/, '');
		
		// hide non selected submenu's
		var subMenus = $$('#side_menu ul ul li:not(.selected) ul');
		subMenus.each(function(ul) {
			ul.hide();
		});
		// setup togglers
		var subMenus = $$('#side_menu ul ul>li>a');
		subMenus.each(function(a) {
			a.observe('click', kevron.toggleMenu);
		});
	},
	
	toggleMenu: function(event) {
		var a = Event.element(event);
		ul = a.next();
		// toggle
		(ul.visible()) ? ul.blindUp({duration: .5}) : ul.blindDown({duration: .5});
		Event.stop(event);
	}
}

var Util = {
	htmlToSearchIndex: function(html) {
		// replace every HTML tag with a pipe so that HTML tags and attributes aren't searched on
		var tagStripper = new RegExp('<(/)*.*?>','gi');
		return html.replace(tagStripper, '|');
	},
	each: function(items, fn) {
		for (var i=0, ii=items.length; i<ii; i++) {
			fn(items[i],i);
		}
	}
}

var data = [
['keytags.html', 'Clicktags', 'ID5 ID9 ID6 ID38 ID43'],
['giant_clicktags.html', 'Giant Clicktags', 'ID30'],
['the_original_tag.html', 'The Original Tag', 'ID1'],
['econotag.html', 'Econotag', 'ID90'],
['executive_hotel_tag.html', 'Executive Hotel Tag', 'ID34'],
['premier_hotel_tag.html', 'Premier Hotel Tag', 'ID36'],
['jumbo_tags.html', 'Jumbo Tag', 'ID10'],
['minitag_pet_tag.html', 'Mini Tag / Pet Tag', 'ID33'],
['keyhook.html', 'Keyhook', 'ID13'],
['universal_key_cabinet_tags.html', 'Universal Key Cabinet Tag', 'ID45'],
['universal_key_cabinet_tags.html#91', 'Universal Key Cabinet Tag With Strap', 'ID91'],
['universal_key_cabinet_tags.html#92', 'Universal Key Cabinet Tag With Strap & Insert', 'ID92'],
['key_rings.html', 'Key Rings', 'ID1040 ID1041 ID1042 ID1043 ID1044 ID1045'],
['id_card_holder_poly_horiz.html', 'ID Card Holder Polypropylene - Horizontal', 'ID1013 ID18'],
['id_card_holder_frost.html', 'ID Card Holder Frosted Moulded Rigid - Vertical', 'ID1066'],
['id_vinyl_card_holder.html', 'Vinyl ID Card Holder', 'ID1027'],
['id_vinyl_card_holder_large.html', 'Vinyl ID Card Holder Large', 'ID1027L'],
['rotating_id_card_holder.html', 'Rotating ID Card Holder', 'ID1025'],
['badge_reel.html', 'Badge Reel With Lock', 'ID1022'],
['clipon_badge_reel.html', 'Clip-On Badge Reel', 'ID1021'],
['heavy_duty_reel.html', 'Heavy Duty Reel', 'ID1023'],
['reel_with_chain.html', 'Reel With Chain', 'ID1033'],
['vinyl_strap_clips.html', 'Vinyl Strap Clips', 'ID1015'],
['vinyl_strap_suspender_clips.html', 'Vinyl Strap Suspender Clips', 'ID1067'],
['breakaway_lanyard.html', 'Breakaway Lanyard', 'ID1018'],
['round_lanyard.html', 'Round Lanyard', 'ID1017'],
['pre_printed_lanyard.html', 'Pre-Printed Lanyards', 'ID1046'],
['multi_use_lanyard.html', 'Multi-Use Lanyard', 'ID1047'],
['acrylic_round.html', 'Round Acrylic Key Tag', 'ID55'],
['acrylic_oblong.html', 'Oblong Acrylic Key Tag', 'ID56'],
['acrylic_square.html', 'Square Acrylic Key Tag', 'ID57'],
['acrylic_large_oblong.html', 'Large Oblong Acrylic Key Tag', 'ID58'],
['acrylic_long_oblong.html', 'Long Oblong Acrylic Key Tag', 'ID59'],
['acrylic_medium_oblong.html', 'Medium Oblong Acrylic Key Tag', 'ID60'],
['acrylic_small_photo.html', 'Small Photo Acrylic Key Tag', 'ID65'],
['vinotags.html', 'Vinotags', 'ID80'],
['printout_tags.html', 'Printout Tags', 'ID61'],
['line_tags.html', 'Line Tags', 'ID63'],
['baggage_tag_loops.html', 'Baggage Tag Loops', 'LOOPS SM10 LOOP STRAPS'],
['adhesive_note_clips.html', 'Adhesive Note Clips', 'ID1029'],
['wrist_coil.html', 'Wrist Coil', 'AL1038'],
['mobile_phone_strap.html', 'Mobile Phone Strap', 'AL1048'],
['key_head_rings.html', 'Key Head Rings', 'AL1052'],
['key_head_caps.html', 'Key Head Caps', 'AL1053'],
['carabineer_mobile.html', 'Carabineer & Mobile Phone Cord', 'AL1049'],
['lockable_carabineer.html', 'Lockable Carabineer Strap', 'AL1051'],
['jclip.html', 'J Clip', 'AL1030CLIP'],
['expanding_coil.html', 'Expanding Coil', 'AL1030'],
['casino_slot.html', 'Casino Slot Card Retainer', 'AL1031'],
['baggage_tags.html', 'Baggage Tags', 'ID4 ID24 ID25 DIY026 ID10B'],
['fuel_container_id_tags.html', 'Fuel & Container Identification', 'ID12'],
['custom_printed_tags.html', 'Custom Printed', 'ID4 ID12 ID24 ID26 ID40 ID90 ID8']
]

var SuperSearch = {
	init: function() {
		var $searchInput = $('search'),
		$searchResults = $('search-results'),
		active = 0,
		$items = null,
		results = [];
		
		inputPlaceholder($searchInput);

		var keyUp = function(evt) {
			evt = evt || window.event;
			var charCode = evt.which || evt.keyCode;
			if (charCode == 38) {
				moveSelect(-1);
				return;
			}
			else if (charCode == 40) {
				moveSelect(1);
				return;
			}
			else if (charCode == 27 || charCode == 9) {
				$searchResults.hide();
				return;
			}
			else if (charCode == 13) {
				$searchResults.hide();
				return;
			}
			var term = $searchInput.value.toLowerCase();
			if (term.length > 0) {
				// startsWith
				var startsWith = new RegExp('(^| )+' + term,'i');
				var exactMatch = new RegExp('(^| )+' + term + '[0-9]*($| )','i');
				results = [];
				var added = [];
				var line = true;
				var html = '';
				
				Util.each(data, function(item, i) {
					var match = Util.htmlToSearchIndex(item[1]).match(startsWith);
					html = '';
					if (match) {
						if (line) {
							html = '<li class="line"><a href="/products/'+item[0]+'">'+item[1].replace(startsWith,'<i>'+match[0]+'</i>')+'</a></li>';
							line = false;
						}
						else {
							html = '<li><a href="/products/'+item[0]+'">'+item[1].replace(startsWith,'<i>'+match[0]+'</i>')+'</a></li>';
							added.push(i);
						}
						
						results.push(html);
					}
				});
				line = true;
				Util.each(data, function(item, i) {
					var exact = item[2].match(exactMatch);
					if (exact && added.indexOf(i) < 0) {
						html = '';
						if (line) {
							html = '<li class="line"><a href="/products/'+item[0]+'"><b>'+exact[0]+'</b> - '+item[1]+'</a></li>';
							line = false;
						}
						else {
							html = '<li><a href="/products/'+item[0]+'"><b>'+exact[0]+'</b> - '+item[1]+'</a></li>';
						}
						results.push(html);
					}
				});
				if (results.length > 0) {
					populateResults();
				}
				else {
					$searchResults.hide();
				}
			}
			else {
				$searchResults.hide();
			}
		}
		var populateResults = function() {
			$searchResults.innerHTML = results.join('');
			$searchResults.show();
			$items = $searchResults.getElementsByTagName('a');
			active = -1;
			moveSelect(1);
		}
		
		var keyDown = function(evt) {
			evt = evt || window.event;
			var charCode = evt.which || evt.keyCode;
			
			if (charCode == 38 ||charCode == 40) { // prevent up and down
				Event.stop(evt);
				return false;
			}
			else if (charCode == 13) {
				if ($items.length > 0) {
					window.location = $searchResults.select('a.active')[0].href;
				}
				Event.stop(evt);
				return false;
			}
		}
		var moveSelect = function(step) {
			if ($items.length == 0) return;
			active += step;
			if (active < 0) {
				active = 0;
			} else if (active >= $items.length) {
				active = $items.length - 1;
			}
			var selected = $searchResults.select('a.active');
			if (selected.length == 1) {
				$(selected[0]).removeClassName('active');
			}
			$($items[active]).addClassName('active');
		}
		var focus = function() {
			if ($searchInput.value != '' && $items && $items.length > 0) $searchResults.show();
		}
		
		if ($searchInput) {
			$searchInput.observe('keyup', keyUp).observe('keydown', keyDown).observe('focus', focus);
		}
	}
}

function inputPlaceholder (input, color) {

	if (!input) return null;

	// Do nothing if placeholder supported by the browser (Webkit, Firefox 3.7)
	if (input.placeholder && 'placeholder' in document.createElement(input.tagName)) return input;

	color = color || '#AAA';
	var default_color = input.style.color;
	var placeholder = input.getAttribute('placeholder');

	if (input.value === '' || input.value == placeholder) {
		input.value = placeholder;
		input.style.color = color;
		input.setAttribute('data-placeholder-visible', 'true');
	}

	var add_event = /*@cc_on'attachEvent'||@*/'addEventListener';

	input[add_event](/*@cc_on'on'+@*/'focus', function(){
	 input.style.color = default_color;
	 if (input.getAttribute('data-placeholder-visible')) {
		 input.setAttribute('data-placeholder-visible', '');
		 input.value = '';
	 }
	}, false);

	input[add_event](/*@cc_on'on'+@*/'blur', function(){
		if (input.value === '') {
			input.setAttribute('data-placeholder-visible', 'true');
			input.value = placeholder;
			input.style.color = color;
		} else {
			input.style.color = default_color;
			input.setAttribute('data-placeholder-visible', '');
		}
	}, false);

	input.form && input.form[add_event](/*@cc_on'on'+@*/'submit', function(){
		if (input.getAttribute('data-placeholder-visible')) {
			input.value = '';
		}
	}, false);

	return input;
}


Event.observe(window, 'load', function() {
	kevron.init();
	SuperSearch.init();
});