/**
 * GridBuilder v. 1
 * Author: Cherenkevich Aleksey
 * Date: 17.01.2010
 * Author's website: www.cherenkevich.com 
 */


/**
 * Configurate your new grid
 */
window.onload = function ( ) {

  gridObj = new Grid ( ); 							// Leave this line without changing
	
	gridObj.vDivisions 		= 14;						// How much vertical divisions you'd like to set
	gridObj.hDivisions 		= 4;						// How much lines unit into a horisontal division
	
	gridObj.width 				= 934;					// Set grid width. WARNING: if you set next parameter as TRUE, demention of width will be percents. Else - pixels.
	gridObj.isFluid 			= 0;						// Is grid fixed by width or fluid
	gridObj.minWidth 			= 934;					// Set minimal width of your page. Optional parameter
	//gridObj.maxWidth 			= 978;					// Set maximal width of your page. Optional parameter
	
	gridObj.align 				= 'left';				// Alignment of layout: 'left' or 'center'

	gridObj.lineHeight 		= 18;						// Set the line height. (Usually it is permanent parameter for the whole page)
	gridObj.gutter 				= 18;						// Set the gutter parameter. Gutter is a space between vertical divisions. Gutter is usually equal the line height

	gridObj.marginTop			= 0;						// Set the top offset for your grid. Use 0 or digit divisible to line height value
	gridObj.marginRight		= 0;						// Set the top offset for your grid. Use 0 or digit divisible to line height value
	gridObj.marginLeft		= 50;						// Set the top offset for your grid. Use 0 or digit divisible to line height value
	
	gridObj.moduleColor 	= '#ff0000';		// It's a color of your module grid	
	gridObj.zebraColor 		= '#000000';		// It's a color of type grid

	//gridObj.Build ( );										// Uncomment this line if you want to size the gid right on the page load
	
}

/**
 * WARNING! Do not change the code below this comment
 */

window.onresize = function ( ) {
	//remove prev grid, we have to reset grid
	var el = document.getElementById('gridLayoutWrapper');
	el.parentNode.removeChild(el);
	
	//rebuild
	gridObj.Build ( );										// Leave this line without changing
}


	document.onkeydown = gridInit;
	function gridInit (event ){
		if (!document.getElementById) return;
		if (window.event) event = window.event;
		//alert(event.keyCode);
		if (event.ctrlKey) {
			var link = null;
			switch (event.keyCode ? event.keyCode : event.which ? event.which : null){
				case 192:
					var hasBuilt = document.getElementById('gridLayoutWrapper');
					if(!hasBuilt) {
						gridObj.Build ( );										
					} else {
						var el = document.getElementById('gridLayoutWrapper');
						el.parentNode.removeChild(el);
					}
					break;
				}
			}			
		}


/**
 * Grid Constructor
 */
function Grid ( ) { 

	this.BrowserInfo ( );
	
}

/**
 * Detect a browser
 */
Grid.prototype.BrowserInfo = function ( ) {
	
	this.isIE = 1;
	if ( -[1,] ) {
		this.isIE = 0;
	}

}


/**
 * Grid builder
 */
