/************************************************************************
*************************************************************************
@Name :		skinner - jQuery Plugin
@Revison :  1.0
@Date :		30/09/2011
@Author:	Andrea Bianchin - http://www.andreabianchin.it#projects
@License : 	Open Source - MIT License : http://www.opensource.org/licenses/mit-license.php
*************************************************************************
@Usage : 	allowed parameters
			# type : 	- left > float left (default)
						- right > float right
			 			- block > display block
			# width : 	- auto > (default)
			 			- pixel > e.g. 100px
			 			- percent > e.g. 80%
**************************************************************************
*************************************************************************/

(function($) {
	$.fn.skinner = function(options){
		var config = { 'type':'block', 'width':'auto' };    
	    if (options){ $.extend(config, options); }
		var element = this;
		var skin = {
			selectskinned: function (element){+
				$(element).each(function(ind,elem){
					selectContainer = $(elem);
					selectContainer.wrap('<div class="select-skinned" />');
					childrennn = $('<ul></ul>').hide();
					selectContainer.children('option').each(function(i,e){				
						testo = ($(e).html()=='') ? '&nbsp;' : $(e).html();
						itemLI = $('<li>'+testo+'</li>').click(function(){
							$(this).parent('ul').hide();
							$(this).parent('ul').next('select').find('option').eq(i).attr('selected','selected');
							testoSelected = ($(this).parent('ul').next('select').find('option').eq(i).text()=='') ? '&nbsp;' : $(this).parent('ul').next('select').find('option').eq(i).text();
							$(this).parent('ul').prev('.select-skinned-text').html(
								'<div class="select-skinned-cont">' + testoSelected + '</div>'
							);
							$(this).parent('ul').next('select').change();					
						});
						childrennn.append(itemLI);
						childrennn.hover(function(){},function(){
							$(this).hide();
						});
						
						$(document).click(function(e) { 
						   $('.select-skinned > ul').hide(); 
						});
						$('.select-skinned').click(function(e) { 
						   e.stopPropagation();
						}); 
						
					});			
					testoSel = (selectContainer.children('option:selected').text()=='') ? '&nbsp;' : selectContainer.children('option:selected').text();			
					selectedItem = $('<div class="select-skinned-text"><div class="select-skinned-cont">'+testoSel+'</div></div>');
					selectedItem.click(function(){ 
							elemUL = $(this).next('ul');
							pos = $(this).parent('.select-skinned').position();
							if($(window).height()<=(pos.top+elemUL.outerHeight()+20)){
								elemUL.css({'top':'auto','bottom':'0'})
							}else{
								elemUL.css({'top':$(this).prev('.select-skinned-text').children('.select-skinned-cont').height(),'bottom':'auto'})
								
							}
							if($(window).width()<=(pos.left+elemUL.outerWidth())){
								elemUL.css({'left':'auto','right':'0'})
							}else{
								elemUL.css({'left':'0','right':'auto'})
							}
							if(elemUL.is(':visible')){ elemUL.hide(); }else{ elemUL.show(); } 
						});
					selectContainer.before(selectedItem);
					selectContainer.before(childrennn);						
					selectContainer.change(function(){ skin.checkSelect(element); });
					selectContainer.hide();
				});
				skin.addStyle();
			},
			
			checkSelect : function(element){
				$(element).each(function(ind,el){
					elem = $(this);
					elem.prev('ul').html('');
					elem.children('option').each(function(i,e){
						testo = ($(e).html()=='') ? '&nbsp;' : $(e).html();
						itemLI = $('<li>'+testo+'</li>').click(function(){
							$(this).parent('ul').hide();
							$(this).parent('ul').next('select').find('option').eq(i).attr('selected','selected');
							$(this).parent('ul').prev('.select-skinned-text').html('<div class="select-skinned-cont">'+$(this).parent('ul').next('select').find('option').eq(i).text()+'</div>');
							$(this).parent('ul').next('select').change();
						});
						elem.prev('ul').append(itemLI);						
					});	
				});
				
				skin.addStyle();
			},
			
			resetSelect : function(elem){
				if($(elem).prev('ul').size()!=0){
					$(elem).prev('ul').prev('.select-skinned-text').html(
						'<div class="select-skinned-cont">' + $(elem).find('option').eq(0).text() + '</div>'
					);
				}
			},
			
			addStyle : function(){
				if(config.type!='block'){
					$(element).parent('.select-skinned').css({'float':config.type});
				}
							
				$(element).parent('.select-skinned').width(config.width);			
				
				$('.select-skinned').css({'position':'relative'});
				
				$('.select-skinned-cont').css({
					'background':'#ffffff',
					'margin-right':'13px',
					'font-size':'11px',
					'white-space':'nowrap',
					'overflow':'hidden',
					'padding':'0px 3px',
					'cursor':'pointer',
					'line-height':'18px',
					'height':'18px'
				});
				
				$('.select-skinned-text').css({
					'background-repeat':'no-repeat',
					'background-position':'center right',
					'border':'1px solid #ccc',
					'width':'auto',
					'cursor':'pointer'
				});
				
				$('.select-skinned > ul').css({
					'list-style':'none',
					'margin':'0',
					'padding':'0',
					'cursor':'pointer',
					'z-index':'1000',
					'position':'absolute',
					'background':'#e0e0e0',
					'color':'#666',
					'font-size':'12px',
					'border':'1px solid #999'
				});			
				
				$('.select-skinned > ul > li').css({
					'padding':'2px 3px',
					'white-space':'nowrap'
				}).hover(
					function(){$(this).css({'background':'#ccc'});},
					function(){$(this).css({'background':'none'});}
				);
			}
		}
		
		skin.selectskinned(element);
		
		return this;	
	}
})(jQuery);