// JavaScript Document

var total_content;
var temp_number;
var row;
var COUNT=0;
var row=2;
var btn_focus_flag=new Array();	
var e_css;
var c_css;
var theRules;
var Css_Length;
//var FOCUS_ON=font-size:15px;';		

		 

function table_creation(total_content,tbl_width,data_prefix,btn_name,CONTENT,EMPTY_CONTENT,FOCUS_ON ) {		
				
				// 1. Number of tab fields .
				// 2. Tab index total width .
				// 3. Content ID which we want to show in below.
				// 4. Tab fields names
				// 5. Non-empty tab index fields CSS property's.
				// 6. Empty tab index fields CSS property's.
				// 7. While focus the Tab index fields Color ( we choose color over here ). 


	var btn_value_array = new Array();					
	btn_value_array[0] = btn_name;		
	COUNT++;						
	btn_focus_flag['current'+data_prefix]='';			// assign Array index current is 'empty'
	btn_focus_flag['text'+data_prefix]='';				// assign Array index text is 'empty'
	btn_focus_flag['previous'+data_prefix]='';			// assign Array index previous is 'empty'		
	btn_focus_flag[COUNT] = new Object ; 				// create new object.
	btn_focus_flag[COUNT].e_content=EMPTY_CONTENT;		// 'e_content' is a new variable of btn_focus_flag[COUNT] object 
	btn_focus_flag[COUNT].content=CONTENT;				// 'content' is a new variable of btn_focus_flag[COUNT] object
	btn_focus_flag[COUNT].focus_off=CONTENT;			// 'focus_off' is a new variable of btn_focus_flag[COUNT] object
	btn_focus_flag[COUNT].focus_on=FOCUS_ON;			// 'focus_on' is a new variable of btn_focus_flag[COUNT] object  
			
	temp='<table id="tbl_tab" width="'+tbl_width+'" cellpadding=0 cellspacing=0 >';		// create table in JS
	td_width = tbl_width/total_content;	
	Math.floor(td_width);								// Round Of the value 
	for(var i=1;i<row;i++) {								
		temp+='<tr width=100%>';				
		for(var j=1;j<=total_content;j++){	
			temp+='<td class="tab" style="width:'+td_width+'" id=r'+i+'c'+j+''+COUNT+' name=r'+i+'c'+j+''+COUNT+' onclick="content_chage(\''+data_prefix+''+j+'\','+COUNT+');find_identity(this);"></td>'; 					
					// creating table TD.
		}					
		temp+="</tr>";			
		temp+='<tr>';				
		temp+='<td  class="tab_content" colspan='+total_content+' id=content'+COUNT+' align="left"></td>';  
					// creating DIV i.e which we want to show in below.
		temp+="</tr>";		
	}						
	temp+='</table>'; 										
	document.write(temp);					// write all tab fiels.
	return d_value(total_content,btn_name,COUNT);		// call the d_value fucntion.	
}


function content_chage(data,count) {			// 1. Div ID
												// 2. COUNT value.

	document.getElementById('content'+count+'').innerHTML='<br>'+document.getElementById(data).innerHTML;
}

function find_identity(element){			// 1. tab field ID .		

document.getElementById('r1c11').style.cssText=''+btn_focus_flag[COUNT].focus_off+'';
		
	if(btn_focus_flag['previous']){				// if prev. value is empty.
		
		document.getElementById(btn_focus_flag['previous']).style.cssText=''+btn_focus_flag[COUNT].focus_off+'';
												// prev. value show white.
	} 	document.getElementById(element.id).style.cssText=''+btn_focus_flag[COUNT].focus_on+'';      
											   // focus value is show in User which color want.
	btn_focus_flag['previous']=element.id; 		
}

function d_value(total_content,btn_name,count) {		//	1. Number of tab fields 
														// 2. tab field names 
														// 3. COUNT value
		
	var temp = new Array();		
	temp = btn_name.split(",");					
	 row=2;		  
	 m=0;
	for(var i=1;i<row;i++) {					
		for(var j=1;j<=total_content;j++){				
			if((temp[m]=='')){			// if tab fields is empty
				e_css = 'r'+i+'c'+j+''+count+'' ;
				empty_css(e_css,count);
				document.getElementById('r'+i+'c'+j+''+COUNT+'').innerHTML='&nbsp;';
		
			}else{						// if tab fields is non- empty.
				c_css = 'r'+i+'c'+j+''+count+'' ;
				content_css(c_css,count);
				document.getElementById('r'+i+'c'+j+''+COUNT+'').innerHTML=temp[m];	
			}				
			m++;
		}			
	}		
}
		
function empty_css(e_css,count){		// if tab fields is empty this function calling 
		
	document.getElementById(e_css).style.cssText=''+btn_focus_flag[count].e_content+'';    //"color:green;";
		
}
	
function content_css(c_css,count){		// if tab fields is non - empty this unction calling
	
	document.getElementById(c_css).style.cssText=''+btn_focus_flag[count].content+'';    //"color:green;";
		
}
	
	
function inbulidtab_css(){
	//alert(count);
	document.getElementById('r1c11').style.cssText=''+btn_focus_flag[COUNT].focus_on+'';
}