/*------------------------------------------------------------------*/
/* text-columns.js: For rendering text into newspaper-like columns! */
/*                                                                  */
/* Author             : Sean Gilbertson                             */
/* Project start date : 2007-08-15!                                 */
/* Project homepage   : http://pinkblack.org/text-columns/          */
/*                                                                  */
/* Version            : 2007-08-15                                  */
/*------------------------------------------------------------------*/

function unsplitWords(left, right) {
	if (left.slice(-1) != " " && right.charAt(0) != " ") {
		var firstSpaceOnRightLoc = right.indexOf(" ");
		
		left = left + right.slice(0, firstSpaceOnRightLoc);
		
		right = right.slice(firstSpaceOnRightLoc + 1);
	}
	
	return [left, right];
}

function splitText(text, cols) {
	var parts = new Array();

	var textLength = text.length;

	//mist
	
	//var myregex = new RegExp("<img([^<>+]*[^\/])>", "gi");
	//var myregex = new RegExp("<img class=([^<>+]*) src=([^<>+]*)>", "gi");
	
	//var myregex = /<img src=([^<>+]*) class=([^<>+]*)>/gi; //FF
	var myregex = /<img class=([^<>+]*) src=([^<>+]*)>/gi; //IE+FF IE zmienia kolejnosc atrybotow na class src
	
	/*var	regex = /e/g,
	subject = "test",
	match;
	
	while (match = regex.exec(subject)) {
	alert(match);
	}*/

	//var str=text.toString();
	//alert("aaa"+str.replace(myregex, "W3Schools"));

	//matchArr = str.match(myregex);
	//alert("2  "+matchArr);

	text = text.replace(myregex, "<img#class=$1#src=$2#>");
	//alert("2 "+text);
	
	//mist
	
	for (var iPart = 0; iPart < cols; iPart++) {
		var part = text.slice(
			iPart * (textLength / cols),
			(iPart + 1) * (textLength / cols));

		if (iPart > 0) { // Make sure parts are split on word boundaries.
			var prevPart = parts[iPart - 1];

			var duo = unsplitWords(prevPart, part);

			parts[iPart - 1] = duo[0];

			part = duo[1];
		}

		parts.push(part);
	}

	return parts;
}

function getWindowWidth() {
	if (document.body) { // IE
		return document.body.clientWidth;
	} else if (document.documentElement.clientWidth ) { // Firefox
		return document.documentElement.clientWidth;
	}
}

var originalWindowWidth = -1;
// Holds the all-time change in browser width.
var browserWidthDelta = 0;
var contentParentWidths = new Array();

function windowWidthChanged(newWidth) {
	if (originalWindowWidth == -1) {
		originalWindowWidth = newWidth;
	}

	browserWidthDelta = newWidth - originalWindowWidth;
}

function registerEventHandler(obj, eventName, fn) {
	if (obj.attachEvent) { // IE
		obj.attachEvent("on" + eventName, fn);
	} else { // Firefox
		obj.addEventListener(eventName, fn, false);
	}
}

registerEventHandler(window, "resize", function(e) {
	var newWidth = getWindowWidth();

	windowWidthChanged(newWidth);

	renderTextColumns();
});

registerEventHandler(window, "load", function(e) {
	originalWindowWidth = getWindowWidth();

	//renderTextColumns();
});

var lastIdIssued = 0;
function generateId() {
	var id = "generatedId-" + lastIdIssued;

	lastIdIssued++;

	return id;
}

// This function does things like this:
// camelCaseStyleToHyphenated("marginLeft"); // -> "margin-left"
function camelCaseStyleToHyphenated(styleName) {
	var convertedStyleName;

	// Add hyphen between camel case-separated words.
	convertedStyleName = styleName.replace(/([A-Z])/g, "-$1");

	convertedStyleName = convertedStyleName.toLowerCase();

	return convertedStyleName;
}

var contents = new Array();
var contentElts = new Array();
var contentWidths = {};

