// JavaScript Document
	function eCaffeineComboTransform(id,fixedOptionWidth){
		$('#eCaffeineCombo-'+id).remove();
		id = id.replace("#","");
		$('#'+id).hide();
		theme = $('#'+id).attr("class");
		width = $('#'+id).css("width");
		
		clickWidth = "21px";
		
		$('#'+id).after('<div class="'+theme+'" id="eCaffeineTest1"><div class="'+theme+' select" id="eCaffeineTest2"><div class="'+theme+' select click"  id="eCaffeineTest3"></div></div></div>');		
		clickWidth = $('#eCaffeineTest3').css("width");

		$('#eCaffeineTest1').remove();
		$('#eCaffeineTest2').remove();
		$('#eCaffeineTest3').remove();

		if(clickWidth == ""){
			clickWidth	= "21px";
		}

		if(clickWidth == "undefined"){
			clickWidth	= "21px";
		}
		
		if(clickWidth == null){
			clickWidth	= "21px";		
		}
		
		templateCombo = '<div id="eCaffeineCombo-'+id+'" class="eCaffeineCombo '+theme+'">'+
							'<div id="eCaffeineCombo-Select-'+id+'"  class="eCaffeineCombo-Select '+theme+' select">'+
								'<div id="eCaffeineCombo-Select-Option-'+id+'"  class="eCaffeineCombo-Select-Option '+theme+' base"><span><#Item-Selected#></span></div>'+		
								'<div id="eCaffeineCombo-Select-Button-'+id+'"  class="eCaffeineCombo-Select-Button '+theme+' click"></div>'+
							'</div>'+
							'<div id="eCaffeineCombo-Options-'+id+'"  class="eCaffeineCombo-Options"><div id="eCaffeineCombo-Options-Dimension-'+id+'" class="eCaffeineCombo-Options-Dimension  '+theme+' options"><ul><#Options#><ul></div></div>'+
						'</div>';
			
		optionsCombo = '';
		$('#'+id+' option').each(function(i, selected){
			value = $(selected).val();
			label = $(selected).text();
			
			optionsCombo = optionsCombo+'<li title="'+i+'" lang="'+value+'">'+label+'</li>';
		});		
		templateCombo = templateCombo.replace("<#Options#>",optionsCombo);
		
		$('#'+id+' option:selected').each(function(i, selected){
			value = $(selected).val();
			label = $(selected).text();
			label = constrain(label, label.length, (width.replace("px","") - clickWidth.replace("px","")) - 30 );
			templateCombo = templateCombo.replace("<#Item-Selected#>",label);
		});		
				
		$('#'+id).after(templateCombo);		

		newWidth = (width.replace("px","") - $('#eCaffeineCombo-Select-Button-'+id).css("width").replace("px","")) - 5;
		
		$('#eCaffeineCombo-'+id).css("width",width);		
		
		if(fixedOptionWidth){
			$('#eCaffeineCombo-Options-Dimension-'+id).css("width",newWidth+'px');		
		}

		$('#eCaffeineCombo-Select-'+id).click(function(){ $('#eCaffeineCombo-Options-'+id).toggle();});

		$('#eCaffeineCombo-Options-'+id+' li').click(function(){
			$('#'+id+' option:eq('+$(this).attr('title')+')').attr("selected","selected");
			$('#eCaffeineCombo-Options-'+id).slideToggle("fast",function(){eCaffeineComboTransform(id,fixedOptionWidth);});
			$('#'+id).trigger('onchange');
			$('#'+id).trigger('onblur');
			$('#'+id).trigger('onfocus');
		});

		$('#'+id).change(function(){
			eCaffeineComboTransform(id,fixedOptionWidth);
		});
	}

	function eCaffeineComboToggle(id){
		$('#eCaffeineCombo-Options-'+id).toggle();
	}

	function constrain(text, original, ideal_width){
        var temp_item = ('<span class="temp_item" style="display:none;">'+ text +'</span>');
		$(temp_item).appendTo('body');
        var item_width = $('.temp_item').width();
        var ideal = parseInt(ideal_width);
        var smaller_text = text;
		while (item_width > ideal) {
                smaller_text = smaller_text.substr(0, (smaller_text.length-1));
                $('.temp_item').html(smaller_text);
                item_width = $('span.temp_item').width();
        }

        var final_length = smaller_text.length;
		$('.temp_item').remove()
        if (final_length != original) {
                return (smaller_text + '&hellip;');
        } else {
            return text;
        }
	}
