//BouwkampCodeForm.js 
//Purpose & Description - Javascript to render in a html page a squared rectangle or squared square from Bouwkamp Code,
//(code in either parentheses or tablecode format), of the selected value of a select menu in a html form.
//Author; Stuart Anderson ; email: stuart(NONSPAM)squaring.net  - replace NONSPAM with @
//This version; 12th May 2007

function sortNumber(a,b)
{
return a - b
}
function Bouwkamp(string,srcdir){
var Str=string;
var dir=srcdir;
var Size = new Array;
var Left = new Array;
var Right = new Array;
var Top = new Array;
var Bottom = new Array;
var Boundary = new Array;
var Image = new Array;
var j=1;
var MaxInt=4000000000;//offscreen location
var startx=0;
var starty=0;
var ch ="" ;
var s ="";
var startrow=true;
var temp = 0;
var posn = 0;
var sum = 0;
var Order = 0;
var RectWidth = 0;
var RectHeight = 0;
var xMargin = 10;
var yMargin = 0;
var xAspect= 1;
var yAspect= 1;
var BoundaryWidth = 0;
var l,m,t,n,od
var k = 0;
    Str = Str+" ";
    for (i=0;i<Str.length;i++){
			ch = Str.charAt(i); // get current character
   		if ((ch == "0")||(ch == "1")||(ch == "2")||(ch == "3")||(ch == "4")||(ch == "5")||(ch == "6")||(ch == "7")||(ch == "8")||(ch == "9")){
				s = s.concat(ch);//add char to the previous char
	  	} else if (s.length > 0){ //non zero string ie non-numeric char after numeric char(s)
	  		if ((k <= 2)&&(j == 1)) {
	  			if (k == 0) { // 1st number in string is the Order
	  				Order = parseInt(s);
	  			} else if (k == 1){ // 2nd number in string is the width of the tiling
	  				RectWidth = parseInt(s);
	  				BoundaryWidth = RectWidth;
	  			} else if (k == 2){ // 3rd number in string is the height of the tiling
	  				RectHeight = parseInt(s);
	  				Left[0] = 0;
	  				Bottom[0] = 0;
	  			}	
	  			s=s.substring(0,0);
	  			k++;
	  		}	else {	  			
					Size[j]= parseInt(s);  //4th and subsequent integers are tiling element sizes
	    		s=s.substring(0,0);	//reset string s
					if (startrow == true) {
						Left[j]=startx;
					} else {
						Left[j]=Left[j-1]+Size[j-1];
					}
					startrow = false;
					Right[j] = Left[j]+Size[j];
					Top[j] = starty;
					Bottom[j] = Top[j]+Size[j];
	  			Boundary[j] = j;
	  			var t = Boundary[j];
    			j++;	//increment j index to left, right, top, bottom, size and boundary arrays 
	      	for (k=0; k < t; k++) { // delete old bottom square(s) from boundary list when covered by new one
					l=Boundary[k];
					if (l>0){
						if ((Top[t]==Bottom[l])&&(Left[t]<=Left[l])&&(Left[l]<Right[t])) {
							BoundaryWidth = BoundaryWidth+Size[k];
							Boundary[k] = -Boundary[k];
						}
					}
				}
				if ((Right[t]-startx-BoundaryWidth) == 0){
 					startrow = true;
 					BoundaryWidth = 0;
	 				startx=MaxInt; //start offscreen
  				starty=MaxInt;
  				for (m=1; m <= t; m++){ // find minimum Boundary Bottom (starty) and Left (startx)
						n = Boundary[m];
						if ((n>0)&&(Bottom[n] < starty)){
			  			starty = Bottom[n];
							startx = Left[n];
						} else if ((n>0)&&(Bottom[n] == starty)){
			  			if (startx > Left[n]){
								startx = Left[n];
							}
						}
					}// end; for m
  		 	}//end; row ")"
		 		else {startrow = false;}
		 	} // k > 2
  	  }// end; else '0' to '9'
    }//end; for Str string
	  for (x=1;x<Size.length;x++){//delete this loop?
	  sum = sum +(Size[x]*Size[x]);
      Image[x] = x;
	  }
	    var sx = screen.availWidth/(36);//get rid of 'magic' numbers 
    	var sy = screen.availHeight/(36);
    	var scale = (sx)/(RectWidth);
    	document.getElementById('container').style.left = '1em';//ie6 edit
    	document.getElementById('container').style.top = '12em';//ie6 edit
        //delete any child divs inside the container div
    	while (document.getElementById("container").firstChild) {
  		 document.getElementById("container").removeChild(document.getElementById("container").firstChild);
  		}
  //add child div nodes and set ids, number of div elements equal to Order
  for (od=1;od<=Order+1;od++)
  	{
        var elDiv = document.createElement('div');
        document.getElementById("container").appendChild(elDiv);
        var divId = "Element"+od;
    	document.getElementById("container").childNodes[od-1].setAttribute("id", divId);
  	}  
//position and style the div elements and the corresponding element sizes in text
for (t=1;t<Size.length;t++)
{	
	var divElement = "Element"+t;
	//remove any text from inside the div elements
	while (document.getElementById(divElement).firstChild) {
  		document.getElementById(divElement).removeChild(document.getElementById(divElement).firstChild);
  	}
	//create p tags 
	var para = document.createElement('p');
	//add text with element sizes to p tags
    var txt = document.createTextNode(parseInt(Size[t]));
    para.appendChild(txt);
	document.getElementById(divElement).appendChild(para);
	//set p tag ids
    var paraId = 'p'+t;
    document.getElementById(divElement).firstChild.setAttribute("id", paraId);
	//use Left, Top and Size arrays to position the divs
	document.getElementById(divElement).style.left = Left[t]*scale+'em';
	document.getElementById(divElement).style.top = Top[t]*scale+'em';
	document.getElementById(divElement).style.width = Size[t]*scale-0.02+'em';
	document.getElementById(divElement).style.height = Size[t]*scale-0.02+'em';
	//make  background and  borders to square divs based on parity; odd  -  even
	if (Size[t]%2 == 0) {
         document.getElementById(divElement).style.backgroundColor = '#FFF';


    }
	else {
		document.getElementById(divElement).style.backgroundColor = '#EEF';
		
		
	}
	var menu=document.getElementById("image_dir").selectedIndex;
//	var img = new Image();
//	document.getElementById(divElement).appendChild(img);
//	if (menu == 0) {
//	     document.getElementById(divElement).src='../../../../image/images1/1.jpg'
//	} else if  (menu == 1) {
//	    document.getElementById(divElement).src='../../../../image/images2/1.jpg'
//	} else if (menu == 2)  {
//	    document.getElementById(divElement).src='../../../../image/images3/1.jpg'
//	}

 
document.getElementById(divElement).style.border="1px solid gray";
	
 //find number of characters in the element size text
  var textScalingFilterFactor = 0.63 ; 
	var textCharWidth = Math.ceil(Math.log(Size[t])/Math.LN10);
	//if number of characters too big for the square (scaled) then hide text
	if ((textScalingFilterFactor*textCharWidth > Size[t]*scale)||((Size[t]== 1)&&(RectWidth >33)) ) document.getElementById(paraId).style.display = "none";
	//position the p tag element size text in the middle of the square divs
	var emSize = 0.79;
	document.getElementById(paraId).style.left = (Size[t]*scale/1.6)-textCharWidth/2.5+'em';
  document.getElementById(paraId).style.top = (Size[t]*scale/1.6)-emSize+'em';
  //scale up small sizes in large squares in low order tilings
  document.getElementById(paraId).style.fontSize = emSize+'em';
  if (Size[t]%2 == 0) {
document.getElementById(paraId).style.fgColor = '#000';}
	else {
		document.getElementById(paraId).style.fgColor =  '#FFF';
	}
} 
//show the dissection's bouwkampcode and list of sorted elements
  var el,elem;
  Size.sort(sortNumber);
  el = Size;
  elem = new String(el.toString());
  elem.replace(/,/g, '\s,');
  elem = elem.slice(0,elem.length-1);//slice off comma from end of string
  var para2 = document.createElement('p');
  var para3 = document.createElement('p');
  var txt2 = document.createTextNode('Elements; '+elem.replace(/,/g, ', '));
  var txt3 = document.createTextNode('Bouwkamp Code; '+Str.replace(/,/g, ','));
  para2.appendChild(txt2);
  para3.appendChild(txt3);
  var frag = document.createDocumentFragment();
  frag.appendChild(para2);
  frag.appendChild(para3);
  var tilingStats ="Element"+(Size.length);
  document.getElementById(tilingStats).appendChild(frag);
  document.getElementById(tilingStats).style.top = RectHeight*scale+1.0+'em';
  document.getElementById(tilingStats).style.left = '0em';// -15em ie6 only
  document.getElementById(tilingStats).style.width = RectWidth*scale+'em';
  document.getElementById(tilingStats).style.borderWidth = '0px';
  var paraStats2 = 'p'+(Order+2);
  var paraStats3 = 'p'+(Order+3);
  document.getElementById(tilingStats).firstChild.setAttribute("id", paraStats2);
  document.getElementById(paraStats2).style.top = 0.25+'em';
  document.getElementById(paraStats2).style.fontSize = 1+'em';
  document.getElementById(tilingStats).childNodes[1].setAttribute("id", paraStats3);
  document.getElementById(paraStats3).style.top = 2.0+txt2.length/60+'em';
  document.getElementById(paraStats3).style.fontSize = 1+'em';
  return;
}// end function