$j(document).ready(function(){					
	customSelect();
	$j('select#select').customSelect({
		dropWidth: 80,
		onChangeFunc: function(){
		}
	});
});


function customSelect(){
	jQuery.fn.customSelect = function(_options){
		// defaults options
		var _options = jQuery.extend({
			selectStructure: '<div class="selectArea"><div class="left"></div><div class="center"></div><a href="#" class="selectButton">&nbsp;</a><div class="disabled"></div></div>',
			selectText: '.center',
			selectBtn: '.selectButton',
			selectDisabled: '.disabled',
			optStructure: '<div class="drop-box"><div class="t"><div class="tl"><div class="tr"><div class="b"><div class="bl"><div class="br"><div class="l"><div class="r"><div class="head"><span></span></div><div class="body"><ul></ul></div></div></div></div></div></div></div></div></div></div>',
			optList: '.body ul:last',
			customClass: 'custom_class',
			column: 1,
			dropWidth: false,
			markOptClass: 'marked',
			disableClass: 'disable_cs',
			onChangeFunc: null,
			defSelTitle: false,
			title: '.heading'
		},_options);
		return this.each(function(){
			var cs = this;			
			if(!$j(cs).hasClass('outtaHere') && !$j(cs).hasClass(_options.disableClass)){
				if($j(cs).is(':visible')){
					var replaced = jQuery(_options.selectStructure);
					replaced.addClass($j(cs).attr('class'));
					cs.selectText = replaced.find(_options.selectText);
					var selectBtn = replaced.find(_options.selectBtn);
					var selectDisabled = replaced.find(_options.selectDisabled).hide();
					var optHolder = jQuery(_options.optStructure);
					optHolder.addClass($j(cs).attr('class'));
					var optList = optHolder.find(_options.optList);
					if($j(cs).attr('disabled')) selectDisabled.show();
					//replace
//title <select title='some title'>
/* 					if(_options.title){
						var optTitle = optHolder.find(_options.title);
						optTitle.hide();
						if($(cs).attr('title')){
							optTitle.find('span').text($(cs).attr('title'));
							optTitle.show();
						}
					}
*/
					var _cols = Math.ceil($j(cs).find('option').length/_options.column);
					$j(cs).find('option').each(function(ind){
						var selOpt = $j(this);
						var imgTitle = selOpt.attr("title") ? '<img src="'+selOpt.attr('title')+'" alt="img" />' : '';
						if(ind==0){
							var _opt = jQuery('<a href="#">'+ imgTitle + selOpt.html() + '</a>');
							var optTitle = optHolder.find(_options.title);
							optTitle.find('span').empty().append(_opt);
						}else{
							var _opt = jQuery('<li><a href="#">'+ imgTitle + selOpt.html() + '</a></li>');
						}
						if(selOpt.attr('selected')){
							cs.selectText.html(selOpt.html());
							_opt.addClass('selected');
							if (jQuery.isFunction(_options.onChangeFunc)){
								_options.onChangeFunc.apply(cs);
							}
						}
						if(selOpt.attr('class')){
							cs.selectText.html(selOpt.html());
							_opt.addClass(selOpt.attr('class'));
						}
						//class to option 
						if(selOpt.hasClass(_options.markOptClass)) _opt.addClass(_options.markOptClass);
						//bind 'click' event on options
						if(_opt.children('a').length){
							_opt.children('a').click(function(){
								optHolder.find('a').removeClass('selected');
								$j(cs).find('option').removeAttr('selected');
								$j(this).addClass('selected');
								selOpt.attr('selected', 'selected');
								cs.selectText.html(selOpt.html());
								$j(cs).change();
								optHolder.hide();
								return false;
							});
						}else{
							_opt.click(function(){
								optHolder.find('a').removeClass('selected');
								$j(cs).find('option').removeAttr('selected');
								$j(this).addClass('selected');
								selOpt.attr('selected', 'selected');
								cs.selectText.html(selOpt.html());
								$j(cs).change();
								optHolder.hide();
								return false;
							});
						}
						if(_options.column > 1){
							if(ind==1){
								if(!optHolder.find('div.columns-holder').length) optList.wrap('<div class="columns-holder"><div class="column"></div></div>');
								optHolder.find('div.column:last ul').append(_opt);
							}else{
								if(ind!=0 && (ind)%(_cols) == 0){
									optHolder.find('div.columns-holder').append('<div class="column"><ul></ul></div>');
									optHolder.find('div.column:last ul').append(_opt);
								}else{
									optHolder.find('div.column:last ul').append(_opt);
								}
							}
						}else{
							optList.append(_opt);
						}
					});
					replaced.width($j(cs).outerWidth());
					replaced.insertBefore($j(cs));
					optHolder.css({
						width: _options.dropWidth ? _options.dropWidth+'px' : $j(cs).outerWidth(),
						display: 'none',
						zIndex: 700,
						position: 'absolute'
					});
					jQuery(document.body).append(optHolder);

					var optTimer;
					replaced.hover(function(){
						if(!$j(cs).attr('disabled')){
							if(optTimer) clearTimeout(optTimer);
							replaced.addClass('hover');
						}
					}, function() {
						optTimer = setTimeout(function() {
							optHolder.hide();
							replaced.removeClass('select-active');
							replaced.removeClass('hover');
						}, 200);
					});
					optHolder.hover(function(){
						if(optTimer) clearTimeout(optTimer);
					}, function() {
						optTimer = setTimeout(function() {
							optHolder.hide();
							replaced.removeClass('select-active');
							replaced.removeClass('hover');
						}, 200);
					});
					selectBtn.click(function(){	
						if(!$j(cs).attr('disabled')){
							if(optHolder.is(':visible')){
								optHolder.hide();
								replaced.removeClass('select-active');
							}
							else{
								replaced.addClass('select-active');
								optHolder.children('ul').css({height:'auto', overflow:'hidden'});
								optHolder.css({
									top: replaced.offset().top + replaced.outerHeight(),
									left: replaced.offset().left,
									display: 'block'
								});
								if(optHolder.children('ul').height() > 100) optHolder.children('ul').css({height:100, overflow:'auto'});
							}
						}
						return false;
					});
					$j(cs).addClass('outtaHere');
					if(_options.defSelTitle){
						cs.selectText.html(_options.defSelTitle);
						cs.defText = _options.defSelTitle;
					}else{
						cs.defText = $j(this).get(0).options[0].text;
					}

					$j(cs).change(function(){										   
						var _selind = this.selectedIndex;
						optHolder.find('li').removeClass('selected').eq(_selind).addClass('selected');
						var _val = $j(this).get(0).options[_selind].text;
						cs.selectText.html(_val);
						if (jQuery.isFunction(_options.onChangeFunc)){
							_options.onChangeFunc.apply(cs);
						}
					});
				}
			}
		});
	}
}