// JavaScript Document, ha sikerül, akkor ez a formázó js
//function f(){
function ff(){
/////////////////////////////////////////////////////////////////////////////////
// lesz 4 tömb
//f,t,l, mint fej-törzs-láb azonos értelmezésűek
//[sugar,balfelső,jobbfelső,jobbalsó,balalsó,keretvatagsag,keretszín,kitöltstílus,1szín,2.szín,3.szín,hattérképforrás]
// a negyedik az egyebek "e"
//[ős,forma,fejmag,lábmag,fejképforrás,fejszöveg,fejképháttér,betücsalád,betűméret,betűstílus(n,b,i),igazitás]
////////////////////////////////////////////////////////////////////////////////////////////////
this.f=[];this.t=[];this.l=[];this.e=[];
//this.os=id;// hova
//this.forma=forma // milyet
//this.fejmag=fejmag;
//vv=0;
//////függvények////////////////////////////////////////////////////////////       
this.baj=uzen;// csak tesztelés
this.keretezes=keretezes;
this.kitoltes=kitoltes;
this.formazas=formazas;
this.be=be;
this.rajz=rajz;

function be(f,t,l,e){this.f=f;this.t=t;this.l=l;this.e=e;

/////////////////////////////////////////////////////////////////////////////
// nem megy dinamikusan, HTML-ben id-t kell adni, méretek rendben
this.meretek=document.getElementById(this.e[0]).style;
this.sz=parseInt(this.meretek.width.substr(0,this.meretek.length));
this.m=parseInt(this.meretek.height.substr(0,this.meretek.length));

canvas= document.getElementById(this.e[0]+"c"); 
  canvas.width=this.sz;canvas.height=this.m;      
  this.ctx=canvas.getContext('2d');

  
}// a befgv vége
//................................................................................
function rajz(){
forma=this.e[1];
//kezdődjék a rajzolgatás
//fm=this.fejmag;// hogy ne kelljen annyit írni
// az utolsó paraméter rendre 0,1,2->fej,torzs,láb
//this.t[8]="#ff0";
if(forma==0){// a forma =0 csak a törzs van se fejléc se lábléc
           //alert(this.m);
                 this.ctx.beginPath();		
				 formazas(this.ctx,this.t,this.m,this.sz,0,1);
				 this.ctx.closePath();
			     kitoltes(this.ctx,this.t,this.m,this.sz,0,1);
                 keretezes(this.ctx,this.t[5],this.t[6]); 
			     }// forma=0 vége 
if(forma==1){// van fejléc nem különálló, lábléc nincs
                 // a vonalvastagság és a törzshöz igazodik
			
				 this.f[5]=this.t[5];
				this.f[3]=0;this.f[4]=0;
                 this.ctx.beginPath();
				 formazas(this.ctx,this.f,this.e[2],this.sz,0,0);
				 this.ctx.closePath();
				 kitoltes(this.ctx,this.f,this.e[2],this.sz,0,0);
				 this.f[6]=this.t[6];
				 keretezes(this.ctx,this.f[5],this.f[6]);// a fejléc megvan
				
				 //------------------------------------------------
				 this.ctx.beginPath();
				this.t[1]=0;this.t[2]=0;
			   
				 formazas(this.ctx,this.t,this.m-this.e[2]+1*this.t[5],this.sz,this.e[2]-this.t[5],1);
				 this.ctx.closePath();
				 kitoltes(this.ctx,this.t,this.m-this.e[2]+1*this.t[5],this.sz,this.e[2]-this.t[5]);
				 keretezes(this.ctx,this.t[5],this.t[6]);
				 //-----------------------------------------------------------
				
                 }
if(forma==2){// van fejléc és különálló, nincs lábléc 
                 //f[5]=t[5];
				 //f[3]=0;f[4]=0;
                 this.ctx.beginPath();
				 formazas(this.ctx,this.f,this.e[2],this.sz,0,0);
				 this.ctx.closePath();
				 kitoltes(this.ctx,this.f,this.e[2],this.sz,0);
				 keretezes(this.ctx,this.f[5],this.f[6]);// a fejléc megvan
				 //-------------------------------------------------------
				 this.ctx.beginPath();
			
				 formazas(this.ctx,this.t,this.m-this.e[2]-2,this.sz,1*this.e[2]+2,1);
				 this.ctx.closePath();
				 kitoltes(this.ctx,this.t,this.m-this.e[2]-2,this.sz,1*this.e[2]+2);
				 keretezes(this.ctx,this.t[5],this.t[6]);
				 //-----------------------------------------------------------
           
				 }                 
 if(forma==3){// nincs fejléc van lábléc, ami nem különálló
                  
                // this.t[3]=0,this.t[4]=0;
				 this.l[5]=this.t[5];
				 this.l[6]=this.t[6];
				 this.t[3]=0;this.t[4]=0;
				 this.ctx.beginPath();
                 formazas(this.ctx,this.t,this.m-this.e[3]+1*this.t[5],this.sz,0,1);
				 this.ctx.closePath();
				 kitoltes(this.ctx,this.t,this.m-this.e[3]+1*this.t[5],this.sz,0);
			     keretezes(this.ctx,this.t[5],this.t[6]);// a torzs rövidítve megvan
				 //------------------------------------------------------------
				 this.l[1]=0;this.l[2]=0;				
			     this.ctx.beginPath();
				 formazas(this.ctx,this.l,1*this.e[3],this.sz,this.m-1*this.e[3]-1,2);
				 this.ctx.closePath();
				 kitoltes(this.ctx,this.l,1*this.e[3],this.sz,this.m-1*this.e[3]-1);
				 keretezes(this.ctx,this.l[5],this.l[6]);// lablec
				 //------------------------------------------------------
				
                 }// a forma 3  vége
if(forma==4){// minden van de nem különállók
                 // a vonalvastagság és a törzshöz igazodik
				 this.f[5]=this.t[5];
				this.f[3]=0;this.f[4]=0;
                 this.ctx.beginPath();
				 formazas(this.ctx,this.f,this.e[2],this.sz,0,0);
				 this.ctx.closePath();
				 kitoltes(this.ctx,this.f,this.e[2],this.sz,0,0);
				 this.f[6]=this.t[6];
				 keretezes(this.ctx,this.f[5],this.f[6]);// a fejléc megvan				 
				 //--------------------------------------------------------------
				 this.l[1]=0;this.l[2]=0;
				 this.l[5]=this.t[5];this.l[6]=this.t[6];				
			     this.ctx.beginPath();
				 formazas(this.ctx,this.l,1*this.e[3],this.sz,this.m-this.e[3],2);
				 this.ctx.closePath();
				 kitoltes(this.ctx,this.l,1*this.e[3],this.sz,this.m-this.e[3]);
				 keretezes(this.ctx,this.l[5],this.l[6]);// lablec
				 //----------------------------------------------------------------
		
				 this.ctx.beginPath();
				 this.t[1]=0;this.t[2]=0;this.t[3]=0;this.t[4]=0;
                 formazas(this.ctx,this.t,this.m-this.e[2]-this.e[3]+2*this.t[5]+2,this.sz,this.e[2]-this.t[5]-1,1);
				 this.ctx.closePath();
				 kitoltes(this.ctx,this.t,this.m-this.e[2]-this.e[3]+2*this.t[5]+2,this.sz,this.e[2]-this.t[5]-1);
			     keretezes(this.ctx,this.t[5],this.t[6]);// a torzs rövidítve megvan
				 
                 }// a forma 4 vége
if(forma==5){//fej különálló, láb nem különálló
                 this.ctx.beginPath();
				 formazas(this.ctx,this.f,this.e[2],this.sz,0,0);
				 this.ctx.closePath();
				 kitoltes(this.ctx,this.f,this.e[2],this.sz,0);
				 keretezes(this.ctx,this.f[5],this.f[6]);// a fejléc megvan
				 //------------------------------------------------------
				  this.l[1]=0;this.l[2]=0;
				 this.l[5]=this.t[5];this.l[6]=this.t[6];				
			     this.ctx.beginPath();
				 formazas(this.ctx,this.l,1*this.e[3],this.sz,this.m-this.e[3],2);
				 this.ctx.closePath();
				 kitoltes(this.ctx,this.l,1*this.e[3],this.sz,this.m-this.e[3]);
				 keretezes(this.ctx,this.l[5],this.l[6]);// lablec
				 //----------------------------------------------------------------
				 this.ctx.beginPath();
				 this.t[3]=0;this.t[4]=0;
                 formazas(this.ctx,this.t,1*this.m-this.e[2]-this.e[3]+vv/2+1,this.sz,1*this.e[2]+vv/2,1);
				 this.ctx.closePath();
				 kitoltes(this.ctx,this.t,1*this.m-this.e[2]-this.e[3]+vv/2+1,this.sz,1*this.e[2]+vv/2);
			     keretezes(this.ctx,this.t[5],this.t[6]);// a torzs rövidítve megvan
				
                 }// forma 5 vége
if(forma==6){// a láb különálló fej meg nincsen  
                 this.ctx.beginPath();
				 formazas(this.ctx,this.l,1*this.e[3],this.sz,this.m-this.e[3],2);
				 this.ctx.closePath();
				 kitoltes(this.ctx,this.l,1*this.e[3],this.sz,this.m-this.e[3]);
				 keretezes(this.ctx,this.l[5],this.l[6]);// lablec
				 //-----------------------------------------------------------
				 this.ctx.beginPath();
                 formazas(this.ctx,this.t,1*this.m-1*this.e[3]+1*this.t[5]-1,this.sz,0,1);
				 this.ctx.closePath();
				 kitoltes(this.ctx,this.t,1*this.m-1*this.e[3]+1*this.t[5]-1,this.sz,0);
			     keretezes(this.ctx,this.t[5],this.t[6]);// a torzs rövidítve megvan
                 }
if(forma==7){//láb külön fej nem külön
                 // a vonalvastagság és a törzshöz igazodik
				  this.ctx.beginPath();
				 formazas(this.ctx,this.l,1*this.e[3],this.sz,this.m-this.e[3],2);
				 this.ctx.closePath();
				 kitoltes(this.ctx,this.l,1*this.e[3],this.sz,this.m-this.e[3]);
				 keretezes(this.ctx,this.l[5],this.l[6]);// lablec
				//-----------------------------------------------------------------
				 f[5]=t[5];
				 f[3]=0;f[4]=0;
                 this.ctx.beginPath();
				 formazas(this.ctx,this.f,this.e[2],this.sz,0,0);
				 this.ctx.closePath();
				 kitoltes(this.ctx,this.f,this.e[2],this.sz,0,0);
				 this.f[6]=this.t[6];
				 keretezes(this.ctx,this.f[5],this.f[6]);// a fejléc megvan
				 //--------------------------------------------------------------------
				 this.ctx.beginPath();
				 this.t[1]=0;this.t[2]=0;
                 formazas(this.ctx,this.t,this.m-this.e[2]-1*this.e[3]+2*this.t[5]-vv/2-1,this.sz,this.e[2]-this.t[5]-1,1);
				 this.ctx.closePath();
				 kitoltes(this.ctx,this.t,this.m-this.e[2]-1*this.e[3]+2*this.t[5]-vv/2-1,this.sz,this.e[2]-this.t[5]-1);
			     keretezes(this.ctx,this.t[5],this.t[6]);// a torzs rövidítve megvan
				 
                 }
if(forma==8){// minden különálló és van
                   this.ctx.beginPath();
				 formazas(this.ctx,this.l,1*this.e[3],this.sz,this.m-this.e[3],2);
				 this.ctx.closePath();
				 kitoltes(this.ctx,this.l,1*this.e[3],this.sz,this.m-this.e[3]);
				 keretezes(this.ctx,this.l[5],this.l[6]);// lablec
				//-----------------------------------------------------------------
				 
                 this.ctx.beginPath();
				 formazas(this.ctx,this.f,this.e[2],this.sz,0,0);
				 this.ctx.closePath();
				 kitoltes(this.ctx,this.f,this.e[2],this.sz,0,0);
				
				 keretezes(this.ctx,this.f[5],this.f[6]);// a fejléc megvan
				 //--------------------------------------------------------------------
				 this.ctx.beginPath();
				
                 formazas(this.ctx,this.t,1*this.m-this.e[2]-1*this.e[3]-2,this.sz,1*this.e[2]+2,1);
				 this.ctx.closePath();
				 kitoltes(this.ctx,this.t,1*this.m-this.e[2]-1*this.e[3]-2,this.sz,1*this.e[2]+2);
			     keretezes(this.ctx,this.t[5],this.t[6]);// a torzs rövidítve megvan
                 }
if(forma==9){// van fejléc és különálló és egy kép felirattal (borzalom), nincs lábléc  
                  /*         
				 this.ctx.fillRect(0,0,this.sz,fm);
				 kitoltes(this.ctx,fejforma,fm,this.sz,0,0);
				 // most a gomb, ill. a fejkép 
				 fejgomb(this.os,this.sz);
				 //-------------------------------------------------------------------
				 this.ctx.beginPath();
				 formazas(this.ctx,torzsforma,this.m-fm-1,this.sz,fm+1,1);
				 this.ctx.closePath();
				 kitoltes(this.ctx,torzskitolt,this.m-fm-1,this.sz,fm+1);
				 keretezes(this.ctx,torzskeret);
				 */
                 }
if(forma==10){// van fejléc képpel felirattal, van lábléc, ami nem különálló
                  }
if(forma==11){// van fejléc képpel felirattal, van lábléc, ami különállő
                  }
				  				  				 

}// a rajz fgv vége				 				 				 				 				 				 	
//................................................................................

function formazas(x,tf,m,sz,k,ki){
// teszteljük, ha nem a teljes div-et kell festeni
// a magasságot tudjuk állítani, hiszen az az m
// kell még egy változó neve legyen -> k, mint kezdet
if(ki==0){vv=1*this.f[5];r=1*this.f[0];}
if(ki==1){vv=1*this.t[5];r=1*this.t[0];}
if(ki==2){vv=1*this.l[5];r=1*this.l[0];}
                   switch (1*tf[1]){//bal felső sarok
						  case 0:x.moveTo(vv/2,k);x.lineTo(vv/2,k+vv/2);x.lineTo(sz-r-vv/2,k+vv/2);break;
						  case 1:x.arc(vv/2+r,k+vv/2+r,r,Math.PI,Math.PI*3/2,false);break;
						  case 2:x.arc(vv/2,k+vv/2,r,Math.PI/2,0,true);break;
					      case 3:x.moveTo(vv/2,k+vv/2+r);x.lineTo(vv/2+r,k+vv/2);break;
						  }// bal felső  sarok switch vége
						  switch(1*tf[2]){//jobb felső
						  case 0:x.lineTo(sz-vv/2,k+vv/2);x.lineTo(sz-vv/2,k+m-r-vv/2);break;
						  case 1:x.arc(sz-r-vv/2,k+r+vv/2,r,Math.PI*3/2,Math.PI*2,false);break;
						  case 2:x.lineTo(sz-vv/2-r,k+vv/2);x.arc(sz-vv/2,k/*+vv/2*/,r,Math.PI,Math.PI-Math.PI/2,true);break;
						  case 3:x.lineTo(sz-r-vv/2,k+vv/2);x.lineTo(sz-vv/2,k+r+vv/2);break;
						  }// jobb  felső sarok switch vége
						  switch(1*tf[3]){// jobb alsó
						  case 0:x.lineTo(sz-vv/2,k+m-r);x.lineTo(sz,k+m-vv/2-1);break;
						  case 1:x.lineTo(sz-vv/2,k+m-r-vv/2);x.arc(sz-r-vv/2,k+m-r-vv/2,r,Math.PI*2,Math.PI*5/2,false);break;
						  case 2:x.lineTo(sz-vv/2,k+m-r-vv/2);x.arc(sz-vv/2,k+m-vv/2,r,Math.PI*3/2,Math.PI,true);break;
						  case 3:x.lineTo(sz-vv/2,k+m-r-vv/2);x.lineTo(sz-vv/2-r,k+m-vv/2);
						  break;
						  }// jobbalsó sarok switch vége
						  switch(1*tf[4]){//bal alsó
						 case 0:x.lineTo(vv/2,k+m-vv/2-1);break;
						 case 1:x.lineTo(vv/2+r,k+m-vv/2);x.arc(vv/2+r,k+m-r-vv/2,r,Math.PI/2,Math.PI,false);break;
						 case 2:x.lineTo(vv/2+r,k+m-vv/2);x.arc(vv/2,k+m-vv/2,r,0,Math.PI*3/2,true);break;
						 case 3:x.lineTo(r+vv/2,k+m-vv/2);x.lineTo(vv/2,k+m-r-vv/2);break;
						  }// bal alsó switch sarok vége
						
}// a formázás függvény vége
//.................................................................................
function kitoltes(x,tk,m,sz,y){

					 switch(tk[7]){// a kitöltés
					 
					         case 0:break;// nincs kitöltés
					         case 1:// egy szín
							 x.fillStyle=tk[8];
							 x.fill();
							 break;
							 case 2:// 1-es átmenet vízszint
							 grad = x.createLinearGradient(0,0,sz,0);
                             grad.addColorStop(0, tk[8]);
                             grad.addColorStop(1.0,tk[9]);
                             x.fillStyle=grad;
							 x.fill();
							 break;
							 case 3:// 2-es átmenet vízszint
							 grad = x.createLinearGradient(0,0,sz,0);
                             grad.addColorStop(0, tk[8]);
                             grad.addColorStop(0.5,tk[9]);
							 grad.addColorStop(1.0,tk[10]);
                             x.fillStyle=grad;
							 x.fill();
							 break;
							 case 4:// 1 es ármenet függőleges
							 grad = x.createLinearGradient(0,0,0,m);
                             grad.addColorStop(0, tk[8]);
                             grad.addColorStop(1.0,tk[9]);
                             x.fillStyle=grad;
							 x.fill();
							 break;
							 case 5:// 2-es átmenet függőleges
							 grad = x.createLinearGradient(0,y,0,y+m);
                             grad.addColorStop(0, tk[8]);
                             grad.addColorStop(0.5,tk[9]);
							 grad.addColorStop(1.0,tk[10]);
                             x.fillStyle=grad;
							 x.fill();
							 break;
							 case 6:// parkettázás
							//var img = new Image();  
                            //img.src = 'back_2004_darkgreen2_sm.gif';
                            // create pattern
                            //var ptrn = x.createPattern(img,'repeat');
                            //x.fillStyle = ptrn;
                            //x.fill();
                            //ie-ben az excanvas nem ad lehetőséget
						    // ki kellene bogarászni, 
							 break;
					 }// kitöltés
}

//................................................................................
function keretezes(x,v,szin){// kitoltes kezdete

x.lineWidth=v;x.strokeStyle=szin; if(v !=0){x.stroke();}              
}//kitoltes vége  
//................................................................................
function fejgomb(x,w){
//kep=new Image(); kep.setAttribute("id", "kep");kep.className="alap";
//kep.style.left=0;kep.style.top=0;kep.style.width=w;kep.style.height=fm;
//kep.src="index0.jpg";
//document.getElementById(x).appendChild(kep);
} // a fejgomb vége
 
//................................................................................
//function uzen(){alert(this.m);}
function uzen(){alert("ssss");}
//................................................................................
}// az osztály definiciójának a vége