window.onload = function () {
			var paper = Raphael("holder");

			//var curve = paper.ellipse(100, 100, 1, 1).attr({"stroke-width": 0, fill: Color.red});
			
			var text = "Betty Botter bought some butter but, she said, the butter's bitter. If I put it in my batter, it will make my batter bitter. But a bit of better butter will make my batter better. So, she bought a bit of butter, better than her bitter butter, and she put it in her batter, and the batter was not bitter. It was better Betty Botter bought a bit better butter.";
			var font = {font: "11px Arial", "font-style":"italic", opacity: 1, "fill": LABEL_COLOR, stroke: LABEL_COLOR, "stroke-width":.3};
			var font = {font: "11px Arial", opacity: 1, "fill": LABEL_COLOR};
			var boxWidth = 100
			
			var AttributedStringIterator = function(text){
				//this.text = this.rtrim(this.ltrim(text));
				text = text.replace(/(\s)+/, " ");
				this.text = this.rtrim(text);
				/*
				if (beginIndex < 0 || beginIndex > endIndex || endIndex > length()) {
					throw new IllegalArgumentException("Invalid substring range");
				}
				*/
				this.beginIndex = 0;
				this.endIndex = this.text.length;
				this.currentIndex = this.beginIndex;
				
				//console.group("[AttributedStringIterator]");
				var i = 0;
				var string = this.text;
				var fullPos = 0;
				
				//console.log("string: \"" + string + "\", length: " + string.length);
				this.startWordOffsets = [];
				this.startWordOffsets.push(fullPos);
				
				// TODO: remove i 1000
				while (i<1000) {
					var pos = string.search(/[ \t\n\f-\.\,]/);
					if (pos == -1)
						break;
					
					// whitespace start
					fullPos += pos;
					string = string.substr(pos);
					////console.log("fullPos: " + fullPos + ", pos: " + pos +  ", string: ", string);
					
					// remove whitespaces
					var pos = string.search(/[^ \t\n\f-\.\,]/);
					if (pos == -1)
						break;
						
					// whitespace end
					fullPos += pos;
					string = string.substr(pos);
					
					////console.log("fullPos: " + fullPos);
					this.startWordOffsets.push(fullPos);
					
					i++;
				}
				//console.log("startWordOffsets: ", this.startWordOffsets);
				//console.groupEnd();
			};
			AttributedStringIterator.prototype = {
				getEndIndex: function(pos){
					if (typeof(pos) == "undefined")
						return this.endIndex;
						
					var string = this.text.substr(pos, this.endIndex - pos);
					
					var posEndOfLine = string.search(/[\n]/);
					if (posEndOfLine == -1)
						return this.endIndex;
					else
						return pos + posEndOfLine;
				},
				getBeginIndex: function(){
					return this.beginIndex;
				},
				isWhitespace: function(pos){
					var str = this.text[pos];
					var whitespaceChars = " \t\n\f";
					
					return (whitespaceChars.indexOf(str) != -1);
				},
				isNewLine: function(pos){
					var str = this.text[pos];
					var whitespaceChars = "\n";
					
					return (whitespaceChars.indexOf(str) != -1);
				},
				preceding: function(pos){
					//console.group("[AttributedStringIterator.preceding]");
					for(var i in this.startWordOffsets) {
						var startWordOffset = this.startWordOffsets[i];
						if (pos < startWordOffset && i>0) {
							//console.log("startWordOffset: " + this.startWordOffsets[i-1]);
							//console.groupEnd();
							return this.startWordOffsets[i-1];
						}
					}
					//console.log("pos: " + pos);
					//console.groupEnd();
					return this.startWordOffsets[i];
				},
				following: function(pos){
					//console.group("[AttributedStringIterator.following]");
					for(var i in this.startWordOffsets) {
						var startWordOffset = this.startWordOffsets[i];
						if (pos < startWordOffset && i>0) {
							//console.log("startWordOffset: " + this.startWordOffsets[i]);
							//console.groupEnd();
							return this.startWordOffsets[i];
						}
					}
					//console.log("pos: " + pos);
					//console.groupEnd();
					return this.startWordOffsets[i];
				},
				ltrim: function(str){
					var patt2=/^\s+/g;
					return str.replace(patt2, "");
				}, 
				rtrim: function(str){
					var patt2=/\s+$/g;
					return str.replace(patt2, "");
				},
				getLayout: function(start, limit){
					return this.text.substr(start, limit - start);
				},
				getCharAtPos: function(pos) {
					return this.text[pos];
				}
			};
			
			/*
			var TextMeasurer = function(paper, text, fontAttrs){
				this.text = text;
				this.paper = paper;
				this.fontAttrs = fontAttrs;
				
				this.fStart = this.text.getBeginIndex();

			};
			TextMeasurer.prototype = {
				getLineBreakIndex: function(start, maxAdvance){
					var localStart = start - this.fStart;
				},
				getLayout: function(){
				}
			}
			*/
			
			
			var LineBreakMeasurer = function(paper, text, fontAttrs){
				this.paper = paper;
				this.text = new AttributedStringIterator(text);
				this.fontAttrs = fontAttrs;
				
				if (this.text.getEndIndex() - this.text.getBeginIndex() < 1) {
					throw {message: "Text must contain at least one character.", code: "IllegalArgumentException"};
				}
				
				//this.measurer = new TextMeasurer(paper, this.text, this.fontAttrs);
				this.limit = this.text.getEndIndex();
				this.pos = this.start = this.text.getBeginIndex();
				
				this.rafaelTextObject = this.paper.text(100, 100, this.text.text).attr(fontAttrs).attr("text-anchor", "start");
				this.svgTextObject = this.rafaelTextObject[0];
			};
			LineBreakMeasurer.prototype = {
				nextOffset: function(wrappingWidth, offsetLimit, requireNextWord) {
					//console.group("[nextOffset]");
					var nextOffset = this.pos;
					if (this.pos < this.limit) {
						if (offsetLimit <= this.pos) {
							throw {message: "offsetLimit must be after current position", code: "IllegalArgumentException"};
						}
						
						var charAtMaxAdvance = this.getLineBreakIndex(this.pos, wrappingWidth);
						//charAtMaxAdvance --;
						//console.log("charAtMaxAdvance:", charAtMaxAdvance, ", [" + this.text.getCharAtPos(charAtMaxAdvance) + "]");
						
						if (charAtMaxAdvance == this.limit) {
							nextOffset = this.limit;
							//console.log("charAtMaxAdvance == this.limit");
						} else if (this.text.isNewLine(charAtMaxAdvance)) {
							console.log("isNewLine");
							nextOffset = charAtMaxAdvance+1;
						} else if (this.text.isWhitespace(charAtMaxAdvance)) {
							// TODO: find next noSpaceChar
							//return nextOffset;
							nextOffset = this.text.following(charAtMaxAdvance);
						} else {
							// Break is in a word;  back up to previous break.
							/*
							var testPos = charAtMaxAdvance + 1;
							if (testPos == this.limit) {
								console.error("hbz...");
							} else {
								nextOffset = this.text.preceding(charAtMaxAdvance);
							}
							*/
							nextOffset = this.text.preceding(charAtMaxAdvance);
							
							if (nextOffset <= this.pos) {
								nextOffset = Math.max(this.pos+1, charAtMaxAdvance);
							}
						}
					}
					if (nextOffset > offsetLimit) {
						nextOffset = offsetLimit;
					}
					//console.log("nextOffset: " + nextOffset);
					//console.groupEnd();
					return nextOffset;
				},
				nextLayout: function(wrappingWidth) {
					//console.groupCollapsed("[nextLayout]");
					if (this.pos < this.limit) {
						var requireNextWord = false;
						var layoutLimit = this.nextOffset(wrappingWidth, this.limit, requireNextWord);
						//console.log("layoutLimit:", layoutLimit);
						if (layoutLimit == this.pos) {
							//console.groupEnd();
							return null;
						}
						var result = this.text.getLayout(this.pos, layoutLimit);
						//console.log("layout: \"" + result + "\"");
						
						// remove end of line
						
						//var posEndOfLine = this.text.getEndIndex(this.pos);
						//if (posEndOfLine < result.length)
						//	result = result.substr(0, posEndOfLine);
						
						this.pos = layoutLimit;
						
						//console.groupEnd();
						return result;
					} else {
						//console.groupEnd();
						return null;
					}
				},
				getLineBreakIndex: function(pos, wrappingWidth) {
					//console.group("[getLineBreakIndex]");
					//console.log("pos:"+pos + ", text: \""+ this.text.text.replace(/\n/g, "_").substr(pos, 1) + "\"");
					
					var bb = this.rafaelTextObject.getBBox();
					
					var charNum = -1;
					try {
						var svgPoint = this.svgTextObject.getStartPositionOfChar(pos);
						//var dot = this.paper.ellipse(svgPoint.x, svgPoint.y, 1, 1).attr({"stroke-width": 0, fill: Color.blue});
						svgPoint.x = svgPoint.x + wrappingWidth;
						//svgPoint.y = bb.y;
						//console.log("svgPoint:", svgPoint);
					
						//var dot = this.paper.ellipse(svgPoint.x, svgPoint.y, 1, 1).attr({"stroke-width": 0, fill: Color.red});
					
						charNum = this.svgTextObject.getCharNumAtPosition(svgPoint);
					} catch (e){
						console.warn("getStartPositionOfChar error, pos:" + pos);
						/*
						var testPos = pos + 1;
						if (testPos < this.limit) {
							return testPos
						}
						*/
					}
					//console.log("charNum:", charNum);
					if (charNum == -1) {
						//console.groupEnd();
						return this.text.getEndIndex(pos);
					} else {
						// When case there is new line between pos and charnum then use this new line
						var newLineIndex = this.text.getEndIndex(pos);
						if (newLineIndex < charNum ) {
							console.log("newLineIndex <= charNum, newLineIndex:"+newLineIndex+", charNum:"+charNum, "\"" + this.text.text.substr(newLineIndex+1).replace(/\n/g, "↵") + "\"");
							//console.groupEnd();
							
							return newLineIndex;
						}
							
						//var charAtMaxAdvance  = this.text.text.substring(charNum, charNum + 1);
						var charAtMaxAdvance  = this.text.getCharAtPos(charNum);
						//console.log("!!charAtMaxAdvance: " + charAtMaxAdvance);
						//console.groupEnd();
						return charNum;
					}
				}, 
				getPosition: function() {
					return this.pos;
				}
			};
			
			
			
			// ******
			function drawMultilineText(text, x, y, boxWidth, boxHeight, options) {
				var TEXT_PADDING = 3;
				var width = boxWidth - (2 * TEXT_PADDING);
				if (boxHeight)
					var height = boxHeight - (2 * TEXT_PADDING);
			
				var layouts = [];
				
				var measurer = new LineBreakMeasurer(paper, text, font);
				var lineHeight = measurer.rafaelTextObject.getBBox().height;
				console.log("text: ", text.replace(/\n/g, "↵"));
				
				if (height) {
					var availableLinesCount = parseInt(height/lineHeight);
					console.log("availableLinesCount: " + availableLinesCount);
				}
				
				var i = 1;
				while (measurer.getPosition() < measurer.text.getEndIndex()) {
					var layout = measurer.nextLayout(width);
					//console.log("LAYOUT: " + layout + ", getPosition: " + measurer.getPosition());
					
					if (layout != null) {
						if (!availableLinesCount || i < availableLinesCount) {
							layouts.push(layout);
						} else {
							layouts.push(fitTextToWidth(layout + "...", boxWidth));
							break;
						}
					}
					i++;
				};
				console.log(layouts);
				
				measurer.rafaelTextObject.attr({"text": layouts.join("\n")});
				//measurer.rafaelTextObject.attr({"text-anchor": "end"});
				//measurer.rafaelTextObject.attr({"text-anchor": "middle"});
				if (options)
					measurer.rafaelTextObject.attr({"text-anchor": options["text-anchor"]});
					
				var bb = measurer.rafaelTextObject.getBBox();
				//measurer.rafaelTextObject.attr({"x": x + boxWidth/2});
				if (options["vertical-align"] == "top")
					measurer.rafaelTextObject.attr({"y": y + bb.height/2 + TEXT_PADDING});
				else
					measurer.rafaelTextObject.attr({"y": y + height/2});
				//var bb = measurer.rafaelTextObject.getBBox();
				
				if (measurer.rafaelTextObject.attr("text-anchor") == "middle" )
					measurer.rafaelTextObject.attr("x",  x + boxWidth/2 + TEXT_PADDING/2);
				else if (measurer.rafaelTextObject.attr("text-anchor") == "end" )
					measurer.rafaelTextObject.attr("x",  x + boxWidth + TEXT_PADDING/2);
				else 
					measurer.rafaelTextObject.attr("x", x + boxWidth/2 - bb.width/2 + TEXT_PADDING/2);
				
				var boxStyle = {stroke: Color.LightSteelBlue2, "stroke-width": 1.0, "stroke-dasharray": "- "};
				/*
				var box = paper.rect(x+.0 + boxWidth/2 - bb.width/2+ TEXT_PADDING/2, y + .5 + boxHeight/2 - bb.height/2, width, height).attr(boxStyle);
				box.attr("height", bb.height);
				*/
				//var box = paper.rect(bb.x - .5 + bb.width/2 + TEXT_PADDING, bb.y + bb.height/2, bb.width, bb.height).attr(boxStyle);
				
				var textAreaCX = x + boxWidth/2;
				var textAreaCY = y + height/2;
				var dotLeftTop = paper.ellipse(x, y, 3, 3).attr({"stroke-width": 0, fill: Color.LightSteelBlue, stroke: "none"});
				var dotCenter = paper.ellipse(textAreaCX, textAreaCY, 3, 3).attr({fill: Color.LightSteelBlue2, stroke: "none"});

				/*
				// real bbox
				var bb = measurer.rafaelTextObject.getBBox();
				var rect = paper.rect(bb.x+.5, bb.y + .5, bb.width, bb.height).attr({"stroke-width": 1});
				*/
				var boxStyle = {stroke: Color.LightSteelBlue2, "stroke-width": 1.0, "stroke-dasharray": "- "};
				var rect = paper.rect(x+.5, y + .5, boxWidth, boxHeight).attr(boxStyle);
			}
			
			
			
			
			/*
			for (var i=0; i<1; i++) {
				var t = text;
				//var t = "Высококвалифицирова";
				
				var text = paper.text(300, 100, t).attr(font).attr("text-anchor", "start");
				var bbText = text.getBBox();
				paper.rect(300+.5, 100 + .5, bbText.width, bbText.height).attr({"stroke-width": 1});
				console.log("t: ", t.replace(/\n/g, "↵"));
				
				while (measurer.getPosition() < measurer.text.getEndIndex()) {
					var layout = measurer.nextLayout(width);
					//console.log("LAYOUT: " + layout + ", getPosition: " + measurer.getPosition());
					if (layout != null)
						layouts.push(layout);
				};
				
				measurer.rafaelTextObject.attr("text", layouts.join("\n"));
				var bb = measurer.rafaelTextObject.getBBox();
				var rect = paper.rect(bb.x+.5, bb.y + .5, bb.width, bb.height).attr({"stroke-width": 1});
				
				lay.push(layouts);
				console.log(layouts);
			}
			*/
			
			
			var fitTextToWidth = function(original, width) {
				var text = original;

				// TODO: move attr on parameters
				var attr = {font: "11px Arial", opacity: 0};
				
				// remove length for "..."
				var dots = paper.text(0, 0, "...").attr(attr).hide();
				var dotsBB = dots.getBBox();
				
				var maxWidth = width - dotsBB.width;
				
				var textElement = paper.text(0, 0, text).attr(attr).hide();
				var bb = textElement.getBBox();
				
				// it's a little bit incorrect with "..."
				while (bb.width > maxWidth && text.length > 0) {
					text = text.substring(0, text.length - 1);
					textElement.attr({"text": text});
					bb = textElement.getBBox();
				}

				// remove element from paper
				textElement.remove();
				
				if (text != original) {
					text = text + "...";
				}

				return text;
			}
			
			
			var x=100, y=90, height=20;
			var options = {"text-anchor": "middle", "boxHeight": 150, "vertical-align": "top"};
			var options = {"boxHeight": 150, "vertical-align": "top"};
			drawMultilineText(text, x, y, 150, 100, options);
	};