/*
	bSelect plug-in v.22
	bill rowland, dec, 2010
	
	converts a standard select/drop-down box into a more graphically accessible drop-down.

	how to use:
	include bSelect.js, bSelect.css
	code in a standard select/drop-down box where you want it to appear on the page. assign it an id/class (ex: id='mySelect')
	then attach the bSelect plugin to the select element (ex: $('#mySelect').bSelect(); )
	modify the bSelect.css file for desired appearance

	notes: 
		use upArrowFileName and dnArrowFileName options to provide alternative arrow images

	version:
		.2 multi-selects on a page fix
		.21 fixed wrapping problem with long option values
		.22 fixed missing style attribute on line s4
*/
(function($){  
	 $.fn.bSelect = function(options) { 
		var defaults = {
			upArrowFileName : '/assets/members/public/images/select-arrow-up.png',
			dnArrowFileName : '/assets/members/public/images/select-arrow-dn.png',
			width : '300',
			imgWidth : '27',
			label : '',
			showSelect : false
		}
		var options = $.extend(defaults, options);
		var pWidth = options.width - options.imgWidth - 10;
		var s2 = '';
		var sSelect = $(this);
		
		// hide the select element
		if(!options.showSelect) {
			$(this).hide();
		}

		// let's build berglund's select drop-down
		var s1='<div class="bSelect"  style="width: ' + options.width + 'px" tabindex=1>';
		if(options.label) {
			var s2='<span class="bLabel">' + options.label + '</span>';
		};
		var s3='<img src="' + options.dnArrowFileName + '">';
		var s4='<p type="text" class="bSelectInput" style="width:  ' + pWidth + 'px;" ></p><ul id="' + $(sSelect).attr('id') + 'Items">';
		var s6='</ul></div>';

		var s5 = '';
		$('option', sSelect).each(function(){
		   s5 += '<li><span class="bSelectVal">' + $(this).val() + '</span><span class="bSelectText">' + $(this).text() + '</span></li>';
		});

		$(this).after(s1 + s2 + s3 + s4 + s5 + s6);
		// end

		// add initial value 
		var sInput = $(this).next();
		$('.bSelectInput', sInput).text($(this + 'option:selected', this).text());

		// rollover
		$('ul li', sInput).hover(function(){$(this).addClass('bSelectOver');},function(){$(this).removeClass('bSelectOver');}); 

		// on blur
		$('.bSelect').blur(function() { 
			$('ul', sInput).hide();																									// hide the drop-down box
			$('img', sInput).attr('src',options.dnArrowFileName);														// change arrow to down
			$(sInput).removeClass('bSelectExpanded');																	// put the rounded corners back
		});

		// arrow click
		$(sInput).click(function(){ 
			$('ul', sInput).toggle();  
			if($('ul', sInput).is(':visible')) {
				$('img', sInput).attr('src',options.upArrowFileName);
			} else {
				$('img', sInput).attr('src',options.dnArrowFileName);
			}
			$(sInput).toggleClass('bSelectExpanded'); 
		});

		// selection made  
		$('#' + $(sSelect).attr('id') + 'Items li').click(function(){ 
			$(sSelect + 'option[value="' + $('.bSelectVal', this).text() + '"]').attr('selected', 'selected'); 	// set the value of the true select box
			$(sSelect).change();																									// initiate change so any events tied to this select box get fired
			$(this).closest('.bSelect').find('.bSelectInput').text($('.bSelectText', this).text());				// set the value of the berglund select box
			$('ul', this).hide();																										// hide the drop-down box
			$('img', sInput).attr('src',options.dnArrowFileName);														// change arrow to down
			$(sInput).removeClass('bSelectExpanded');																	// put the rounded corners back
		}); 		
	 };  
})(jQuery);