/****************************************************************************************/
/* BOX OBJECT ***************************************************************************/
/*``````````````````````````````````````````````````````````````````````````````````````*/

function Box( width ) {
	if (arguments.length > 0) 
		this.init( width );
}

Box.prototype.init = function( width ) {
	this.title = "";
	this.width = width;
	this.marginTop = 0;
	this.marginRight = 0;
	this.marginBottom = 0;
	this.marginLeft = 0;
	this.paddingTop = 0;
	this.paddingRight = 0;
	this.paddingBottom = 0;
	this.paddingLeft = 0;
	this.align = "left";
}

// Serialize for debugging by calling: alert(myBox);
Box.prototype.toString = function() {
	boxString = "Title: \t \t " + this.title + "\t\n";
	boxString += "Width: \t \t " + this.width + "\t\n";
	boxString += "Margin: \t \t " + this.marginTop + ", " + this.marginRight + ", " + this.marginBottom + ", " + this.marginLeft + "\t\n";
	boxString += "Padding: \t \t " + this.paddingTop + ", " + this.paddingRight + ", " + this.paddingBottom + ", " + this.paddingLeft + "\t\n";
	boxString += "Align: \t \t " + this.align + "\t\n";
	return boxString;
}

Box.prototype.setTitle = function( val ) {
	this.title = val;
}
Box.prototype.setMarginTop = function( val ) {
	this.marginTop = val;
}
Box.prototype.setMarginRight = function( val ) {
	this.marginRight = val;
}
Box.prototype.setMarginBottom = function( val ) {
	this.marginBottom = val;
}
Box.prototype.setMarginLeft = function( val ) {
	this.marginLeft = val;
}
Box.prototype.setPaddingTop = function( val ) {
	this.paddingTop = val;
}
Box.prototype.setPaddingRight = function( val ) {
	this.paddingRight = val;
}
Box.prototype.setPaddingBottom = function( val ) {
	this.paddingBottom = val;
}
Box.prototype.setPaddingLeft = function( val ) {
	this.paddingLeft = val;
}
Box.prototype.setMargin = function( top, right, bottom, left ) {
	this.setMarginTop( top );
	this.setMarginRight( right );
	this.setMarginBottom( bottom );
	this.setMarginLeft( left );	
}
Box.prototype.setPadding = function( top, right, bottom, left ) {
	this.setPaddingTop( top );
	this.setPaddingRight( right );
	this.setPaddingBottom( bottom );
	this.setPaddingLeft( left );	
}
Box.prototype.setAlign = function( dir ) {
	this.align = dir;
}

// Serialize for display onscreen
Box.prototype.generateTop = function() {

	var out = '';

	var timestamp = getRandomNumber();
	rowID = 'rcRow' + timestamp;
	padID = 'padRow' + timestamp;
	rcbmID = 'rcbm' + timestamp;
	roundCornerID = 'roundCorner' + timestamp;

	borderOffset = 2;
	paddingOffset = 5;
	marginOffset = 10;

	h3Width = (this.width-marginOffset);
	h3WidthHack = (h3Width-paddingOffset);
	rowWidthHack = ((this.width-borderOffset) - this.paddingRight - this.paddingLeft);
	rcbmWidth = (this.width-marginOffset);

	document.writeln( '<style type="text/css">' );
	document.writeln( '#' + roundCornerID + ' { width:' + this.width + 'px; margin:' + this.marginTop + 'px ' + this.marginRight + 'px ' + this.marginBottom + 'px ' + this.marginLeft + 'px; }' );
	document.writeln( '#' + roundCornerID + ' h3 { width:' + h3Width + 'px; voice-family: "\\"}\\""; voice-family:inherit; width:' + h3WidthHack + 'px; } html>body #' + roundCornerID + ' h3 { width:' + h3WidthHack + 'px; }' );
	document.writeln( '#' + rowID + ', #' + padID + ' { width:' + this.width + 'px; padding:0 ' + this.paddingRight + 'px 0 ' + this.paddingLeft + 'px; voice-family: "\\"}\\""; voice-family:inherit; width:' + rowWidthHack + 'px; } html>body #' + rowID + ', html>body #' + padID + ' { width:' + rowWidthHack + 'px; }' );
	document.writeln( '#' + rcbmID + ' { width:' + rcbmWidth + 'px; }' );
	document.writeln( '</style>' );
	
	out += '<div class="roundCorner" id="' + roundCornerID + '"><div ';
	out += 'class="rct1">' + spacer + '</div><div ';
	out += 'class="rct2">' + spacer + '</div><div '; 
	out += 'class="rct3">' + spacer + '</div><div ';
	out += 'class="rct4">' + spacer + '</div><h3>' + this.title + '</h3><div ';
	out += 'class="rct4">' + spacer + '</div><div ';
	out += 'class="rct3">' + spacer + '</div><div ';
	out += 'class="rct2">' + spacer + '</div><div ';
	out += 'class="rct1">' + spacer + '</div><div class="rowContainer">';

	if ( this.paddingTop > 0 ) {
		out += '<div class="rcRow" id="' + padID + '" style="height:' + this.paddingTop + 'px">' + spacer + '</div>';
	}

	out += '<div class="rcRow" id="' + rowID + '">';	
	document.write(out);
	return rowID;
}

Box.prototype.generateBottom = function() {
	var out = '';
	var timestamp = getRandomNumber();
	padID = 'padRow' + timestamp;
	rcbmID = 'rcbm' + timestamp;

	borderOffset = 2;
	paddingOffset = 5;
	marginOffset = 10;

	rowWidthHack = ((this.width-borderOffset) - this.paddingRight - this.paddingLeft);
	rcbmWidth = (this.width-marginOffset);
	document.writeln( '<style type="text/css">' );
	document.writeln( '#' + padID + ' { width:' + this.width + 'px; padding:0 ' + this.paddingRight + 'px 0 ' + this.paddingLeft + 'px; voice-family: "\\"}\\""; voice-family:inherit; width:' + rowWidthHack + 'px; } html>body #' + padID + ' { width:' + rowWidthHack + 'px; }' );
	document.writeln( '#' + rcbmID + ' { width:' + rcbmWidth + 'px; }' );
	document.writeln( '</style>' );
	out += '</div>';
	if ( this.paddingBottom > 0 ) {
		out += '<div class="rcRow" id="' + padID + '" style="height:' + this.paddingBottom + 'px">' + spacer + '</div>';
	}
	out += '</div>';		

	out += '<div class="rcb1">' + spacer + '</div><div ';
	out += 'class="rcb2">' + spacer + '</div><div ';
	out += 'class="rcb3">' + spacer + '</div><div ';
	out += 'class="rcb4">' + spacer + '</div><div ';
	out += 'class="rcbm" id="' + rcbmID + '">' + spacer + '</div><div ';
	out += 'class="rcb4">' + spacer + '</div><div ';
	out += 'class="rcb3">' + spacer + '</div><div ';
	out += 'class="rcb2">' + spacer + '</div><div ';
	out += 'class="rcb1">' + spacer + '</div></div>';
	
	document.write(out);
}