// IE Min-width in Ems

/*  Created by Rob Williams for CommunityMX
	May 26, 2006
	
	www.communitymx.com
*/


//Only apply the behaviour if the browser is Internet Explorer
if ((navigator.userAgent.toLowerCase().indexOf("msie")!=-1)) {
	var eleList = new Array();
	
	var timer;
	
	//Create a special function for IE/Mac. This is necessary because that browser
	//does not support CSS Expressions, so we must get the elements by ID rather than
	//affect the CSS rules themselves.
	function ieMac() {
		//apply to every element
		for (var j=0; j < eleList.length; j++) {
			var wrapEle = document.getElementById(eleList[j][0]);
			if (wrapEle) {
				ieMin(wrapEle, eleList[j][1], eleList[j][2]);
			}
		}
		timer = setTimeout("ieMac()", 250);
	}

	//Get a reference to the stylesheets of this document
	var sheets = document.styleSheets;
	
	for (var i = 0; i < sheets.length; i++) {
		var theseRules = sheets[i].rules;
		
		if (theseRules.length > 0) {
			handleRuleSet(theseRules);
		}
		//Special handling for imports in IE
		
		
		if (sheets[i].imports.length > 0) {
			
			for (var j=0; j < sheets[i].imports.length; j++) {
				handleRuleSet(sheets[i].imports[j].rules);
			}
		}
		
	}
	
	//On IE/Mac we need to call our special function manually. This will start the 1/4 second timeout loop that will
	//continually watch for changes to the font-size (and thus size of 1em).
	if (navigator.userAgent.toLowerCase().indexOf("mac") != -1) {
		//window.onload = ieMac;
		ieMac();
	}
	
	
}

function handleRuleSet(theseRules) {
	for (var j = 0; j < theseRules.length; j++) {
			//check to see if we need to apply to this rule
			
			if (theseRules[j].style.width.toLowerCase().indexOf("em") > 0 && theseRules[j].style.cssText.toLowerCase().indexOf("min-width") > 0) {
				//Yup, need to apply
				
				//Get the rule's width
				var width = theseRules[j].style.width;
				
				/*
				var minRE = /min-width:[\s]*[0-9]+px/gi;
				var minWidth = theseRules[j].style.cssText.toLowerCase().match(minRE);
				
				
				if (minWidth == null) {
					//Abort this rule if it doesn't have a pixel minimum width value
					continue;
				}
				
				//Now get the pixel values
				width = width.substring(0, width.indexOf("em"));
				minWidth = minWidth[0].match(/[0-9]+/);
				minWidth = minWidth[0];
				//done getting width values
				
				
				//check to see if we can use an expression (PC) or if we need to use the JS way (for Mac)
				 if (navigator.userAgent.toLowerCase().indexOf("mac") != -1) {
				 	//We can fix rules that apply to ID'd elements, so let's check for that now
					var re = /#[a-z]+/gi
					var eleID = theseRules[j].selectorText.toLowerCase().match(re);
					
					//this rule is applied to an ID'd element somewhere
					if (eleID != null) {
						//Strip off the # sign
						eleID = eleID[0].substr(1);
						
						thisEle = new Array(eleID, width, minWidth);
						//Add it to the list of elements to check
						eleList.push(thisEle);
					}
					*/
					
					//Test using non-RE
				var testString = theseRules[j].style.cssText.toLowerCase()
				var minWidth = testString.substring(testString.indexOf("min-width:"));
				if (minWidth.indexOf(";") > -1) {
					minWidth = minWidth.substring(0, minWidth.indexOf(";"));
				}
				
				if (minWidth.indexOf("px") == -1) {
					//Not found, so continue
					continue;
				}
				
				minWidth = minWidth.substring(10);
				
				minWidth = minWidth.substring(0, minWidth.indexOf("px"));
				
				
				if (minWidth == null) {
					//Abort this rule if it doesn't have a pixel minimum width value
					continue;
				}
				
				//Now get the pixel values
				width = width.substring(0, width.indexOf("em"));
				//minWidth = minWidth[0].match(/[0-9]+/);
				//minWidth = minWidth[0];
				//done getting width values
				
				
				//check to see if we can use an expression (PC) or if we need to use the JS way (for Mac)
				
				 if (navigator.userAgent.toLowerCase().indexOf("mac") != -1) {
				 	//We can fix rules that apply to ID'd elements, so let's check for that now
					//var re = /#[a-z]+/gi
					//var eleID = theseRules[j].selectorText.toLowerCase().match(re);
					//Try to get an id from the selectorText
					var thisSel = theseRules[j].selectorText;
					if (thisSel.indexOf("#") < 0) {
						//No ID used, so we have to abort
						continue;
					}
					
					//Now try to get the id
					thisSel = thisSel.substring(thisSel.indexOf("#") + 1);
					if (thisSel.indexOf(" ") != -1) {
						thisSel = thisSel.substring(0, thisSel.indexOf(" "));
					} else if (thisSel.indexOf(".") != -1) {
						thisSel = thisSel.substring(0, thisSel.indexOf("."));
					} else if (thisSel.indexOf(":") != -1) {
						thisSel = thisSel.substring(0, thisSel.indexOf(":"));
					}
					
					eleID = thisSel;
					
					
					
					//this rule is applied to an ID'd element somewhere
					if (eleID != null) {
						//Strip off the # sign
						//eleID = eleID[0].substr(1);
						
						thisEle = new Array(eleID, width, minWidth);
						//Add it to the list of elements to check
						eleList.push(thisEle);
						
						//temp
						//alert ("Attached to element " + eleID + " with " + width + "and min: " + minWidth);
						
					}
					
					
				} else {
					//PC is easier...we just set an expression for the rule instead
					theseRules[j].style.cssText += ";min-width:expression(ieMin(this, " + width + "," + minWidth + "));";
					//done
					
				}
			}
		}
	
}




function ieMin(ele, ems, pixels) {
	 if (ele.id) {
		 //Try to get teh value of an em
		 var testMes = document.getElementById("IEisAProblemWhenItComesToEMs" + ele.id);
		 if (!testMes) {
			testMes = document.createElement("div");
			testMes.style.visibility = "hidden";
			testMes.style.width = "5em";
			testMes.style.height = "1px";
			
			testMes.id = "IEisAProblemWhenItComesToEMs" + ele.id;
			ele.parentNode.appendChild(testMes);
			testMes = document.getElementById("IEisAProblemWhenItComesToEMs" + ele.id);
		 }
		 
		 if (testMes) {	 	
			 var emRatio = testMes.offsetWidth / 5;
			 
			 if (Math.round(emRatio * ems) < pixels) {
				ele.style.width = pixels + "px";
			 } else {
				ele.style.width = ems + "em";
			 }
		}
	}
}


