/* ************************************************************************************************
									Style and skin
 **************************************************************************************************/

rialto.styleDemo=function(objPar){
	
	this.filename="style.js";
	
	if(!objPar){
		var objPar={title : "Style and skin" ,
					parent : document.body ,
					icone:'images/imgFenSimple/picto-gr_default.gif'
					}
	}
    this.simpleWindow=new rialto.widget.SimpleWindow(objPar);
	var oThis=this;
	
				  	  
	new rialto.widget.Label('',35,30,this.simpleWindow,"There is 3 way to change the style of a component",'libelle2');
  	 
  	 
  	 //CHANGE STYLE AT RUNTIME   
    var frmSple = new rialto.widget.Frame({name:'CADRE1',top:'70',left:'10',width:'98%',height:'180',
										   title:'1. At run time',open:true,
										   dynamic:false,position:'relative',draggable:false,parent:this.simpleWindow});


	
    var btn = new rialto.widget.Button(10,10,"Change style","Change style in runtime of the firstline",frmSple);
    btn.onclick=function () {            
		oGrid.setStyle(0,-1,{color:'red',fontWeight:'bold'});
	};
	var oGrid = new rialto.widget.Grid({top:40,left:5,height:110,
									   arrHeader:[
							           	{title:"Civ",width:100,type:"string",values:[[0,"Mr"],[1,"Mme"],[2,"Mss"]]},
							            {title:"Surname",width:100,type:"string"},
							            {title:"Price",width:100,type:"number",pattern:"$ ##.##",maskPattern:"##.###"},
							            {title:"maried",width:100,type:"boolean",pattern:"no|yes"},
							            {title:"Date of birth",width:150,type:"date",pattern:"born on dd/MM/yyyy",maskPattern:"dd/MM/yyyy"}],
										name:'oTableau',parent:frmSple,row:12,
										cellActive:false,sortable:true,multiSelect:false,
										lineHeight:16,boolPrint:true,switchable:true,
									   	clickable:true,autoResizableW:false,autoResizableH:false,
									   	writable:true});
	//fil grid
	var tab=new Array;
	tab.push(["Mr","John",15.48,true,new Date(1945,11,28)]);
    tab.push(["Mss","Lize",5,false,new Date(1988,5,6)]); 
    tab.push(["Mme","Laura",55,true,new Date(1972,1,23)]); 
    
    oGrid.fillGridWithData(tab);
    
  	//CUSTOM STYLE
    var frmSple = new rialto.widget.Frame({name:'CADRE1',top:'70',left:'10',width:'98%',height:'180',
										   title:'2. Custom style with css',open:true,
										   dynamic:false,position:'relative',draggable:false,parent:this.simpleWindow});


	
    new rialto.widget.Label('',10,10,frmSple,"This custom style is define with css rules and it is specific to this grid",'libelle2');
	var oGrid2 = new rialto.widget.Grid({top:40,left:5,height:110,
									   arrHeader:[
							           	{title:"Civ",width:100,type:"string",values:[[0,"Mr"],[1,"Mme"],[2,"Mss"]]},
							            {title:"Surname",width:100,type:"string"},
							            {title:"Price",width:100,type:"number",pattern:"$ ##.##",maskPattern:"##.###"},
							            {title:"maried",width:100,type:"boolean",pattern:"no|yes"},
							            {title:"Date of birth",width:150,type:"date",pattern:"born on dd/MM/yyyy",maskPattern:"dd/MM/yyyy"}],
										name:'oTableau',parent:frmSple,row:12,
										cellActive:false,sortable:true,multiSelect:false,
										classname:"custom_",
										lineHeight:16,boolPrint:true,switchable:true,
									   	clickable:true,autoResizableW:false,autoResizableH:false,
									   	writable:true});
	//fil grid
	var tab=new Array;
	tab.push(["Mr","John",15.48,true,new Date(1945,11,28)]);
    tab.push(["Mss","Lize",5,false,new Date(1988,5,6)]); 
    tab.push(["Mme","Laura",55,true,new Date(1972,1,23)]); 
    
    oGrid2.fillGridWithData(tab);
    
    //GLOBAL SKIN
    var frmSple = new rialto.widget.Frame({name:'CADRE1',top:'70',left:'10',width:'98%',height:'180',
										   title:'3. Global Skin',open:true,
										   dynamic:false,position:'relative',draggable:false,parent:this.simpleWindow});


	var DS =  new rialto.widget.Radio('DS',10,5,frmSple,'skin','default skin',true,'libNormal');
	var LS =  new rialto.widget.Radio('LS',10,100,frmSple,'skin','light skin (where most of the image are replace by background color)',false,'libNormal');
	//set skin
	DS.onclick=function(){
		rialto.skin.setSkin("defaultSkin");
	}

	LS.onclick=function(){
		rialto.skin.setSkin("lightSkin");			
	}			
	
	var oGrid3 = new rialto.widget.Grid({top:40,left:5,height:110,
									   arrHeader:[
							           	{title:"Civ",width:100,type:"string",values:[[0,"Mr"],[1,"Mme"],[2,"Mss"]]},
							            {title:"Surname",width:100,type:"string"},
							            {title:"Price",width:100,type:"number",pattern:"$ ##.##",maskPattern:"##.###"},
							            {title:"maried",width:100,type:"boolean",pattern:"no|yes"},
							            {title:"Date of birth",width:150,type:"date",pattern:"born on dd/MM/yyyy",maskPattern:"dd/MM/yyyy"}],
										name:'oTableau',parent:frmSple,row:12,
										cellActive:false,sortable:true,multiSelect:false,
										lineHeight:16,boolPrint:true,switchable:true,
									   	clickable:true,autoResizableW:false,autoResizableH:false,
									   	writable:true});
	//fil grid
	var tab=new Array;
	tab.push(["Mr","John",15.48,true,new Date(1945,11,28)]);
    tab.push(["Mss","Lize",5,false,new Date(1988,5,6)]); 
    tab.push(["Mme","Laura",55,true,new Date(1972,1,23)]); 
    
    oGrid3.fillGridWithData(tab);
    
}