

Fraction.makeNumberPad = function()
{
    var i, button, buttonbutton, buttonCnt=1;
	for(i=0; i<4; i++)
    {
		button = document.createElement('div');
        document.getElementById('numberPad').appendChild(button);
        button.setAttribute('id','row'+(i+1));   
        button.setAttribute('class',' col-xs-11 col-sm-11 col-md-11 col-lg-11'); 
        
        if(i==3)
        {
            for(p=0; p<1; p++)
            {
                zerobutton = document.createElement('button');
                document.getElementById('row'+(i+1)).appendChild(zerobutton);
                zerobutton.setAttribute('id','button'+(i+1)+(p));   
                zerobutton.setAttribute('onclick','Fraction.clickedButton(this.id)');
                zerobutton.setAttribute('class',' buttonCss1 col-xs-2 col-sm-2 col-md-2 col-lg-2 '); 
               document.getElementById('button'+(i+1)+(p)).setAttribute('data',buttonCnt);
                document.getElementById('button'+(i+1)+(p)).style.backgroundImage = "url('images/skin/"+buttonCnt+".png')";
                
               /*dotbutton = document.createElement('button');
                document.getElementById('row'+(i+1)).appendChild(dotbutton);
                dotbutton.setAttribute('id','button'+(i+1)+(p+1));   
                dotbutton.setAttribute('onclick','Fraction.clickedButton(this.id)');
                dotbutton.setAttribute('class','nopadding buttonCss col-xs-3 col-sm-3 col-md-3'); 
                document.getElementById('button'+(i+1)+(p+1)).innerHTML =".";
				document.getElementById('button'+(i+1)+(p+1)).style.backgroundImage = "url('images/skin/Number-button.png')";
 
				clearbutton = document.createElement('button');
                document.getElementById('row'+(i+1)).appendChild(clearbutton);
                clearbutton.setAttribute('id','button'+(i+1)+(p+2));   
                clearbutton.setAttribute('onclick','Fraction.clickedButton(this.id)');
                clearbutton.setAttribute('class','nopadding buttonCss glyphicon glyphiColor glyphicon-erase col-xs-3 col-sm-3 col-md-3 col-lg-3 col-xs-offset-1 col-sm-offset-1 col-md-offset-1 col-lg-offset-1'); 
                document.getElementById('button'+(i+1)+(p+2)).style.backgroundImage = "url('images/skin/Number-button.png')";
                buttonCnt++;   */
               
            }    
        }
        else
        {
            for(k=0; k<3; k++)
            {		 
                buttonbutton = document.createElement('button');
                document.getElementById('row'+(i+1)).appendChild(buttonbutton);
                buttonbutton.setAttribute('id','button'+(i+1)+(k+1));   
                buttonbutton.setAttribute('onclick','Fraction.clickedButton(this.id)');
                buttonbutton.setAttribute('class',' buttonCss col-xs-2 col-sm-2 col-md-2 col-lg-2 col-xs-offset-1 col-sm-offset-1 col-md-offset-1 col-lg-offset-1'); 
                document.getElementById('button'+(i+1)+(k+1)).setAttribute('data',buttonCnt);
				document.getElementById('button'+(i+1)+(k+1)).style.backgroundImage = "url('images/skin/"+buttonCnt+".png')";
				console.log(buttonCnt);
                buttonCnt++;	
                if(buttonCnt == 10)
                    buttonCnt=0;		
            } 
        }    
    }    
}