/**
 * @author Sergey Ilin & Pavel Galaton
 * @version 1.2
 * @date 09.07.2010
 */

(function($) {
	$.selects = [];

	$.fn.cselect = function() {
		for(var i=0;i<this.length;i++) {
			if(!$(this.get(i)).is('select')) continue;
			if($.data(this.get(i),'csdivindex') == undefined) {
				$.selects[$.selects.length++] = new CustomSelect(this.get(i),i);
				$.data(this.get(i),'csdivindex',$.selects.length-1);
			}
		}

		return $.selects;
	};

	$.fn.cs = function() {
		var ret = new Array();

		for(var i=0;i<this.length;i++) {
			if(!$(this.get(i)).is('select')) continue;
			this[i] = $.selects[$.data(this.get(i),'csdivindex')].div[0];
		}

		return this;
	};

	//-------------------------------------------------------------------------------

	function CustomSelect(select,index,n_elements) {
		this.log = false;
		this.index = index;
		this.select = select;
		this.div = null;
		this.zindex = 50 - this.index;
		this.close = false;
		this.redraw = true;
		this.__construct();
	}

	CustomSelect.prototype = {
		__construct: function() {
			this.clog('__construct');
			$(this.select).css('position','absolute');
			$(this.select).css('left','-10000px');

			var mythis = this;
			this.draw();

			$(document).mouseup(function(e){
				mythis.clog('document clicked');
				if(mythis.close == true) {
					mythis.div.removeClass('active');
					mythis.close = false;
				}
				mythis.close = true;
			});

			$(mythis.select).change(function(){
				if(mythis.redraw) {
					mythis.draw();
				} else {
					mythis.clog('draw-disabled');
					mythis.redraw = true;
				}
				mythis.selectOption($(this).attr('selectedIndex'));
			});


			if($.browser.msie) {
				$(mythis.select).keydown(function(a,b){
					if(a.keyCode == 13) {
						mythis.div.removeClass('active');
						mythis.redraw = true;
					} else {
						mythis.redraw = false;
					}

					mythis.selectOption(mythis.select.selectedIndex);
				});
			}
			else {
				$(mythis.select).keyup(function(a,b){
					if(a.keyCode == 13) {
						mythis.div.removeClass('active');
						mythis.redraw = true;
					} else {
						mythis.redraw = false;
					}

					mythis.selectOption(mythis.select.selectedIndex);
				});
			}
		},

		selectRealOption: function (index) {
			this.select.options[index].selected = true;
			$(this.select).change();
		},

		selectOption: function (index) {
			this.clog('selectOption');
			var targetDIV = this.div.find("div[index='"+index+"']");
			this.div.find('.selected').removeClass('selected');
			targetDIV.addClass('selected');
			this.div.find('.current span').html(targetDIV.html());
			$.data(this.div,'selectedIndex',index);
			if(this.div.is('.active')) {
				this.div.find('.options').scrollTo(".selected", 0);
			}
		},

		addEventsListeners: function () {
			var mythis = this;
			this.clog('addEventsListeners');

			this.div.hover(function(e){
					$(this).addClass('hover');
				},
				function(e){
					$(this).removeClass('hover');
				});

			this.div.find('.options div').hover(function(e){
					$(this).addClass('hover');
				},
				function(e){
					$(this).removeClass('hover');
				});

			this.div.find('.options div').mouseup(function(e){
				mythis.clog('.options div click');
				mythis.div.find('.selected').removeClass('selected');
				$(this).addClass('selected');
				mythis.div.find('.current span').html($(this).html());
				mythis.selectRealOption($(this).attr('index'));
				mythis.close = true;
			});

			this.div.mousedown(function(){
				mythis.close = false;
			});

			this.div.find('.current').click(function(e){
				mythis.clog('click on .current');
				mythis.div.addClass('active');
				mythis.select.focus();
				mythis.div.find('.options').scrollTo(".selected", 0);
				mythis.close = true;
			});
		},
		draw: function() {
			if(!this.redraw) {this.redraw = true; return;}
			this.clog('draw');
			if(this.div != null) { this.div.remove(); }
			var mythis = this;
			var selectObject = $(this.select);
			var selectedIndex = selectObject.attr('selectedIndex');

			if(selectedIndex < 0) {
				this.clog(selectedIndex);
				selectedOption = new Option('','');
				selectObject.append(selectedOption);
				selectedIndex = 0;
			}

			var selectedOption = selectObject.attr('options')[selectedIndex];

			if(selectedOption.innerHTML == '') var text = '&nbsp;';
			else text = selectedOption.innerHTML;

			var div = 	'<div class="cselect">'+
							'<div class="current"><span>'+text+'</span></div>'+
							'<div class="options"></div>'+
						'</div>';

			this.div = $(div);

			var browser = navigator.userAgent.toLowerCase();

			if(browser.indexOf('safari') != -1 && browser.indexOf('chrome') == -1)  {
				this.div.width(	selectObject.width() + 30 );
			} else
				this.div.width(	selectObject.width() + 7 );

			this.div.css('z-index', Number(this.zindex));
			this.div.css('font-size', String(parseInt(selectObject.css('font-size'))+'px'));

			this.div.css('font-family', selectObject.css('font-family'));
			this.div.css('color', selectObject.css('color'));

			/* copying classes from select tag to our div */
			if(selectObject.attr('class') != '') {
				var classesArr = selectObject.attr('class').split(' ');

				for (i in classesArr) {
					this.div.addClass(classesArr[i]);
				}
			}

			selectObject.after(this.div);

			for(i = 0; i< selectObject.attr('length'); i++){
				var optionDiv = '<div ';
				if(i == selectedIndex) { optionDiv += 'class="selected"';}
				if(selectObject.attr('options')[i].innerHTML != '')
					optionDiv += '>'+selectObject.attr('options')[i].innerHTML+'</div>';
				else
					optionDiv += '>&nbsp;</div>';
				optionDiv = $(optionDiv);
				optionDiv.attr('index',i);

				this.div.find('.options').append(optionDiv);
			}
			this.addEventsListeners();
		},
		clog: function (msg) {
			if(this.log) {
				if('object' == typeof msg) {
					console.log('obj#'+this.index+' log at the next line ↓');
					console.log(msg);
				} else {
					console.log('obj#'+this.index+': '+msg+'');
				}
			}
		}
	}
}(jQuery));