/*
 * creating the manager
 */

Manager = new VegUIManager('Manager');
Manager.set(800,600);
Manager.T.Css.backgroundColor = '#b2b2b2';
Manager.build(document.body);

/*
 * creating the template window, normally i would skip this and assign
 * the properties to the calculator directly, however this is to demonstrate
 * the template engine of vegUI again as we will clone the calculator
 * from this window
 */

/*
 * set and build the window
 */

myWin = Manager.get_new(VUI_WIN);
myWin.set('My Window', 300, 150, 50, 50);

myWin.Header.T.className = 'win_header';
myWin.Caption.T.className = 'win_caption';
myWin.T.className = 'win';


/* set up the buttons of the window */

myWin.BtnClose.set(null,2,18,18,'btn_close_1','btn_close_2');
myWin.BtnClose.set_marg(null,null,5);

myWin.BtnMaximize.set(null,2,18,18,'btn_maximize_1','btn_maximize_2');
myWin.BtnMaximize.set_marg(null,null,25);

myWin.BtnMinimize.set(null,2,18,18,'btn_minimize_1','btn_minimize_2');
myWin.BtnMinimize.set_marg(null,null,45);

/* set maximum proportions of the window */

myWin.T.maxY = 0;
myWin.T.maxH = 600;
myWin.T.maxW = 800;

/* set minimum proportions of the window */

myWin.T.minW = 150;
myWin.T.minH = 100;

/* skin window */

myWin.Skin.T.className = 'win_skin';
myWin.Skin.set_marg(2,2);
myWin.Header.set(2,2);
myWin.Header.set_marg(2);

/* creating the fade effect from the demonstration */

Manager.init_fx(30);

myWin.event_add('ontoback', function(a) { a[0].set_transparency(50); });
myWin.event_add('ontofront', function(a) { a[0].Manager.FX.effect_add(a[0], new VegUIFXFadeIn(1000)); });


/*
 * creating the calculator
 */

Calculator = Manager.get_new(VUI_CALCULATOR);
Calculator.clone(myWin);
Calculator.set(159,200,50,50);

/* style the calculator's buttons, first we define a common
 * button template we will use for our buttons
 */

BtnCalcTpl = Manager.get_new(VUI_BUTTON);
BtnCalcTpl.set(0,0,24,19,'btn_calc_1','btn_calc_2');

/* then we proceed by cloning the buttons of our calculator
 * from that template. 
 *

Calculator.Btn0.clone(BtnCalcTpl);
Calculator.Btn1.clone(BtnCalcTpl);
Calculator.Btn2.clone(BtnCalcTpl);
*/
Calculator.Btn3.clone(BtnCalcTpl);
Calculator.Btn4.clone(BtnCalcTpl);
Calculator.Btn5.clone(BtnCalcTpl);
Calculator.Btn6.clone(BtnCalcTpl);
Calculator.Btn7.clone(BtnCalcTpl);
Calculator.Btn8.clone(BtnCalcTpl);
Calculator.Btn9.clone(BtnCalcTpl);
Calculator.BtnAdd.clone(BtnCalcTpl);
Calculator.BtnSubtract.clone(BtnCalcTpl);
Calculator.BtnMultiply.clone(BtnCalcTpl);
Calculator.BtnDivide.clone(BtnCalcTpl);
Calculator.BtnEquals.clone(BtnCalcTpl);
Calculator.BtnComma.clone(BtnCalcTpl);
Calculator.BtnInvert.clone(BtnCalcTpl);
Calculator.BtnClear.clone(BtnCalcTpl);
Calculator.BtnErase.clone(BtnCalcTpl);
Calculator.BtnPI.clone(BtnCalcTpl);


var o = Calculator;
Manager.clone_elements(
  BtnCalcTpl, o.Btn0, o.Btn1, o.Btn2
);

/* now we need to position the buttons */

Calculator.Btn0.set(5,170,0,0,0,0,'0');
Calculator.Btn1.set(5,140,0,0,0,0,'1');
Calculator.Btn2.set(34,140,0,0,0,0,'2');
Calculator.Btn3.set(63,140,0,0,0,0,'3');
Calculator.Btn4.set(5,110,0,0,0,0,'4');
Calculator.Btn5.set(34,110,0,0,0,0,'5');
Calculator.Btn6.set(63,110,0,0,0,0,'6');
Calculator.Btn7.set(5,80,0,0,0,0,'7');
Calculator.Btn8.set(34,80,0,0,0,0,'8');
Calculator.Btn9.set(63,80,0,0,0,0,'9');

Calculator.BtnInvert.set(34,170,0,0,0,0,'+/-');
Calculator.BtnComma.set(63,170,0,0,0,0,',');

Calculator.BtnMultiply.set(100,170,0,0,0,0,'x');
Calculator.BtnDivide.set(100,140,0,0,0,0,'/');
Calculator.BtnSubtract.set(100,110,0,0,0,0,'-');
Calculator.BtnAdd.set(100,80,0,0,0,0,'+');

Calculator.BtnEquals.set(129,170,0,0,0,0,'=');
Calculator.BtnPI.set(129,140,0,0,0,0,'PI');
Calculator.BtnErase.set(129,110,0,0,0,0,'<-');
Calculator.BtnClear.set(129,80,0,0,0,0,'C');

/* styling the number label */

Calculator.LblNumber.T.className = 'lbl_number';
Calculator.LblNumber.set('div',145,18,5,30);

/* cloning a second calculator because it's fun */


secondCalc = Manager.get_clone(Calculator);
secondCalc.set_win('Cloned Calc');

Manager.build_element(Calculator);
Manager.build_element(secondCalc);
secondCalc.move(300);