/******************************************************
* 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 = 8;
			
			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" style="width:' + sWidth + 'px;" >' + 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: ' + (20 * 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).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');
				}
				return false;
			}).blur(function(){
				//var evalString = '$("#' + sReplicaOptionsId + '").removeClass("sr-optionscontainer_show")';
				//setTimeout(evalString,500);
			});
			
			// Add hover classes
			$('#' + sReplicaSelectedId).hover(
				function(){$(this).addClass('sr-selected_hover');},
				function(){$(this).removeClass('sr-selected_hover');}
			);
			
			// Set the selected option
			$('#' + sReplicaOptionsId + ' a').click(function(){
				
				$('#' + sReplicaSelectedText).text($(this).text());
				$('#' + sReplicaOptionsId).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;
			})
			
			// 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);