// ***********************************************************************
// stylish look for comboboxes
var mxCombobox = {
    
    init: function(options) {
		_created = false;
        /* active input and his wrapper */
        _i = _w = null;
        /* popup show timestamp */
        _ts = new Date();
    },

    _onMouseDownEx: function(e) {
		if (_i == null) return;
		var $t = $(e.target);
		var id = 'mx-combo-popup';
		if ($t[0].id != id && $t[0].id != _w[0].id && $t.parents('#' + id).length == 0 && $t.parents('#' + _w[0].id).length == 0)
			this.hidePopup();
	},

    _onKeyDown: function(w, i, e, options) {
        var me = this;
		if (e.keyCode == 9) {
			if (_i != null)
				me.hidePopup();
		} else if (e.keyCode == 13) {
			if ((new Date()).getTime() - _ts.getTime() > 300) {
				if (_i == null) 
					me.showPopup(w, i, options);
				else
					me.hidePopup();
			}
		} else if (e.keyCode == 27) {
			if (_i != null)
				me.hidePopup();
		}
        setTimeout(function() { me._onChange(w, i, null); }, 0);
    },
    
    _onChange: function(w, i, e) {
    	var o = i.children('option'), s = '';
		for (n = 0; n < o.length; n++)
	    	if (o[n].selected == true) {
	    		s = $(o[n]).html();
		        if (_i == i)
        			this.activate(n);
	    		break;
	    	}
        w.find('.mx-combo-replace').html(s);
        w.find('select').trigger('mxOnChanged');
    },
    
    activate: function(x) {
    	if (_i != null) {
    		var c = $('#mx-combo-popup');
	    	var o = c.children('.mx-combo-row');
	    	o.removeClass('selected');
	    	$(o[x]).addClass('selected');
    	}
    },

    select: function(x) {
    	if (_i != null) {
	    	var o = _i.children('option');
			for (n = 0; n < o.length; n++)
		    	o[n].selected == (n == x);
	        _w.find('.mx-combo-replace').html($(o[x]).html());
		    _i.get(0).selectedIndex = x;
		    _i.change();
    		_i.focus();
    		this.hidePopup();
    	}
    },
 
    createPopup: function() {
        var me = this, html = '<div id="mx-combo-popup"></div>';
        $('#mx-popup-wrap').append(html);

        //$(document).mousedown(function(e){ me._onMouseDownEx(e) });
        $(document).bind('click', me._onMouseDownEx);
    },

    showPopup: function(w, i, options) {
		this.createPopup();

       	_ts = new Date();
        var c = $('#mx-combo-popup'), me = this;
        if (_i != null && _i.get(0) == i.get(0)) {
		    _i = _w = null;
            c.hide();
            i.focus();
        } else {
		    _i = i;
			_w = w;

			c.empty();
			var o = i.children('option');
			var onmouseover = function(n) { return function() { me.activate(n); }; };
			var onclick = function(n) { return function() { me.select(n); }; };
    	    for (var n = 0; n < o.length; n++) {
    	    	var div = $('<div class="mx-combo-row' + (o[n].selected ? ' selected' : '') + '">' + $(o[n]).html() + '</div>');
    	    	div.mouseover(onmouseover(n));
    	    	div.click(onclick(n));
    	    	c.append(div);
    	    }

        	var p = w.position(); 
	        c.css('left', p.left);
	        c.css('top', p.top + w.height() + 3);
	        c.css('width', (options != null && options.dropWidth != null) ? options.dropWidth : w.width());
	        c.css('height', o.length * 18); // combo row height = mx-combo-row.height + mx-combo-row.padding-top
	        c.show();
        }
    },
    
    hidePopup: function() {
        _i = _w = null;
       	_ts = new Date();
		$('#mx-combo-popup').hide();
    },
    
	attach: function(w, options) {
        var me = this, i = w.find('select'), p = i.parent();

		i.addClass('mx-combo-hidden');
		$('<div class="mx-edt-btn"><div class="mx-img-combo"></div></div>' +
		  '<div class="mx-edt-wrap-btn" ><div class="mx-combo-replace"></div></div>').insertAfter(i);

        me._onChange(w, i, null);
		
        i.keypress(function(e) {
            me._onKeyDown(w, i, e, options);
        }).keydown(function(e) {
            me._onKeyDown(w, i, e, options);
        }).change(function(e){
            me._onChange(w, i, e);
		}).focus(function() {
			w.addClass('mx-focused');
		}).blur(function() {
			w.removeClass('mx-focused');
		});
		
		w.click(function() { i.focus(); me.showPopup(w, i, options); });
    }
};

mxCombobox.init();

$.fn.mxCombo = function(options) {
    mxCombobox.attach(this, options);
};

$(function() {
	$('.mx-combo').each(function() { $(this).mxCombo() });
});