/**
 * @author I2B
 */
$.fn.groupBox = function(options){
	var arg = arguments[0];
    return this.each(function(){
        var w = $(this).css('width');
        w = (/[0-9]*px/i.test(w)) ? parseInt(w) : 200;
        var opt = {
            'border': 'none',
            'background': 'transparent',
            'height': 26,
            'width': w,
            'textAlign': 'left',
			'imgPath': 'img'
        }
        
        if ($(this).attr('opt')) {
            $.extend(opt, eval('(' + $(this).attr('opt') + ')'));
        }
         $.extend(opt, arg);
        var select = $(this).hide();
        var options = select[0].options;
        var input_s = $('<input readonly="readonly" type="text" />').css({
            'border': opt.border,
            'background': opt.background
        });
        var container = select.parent();
        
        var css_divs = {
            'float': 'left',
            'backgroundImage': 'url('+opt.imgPath+'/i2bforms/bg_input.gif)',
            'backgroundRepeat': 'no-repeat',
            'width': 4,
            'height': opt.height
        };
		var css_divs_error = {
            'backgroundImage': 'url('+opt.imgPath+'/i2bforms/bg_input_error.gif)'
		};
        var css_arrow = {
            'backgroundImage': 'url('+opt.imgPath+'/i2bforms/img_select_arrow.gif)',
            'width': 18,
            'height': opt.height
        };
		var css_arrow_error = {
			'backgroundImage': 'url('+opt.imgPath+'/i2bforms/img_select_arrow_error.gif)'
		};
        var css_option = {
            'height': 20,
            'color': '#444',
            'background': '#fff',
            'cursor': 'pointer',
            'fontSize': '11px',
            'fontFamily': 'Arial',
            'paddingLeft': 10,
            'paddingRight': 10
        };
        var css_option_over = {};
        $.extend(css_option_over, css_option)
        css_option_over.color = '#fff';
        css_option_over.background = '#555';
        
        var drop_down = function(){
			//Verificamos si existen optgroups
			if (select.find('optgroup').length > 0) {
				
				divl.css('backgroundImage', css_divs.backgroundImage);
				divc.css('backgroundImage', css_divs.backgroundImage);
				diva.css('backgroundImage', css_divs.backgroundImage);
				divr.css('backgroundImage', css_divs.backgroundImage);
				arrow.css('backgroundImage', css_arrow.backgroundImage);
				options_div.empty().show();
				
				var table = $('<table></table>').appendTo(options_div).css('borderCollapse', 'collapse');
				var grupos = select.find('optgroup');

				var items = 0;
				$.each(grupos, function(i, grupo){
					items++;	
					var tr = $('<tr></tr>').appendTo(table);
					var td = $('<td></td>').attr({
						'align': 'left'
					}).html(grupo.label).appendTo(tr).css(css_option).css({
						cursor: 'default',
						fontStyle: 'italic',
						fontWeight: 'bolder'
						
					}).unbind('mousedown').mousedown(function() {
						return false;
					})
					
					var options = $(grupo).find('option');
					$.each(options, function(i, val){
						items++;
						var tr = $('<tr></tr>').appendTo(table);
						var td = $('<td></td>').attr({
							'align': 'left',
							'value': val.value
						}).html(val.text).appendTo(tr).css(css_option).css({
							paddingLeft: '20px'
						}).bind('mouseover', function(){
							$(this).css(css_option_over).css({
								paddingLeft: '20px'
							});
						}).bind('mouseout', function(){
							$(this).css(css_option).css({
								paddingLeft: '20px'
							});
						}).bind('mousedown', function(){
							select.attr('value', $(this).attr('value'));
							input_s.val($(this).html());
							
							if (select.change) {
								select.change();
							}
						});
					});
				});
				
				if (items > 6) {
					options_div.css({
						'overflowY': 'scroll',
						'overflowX': 'hidden',
						'height': css_option.height * 6
					})
				}
				
				
			} //En caso de no existir optgroups: simula select normal
			else {
			
				options = select[0].options;
				if (options.length > 0) {
					
					divl.css('backgroundImage', css_divs.backgroundImage);
					divc.css('backgroundImage', css_divs.backgroundImage);
					diva.css('backgroundImage', css_divs.backgroundImage);
					divr.css('backgroundImage', css_divs.backgroundImage);
					arrow.css('backgroundImage', css_arrow.backgroundImage);
					arrow.css('backgroundImage', css_arrow.backgroundImage);
					options_div.empty().show();
					
					if (options.length > 6) 
						options_div.css({
							'overflowY': 'scroll',
							'overflowX': 'hidden',
							'height': css_option.height * 6
						})
					var table = $('<table></table>').appendTo(options_div).css('borderCollapse', 'collapse');
					$.each(options, function(i, val){
						var tr = $('<tr></tr>').appendTo(table);
						var td = $('<td></td>').attr({
							'align': 'left',
							'value': val.value
						}).html(val.text).appendTo(tr).css(css_option).bind('mouseover', function(){
							$(this).css(css_option_over);
						}).bind('mouseout', function(){
							$(this).css(css_option);
						}).bind('mousedown', function(){
							select.attr('value', $(this).attr('value'));
							input_s.val($(this).html());
							
							if (select.change) {
								select.change();
							}
						});
					});
				}
			}
			
			$(document).bind('mousedown', function(e){
				if (!$(e.target).is('.options_div')) {
					/*divl.css('backgroundImage', css_divs.backgroundImage);
					divc.css('backgroundImage', css_divs.backgroundImage);
					diva.css('backgroundImage', css_divs.backgroundImage);
					divr.css('backgroundImage', css_divs.backgroundImage);
					arrow.css('backgroundImage', css_arrow.backgroundImage);*/
					options_div.hide();
					input_s.focus();
					$(document).unbind('mousedown');
				}
			});
			
        } //end drop down function
        
        var div = $('<div></div>').appendTo(container).css({
            'zIndex': 30,
            'float': 'left',
            'position': 'relative',
            'height': css_divs.height,/*'width':opt.width,*/
            'cursor': 'pointer'
        }).bind('click', drop_down);
        var divl = $('<div></div>').appendTo(div).css(css_divs).css({
            'backgroundPosition': '0px 0px'
        });
        var divc = $('<div></div>').appendTo(div).css(css_divs).css({
            'backgroundPosition': '-' + css_divs.width + 'px 0px',
            'width': opt.width - css_arrow.width - (css_divs.width * 2)
        });
        var diva = $('<div></div>').appendTo(div).css(css_divs).css({
            'backgroundPosition': '-' + css_divs.width + 'px 0px',
            'width': css_arrow.width
        });
        var divr = $('<div></div>').appendTo(div).css(css_divs).css({
            'backgroundPosition': 'right 0px'
        });
        var arrow = $('<div></div>').appendTo(diva).css(css_arrow);
        
        // Solo para centrar verticalmente el input ******
        var table = $('<table></table>').appendTo(divc).css({
            'height': '100%',
            'width': opt.width - css_arrow.width - (css_divs.width * 2),
            'background':'none'
        });
        var tr = $('<tr></tr>').appendTo(table);
        var td = $('<td></td>').appendTo(tr).css({
        	padding:0,
			height:'auto',
			background:'none'
        });
        // *****************
        
        input_s.appendTo(td).css({
            'cursor': 'pointer',
            'textAlign': opt.textAlign,
            'width': opt.width - css_arrow.width - (css_divs.width * 2)
        }).bind('blur', function(){
            divl.css('backgroundImage', css_divs.backgroundImage);
            divc.css('backgroundImage', css_divs.backgroundImage);
            diva.css('backgroundImage', css_divs.backgroundImage);
            divr.css('backgroundImage', css_divs.backgroundImage);
			arrow.css('backgroundImage', css_arrow.backgroundImage);
            options_div.hide();
        });
        
        // Options **********
        var css_options_div = {
            'position': 'absolute',
            'background': '#555',
            'width': opt.width,
            'top': 25,
            'left': 0,
            'border': '1px solid #999',
            'overflowX': 'hidden',
            'zIndex': 5001
        }
        
        var options_div = $('<div></div>').addClass('options_div').appendTo(div).css(css_options_div).hide();
        // ******************
        
        if(options.length > 0) {
            input_s.val(options[0].text);
            select.val(options[0].value);
        }
        
        var div_disabled = $('<div></div>').hide().appendTo(div).css({
            position: 'absolute',
            top: 0,
            left: 0,
            width: ($.browser.msie && $.browser.version == '6.0') ? opt.width + 4 : opt.width,
            height: opt.height,
            background: '#ccc',
            opacity: 0.7
        });
        
        this.enable = function(){
            div_disabled.hide();
            div.bind('click', drop_down);
        };
        this.disable = function(){
            div_disabled.show().css('cursor', 'default');
            div.unbind('click', drop_down);
        };
        this.setValue = function(v){
            select.attr('value', v);
            input_s.val(select[0].options[select[0].selectedIndex].text);
        };
		
		this.enableError = function() {
			divl.css('backgroundImage', css_divs_error.backgroundImage);
			divc.css('backgroundImage', css_divs_error.backgroundImage);
			diva.css('backgroundImage', css_divs_error.backgroundImage);
			divr.css('backgroundImage', css_divs_error.backgroundImage);
			arrow.css('backgroundImage', css_arrow_error.backgroundImage);
		};
		
		this.disableError = function() {
			divl.css('backgroundImage', css_divs.backgroundImage);
			divc.css('backgroundImage', css_divs.backgroundImage);
			diva.css('backgroundImage', css_divs.backgroundImage);
			divr.css('backgroundImage', css_divs.backgroundImage);
			arrow.css('backgroundImage', css_arrow.backgroundImage);
		};
        
        if (select.attr('disabled')) {
            this.disable();
        }
    });
};