/*
 * ::::::::::::::::::::::::::::
 *   Font2Image v1.3
 * ::::::::::::::::::::::::::::
 * 	 last updated: 24.05.2011
 * 		1.1: imagerotate() bug
 * 		1.2: uppercase
 * 		1.3: background-position bug (ie 7/8)
 * ::::::::::::::::::::::::::::
 * 
 * 
 * 
 * USAGE - INFORMATION:
 * ::::::::::::::::::::
 * 
 * NOTE:
 * 	Don't use this for navigations. 
 * 	Javascript will always be executed after the page is loaded.
 * 	This leads to an unsatisfying result.
 * 
 * 
 * TAGS / CLASSES:
 * 	[h1],[h2],[h3],[h4],[h5],[h6] / [font2Image]
 * 
 * ROTATE:
 * 	45° => <div class='font2Image 45'>text</div>
 * 	or
 * 	45° => <h1 class='45'>text</h1>
 *  !!INFO!!: only 90° works (imagerotate-bug)
 * 
 * USAGE:
 * 	css-command:	font-family:"fontname.ttf" or "fontname.TTF"
 *  css-command:	font-size: 30px
 *  
 *  [optional]
 *  css-command:	color: #ff0000;
 *  css-command:	background-position: 10px 10px;
 *  css-command:	width: 100px;
 *  css-command:	height:	50px; 
 *  css-command:	text-transform: uppercase;
 * 
 */


function Font2Image () { 
	
	var _preUrl = "/_frontend/global_components/Font2Image/Font2Image.php";
	var cssRules = new Array("h1", "h2", "h3", "h4", "h5", "h6", ".font2Image");
	
	function traverse(){ 
		
		for(var pos = 0; pos < cssRules.length; pos++){
			
			var elements = $$(cssRules[pos]); 
			
			for(var i = 0; i < elements.length; i++){			
				
				var e = elements[i];
				var font = e.getStyle("font-family");				
				var filetype = font.substr(font.length-5,4);
				
				if(filetype == ".ttf" || filetype == ".TTF") createImg(e);
				
			}
		}	
				
	}
	
	function createImg(obj){ 
		
		//if background-image exists: exit
		if(obj.getStyle("background-image") != "none") return;
		
		
		//display:none is a necessity, otherwise width/height don't work.
		obj.setStyle({display: 'none'}); 
		
		
		//fontFamily
		var font = obj.getStyle("font-family"); 
			if(font.substr(0,1) == "\"" || font.substr(0,1) == "'") font = font.substr(1,font.length-2);
			
		var uppercase = obj.getStyle("text-transform");
			
			
		//fontSize
		var size = obj.getStyle("font-size"); 
			size = size.substr(0,size.length-2);
			
		//color
		var color = rgb2hex(obj.getStyle("color")); 
			color = color.substr(1);
			if(color == "") color = "000000";
				
		//rotation
		var rotate = obj.className;
			if(rotate.substr(0,10) == "font2Image") rotate = rotate.substr(11);
			if(rotate == "") rotate = 0;
						
		//backgroundPosition
		var bgpos = obj.getStyle("background-position"); 
			//ie 7/8 hack
			if(bgpos == undefined) bgpos = obj.getStyle("background-position-x") + " " + obj.getStyle("background-position-y");
			
			
		//width
		var width = obj.getStyle("width");
		
		//height
		var height = obj.getStyle("height");
		
		
		//display:block is a necessity, otherwise height jumps
		obj.setStyle({display: 'block'});
		
		
		//string
		var string = obj.innerHTML;
		
		if(uppercase == "uppercase") string = string.toUpperCase();
			

		var url = _preUrl+
		  "?font="+encodeURIComponent(font)+"&size="+size+"&color=0x00"+color+
		  "&rotate="+rotate+"&string="+base64encode(string); 
		
	
		
		var url_info = url + "&type=info";
		var url_image = url + "&type=image";
		
			
		//document.writeln(url_info); 	document.writeln("<br />");

		new Ajax.Request(url_info, {
			  method: 'get',
			  onSuccess: function(transport) { 
			
				var json = transport.responseText.evalJSON(true);  
			
				if(width == null) width = json[0]+'px';
				if(height == null) height = json[1]+'px';
				var innerHTML = json[2];
				
				//innerHTML is a necessity otherwise textIndent doesn't work.
				styleObj(obj, width, height, bgpos, url_image, innerHTML);
				
		 	 }
		});

		

		
	}
	
	function styleObj(obj, width, height, bgpos, url_image, innerHTML){ 
		
		obj.setStyle({
			display: 'block',
			textIndent: '-10000px',	
			background: 'url('+url_image+') no-repeat',	
			backgroundPosition: bgpos,
			width: width,
			height: height,
			overflow: 'hidden'
		});
		
		
		obj.innerHTML = innerHTML;	
		
	}
	
	function rgb2hex(rgb){

		if(rgb.substr(0,1) == "#") return rgb;
		
		rgb = rgb.substr(4); 					//remove "rgb("
		rgb = rgb.substr(0,rgb.length-1);		//remove ");"		

		var c1 = rgb.substr(0,rgb.indexOf(","));
		rgb = rgb.substr(rgb.indexOf(",")+1);
		
		var c2 = rgb.substr(0,rgb.indexOf(","));
		rgb = rgb.substr(rgb.indexOf(",")+1);
		
		var c3 = rgb;


		hexDigits = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8","9", "A", "B", "C", "D", "E", "F");

		return "#" +
			hexDigits[(c1 - c1 % 16) / 16] + hexDigits[c1 % 16] + 
			hexDigits[(c2 - c2 % 16) / 16] + hexDigits[c2 % 16] +
			hexDigits[(c3 - c3 % 16) / 16] + hexDigits[c3 % 16];
		
	}
	
	function base64encode (data) {
		
		var datanew=""	;
		for(i=0;i<data.length;i++) {
			
			datanew += "&#"+data.charCodeAt(i)+";";
		}
		
		
		return encodeURIComponent(datanew);


	}

	
	traverse();
}

 

document.observe("dom:loaded", function() {
	new Font2Image();
});