$(document).ready( function() {
		
		//
		// Enable selectBox control and bind events
		//
		
		$("#create").click( function() {
			$("SELECT").selectBox();
		});
		
		$("#destroy").click( function() {
			$("SELECT").selectBox('destroy');
		});
		
		$("#enable").click( function() {
			$("SELECT").selectBox('enable');
		});
		
		$("#disable").click( function() {
			$("SELECT").selectBox('disable');
		});
		
		$("#serialize").click( function() {
			$("#console").append('<br />-- Serialized data --<br />' + $("FORM").serialize().replace(/&/g, '<br />') + '<br /><br />');
			$("#console")[0].scrollTop = $("#console")[0].scrollHeight;
		});
		
		$("#value-1").click( function() {
			$("SELECT").selectBox('value', 1);
		});
		
		$("#value-2").click( function() {
			$("SELECT").selectBox('value', 2);
		});
		
		$("#value-2-4").click( function() {
			$("SELECT").selectBox('value', [2, 4]);
		});
		
		$("#options").click( function() {
			$("SELECT").selectBox('options', {
				
				'Opt Group 1': {
					'1': 'Value 1',
					'2': 'Value 2',
					'3': 'Value 3',
					'4': 'Value 4',
					'5': 'Value 5'
				},
				'Opt Group 2': {
					'6': 'Value 6',
					'7': 'Value 7',
					'8': 'Value 8',
					'9': 'Value 9',
					'10': 'Value 10'
				},
				'Opt Group 3': {
					'11': 'Value 11',
					'12': 'Value 12',
					'13': 'Value 13',
					'14': 'Value 14',
					'15': 'Value 15'
				}
				
			});
		});
		
		$("#default").click( function() {
			$("SELECT").selectBox('settings', {
				'menuTransition': 'default',
				'menuSpeed' : 0
			});
		});
		
		$("#fade").click( function() {
			$("SELECT").selectBox('settings', {
				'menuTransition': 'fade',
				'menuSpeed' : 'fast'
			});
		});
		
		$("#slide").click( function() {
			$("SELECT").selectBox('settings', {
				'menuTransition': 'slide',
				'menuSpeed' : 'fast'
			});
		});
		
		
		$("SELECT")
			.selectBox()
			.focus( function() {
				$("#console").append('Focus on ' + $(this).attr('name') + '<br />');
				$("#console")[0].scrollTop = $("#console")[0].scrollHeight;
			})
			.blur( function() {
				$("#console").append('Blur on ' + $(this).attr('name') + '<br />');
				$("#console")[0].scrollTop = $("#console")[0].scrollHeight;
			})
			.change( function() {
				$("#console").append('Change on ' + $(this).attr('name') + ': ' + $(this).val() + '<br />');
				$("#console")[0].scrollTop = $("#console")[0].scrollHeight;
			});
		
	});