var lastNumCols = {};
function renderTextColumnsForElement(elt) {
	renderingTextColumns = true;

	var eltId = elt.getAttribute("id");

	// If the user hasn't specified an id for this element,
	// then let's generate one!
	if (!eltId) {
		eltId = generateId();
		elt.setAttribute("id", eltId);
	}

	if (!contentWidths[eltId]) {
		contentWidths[eltId] = elt.offsetWidth;

		// Hide the source element,
		// and take it out of the document flow.
		elt.style.display = "none";
	}

	var contentWidth;

	if (contentParentWidths[eltId]) {
		if (contentParentWidths[eltId] == elt.parentNode.clientWidth) {
			contentWidth = contentParentWidths[eltId];
		} else {
			contentWidth = contentWidths[eltId] + browserWidthDelta;
		}
	} else {
		contentWidth = contentWidths[eltId] + browserWidthDelta;
	}
	contentParentWidths[eltId] = elt.parentNode.clientWidth;

	var desiredWidth = elt.getAttribute("columnwidth");

	// Take off the "px" part.
	desiredWidth = desiredWidth.substring(0, desiredWidth.length - 2);

	var numCols = contentWidth / desiredWidth;

	numCols = Math.ceil(numCols);  // Round up!

	// if the number of columns to render hasn't changed,
	// don't render. :-)
	if (numCols == lastNumCols[eltId]) {
		return;
	}

	var tableId = eltId + "-colsTable";

	var columnGap = elt.getAttribute("columngap") || "0px";

	lastNumCols = numCols;

	var table;

	var existingTable = document.getElementById(tableId);
	if (existingTable) {
		table = existingTable;
		table.deleteRow(0);
	} else {
		table = document.createElement("table");
		elt.parentNode.insertBefore(table, elt);

		table.setAttribute("id", tableId);

		table.cellPadding = "0px";
		table.cellSpacing = "0px";

		/*-------------------*/
		/* Copy CSS styles!! */
		/*-------------------*/
		var inheritedStyle;

		if (elt.currentStyle) { // For IE
			inheritedStyle = elt.currentStyle;
		} else if (window.getComputedStyle) { // For Firefox
			inheritedStyle = window.getComputedStyle(elt, null);
		}

		for (var prop in inheritedStyle) {
			if (prop != "display" && prop != "cssText") {
				var val = inheritedStyle[prop];

				if (table.style.setProperty) { // For Firefox
					// Ignore functions and whatnot.
					if (!(typeof(val) == "string" && val)) {
						continue;
					}

					prop = camelCaseStyleToHyphenated(prop); // Gotta do this for Firefox!
					table.style.setProperty(prop, val, "");
				} else { // For IE
					table.style[prop] = val;
				}
			}
		}
	}

	var row = table.insertRow(0);

	var contentBody = elt.innerHTML //elt.text();
	var contentParts = splitText(contentBody, numCols); // Array

	for (var iCell = 0; iCell < numCols; iCell++) { 
		var cell = row.insertCell(iCell);
		
		//mist
		//var myregex = new RegExp("<img#class=([^<>+]*)#src=([^<>+]*)#>", "gi");
		var myregex = /<img#class=([^<>+]*)#src=([^<>+]*)#>/gi;

		part = contentParts[iCell];
		//matchArr = part.match(myregex);
		//alert("3  "+matchArr);
		part = part.replace(myregex, "<img class=$1 src=$2>");
		contentParts[iCell] = part;
		
		//mist
		
		cell.innerHTML = contentParts[iCell];

		// If this isn't the first cell,
		// set the padding-left to the column-gap
		// requested by the user.
		if (iCell != 0) {
			cell.style.paddingLeft = columnGap;
		}

		// Vertical align to the top of the column,
		// by default.
		cell.vAlign = "top";
	}
}

function getColumnedElements() {
	var elts = document.getElementsByTagName("*");
	var elt;
	var columnedElts = new Array();
	for (var iElt = 0; iElt < elts.length; iElt++) {
		elt = elts[iElt];
		if (elt.getAttribute("columnwidth")) {
			columnedElts.push(elt);
		}
	}
	return columnedElts;
}

function renderTextColumns() {
	//var before = new Date().getTime();
	var elts = getColumnedElements();
	//var after = new Date().getTime();

	for (var iElt = 0; iElt < elts.length; iElt++) {
		var elt = elts[iElt];

		renderTextColumnsForElement(elt);
	}
}