Ext.onReady(function(){
    var win;
    var button = Ext.get('rightcolumn');

    Ext.QuickTips.init();

    
    var form_left="<div style='width:280px;height:180px;background-color:black;'>"+
					"<span style='position:absolute;top:10px;left:30px; letter-spacing:2px;color:white;font-weight:bold; font-size:1.1em;'>Contact Info</span>"+
					"<img src='images/contact.png' style='position:absolute;top:50px;left:10px;'/>"+
					"<span style='color:#C0C0C0;position:absolute;top:20px;left:80px;line-height:15px;'>"+
					"<br/><br/>Kenton Hankins<br/>9334 Cleveland Street<br/>Crown Point, IN 46307<br/>"+
					"219-718-8939<br/><br/>kentonhankins@gmail.com</span></div>";

	function close_contact()
	{
		win.close();
	};

	 function sendmail()
    {
    	var firstname = Ext.getCmp('first').getValue();
 	    var lastname = Ext.getCmp('last').getValue();
       	var emailadd = Ext.getCmp('email').getValue();
     	var companyinfo = Ext.getCmp('company').getValue();
    	var messageinfo= Ext.getCmp('message').getValue();
    	
    	Ext.Ajax.request({
   			url: 'portfolio/mail.php',
   			method:'post',
   			success: close_contact(),
   			params: { first: firstname,last:lastname,address:emailadd,comp:companyinfo,msg:messageinfo }
			});
    };
	
    button.on('click', function(){
        // create the window on the first click and reuse on subsequent clicks
        if(!win){
            win = new Ext.Window({
                id			: 'contact_form',
                width       : 600,
                height      : 400,
                modal 		: true,
                layout		:'fit',
                plain		: true,
                closeAction :'hide',
                items: [{
                	layout: 'column',
                	items: [{
                		column: .5,
                		layout: 'fit',
                		html:form_left
                		},{
			     		column: .5,
			     		layout:'form',
                		width:300,
                		height:150,
                		style: 'padding-top:20px',
                		items: [{
                		    xtype:'textfield',
                		    fieldLabel: 'First Name',
                		    name: 'first',
                		    id: 'first',
                		    anchor:'95%'
                			},{
                		    xtype:'textfield',
                		    fieldLabel: 'Last Name',
                		    name: 'last',
                		    id:'last',
                		    anchor:'95%'
                  			},{
                		    xtype:'textfield',
                		    fieldLabel: 'Email',
                		    name: 'email',
                		    vtype:'email',
                		    id:'email',
                		    anchor:'95%'
                			}, {
                		    xtype:'textfield',
                		    fieldLabel: 'Company',
                		    name: 'company',
                		    anchor:'95%',
                		    id:'company'
                			}]
                   		}]
                },
                {
	            xtype:'htmleditor',
	            id:'message',
	            fieldLabel:'Type your message',
	            style: 'padding-top:180px',
	            name: 'message',
	            height: 175,
	            width: 582,
	            anchor:'95%'
	        	}],
	
	        buttons: [{
	            text: 'Send',
	           	handler: function(){sendmail();}
	        },{
	            text: 'Cancel',
	            handler: function(){close_contact();}
	        }]

            });
        }
        win.show();
    });
    
});