/*
	
	jquery selectbox (version 1.0.7)
	
		a cosmetic, styleable replacement for select elements.
	
		homepage:   http://abeautifulsite.net/blog/2011/01/jquery-selectbox-plugin/
		demo page:  http://labs.abeautifulsite.net/projects/js/jquery/selectbox/
		
		copyright 2011 cory laviska for a beautiful site, llc.
		
	features:

		- supports optgroups
		- supports standard dropdown controls
		- supports multi-select controls (i.e. multiple="multiple")
		- supports inline controls (i.e. size="5")
		- fully accessible via keyboard
		- shift + click (or shift + enter) to select a range of options in multi-select controls
		- type to search when the control has focus
		- auto-height based on the size attribute (to use, omit the height property in your css!)
		- tested in ie7-ie9, firefox 3-4, recent webkit browsers, and opera
	
	
	license:
		
		licensed under both the mit license and the gnu gplv2 (same as jquery: http://jquery.org/license)
	
	
	usage:
		
		link to the js file:
			
			<script src="jquery.selectbox.min.js" type="text/javascript"></script>
		
		add the css file (or append contents to your own stylesheet):
		
			<link href="jquery.selectbox.min.css" rel="stylesheet" type="text/css" />
		
		to create:
			
			$("select").selectbox([settings]);
	
	
	settings:
		
		to specify settings, use this syntax: $("select").selectbox('settings', { settingname: value, ... });
			
			menutransition: ['default', 'slide', 'fade'] - the show/hide transition for dropdown menus
			menuspeed: [integer, 'slow', 'normal', 'fast'] - the show/hide transition speed
	
	
	methods:
		
		to call a method use this syntax: $("select").selectbox('methodname', [options]);
		
			create - creates the control (default method)
			destroy - destroys the selectbox control and reverts back to the original form control
			disable - disables the control (i.e. disabled="disabled")
			enable - enables the control
			value - if passed with a value, sets the control to that value; otherwise returns the current value
			options - pass in either a string of html or a json object to replace the existing options
			control - returns the selectbox control element (an anchor tag) for working with directly
	
	
	events:
		
		events are fired on the original select element. you can bind events like this:
			
			$("select").selectbox().change( function() { alert( $(this).val() ); } );
			
			focus - fired when the control gains focus
			blur - fired when the control loses focus
			change - fired when the value of a control changes
	
	
	change log:
		
		v1.0.0 (2011-04-03) - complete rewrite with added support for inline and multi-select controls
		v1.0.1 (2011-04-04) - fixed options method so it doesn't destroy/recreate the control when called.
		                    - added a check for ios devices (their native controls are much better for 
		                      touch-based devices; you can still use selectbox api methods for theme)
		                    - fixed issue where ie window would lose focus on xp
		                    - fixed premature selection issue in webkit browsers
		v1.0.2 (2011-04-13) - fixed auto-height for inline controls when control is invisible on load
		                    - removed auto-width for dropdown and inline controls; now relies 100% on css
		                      for setting the width
		                   	- added 'control' method for working directly with the selectbox control
		v1.0.3 (2011-04-22) - fixed bug in value method that errored if the control didn't exist
		v1.0.4 (2011-04-22) - fixed bug where controls without any options would render with incorrect heights
		v1.0.5 (2011-04-22) - removed 'tick' image in lieu of background colors to indicate selection
		                    - clicking no longer toggles selected/unselected in multi-selects; use ctrl/cmd and 
		                      shift like in normal browser controls
		                    - fixed bug where inline controls would not receive focus unless tabbed into
		v1.0.6 (2011-04-29) - fixed bug where inline controls could be "dragged" when selecting an empty area
		v1.0.7 (2011-05-18) - expanded ios check to include android devices as well
		                    - added autowidth option; set to false on init to use css widths for dropdown menus
		                      
	known issues:
	
		- the blur and focus callbacks are not very reliable in ie7. the change callback works fine.
	
*/
if(jquery) (function($) {
	
	$.extend($.fn, {
		
		selectbox: function(method, data) {
			
			var typetimer, typesearch = '';
			
			
			//
			// private methods
			//
			
			
			var init = function(select, data) {
				
				// disable for ios devices (their native controls are more suitable for a touch device)
				if( navigator.useragent.match(/ipad|iphone|android/i) ) return false;
				
				// element must be a select control
				if( select.tagname.tolowercase() !== 'select' ) return false;
				
				select = $(select);
				if( select.data('selectbox-control') ) return false;
				
				var control = $('<a class="selectbox" />'),
					inline = select.attr('multiple') || parseint(select.attr('size')) > 1;
				
				var settings = data || {};
				if( settings.autowidth === undefined ) settings.autowidth = true;
				
				// inherit class names, style, and title attributes
				control
					.addclass(select.attr('class'))
					.attr('style', select.attr('style') || '')
					.attr('title', select.attr('title') || '')
					.attr('tabindex', parseint(select.attr('tabindex')))
					.css('display', 'inline-block')
					.bind('focus.selectbox', function() {
						if( this !== document.activeelement ) $(document.activeelement).blur();
						if( control.hasclass('selectbox-active') ) return;
						control.addclass('selectbox-active');
						select.trigger('focus');
					})
					.bind('blur.selectbox', function() {
						if( !control.hasclass('selectbox-active') ) return;
						control.removeclass('selectbox-active');
						select.trigger('blur');
					});
				
				if( select.attr('disabled') ) control.addclass('selectbox-disabled');
				
				// generate control
				if( inline ) {
					
					//
					// inline controls
					//
					var options = getoptions(select, 'inline');
					
					control
						.append(options)
						.data('selectbox-options', options)
						.addclass('selectbox-inline')
						.addclass('selectbox-menushowing')
						.bind('keydown.selectbox', function(event) {
							handlekeydown(select, event);
						})
						.bind('keypress.selectbox', function(event) {
							handlekeypress(select, event);
						})
						.bind('mousedown.selectbox', function(event) {
							if( $(event.target).is('a.selectbox-inline') ) event.preventdefault();
							if( !control.hasclass('selectbox-focus') ) control.focus();
						})
						.insertafter(select);
					
					// auto-height based on size attribute
					if( !select[0].style.height ) {
						
						var size = select.attr('size') ? parseint(select.attr('size')) : 5;
						
						// draw a dummy control off-screen, measure, and remove it
						var tmp = control
							.clone()
							.removeattr('id')
							.css({
								position: 'absolute',
								top: '-9999em'
							})
							.show()
							.appendto('body');
						tmp.find('.selectbox-options').html('<li><a>\u00a0</a></li>');
						optionheight = parseint(tmp.find('.selectbox-options a:first').html('&nbsp;').outerheight());
						tmp.remove();
						
						control.height(optionheight * size);
						
					}
					
					disableselection(control);
					
				} else {
					
					//
					// dropdown controls
					//
					
					var label = $('<span class="selectbox-label" />'),
						arrow = $('<span class="selectbox-arrow" />');
					
					label.text( $(select).find('option:selected').text() || '\u00a0' );
					
					var options = getoptions(select, 'dropdown');
					options.appendto('body');
					
					control
						.data('selectbox-options', options)
						.addclass('selectbox-dropdown')
						.append(label)
						.append(arrow)
						.bind('mousedown.selectbox', function(event) {
							if( control.hasclass('selectbox-menushowing') ) {
								hidemenus();
							} else {
								event.stoppropagation();
								// webkit fix to prevent premature selection of options
								options.data('selectbox-down-at-x', event.screenx).data('selectbox-down-at-y', event.screeny);
								showmenu(select);
							}
						})
						.bind('keydown.selectbox', function(event) {
							handlekeydown(select, event);
						})
						.bind('keypress.selectbox', function(event) {
							handlekeypress(select, event);
						})
						.insertafter(select);
					
					disableselection(control);
						
				}
				
				// store data for later use and show the control
				select
					.addclass('selectbox')
					.data('selectbox-control', control)
					.data('selectbox-settings', settings)
					.hide();
				
			};
			
			
			var getoptions = function(select, type) {
				
				var options;
				
				switch( type ) {
					
					case 'inline':
						

						options = $('<ul class="selectbox-options" />');
						
						if( select.find('optgroup').length ) {
							
							select.find('optgroup').each( function() {
								
								var optgroup = $('<li class="selectbox-optgroup" />');
								optgroup.text($(this).attr('label'));
								options.append(optgroup);
								
								$(this).find('option').each( function() {
									var li = $('<li />'),
										a = $('<a />');
									li.addclass( $(this).attr('class') );
									a.attr('rel', $(this).val()).text( $(this).text() );
									li.append(a);
									if( $(this).attr('disabled') ) li.addclass('selectbox-disabled');
									if( $(this).attr('selected') ) li.addclass('selectbox-selected');
									options.append(li);
								});
								
							});
						
						} else {
						
							select.find('option').each( function() {
								var li = $('<li />'),
									a = $('<a />');
								li.addclass( $(this).attr('class') );
								a.attr('rel', $(this).val()).text( $(this).text() );
								li.append(a);
								if( $(this).attr('disabled') ) li.addclass('selectbox-disabled');
								if( $(this).attr('selected') ) li.addclass('selectbox-selected');
								options.append(li);
							});
							
						}
						
						options
							.find('a')
								.bind('mouseover.selectbox', function(event) {
									addhover(select, $(this).parent());
								})
								.bind('mouseout.selectbox', function(event) {
									removehover(select, $(this).parent());
								})
								.bind('mousedown.selectbox', function(event) {
									event.preventdefault(); // prevent options from being "dragged"
									if( !select.selectbox('control').hasclass('selectbox-active') ) select.selectbox('control').focus();
								})
								.bind('mouseup.selectbox', function(event) {
									hidemenus();
									selectoption(select, $(this).parent(), event);
								});
						
						disableselection(options);
						
						return options;
					
					case 'dropdown':
						
						options = $('<ul class="selectbox-dropdown-menu selectbox-options" />');
						
						if( select.find('optgroup').length ) {
							
							select.find('optgroup').each( function() {
								
								var optgroup = $('<li class="selectbox-optgroup" />');
								optgroup.text($(this).attr('label'));
								options.append(optgroup);
								
								$(this).find('option').each( function() {
									var li = $('<li />'),
										a = $('<a />');
									li.addclass( $(this).attr('class') );
									a.attr('rel', $(this).val()).text( $(this).text() );
									li.append(a);
									if( $(this).attr('disabled') ) li.addclass('selectbox-disabled');
									if( $(this).attr('selected') ) li.addclass('selectbox-selected');
									options.append(li);
								});
								
							});
							
						} else {
							
							if( select.find('option').length > 0 ) {
								select.find('option').each( function() {
									var li = $('<li />'),
										a = $('<a />');
									li.addclass( $(this).attr('class') );
									a.attr('rel', $(this).val()).text( $(this).text() );
									li.append(a);
									if( $(this).attr('disabled') ) li.addclass('selectbox-disabled');
									if( $(this).attr('selected') ) li.addclass('selectbox-selected');
									options.append(li);
								});
							} else {
								options.append('<li>\u00a0</li>');
							}
							
						}
						
						options
							.data('selectbox-select', select)
							.css('display', 'none')
							.appendto('body')
							.find('a')
								.bind('mousedown.selectbox', function(event) {
									event.preventdefault(); // prevent options from being "dragged"
									if( event.screenx === options.data('selectbox-down-at-x') && event.screeny === options.data('selectbox-down-at-y') ) {
										options.removedata('selectbox-down-at-x').removedata('selectbox-down-at-y');
										hidemenus();
									}
								})
								.bind('mouseup.selectbox', function(event) {
									if( event.screenx === options.data('selectbox-down-at-x') && event.screeny === options.data('selectbox-down-at-y') ) {
										return;
									} else {
										options.removedata('selectbox-down-at-x').removedata('selectbox-down-at-y');
									}
									selectoption(select, $(this).parent());
									hidemenus();
								}).bind('mouseover.selectbox', function(event) {
									addhover(select, $(this).parent());
								})
								.bind('mouseout.selectbox', function(event) {
									removehover(select, $(this).parent());
								});
						
						disableselection(options);
						
						return options;
					
				}
				
			};
			
			
			var destroy = function(select) {
				
				select = $(select);
				
				var control = select.data('selectbox-control');
				if( !control ) return;
				var options = control.data('selectbox-options');
				
				options.remove();
				control.remove();
				select
					.removeclass('selectbox')
					.removedata('selectbox-control')
					.removedata('selectbox-settings')
					.show();
				
			};
			
			
			var showmenu = function(select) {
				
				select = $(select);
				var control = select.data('selectbox-control'),
					settings = select.data('selectbox-settings'),
					options = control.data('selectbox-options');
				if( control.hasclass('selectbox-disabled') ) return false;
				
				hidemenus();
				
				// auto-width
				if( settings.autowidth ) options.css('width', control.outerwidth() - (parseint(control.css('borderleftwidth')) + parseint(control.css('borderleftwidth'))));
				
				// menu position
				options.css({
					top: control.offset().top + control.outerheight() - (parseint(control.css('borderbottomwidth'))),
					left: control.offset().left
				});
				
				// show menu
				switch( settings.menutransition ) {
					
					case 'fade':
						options.fadein(settings.menuspeed);
						break;
					
					case 'slide':
						options.slidedown(settings.menuspeed);
						break;
					
					default:
						options.show(settings.menuspeed);
						break;
					
				}
				
				// center on selected option
				var li = options.find('.selectbox-selected:first');
				keepoptioninview(select, li, true);
				addhover(select, li);
				
				control.addclass('selectbox-menushowing');
				
				$(document).bind('mousedown.selectbox', function(event) {
					if( $(event.target).parents().andself().hasclass('selectbox-options') ) return;
					hidemenus();
				});
				
			};
			
			
			var hidemenus = function() {
				
				if( $(".selectbox-dropdown-menu").length === 0 ) return;
				$(document).unbind('mousedown.selectbox');
				
				$(".selectbox-dropdown-menu").each( function() {
					
					var options = $(this),
						select = options.data('selectbox-select'),
						control = select.data('selectbox-control'),
						settings = select.data('selectbox-settings');
					
					switch( settings.menutransition ) {
						
						case 'fade':
							options.fadeout(settings.menuspeed);
							break;
						
						case 'slide':
							options.slideup(settings.menuspeed);
							break;
							
						default:
							options.hide(settings.menuspeed);
							break;
						
					}
					
					control.removeclass('selectbox-menushowing');
					
				});
				
			};
			
			
			var selectoption = function(select, li, event) {
				
				select = $(select);
				li = $(li);
				var control = select.data('selectbox-control'),
					settings = select.data('selectbox-settings');
				
				if( control.hasclass('selectbox-disabled') ) return false;
				if( li.length === 0 || li.hasclass('selectbox-disabled') ) return false;
				
				if( select.attr('multiple') ) {
					
					// if event.shiftkey is true, this will select all options between li and the last li selected
					if( event.shiftkey && control.data('selectbox-last-selected') ) {
						
						li.toggleclass('selectbox-selected');
						
						var affectedoptions;
						if( li.index() > control.data('selectbox-last-selected').index() ) {
							affectedoptions = li.siblings().slice(control.data('selectbox-last-selected').index(), li.index());
						} else {
							affectedoptions = li.siblings().slice(li.index(), control.data('selectbox-last-selected').index());
						}
						
						affectedoptions = affectedoptions.not('.selectbox-optgroup, .selectbox-disabled');
						
						if( li.hasclass('selectbox-selected') ) {
							affectedoptions.addclass('selectbox-selected');
						} else {
							affectedoptions.removeclass('selectbox-selected');
						}
						
					} else if( event.metakey ) {
						li.toggleclass('selectbox-selected');
					} else {
						li.siblings().removeclass('selectbox-selected');
						li.addclass('selectbox-selected');
					}
					
				} else {
					li.siblings().removeclass('selectbox-selected');
					li.addclass('selectbox-selected');
				}
				
				if( control.hasclass('selectbox-dropdown') ) {
					control.find('.selectbox-label').text(li.text());
				}
				
				// update original control's value
				var i = 0, selection = [];
				if( select.attr('multiple') ) {
					control.find('.selectbox-selected a').each( function() {
						selection[i++] = $(this).attr('rel');
					});
				} else {
					selection = li.find('a').attr('rel');
				}
				
				// remember most recently selected item
				control.data('selectbox-last-selected', li);
				
				// change callback
				if( select.val() !== selection ) {
					select.val(selection);
					select.trigger('change');
				}
				
				return true;
				
			};
			
			
			var addhover = function(select, li) {
				select = $(select);
				li = $(li);
				var control = select.data('selectbox-control'),
					options = control.data('selectbox-options');
				
				options.find('.selectbox-hover').removeclass('selectbox-hover');
				li.addclass('selectbox-hover');
			};
			
			
			var removehover = function(select, li) {
				select = $(select);
				li = $(li);
				var control = select.data('selectbox-control'),
					options = control.data('selectbox-options');
				options.find('.selectbox-hover').removeclass('selectbox-hover');
			};
			
			
			var keepoptioninview = function(select, li, center) {
				
				if( !li || li.length === 0 ) return;
				
				select = $(select);
				var control = select.data('selectbox-control'),
					options = control.data('selectbox-options'),
					scrollbox = control.hasclass('selectbox-dropdown') ? options : options.parent(),
					top = parseint(li.offset().top - scrollbox.position().top),
					bottom = parseint(top + li.outerheight());
				
				if( center ) {
					scrollbox.scrolltop( li.offset().top - scrollbox.offset().top + scrollbox.scrolltop() - (scrollbox.height() / 2) );
				} else {
					if( top < 0 ) {
						scrollbox.scrolltop( li.offset().top - scrollbox.offset().top + scrollbox.scrolltop() );
					}
					if( bottom > scrollbox.height() ) {
						scrollbox.scrolltop( (li.offset().top + li.outerheight()) - scrollbox.offset().top + scrollbox.scrolltop() - scrollbox.height() );
					}
				}
				
			};
			
			
			var handlekeydown = function(select, event) {
				
				//
				// handles open/close and arrow key functionality
				//
				
				select = $(select);
				var control = select.data('selectbox-control'),
					options = control.data('selectbox-options'),
					totaloptions = 0,
					i = 0;
				
				if( control.hasclass('selectbox-disabled') ) return;
				
				switch( event.keycode ) {
					
					case 8: // backspace
						event.preventdefault();
						typesearch = '';
						break;
					
					case 9: // tab
					case 27: // esc
						hidemenus();
						removehover(select);
						break;
					
					case 13: // enter
						if( control.hasclass('selectbox-menushowing') ) {
							selectoption(select, options.find('li.selectbox-hover:first'), event);
							if( control.hasclass('selectbox-dropdown') ) hidemenus();
						} else {
							showmenu(select);
						}
						break;
						
					case 38: // up
					case 37: // left
						
						event.preventdefault();
						
						if( control.hasclass('selectbox-menushowing') ) {
							
							var prev = options.find('.selectbox-hover').prev('li');
							totaloptions = options.find('li:not(.selectbox-optgroup)').length;
							i = 0;
							
							while( prev.length === 0 || prev.hasclass('selectbox-disabled') || prev.hasclass('selectbox-optgroup') ) {
								prev = prev.prev('li');
								if( prev.length === 0 ) prev = options.find('li:last');
								if( ++i >= totaloptions ) break;
							}
							
							addhover(select, prev);
							keepoptioninview(select, prev);
							
						} else {
							showmenu(select);
						}
						
						break;
						
					case 40: // down
					case 39: // right
					
						event.preventdefault();
						
						if( control.hasclass('selectbox-menushowing') ) {
							
							var next = options.find('.selectbox-hover').next('li');
							totaloptions = options.find('li:not(.selectbox-optgroup)').length;
							i = 0;
							
							while( next.length === 0 || next.hasclass('selectbox-disabled') || next.hasclass('selectbox-optgroup') ) {
								next = next.next('li');
								if( next.length === 0 ) next = options.find('li:first');
								if( ++i >= totaloptions ) break;
							}
							
							addhover(select, next);
							keepoptioninview(select, next);
							
						} else {
							showmenu(select);
						}
						
						break;
						
				}
				
			};
			
			
			var handlekeypress = function(select, event) {
				
				//
				// handles type-to-find functionality
				//
				
				select = $(select);
				var control = select.data('selectbox-control'),
					options = control.data('selectbox-options');
				
				if( control.hasclass('selectbox-disabled') ) return;
				
				switch( event.keycode ) {
					
					case 9: // tab
					case 27: // esc
					case 13: // enter
					case 38: // up
					case 37: // left
					case 40: // down
					case 39: // right
						// don't interfere with the keydown event!
						break;
					
					default: // type to find
						
						if( !control.hasclass('selectbox-menushowing') ) showmenu(select);
						
						event.preventdefault();
						
						cleartimeout(typetimer);
						typesearch += string.fromcharcode(event.charcode || event.keycode);
						
						options.find('a').each( function() {
							if( $(this).text().substr(0, typesearch.length).tolowercase() === typesearch.tolowercase() ) {
								addhover(select, $(this).parent());
								keepoptioninview(select, $(this).parent());
								return false;
							}
						});
						
						// clear after a brief pause
						typetimer = settimeout( function() { typesearch = ''; }, 1000);
						
						break;
						
				}
				
			};
			
			
			var enable = function(select) {
				select = $(select);
				select.attr('disabled', false);
				var control = select.data('selectbox-control');
				if( !control ) return;
				control.removeclass('selectbox-disabled');
			};
			
			
			var disable = function(select) {
				select = $(select);
				select.attr('disabled', true);
				var control = select.data('selectbox-control');
				if( !control ) return;
				control.addclass('selectbox-disabled');
			};
			
			
			var setvalue = function(select, value) {
				select = $(select);
				select.val(value);
				value = select.val();
				var control = select.data('selectbox-control');
				if( !control ) return;
				var settings = select.data('selectbox-settings'),
					options = control.data('selectbox-options');
				
				// update label
				control.find('.selectbox-label').text( $(select).find('option:selected').text() || '\u00a0' );
				
				// update control values
				options.find('.selectbox-selected').removeclass('selectbox-selected');
				options.find('a').each( function() {
					if( typeof(value) === 'object' ) {
						for( var i = 0; i < value.length; i++ ) {
							if( $(this).attr('rel') == value[i] ) {
								$(this).parent().addclass('selectbox-selected');
							}
						}
					} else {
						if( $(this).attr('rel') == value ) {
							$(this).parent().addclass('selectbox-selected');
						}
					}
				});
				
				if( settings.change ) settings.change.call(select);
				
			};
			
			
			var setoptions = function(select, options) {
				
				select = $(select);
				var control = select.data('selectbox-control'),
					settings = select.data('selectbox-settings');
				
				switch( typeof(data) ) {
					
					case 'string':
						select.html(data);
						break;
						
					case 'object':
						select.html('');
						for( var i in data ) {
							if( data[i] === null ) continue;
							if( typeof(data[i]) === 'object' ) {
								var optgroup = $('<optgroup label="' + i + '" />');
								for( var j in data[i] ) {
									optgroup.append('<option value="' + j + '">' + data[i][j] + '</option>');
								}
								select.append(optgroup);
							} else {
								var option = $('<option value="' + i + '">' + data[i] + '</option>');
								select.append(option);
							}
						}
						break;
					
				}
				
				if( !control ) return;
				
				// remove old options
				control.data('selectbox-options').remove();
				
				// generate new options
				var type = control.hasclass('selectbox-dropdown') ? 'dropdown' : 'inline',
					options = getoptions(select, type);
				control.data('selectbox-options', options);
				
				switch( type ) {
					case 'inline':
						control.append(options);
						break;
					case 'dropdown':
						control.find('.selectbox-label').text( $(select).find('option:selected').text() || '\u00a0' );
						$("body").append(options);
						break;
				}
				
			};
			
			
			var disableselection = function(selector) {
				$(selector)
					.css('mozuserselect', 'none')
					.bind('selectstart', function(event) {
						event.preventdefault();
					});
			};
			
			
			//
			// public methods
			//
			
			
			switch( method ) {
				
				case 'control':
					return $(this).data('selectbox-control');
					break;
				
				case 'settings':
					if( !data ) return $(this).data('selectbox-settings');
					$(this).each( function() {
						$(this).data('selectbox-settings', $.extend(true, $(this).data('selectbox-settings'), data));
					});
					break;
				
				case 'options':
					$(this).each( function() {
						setoptions(this, data);
					});
					break;
				
				case 'value':
					if( !data ) return $(this).val();
					$(this).each( function() {
						setvalue(this, data);
					});
					break;
				
				case 'enable':
					$(this).each( function() {
						enable(this);
					});
					break;
				
				case 'disable':
					$(this).each( function() {
						disable(this);
					});
					break;
				
				case 'destroy':
					$(this).each( function() {
						destroy(this);
					});
					break;
				
				default:
					$(this).each( function() {
						init(this, method);
					});
					break;
				
			}
			
			return $(this);
			
		}
		
	});
	
})(jquery);