/*
   PROJECT:                 TRI-CONTACT
   
   VERSIE:                  2.0
   PROGRAMMEUR/DESIGNER:    MJJ Smeets
   GRAPHICS:                M vd Einde
   TECHNOLOGY:              PHP / XHTML with a linked CSS stylesheet.
                            JavaScript and the Ext.JS JavaScript Framework,
							are used for animation,Ajax effects and other complex functionality.

*/

//global variables
var myContactWin = null;
var contactActive = false;
var beforeCloseCB = true;
var contactname = ' ';
var contactmail = ' ';
var contactsubj = ' ';
var contactmsgs = '';

//Define Class Methods
Ext.onReady(function(){
	
    //Enable and configure QuickTip Tooltips
    Ext.QuickTips.init();
    Ext.apply(Ext.QuickTips.getQuickTip(), {
        maxWidth: 200,
        minWidth: 100,
        showDelay: 50,
		mouseOffset: [-100,-10],
        trackMouse: true
    });

    myContactWin = new Ext.Window({
		id: 'contactwindow',
        title: 'Contact Formulier - versie 2.0 - Tri-M WebApplicatie',
        width: 400,
        height:340,
        minWidth: 200,
        minHeight: 140,
		minimizable: true,
		maximizable: false,
        layout: 'fit',
        plain:true,
        bodyStyle:'padding:5px;',
        items: new Ext.FormPanel({
            id:'rootpanel',
            labelAlign: 'top',
            frame:true,
            //title: 'Contact formulier - Tri-M WebApplicatie',
            bodyStyle:'padding:5px 5px 0',
            layout: 'absolute',
            items: [
		    {
			    xtype:'label',
			    text: 'Uw (bedrijfs)naam',
			    x:5,
			    y:10
		    },{
                xtype:'textfield',
                name: 'naamveld',
			    id: 'naamveld',
			    width: 200,
                x: 100,
	 	        y:10
            },{
			    xtype:'label',
			    text: 'Uw email-adres',
			    x:5,
			    y:40
		    },{
                xtype:'textfield',
                name: 'mailadresveld',
			    id: 'mailadresveld',
			    width: 200,
                x: 100,
			    y: 40
           },{
			    xtype:'label',
			    text: 'Onderwerp',
			    x:5,
			    y:70
	       },{
                xtype:'textfield',
                name: 'onderwerpveld',
			    id: 'onderwerpveld',
			    width: 200,
                x: 100,
	            y: 70
           },{
                xtype:'panel',
                id:'captchapanel',
   			    name:'captchapanel',
                height:30,
                x: 10,
   			    y: 95
           },{
                xtype:'label',
			    text: 'vul hieronder de code in',
                x: 210,
	            y: 95
           },{
                xtype:'textfield',
                name: 'code',
			    id: 'code',
			    width: 100,
                x: 200,
	            y: 112
           },{
                xtype:'htmleditor',
                id:'berichtveld',
   			    name:'berichtveld',
                height:120,
                x: 10,
   			    y: 140
           }]
        }),
		listeners:{
			beforeclose:{
				fn:function(){
				    resetform();
				    return false;
				}
			}
		},
        buttons: [{
           text: 'Verzenden',
		   id: 'verzendbtn',
		   tooltip:{
			   title:'Verzenden',
			   text:'Klik deze knop om het contactformulier te versturen'
		   },
		   handler  : function(){
			   contactname = Ext.getCmp('naamveld').getValue();
			   contactmail = Ext.getCmp('mailadresveld').getValue();
			   contactsubj = Ext.getCmp('onderwerpveld').getValue();
			   contactmsgs = Ext.getCmp('berichtveld').getValue();
			   captchacode = Ext.getCmp('code').getValue();
			   if (contactname == ' ') {
				   Ext.MessageBox.alert("Tri-Folio Melding","Uw naam ontbreekt.");
			   } else {
  			       if (contactmail == ' ') {
				       Ext.MessageBox.alert("Tri-Folio Melding","Uw email-adres ontbreekt.");
			       } else {
					   if (contactsubj == ' ') {
						   contactsubj = "(geen onderwerp)";
					   }
					   if (contactmsgs == ' ') {
						   contactmsgs = "(geen bericht)";
					   }
                       Ext.Ajax.request({
                           url: 'trimail.php',
				           method: 'POST',
						   params: {
							   code: captchacode,
						       naamveld: contactname,
							   mailadresveld: contactmail,
							   onderwerpveld: contactsubj,
							   berichtveld: contactmsgs
						   },
				           callback: function(options1,success1,response) {
                               resetform();
                               setTimeout("Ext.MessageBox.alert(\"Tri-Folio Melding\",\"Succesvol verzonden. Wij nemen zo spoeding mogelijk contact met u op.\");",1500);
				           }
                       });
				   }
			   }
		   }
       },{
           text: 'Annuleren',
		   id: 'cancelbtn',
		   tooltip: {
			   title:'Annuleren',
			   text:'Huidige ingave annuleren en een leeg formulier laden'
		   },
		   handler  : function(){
			   Ext.getCmp('rootpanel').getForm().getEl().dom.reset();
			   myContactWin.getEl().switchOff();
			   setTimeout("myContactWin.getEl().fadeIn()",1000);
		   }
       }]		
    });
	showWindow();
});

function showWindow(){
	//myContactWin.show();
	myContactWin.setPosition(580,190);
	Ext.get('captchapanel').dom.innerHTML = "<img id=\"imgcaptcha\" style=\"width:200px;height:50px;\" src=\"captcha/securimage_show.php?sid=<?php echo md5(uniqid(time())); ?>\">";
}

function resetform(){
    Ext.getCmp('rootpanel').getForm().getEl().dom.reset();
    myContactWin.getEl().switchOff();
    setTimeout("myContactWin.getEl().fadeIn()",1000);
}