<!DOCTYPE html>
<html>
	<head>
		<meta charset='utf-8'/>
		<title>Simple Autosize for textareas</title>
		<style>
			textarea {
				padding: 10px;
				vertical-align: top;
				width: 200px;
			}
			textarea:focus {
				outline-style: solid;
				outline-width: 2px;
			}
		</style>
		
		<link href="https://fonts.googleapis.com/css?family=Noto+Sans" rel="stylesheet">
  <link rel="stylesheet" href="stylei.css" media="all" />
	</head>
	
	
	<script type="text/javascript">
			
				
			
    $(document).ready(function () {
    var $textareas = jQuery('textarea');

    // set init (default) state   
    $textareas.data('x', $textareas.outerWidth());
    $textareas.data('y', $textareas.outerHeight());

		alert("test");
		
    $textareas.mouseup(function () {

        var $this = $(this);
		
		
		
        if ($this.outerWidth() != $this.data('x') || $this.outerHeight() != $this.data('y')) {
            //alert($this.outerWidth() + ' - ' + $this.data('x') + '\n' + $this.outerHeight() + ' - ' + $this.data('y'));
        }

	
		
		//alert(myDiv.clientHeight);
		//alert(test);
		//myDiv.clientHeight.value=myDiv.clientHeight.value+8;
		//alert(test);
	    
		var n = document.getElementsByClassName('yel0c');
    m = Number.NEGATIVE_INFINITY,
    i = 0,
    j = n.length;
	for (;i<j;i++) {
    m = Math.max(n[i].id,m);
	}

		 for (idx = 1; idx <= n.length; idx++) { 
			 var myDiv = document.getElementById('des'+idx); //get #myDiv
		test=myDiv.clientHeight+9;
	    test0=myDiv.clientHeight+0;
		document.getElementById('rTableCell0'+idx).setAttribute("style","height:"+test0+"px"); 
		document.getElementById('rTableCell2'+idx).setAttribute("style","height:"+test+"px"); 
		document.getElementById('rTableCell3'+idx).setAttribute("style","height:"+test+"px"); 
		document.getElementById('rTableCell4'+idx).setAttribute("style","height:"+test+"px"); 
		document.getElementById('rTableCell5'+idx).setAttribute("style","height:"+test+"px"); 
		}
		
			
		// set new height/width
       $this.data('x', $this.outerWidth());
       $this.data('y', $this.outerHeight());
		
       
    });
});


			
			
			
			
		
	function format(valeur,decimal) {
	separateur=" " ;
// formate un chiffre avec 'decimal' chiffres après la virgule et un separateur
	var deci=Math.round( Math.pow(10,decimal)*(Math.abs(valeur)-Math.floor(Math.abs(valeur)))) ; 
	var val=Math.floor(Math.abs(valeur));
	if ((decimal==0)||(deci==Math.pow(10,decimal))) {val=Math.floor(Math.abs(valeur)); deci=0;}
	var val_format=val+"";
	var nb=val_format.length;
	for (var i=1;i<4;i++) {
		if (val>=Math.pow(10,(3*i))) {
			val_format=val_format.substring(0,nb-(3*i))+separateur+val_format.substring(nb-(3*i));
		}
	}
	if (decimal>0) {
		var decim=""; 
		for (var j=0;j<(decimal-deci.toString().length);j++) {decim+="0";}
		deci=decim+deci.toString();
		val_format=val_format+"."+deci;
	}
	if (parseFloat(valeur)<0) {val_format="-"+val_format;}
	return val_format;
}

		
			
			function DateAuto()
{
var tempdate;
	var today = new Date();
	var dd = today.getDate();
	var mm = today.getMonth()+1; //January is 0!
	var yyyy = today.getFullYear();
	tempdate=document.getElementById("datetete").value;
	tempdate=tempdate.substring(17,tempdate.length);
	// set a variable
     var today = moment().format('DD/MM/YYYY');
	tempdate="Date: "+today+" "+tempdate;
	document.getElementById("datetete").value= tempdate;   
	
		}

			
		
			
			
					function hauteur()
{
	var myDiv = document.getElementById('rTableCell1'); //get #myDiv
	alert(myDiv.clientHeight);
	
	document.getElementById('rTableCell2').setAttribute("style","height:"+myDiv.clientHeight+"px"); 
	
		}

			
			
			
			
			
			
			
		function calcTotal()
{

	$(document).on('focus', 'textarea', function (e) {
	var element = $(this)[0];
	
	$(window).one('keyup', function (e) {
		var code = (e.keyCode ? e.keyCode : e.which);
		if (code == 9 && document.activeElement == element ) {
			element.select();
		}
	});
});
	
	    
	
	var totVal=["Banana", "Orange", "Apple", "Mango"];
	
  	var idx=1;
	var res;
	var restva;
	var resfinal;
	var totfin ;
	var totaltva;
	var totalfinal;
	var tva;
	tva=document.getElementById("tva").value;
	var r = /[-+]?[0-9]*\.?[0-9]+/g
   
	
	totfin=0;
	
	var n = document.getElementsByClassName('yel0c');
    m = Number.NEGATIVE_INFINITY,
    i = 0,
    j = n.length;
	for (;i<j;i++) {
    m = Math.max(n[i].id,m);
	}
	//alert(n.length);
	
    for (idx = 1; idx <= n.length; idx++) { 
    //alert(totVal[1]);
    totVal[idx] = parseFloat(document.getElementById("qt"+idx).value.replace(',','.'))*parseFloat(document.getElementById("prix"+idx).value.replace(',', '.'));
   	totfin=totfin+totVal[idx];
	totVal[idx]=format((parseFloat(totVal[idx])),2);
    totVal[idx]=totVal[idx].toString();
	totVal[idx]=totVal[idx].replace('.',',');		
	document.getElementById("stot"+idx).value= totVal[idx]+"€";   
	
	
  	// var totVal2 = parseFloat(document.getElementById("qt2").value.replace(',', '.'))+parseFloat(document.getElementById("prix2").value.replace(',', '.'));
   	//totfin=totfin+totVal2;
	//totVal2=totVal2.toString();
	//totVal2=totVal2.replace('.',',');
	//document.getElementById("stot2").value= totVal2;   
	}
	tva=tva.replace(',','.');
	tva=(tva.match(r))[0];
	totaltva=totfin*(tva/100);
	totalfinal=totfin+totaltva;
	totfin=format((parseFloat([totfin])),2);
	res=totfin.toString();
	res=res.replace('.',',');
	document.getElementById("total").value= res+"€";  
	
    totaltva=format((parseFloat([totaltva])),2);
	restva=totaltva.toString();
	restva=restva.replace('.',',');
	document.getElementById("totaltva").value= restva+"€";  
	
	totalfinal=format((parseFloat([totalfinal])),2);
	resfinal=totalfinal.toString();
	resfinal=resfinal.replace('.',',');
	document.getElementById("totalfinal").value= resfinal+"€";  
    
	//catch(e)
    //{}
}
</script>	
	  
	<body onload="calcTotal()" >
	 <header class="clearfix">
      <div id="logo">
        <img src="logo.png">
      </div>
      <div id="company">
        <h2 class="name">Ypsoroot - Ipsotoit</h2>
        <div>135 rue montavaux, 7080, Frameries </div>
        <div>065/793325. Entr.:BE0443870515</div>
        <div><a href="mailto:info@ypsoroof.com">info@ypsoroof.com</a></div>
      </div>
      </div>  
	 </header>
	
	<div class="rTable"> 
			<div class="rTableRow"> 
				<div class="rTableHead0"><strong></strong></div> 
				<div class="rTableHead1"><Textarea class='yelbj' onkeyup='calcTotal()' cols=40 rows=2 id='objectt' name='object'>Object : <?php echo $O1." ".$O2." ".$O3 ?></textarea><br><br><br><br> regh kjeh kjen <br> </div> 
				<div class="rTableHead2"><h3>QT</h3></div> 
				<div class="rTableHead3"><h3>PU</h3></div> 
				<div class="rTableHead4"><h3>UM</h3></div> 
				<div class="rTableHead5"><h3>TOTAL</h3></div> 
			</div> 
			<div class="rTable"> 
				<div class="rTableRow"> 
					<div class="rTableCell0"> </div>
					<div class="rTableCell1" id="rTableCell1">
			<Textarea class='yel1' onkeyup='calcTotal()' cols=40 rows=2 id='objectt' name='object'>Object : <?php echo $O1." ".$O2." ".$O3 ?></textarea> <br> </div> 
						
			
					<div class="rTableCell2" id="rTableCell2">
			<Textarea class='yel01' onkeyup='calcTotal()' onclick='this.focus();this.select()'  cols=40 rows=2 id='objectt' name='object'>Object : <?php echo $O1." ".$O2." ".$O3 ?></textarea> <br> </div> 																														  
																																	  
																																	
			</div>
																																	  
																																	  
		</div>
	
	
		<h3>max-height 300px</h3>
		<textarea style='max-height: 300px'>The coconut palm (also, cocoanut), Cocos nucifera, is a member of the family Arecaceae (palm family). It is the only accepted species in the genus Cocos.[2] The term coconut can refer to the entire coconut palm, the seed, or the fruit, which, botanically, is a drupe, not a nut. The spelling cocoanut is an archaic form of the word.[3] The term is derived from 16th-century Portuguese and Spanish coco, meaning "head" or "skull",[4] from the three small holes on the coconut shell that resemble human facial features.</textarea>

		
		
		
		
		<div class="rTable"> 
			<div class="rTableRow"> 
				<div class="rTableHead0"><strong></strong></div> 
				<div class="rTableHead1"><Textarea class='yelbj' onkeyup='calcTotal()' cols=40 rows=2 id='objectt' name='object'>Object : <?php echo $O1." ".$O2." ".$O3 ?></textarea><br><br><br><br> regh kjeh kjen <br> </div> 
				<div class="rTableHead2"><h3>QT</h3></div> 
				<div class="rTableHead3"><h3>PU</h3></div> 
				<div class="rTableHead4"><h3>UM</h3></div> 
				<div class="rTableHead5"><h3>TOTAL</h3></div> 
			</div> 
			
			
			<div class="rTable"> 
				<div class="rTableRow"> 
					<div class="rTableCell0"> </div>
					<div class="rTableCell1" id="rTableCell1">
			<Textarea class='yel1' onkeyup='calcTotal()' cols=40 rows=2 id='objectt' name='object'>Object : <?php echo $O1." ".$O2." ".$O3 ?></textarea> <br> </div> 
						
			
					<div class="rTableCell2" id="rTableCell2">
			<Textarea class='yel01' onkeyup='calcTotal()' onclick='this.focus();this.select()'  cols=40 rows=2 id='objectt' name='object'>Object : <?php echo $O1." ".$O2." ".$O3 ?></textarea> <br> </div> 																														  
																																	  
																																	
			</div>
																																	  
																																	  
		</div>
		
		
			
		</div>
		
		
		
	</body>
	<script src='../dist/autosize.js'></script>
	<script src="/js/jquery-2.1.0.min.js"></script>
	<script>
		autosize(document.querySelectorAll('textarea'));
		
	</script>
</html>
