var jtk = new JoookToolkit(); // Never leave home without it! :)

/*
	It would be too cumbersome to dynamically bind the fancyTables function to
	window onload event as the function should only be executed in preview mode.
	The traditional inline binding must suffice. :)
*/
jtk.addEvent(window, "resize", fancyTables); // Bind the function to window resize event to reposition the corners


// This function creates rounded corners to table header cells

function fancyTables(){
	var corner = {width: 4, height: 4, src: "/stc/grand_star/images/rounded.gif"}; // Rounded corner properties
	var cornerTweaks = {tl: {left: 0, top: 0}, tr: {left: 0, top: 0}, bl: {left: 0, top: 0}, br: {left: 0, top: 0}}; // Corner position tweaks
	
	
	// Find appropriate header cells
	var tableCells = jtk.select("td");
	var tableHeaders = new Array();
	
	for(var i = 0; i < tableCells.length; i++){
		if(tableCells[i].className == "u4-table-fancy-header"){
			tableHeaders.push(tableCells[i]);
			
			// Remove existing corner nodes
			var existingCorners = jtk.select("div", tableCells[i]);
			for(var j = existingCorners.length - 1; j >= 0; j--){
				tableCells[i].removeChild(existingCorners[j]);
			}
		}
	}
	
	
	// Iterate through the tableHeaders array, create and apply the rounded corners
	for(var i = 0; i < tableHeaders.length; i++){	
		var corners = new Array();
		
		// Create the required divs
		for(var j = 0; j < 4; j++){
			var emt = document.createElement("div");
			emt.style.width = corner.width + "px";
			emt.style.height = corner.height + "px";
			emt.style.overflow = "hidden";
			emt.style.position = "absolute";
			emt.style.backgroundColor = "transparent";
			emt.style.backgroundImage = "url(" + corner.src + ")";
			corners.push(emt);
		}
		
		// Position background image
		corners[0].style.backgroundPosition = "0 0";
		corners[1].style.backgroundPosition = "-" + corner.width + "px 0";
		corners[2].style.backgroundPosition = "0 -" + corner.height + "px";
		corners[3].style.backgroundPosition = "-" + corner.width + "px -" + corner.height + "px";
		
		
		// Position corner nodes
		var headerPosition = jtk.getPosition(tableHeaders[i]);
		var headerDimensions = jtk.getDimensions(tableHeaders[i]);
		
		corners[0].style.left = headerPosition.left + cornerTweaks.tl.left + "px";
		corners[0].style.top = headerPosition.top + cornerTweaks.tl.top + "px";
		
		corners[1].style.left = headerPosition.left + headerDimensions.width - corner.width + cornerTweaks.tr.left + "px";
		corners[1].style.top = headerPosition.top + cornerTweaks.tr.top + "px";
		
		corners[2].style.left = headerPosition.left + cornerTweaks.bl.left + "px";
		corners[2].style.top = headerPosition.top + headerDimensions.height - corner.height + cornerTweaks.bl.top + "px";
		
		corners[3].style.left = headerPosition.left + headerDimensions.width - corner.width + cornerTweaks.br.left + "px";
		corners[3].style.top = headerPosition.top + headerDimensions.height - corner.height + cornerTweaks.br.top + "px";
		
		
		// Append corner nodes to the table headers
		for(var j = 0; j < corners.length; j++){
			tableHeaders[i].appendChild(corners[j]);
		}
	}
}