Grid.prototype.Build = function ( ) {
	
	if (this.isIE) return false;
	
	var gridParent = document.getElementsByTagName ( 'body' ) [0];

	this.getDocHeight ( );
	this.getDocWidth ( );
	//alert(this.docHeight);
	
	// Width calculating

	
	this.widthDem = 'px';
	if ( this.isFluid ) {
	
		this.absWidth = this.docWidth * this.width / 100 - ( this.marginLeft + this.marginRight + this.gutter );

	}	else {
	
		this.absWidth = this.width;
		
	}
		
	this.gridWidth = 'width: ' + ( this.absWidth + this.gutter ) + this.widthDem + '; ';	
	
	
	if ( this.isFluid ) {
		if ( this.minWidth ) {
			this.gridWidth += 'min-width: ' + this.minWidth + 'px; ';
		}
		if ( this.maxWidth ) {
			
			if (this.absWidth > this.maxWidth) {
				this.absWidth = this.maxWidth - ( this.marginLeft + this.marginRight + this.gutter );
			}
			this.gridWidth = 'width: ' + ( this.absWidth + this.gutter ) + this.widthDem + '; ';	
			this.gridWidth += 'max-width: ' + this.maxWidth + 'px; ';
		}
	}
	
	// Alignment
	
	this.alignment = '';
	
	if ( this.align == 'center' ) {
		this.alignment = 'margin: 0 auto; ';
	}
	
	
	var gridWrapper = this.CreateElem( "div", { id: "gridLayoutWrapper", style: "width: 100%; height: " + this.docHeight + "px; position: absolute; z-index: 9999; top: 0px; left: 0;" },
		this.CreateElem ( "div", { style: "padding: 0 " + this.marginRight + "px 0 " + this.marginLeft + "px; height: " + this.docHeight + "px;" },
			this.CreateElem ( "div", { style: "width: " + ( this.absWidth + this.widthDem ) + "; " + this.alignment + "height: " + this.docHeight + "px; overflow: hidden;" },
				this.CreateElem ( "div", { style: this.gridWidth + "height: " + this.docHeight + "px;" },
					this.CreateElem ( "div", { style: "width: 100%; height: " + this.docHeight + "px; position: relative; overflow: hidden;" },
						this.CreateElem ( "div", { id: "zebraGridWrapper", style: "width: 100%; height: 100%; position: absolute; top: 0; left: 0;" } ),
						this.CreateElem ( "div", { id: "moduleHGrid", style: "width: 100%; height: 100%; position: absolute; top: " + this.marginTop + "px; left: 0;" },
							this.CreateElem ( "div", { id: "moduleHGridWrapper", style: "width: 100%; height: 100%;"} )
						),
						this.CreateElem ( "div", { id: "moduleVGrid", style: "width: 100%; height: 100%; position: absolute; top: 0; left: 0;" },
							this.CreateElem ( "div", { id: "moduleVGridWrapper", style: "height: 100%;"} )
						)
					)
				)
			)
		)
	);
	
	gridParent.appendChild ( gridWrapper );
	
	this.zebraLineHeight = this.lineHeight - 1; 
	
 	var zebraGridWrapper = document.getElementById ( 'zebraGridWrapper' );
	var zebraCounter = this.docHeight / this.lineHeight;
	for ( i = 0; i < zebraCounter.toFixed ( 0 ); i++ ) {
		zebraItem = this.CreateElem ( "div", { style: "z-index: 9999; width: 100%; height: " + this.zebraLineHeight + "px; border-bottom: 1px solid " + this.zebraColor + "; opacity: 0.3" } );
		zebraGridWrapper.appendChild ( zebraItem );
	}	
	
 	var moduleHGridWrapper = document.getElementById ( 'moduleHGridWrapper' );
	this.moduleHeight = ( this.hDivisions ) * this.lineHeight;
	var moduleCounter = this.docHeight / this.moduleHeight;
	for ( i = 0; i < moduleCounter.toFixed ( 0 ); i++ ) {
		moduleItem = this.CreateElem ( "div", { style: "width: 100%; height: " + this.moduleHeight + "px; background: " + this.moduleColor + "; margin-bottom: " + this.lineHeight + "px; opacity: 0.3" } );
		moduleHGridWrapper.appendChild ( moduleItem );
	}	   
	
 	var moduleVGridWrapper = document.getElementById ( 'moduleVGridWrapper' );

	
	this.vModuleItemWidth = ( this.absWidth + this.gutter ) / this.vDivisions + 'px';
 	for ( i = 0; i < this.vDivisions; i++ ) {
		vModuleItem = this.CreateElem ( "div", { style: "float: left; width: " + this.vModuleItemWidth + "; height: 100%;" },
			this.CreateElem ( "div", { style: "height: 100%; padding-right: " + this.gutter + "px;" },
				this.CreateElem ( "div", { style: "width: 100%; background: " + this.moduleColor + "; height: 100%; opacity: 0.3" }, " " )
			)
		);
		moduleVGridWrapper.appendChild ( vModuleItem );
	}	   
}

/**
 * Return the document width
 */
Grid.prototype.getDocWidth = function ( ) {
		var D = document;
		this.docWidth = Math.max(
        Math.max ( D.body.clientWidth, window.innerWidth )
    );
}

/**
 * Return the document height
 */
Grid.prototype.getDocHeight = function ( ) {
		var D = document;
		this.docHeight = Math.max(
        Math.max ( D.body.scrollHeight, D.documentElement.scrollHeight ),
        Math.max ( D.body.offsetHeight, D.documentElement.offsetHeight ),
        Math.max ( D.body.clientHeight, D.documentElement.clientHeight )
    );
}

/**
 * Help function for DOM nodes creation
 */
Grid.prototype.CreateElem = function ( name, attributes ) {
	var el = document.createElement( name );
	if ( typeof attributes == 'object' ) {
		for ( var i in attributes ) {
			el.setAttribute( i, attributes[i] );

			if ( i.toLowerCase() == 'class' ) {
				el.className = attributes[i]; // for IE compatibility

			} else if ( i.toLowerCase() == 'style' ) {
				el.style.cssText = attributes[i]; // for IE compatibility
			}
		}
	}
	for ( var i = 2;i < arguments.length; i++ ) {
		var val = arguments[i];
		if ( typeof val == 'string' ) { val = document.createTextNode( val ) };
		el.appendChild( val );
	}
	return el;
}