(function($){
	$.fn.extend({ 
		//plugin name
		funkyselect: function(options) {

			//Settings list and the default values
			var defaults = {
				className: 'funkyselect'
			};
			
			var options = $.extend(defaults, options);
		
    		return this.each(function() {
				var o =options;
				
				//Assign current element to variable, in this case is UL element
				var obj = $(this);
				//check if its a <select> tag
				if('select'!=obj[0].nodeName.toLowerCase()){
					return false;
				}
				obj.hide();	
				
				var lists = obj.children('option');
				
				//construct html
				var html = '<div class="'+o.className+'"><p>'+lists.eq(0).text()+'</p><ul>';
				$.each(lists, function(i, el){
					html += '<li>'+$(el).text()+'</li>';
				});
				html += '</ul></div>';
				
				//add to dom
				
				var funky = $(html).appendTo(obj.parent());
				funky.children('ul').css('top',$('.'+o.className).height()+'px');
				//Attach mouseover and mouseout event to the LI  
				funky.toggle(function(){
					$(funky).children('ul').slideDown('fast');
					
					if(!$.support.opacity){//ie6-7 only
						$('textarea').parent('span').css('visibility','hidden');
					}

				}, function(){
					$(funky).children('ul').slideUp('fast');
					if(!$.support.opacity){//ie6-7 only
						$('textarea').parent('span').css('visibility','visible');
					}
				});
				funky.children('ul').children('li').click(function(){
					funky.children('p').html($(this).text());
					selectValue = $(this).data('value');
					if (typeof selectValue == "undefined") {
						selectValue = $(this).text();
					}
					obj.val(selectValue);
				});
    		});
    	}
	});
})(jQuery);

