/*
	Developed by Daniel Noormohamed 05 May 2009 for JD Williams
	Using jQuery version:	1.3.2
	Dependant: jquery.cssDropdown.css
	
	----------------
	Changes 18 June 2009 11:05
	----------------
		if there are more than 10 list values in a dropdown the following styles are placed inline to fix the height of the container
				.dropOptions
					height:300px; 
					overflow: auto;
					width: 307px;
				.mainOtherValues 
					width:280px;
					margin-top:1px [delete this style from css file]
		
	
*/


/*
 * This function should be moved to a common javascript file
*/
	function removeHTMLTags(strInputCode){
	 	strInputCode = strInputCode.replace(/&(lt|gt);/g, function (strMatch, p1){
		 	return (p1 == "lt")? "<" : ">";
		});
		var strTagStrippedText = strInputCode.replace(/<\/?[^>]+(>|$)/g, "");
		return strTagStrippedText;
	}

		
	function selectedOptionText(txt, value, currentID, selectedOpt) {
		var strippedTxt = null;
		
		var fspan = $('#' + selectedOpt.current + '_select .dropOptions div:eq(' + selectedOpt.selected + ')');
		if($('.' + fspan.find('span').attr('class'), fspan).css('display') == 'none') {
			$('.' + fspan.find('span').attr('class'), fspan).remove();
			strippedTxt = fspan.text();
		} else {
			strippedTxt = removeHTMLTags(txt);
		}
		
		if(strippedTxt.length > 28)
			strippedTxt = strippedTxt.substr(0,45) + '...';
		$('#' + currentID + ' .getFittingValue').html(strippedTxt).attr('value', value);
	}
 			
	(function($){  
	   $.fn.cssDropdown = function(options) {     
				var selectedIndex =0;
				var currentID = '';
				var parentID = '';

				var defaults = {  
					fromSelect: 'yes',
					version: 1
				};  

				var options = $.extend(defaults, options);  
				   
	   		var cssDropFunctions = {
				filterOptions : function ($t) {
						var n =0;
						var optionList = $t.find('option');
						
						optionList.each(function () {
							
								if($(this).attr('selected') == true) {
									selectedIndex = n;
								}
							if(n == 0) {
								$('#' + parentID).find('.containerSelect').prepend('<div class="mainFirstValue getFittingValue" value="' + $(this).attr('value') + '">' + $(this).text() + '</div>');
							}
							
							$('#' + parentID).find('.containerSelect').find('span').each(function () {
								if($(this).css('display') == 'none') {
									$(this).remove();
								}
							});
															
							n++;
							$('#' + parentID).find('.containerSelect .dropOptions').append('<div ' + (optionList.size() > 10 ? ' style="border-right:0px; " ' : '') + ' class="mainOtherValues ' + $(this).attr('class') +'"  value="' + $(this).attr('value') + '">' + $(this).text() + '</div>');
						})
				},
				setMargins : function () {
					if($('#' + parentID).css('margin-bottom') > 2) $('#' + parentID).css('margin-bottom', '0px');
				},
				setSelectNumbers : function (n) {
					$('.mainFirstValue').each(function(){ $(this).attr('number', n++); });
				},
				oddEvenShades : function () {
					$('#' + parentID).find('.containerSelect').find('.mainOtherValues:odd').addClass('odd');
					$('#' + parentID).find('.containerSelect').find('.mainOtherValues:even').addClass('even');					
				},
				ToggleList : function (state) {
						$('#' + currentID + ' .dropOptions').toggleClass('dropOptionsShow');
						$('#' + currentID + ' .mainFirstValue').toggleClass('selectedDrop');		
				},
				showMainElement : function () {
					$('.mainFirstValue').each(function () { $(this).show(); });
				}, 
				triggerChange : function (txt, value) {
					
					selectedOptionText(txt, value, currentID + '_select', {selected : selectedIndex, current: currentID});
										
					$('#' + currentID.split('_')[0] + ' option[value="' +  value + '"]').attr('selected', 'selected')
					$('#' + currentID.split('_')[0]).trigger('change');	
				}, 
				hideSelectbox : function (thisN) {
					$('.mainFirstValue').each(function () { if($(this).attr('number') > thisN) $('.mainFirstValue[number="' + $(this).attr('number') + '"]').hide(); });	
				},
				minimiseMessageBox : function (msgs, emptyThis) {
						if(msgs.height() > 10) msgs.animate({ height: '10px'}, 500).find(emptyThis).empty();									
				}, updateOptions : function () {
					
				}
			}
			
		   return this.each(function() {															
				$t = $(this);
				currentID = $(this).attr('id');
				parentID = $(this).parent().attr('id');
				
				if(options.fromSelect == 'yes') {
						if($('#' + currentID + '_select').size() == 1) {							
							if($t.attr('show') == 'false')
								$('#' + currentID + '_select').hide();
							else {
								$('#' + currentID + '_select').show();
								$('#' + parentID).find('.containerSelect .dropOptions').html('');
								$('#' + parentID).find('.containerSelect .mainFirstValue').remove();
								cssDropFunctions.filterOptions($t);	
														
								$('#' + currentID + '_select .dropOptions div:eq(' + selectedIndex + ')').each(function(){						
									selectedOptionText($(this).text(), $(this).attr('value'), currentID + '_select', {selected : selectedIndex, current: currentID});
							  	});															
							  	
							}
							
						} else {
						
							if($t.css('display') == 'none'){
								$t.hide();
							} else {					
						
								cssDropFunctions.setMargins();
								$('#' + parentID).append('<div id="' + currentID + '_select" class="mainSelect"></div>')
								$('#' + parentID + ' .mainSelect').append('<div class="containerSelect"></div>')
								
								var optionList = $t.find('option');
								$('#' + parentID + ' .mainSelect .containerSelect').append('<div class="dropOptions ' + (optionList.size() > 7 ? ' dropOptionsMore ' : '') + '"></div>')
								
								cssDropFunctions.filterOptions($t);
								
								$(this).hide();
								currentID = $(this).attr('id') + '_select';
							  	
							  	$('#' + currentID + ' .dropOptions div:eq(' + selectedIndex + ')').each(function(){
									selectedOptionText($(this).text(), $(this).attr('value'), currentID, {selected : selectedIndex, current: currentID});
							  	});
							}
						}
						
						if($.browser.msie) {
							$('.dropOptions div').bind('mouseover', function () {
								$(this).addClass('hoverMainOtherValues');
							}).bind('mouseout',  function () {
								$(this).removeClass('hoverMainOtherValues');
							});					
						}
				}
				
				//cssDropFunctions.oddEvenShades();
				cssDropFunctions.setSelectNumbers(1);				
								
				$('#' + currentID + ' .containerSelect .mainFirstValue').live('click', function () {		
					
					if($('#' + currentID + ' .dropOptions').css('display') == 'none') {
						cssDropFunctions.minimiseMessageBox($('#stockMsgPanel'), '.messages');
						cssDropFunctions.ToggleList('expand');						
						cssDropFunctions.hideSelectbox($(this).attr('number'));									
					} else {
						cssDropFunctions.ToggleList('shrink');
						cssDropFunctions.showMainElement();						
					}
				})
							
				$('#' + currentID + ' .containerSelect').bind("mouseleave", function(){
					if($('#' + currentID + ' .dropOptions').css('display') == 'block') {
						cssDropFunctions.ToggleList();
						cssDropFunctions.showMainElement();
					}
				});
				
				$('#' + currentID).find('.mainOtherValues').live('click', function () {
					$t = $(this);
					cssDropFunctions.ToggleList('shrink');
					cssDropFunctions.showMainElement();
					cssDropFunctions.triggerChange($t.html(), $t.attr('value'));
				});																													
		   });  
	   };  
	})(jQuery);  

/*
To use this plugin you will need the following.

1. 
		
		Create a div layer and create a select box using html like the following
		THE DIV LAYER IS NEEDED!
		
			<div id="sizeDiv" name="sizeDiv" class="selectListShowContainer">
			
				<select name="optionSize" id="optionSize" class="optionSize">
					<option value="" class="valid">Choose Size</option>
					<option value="DOUBLE" class="valid">DOUBLE</option>
					<option value="KING" class="valid">KING</option>
					<option value="SINGLE" class="valid">SINGLE</option>
				</select>
				
			</div>

2.
		To convert the select box you execute the following code below. this will 
		convert the whole selext box into div layers also moving the value attriute 
		of a option tag to the div
		
		THIS DOES NOT REMOVE THE SELECT BOX, AS IT POPULATES IT WITH THE clicked VALUE
		you can test this using the "//alert($('#optionsForm').serialize());" commented out on line 50 
		
		<script>
			$(document).ready(function () {
				$('#selectboxID').cssDropdown({fromSelect:'yes'});
			});
		</script>

*/