/******************************************************
* replaceselect - function to replace select boxes 
* note:	uses the css width of control, otherwise fits to
*		contents (text in options)
* @param {Object} Settings for adding extra width
******************************************************/
(function() {
		
	$.fn.replaceSelect = function(settings) {
		
		var sArray = this;
		
		settings = jQuery.extend({
			extraWidth: 0
		}, settings);
		
		return sArray.each(function(){
			
			var s = $(this);
			var sName = s.attr('id');
			var sWidth = s.width();
			var sHeight = s.css('height');

			sWidth = sWidth + settings.extraWidth;	//Add optional extra width

			var maxOptions = 10;
			
			var sReplicaSelectedId = sName + "Selected";
			var sReplicaSelectedText = sName + "SelectedText";
			var sReplicaSelectedValue = sName + "SelectedValue";
			var sReplicaOptionsId = sName + "Options";
			
			var optionValues = new Array();
			var optionTexts = new Array();
			
			s.children().each(function(){
				optionValues.push($(this).attr('value'));
				optionTexts.push($(this).text());
			});
			
			// Build container div
			var sReplica = '<div class="sr-container ' + s.attr('class') + '" style="';
			sReplica += (sHeight) ? 'height:' + sHeight + 'px;' : '';
			sReplica += (sWidth) ? 'width:' + sWidth + 'px;' : '';
			sReplica += '">';
			
				// Build "selected" div
				sReplica += '<div class="sr-selected" id="' + sReplicaSelectedId + '" style="';
				sReplica += (sHeight) ? 'height:' + sHeight + 'px;' : '';
				sReplica += (sWidth) ? 'width:' + sWidth + 'px;' : '';
				sReplica += '">';
					// Build anchor
					sReplica += '<div class="sr-selected-left"></div>';
					sReplica += '<div class="sr-selected-right"></div>';
					sReplica += '<a href="#" class="sr-selected-button" style="';
					sReplica += (sHeight) ? 'height:' + sHeight + 'px;' : '';
					sReplica += (sWidth) ? 'width:' + sWidth + 'px;' : '';
					sReplica += '" id="' + sReplicaSelectedValue + '"></a>';
					// Build selected text div
					sReplica += '<div id="' + sReplicaSelectedText + '" class="sr-selected-text">' + s.children("option:selected").text() + '</div>';
				sReplica += '</div>';
				
				// Build options dropdown, and set width to match main container
				sReplica += '<div class="sr-optionscontainer" id="' + sReplicaOptionsId + '"style="width:' + sWidth + 'px;" >';
				if (optionValues.length > maxOptions)
				{
					// NOTE: HACKED HEIGHT for dropdowns
					sReplica += '<div class="sr-options" style="height: ' + (16 * maxOptions) + 'px;">';
						$.each(optionValues, function(i, val){
							sReplica += '<a class="sr-option" href="#" parentTarget="' + sName + '" referenceValue="' + optionValues[i] + '">' + optionTexts[i] + '</a>';
						});
					sReplica += '</div>';
				}
				else
				{
					$.each(optionValues, function(i, val){
						sReplica += '<a class="sr-option" href="#" parentTarget="' + sName + '" referenceValue="' + optionValues[i] + '">' + optionTexts[i] + '</a>';
					});
				}
				sReplica += '</div>';
			sReplica += '</div>';
			
			// Write the replicated element
			s.after(sReplica);

			// Show/Hide the options container
			$('#' + sReplicaSelectedValue).click(function(){
			    $('#' + sReplicaOptionsId).slideDown(100);
				$('#' + sReplicaOptionsId).toggleClass('sr-optionscontainer_show');
				$(this).parents('.sr-container').toggleClass('sr-container_show');				//add class to be used for highlighting or dropdown state

				// Add scroll bar if more options than max
				if (optionValues.length > maxOptions && $(this).attr('scrollInit') != 'true')
				{
					$('#' + sReplicaOptionsId + ' .sr-options').jScrollPane({scrollbarWidth: 12, dragMinHeight: 17, dragMaxHeight: 17});
					$(this).attr('scrollInit','true');
				}
				
				$(this).click(function(e){
				    e.preventDefault();
				    $('#' + sReplicaOptionsId).css('display', 'none').removeClass('sr-optionscontainer_show');
				    $(this).parents('.sr-container').removeClass('sr-container_show');
				});
				
				/*Uncomment below to simulate default browser dropdown hiding
				//Handle clicking away from drop down to collapse it
				//@WARNING: Might be very inefficient, adds event to every click on every element on page!
				$(':not(.sr-container)').click(function() {
				    $('#' + sReplicaOptionsId).css('display', 'none').removeClass('sr-optionscontainer_show');
				    $('.sr-container').removeClass('sr-container_show');
				});
				*/
				
				return false;
			})
			
			// Add hover classes
			$('#' + sReplicaSelectedId).hover(
				function(){
				    $(this).addClass('sr-selected_hover');
				    $('#' + sReplicaSelectedText).css('background', '#bfbfbf url(/images/dropdown_bg.gif) 100% 100% no-repeat');
				},
				function(){
				    $(this).removeClass('sr-selected_hover');
				    $('#' + sReplicaSelectedText).css('background', '#808080 url(/images/dropdown_bg.gif) 100% 100% no-repeat');
				}
			);
			
			// Set the selected option
			$('#' + sReplicaOptionsId + ' a').click(function(e){
				e.preventDefault();
				
				//$('#' + sReplicaOptionsId).children().unbind('blur');
				
				if ($('#' + sReplicaSelectedText).text() != $(this).text())
				{
				    $('#' + sReplicaSelectedText).text($(this).text()).css('background-color', '#bfbfbf').animate({backgroundColor: '#808080'}, 200);
				}
				$('#' + sReplicaOptionsId).css('display', 'none').removeClass('sr-optionscontainer_show');
				$(this).parents('.sr-container').removeClass('sr-container_show');				//remove class to be used for highlighting or dropdown state
                
                
				var s = $('#' + $(this).attr('parentTarget'));
				s.setSelected($(this).attr('referenceValue'));

				if (s[0].onchange)
					s[0].onchange();
				
				return false;
			})
			
			//Slide dropdown back up when moused leave (mouse out on entire section)
			$('.sr-container').mouseleave(
			    function() {
    			    $('#' + sReplicaOptionsId).slideUp(100);
				    $('#' + sReplicaOptionsId).css('display', 'none').removeClass('sr-optionscontainer_show');
				    $(this).removeClass('sr-container_show');
			    }
			);
			
			// Hide the original element
			s.hide();
				
		});
	};
	
	$.fn.setSelected = function(value, clear) {
		
		var v = value;
		var vT = typeof(value);
		var c = clear || false;

		// has to be a string or regular expression (object in IE, function in Firefox)
		if (vT != "string" && vT != "function" && vT != "object") return this;		
		
		this.children().each(function(i, o) {
			if(v.constructor == RegExp)
			{
				if(o.value.match(v))
				{
					o.selected = true;
				}
				else if(c)
				{
					o.selected = false;
				}
			}
			else
			{
				if(o.value == v)
				{
					o.selected = true;
				}
				else if(c)
				{ 
					o.selected = false;
				}
			}
		});
		
		return this;
	};
	
})(jQuery);