(function($){
var	$view = function( str ){
		return  $( eval( '\'' + str.replace( /<%=([\w]+)\%>/g, '\' + $1 + \'' ) + '\'' ) );
	},
	createuiid = function( el, prefix ){
		var prefix = ( !prefix && typeof prefix != 'string' )? 'form' : prefix;
		if( el.attr('id') ){
			return prefix + '_ui_id_' + el.attr('id');
		}
		else if( el.attr('name') ){
			return	prefix + '_ui_name_' + el.attr('name')
					.replace('[]', '')
					.replace('[', '_')
					.replace('\']', '')
					.replace(']', '')
					.replace('\'', '')
					.replace('"', '');
		}
		else{
			return prefix + '_ui_the_' + 'n';
		}
	},
	cssselect = function (config) {
		var optionsposition;
		if(config){
			optionsposition = config.position;
		}
		
		if($(this).length <= 0){
			return false;
		}
		return $(this).each(function(){
			var	$thisel = $(this),
				$optsel = $thisel.children('option'),
				$uiel,
				//thisevs = $._data($thisel[0], 'events'),
				//thisevs = jquery._data($thisel[0], 'events'),
				thisevs = $thisel.on('events'),
				uiid = createuiid($thisel, 'select'),
				optswidth = 0,
                optsposition,optionsposition, optionslimit,
	
				/* ui */
				tpl = {
					wrapper: '<div class="cssselect"></div>',
					select: '<div class="selectbox snormal"></div>',
					selectlt: '<div class="selectlt"></div>',
					selectrt: '<div class="selectrt"></div>',
					options: '<div class="optionsbox"></div>',
					optionsinner: '<div class="optionsinnerbox"></div>',
					option: '<div class="optionbox onormal"></div>',
					optioninner: '<span></span>'
				},
	
				/* select box */
				$selectel = $view(tpl.select),
				$sltel = $view(tpl.selectlt),
				$srtel = $view(tpl.selectrt),
	
				/* options box */
				$optionsel = $view(tpl.options),
				$optionsinnerel = $view(tpl.optionsinner),
	
				init = function() {

					if(
							$thisel.length <= 1
						&&	$thisel.get(0).tagname === 'select'
						&&	!$thisel.attr('multiple')
						&&	$thisel.children('optgroup').length <= 0
					)
					{						
						
						$uiel = $view(tpl.wrapper).attr('id', uiid);
						$('#' + uiid).remove();
                        $thisel.show();
						$thisel.hide();

						$uiel.append($selectel).append($optionsel.append($optionsinnerel));
						$uiel.click(function(event) {
							event.stoppropagation();
						});
	
						/* render select*/
						$selectel.append($sltel).append($srtel);
						if( $thisel.attr('disabled') ){
							$selectel.addclass('sdisabled');
							
							return;
						}

						$selectel.click(events.selectclick);
						$selectel.hover(events.selecthover, events.selectnormal);		
	
						/* render options*/
						$optsel.each(function(i){
							var	optel = $(this),
								optiontxt = optel.text(),
								
								/* render option */
								$optionel = $view(tpl.option).append($view(tpl.optioninner).text(optiontxt));
	
								/* option event */
								$optionel.css({ float : 'left' });
								$optionel.hover(events.optionhover, events.optionnormal);
								$optionel.click(events.optionclick);
	
								/* render all options*/
								$optionsinnerel.append($optionel);
	
							/* set selected */
							if( optel.val() == $thisel.val() ){
								$sltel.text(optiontxt);
	
								/* set select option */
								$optionel.addclass('selected');
							}
	
						});
	
						/* options position */
						$thisel.setoptions = function(){
                            if(config && config.position){
                                optionsposition = config.position;
                            }

                            if(config && config.limit){
                                optionslimit = config.limit;
                            }

                            $optionsinnerel.children('.optionbox').css({ float : 'none' });

							var top,
								sltposition = $selectel.position(),
								sltedposition = $optionsinnerel.children('.selected').position(),
								eachoptheight = $optionsinnerel.outerheight() / $optsel.length,
								optsheight = 'auto';

                            if(optionslimit){
                                if(optionslimit != 'auto' && $optsel.length > optionslimit){
                                    optsheight = math.round(eachoptheight) * optionslimit;
                                }
                                else{
									optsheight = 'auto';
								}
							}
							else{
								if($optsel.length > 10){
									optsheight = math.round(eachoptheight) * 7;
								}
								else{
									optsheight = 'auto';
								}
							}

                            sltposition.top = sltposition.top + $selectel.outerheight();

                            $optionsel.css({height: math.round(optsheight), top: sltposition.top + 1});
    
                            if(
                                optsposition &&
                                ( 
                                    $(window).height() + $(document).scrolltop()
                                    <
                                    $optionsel.offset().top + $optionsel.outerheight()
                                )
                            ){
								top = sltposition.top - $optionsel.outerheight() - $selectel.outerheight() - 3;
							}else{
								top = sltposition.top;
							}

                            $optionsel.scrolltop(math.round(sltedposition.top - eachoptheight));
							$optionsel.css({ 'top' : top + 1 , 'left' : sltposition.left, 'overflow-y': 'auto', 'overflow-x': 'hidden'});

                            if( !optsposition ){
                                optsposition = $optionsel.position();
                            }
						};
						
                        /* render $uiel */
						$thisel.before($uiel);
						$thisel.setoptions();
                        $optionsel.hide();
					}
				},
				
				
				events = $.extend({
					selectnormal : function() {
						$(this).removeclass('shover');
					},
					selecthover : function() {
						$(this).addclass('shover');
					},
					selectclick : function() {
						if( $optionsel.css('display') != 'none' ){
							handlers.selectoff();
						}
						else{
							handlers.selecton();
							$thisel.setoptions();
						}
					},
					optionnormal : function() {
						$(this).removeclass('ohover');
					},
					optionhover : function() {
						
						$(this).addclass('ohover');
					},
					optionclick : function() {
						
						handlers.selected(this);
					},
					documentclick : function() {
						handlers.selectoff();
					}
				}, function(){}),
				handlers = $.extend({
					selecton : function(){
						this.selectoff();
	
						$selectel.addclass('spressdown');
						$optionsel.show();

						$(document).one('click', events.documentclick);
					},
					selectoff : function(){
						$thisel.unbind('click');
						$('.selectbox').removeclass('spressdown');
						$('.optionsbox').hide();
					},
					selected : function(el){
						var i = $optionsinnerel.children('.optionbox').index(el);
						$optionsinnerel.children('.optionbox').removeclass('selected');
						$(el).addclass('selected');
						$sltel.text($(el).text());
						if(thisevs&& thisevs.change&& thisevs.change.length > 0){
				
											
							$thisel[0].selectedindex = i;
							$.each( thisevs.change , function(){
								$thisel.one('click', this.handler);
								$thisel.click();
							});
				
				
							$thisel.children().eq(i).attr('selected',true);
							$thisel.trigger('change');
							
							var iii=$('#identityselect').children().eq(i).prop('selected',true);
							$.each(thisevs.change , function(){
								$thisel.one('click', this.handler);
								$thisel.click();
							});
						}
						$thisel[0].selectedindex = i;
						this.selectoff();
	
					}
				}, function(){});
	
			return init();
		});
	}
	$.fn.extend({
		cssselect: cssselect
	});

})(jquery);