function gearsGetData() {
  var gdb = google.gears.factory.create('beta.database', '1.0');
  gdb.open('cpanel_new.db');
  var results = gdb.execute('select * from cpanel');
  var rows = new Array();
  var j = 0;
  while (results.isValidRow()) {
	rows[j] = new Array();
	for (var i = 0; i < results.fieldCount(); i++) {
	  // get the fieldNames and their values
	  rows[j][results.fieldName(i)] = results.field(i);
	}
	j++;
	results.next();
  }
  gdb.close();

  return rows;
}

function gearsExecuteQuery(sql) {
  var gdb = google.gears.factory.create('beta.database', '1.0');
  gdb.open('cpanel_new.db');
  var results = gdb.execute(sql);
  gdb.close();
}

function gearsInit() {
  var gdb = google.gears.factory.create('beta.database', '1.0');
  gdb.open('cpanel_new.db');
  gdb.execute('CREATE TABLE IF NOT EXISTS cpanel (domain text, diskspace text, email text, ip text, disklimit text, owner text, partition text, startdate text, suspended text, theme text, plan text, user text)');
  var dbCheck = gdb.execute('SELECT * FROM cpanel LIMIT 0,1');
  var result = false;
  if (dbCheck.isValidRow()) result = true;
  gdb.close();
  
  return result;
}

function domainTreeGetJson(rows) {
  
  var domainTreeJson = new Array();
  for (var i = 0; i < rows.length; i++) {
  	domainTreeJson[i] = new Ext.tree.TreeNode();
  	domainTreeJson[i].text = rows[i]['domain'];
  	domainTreeJson[i].id = i;
  	domainTreeJson[i].leaf = false;
  	domainTreeJson[i].cls = 'folder';
  	domainTreeJson[i].children = new Array();
//  	domainTreeJson[i].children[0] = new Ext.tree.TreeNode();
//  	domainTreeJson[i].children[0].text = 'Account Management';
//  	domainTreeJson[i].children[0].id = rows[i]['user'] + '_MANAGE';;
//  	domainTreeJson[i].children[0].leaf = true;
//  	domainTreeJson[i].children[0].cls = 'file';
  	domainTreeJson[i].children[0] = new Ext.tree.TreeNode();
  	domainTreeJson[i].children[0].text = 'cPanel';
  	domainTreeJson[i].children[0].id = rows[i]['user'] + '_CPANEL';;
  	domainTreeJson[i].children[0].leaf = true;
  	domainTreeJson[i].children[0].cls = 'file';

  	// check if user matches owner -> reseller account
  	if (rows[i]['user'] == rows[i]['owner']) {
  		domainTreeJson[i].children[1] = new Ext.tree.TreeNode();
  		domainTreeJson[i].children[1].text = 'WHM';
  		domainTreeJson[i].children[1].id = rows[i]['user'] + '_WHM';;
  		domainTreeJson[i].children[1].leaf = true;
  		domainTreeJson[i].children[1].cls = 'file';
  	}
  }

  return domainTreeJson;
}

function usernameTreeGetJson(rows) {
  
  var usernameTreeJson = new Array();
  for (var i = 0; i < rows.length; i++) {
//  	for (var n in rows[i]) console.log(n + " = " + rows[i][n]);
  	usernameTreeJson[i] = new Ext.tree.TreeNode();
  	usernameTreeJson[i].text = rows[i]['user'];
  	usernameTreeJson[i].domain = rows[i]['domain'];
  	usernameTreeJson[i].id = i;
  	usernameTreeJson[i].leaf = false;
  	usernameTreeJson[i].cls = 'folder';
  	usernameTreeJson[i].children = new Array();
//  	usernameTreeJson[i].children[0] = new Ext.tree.TreeNode();
//  	usernameTreeJson[i].children[0].text = 'Account Management';
//  	usernameTreeJson[i].children[0].id = rows[i]['user'] + '_MANAGE';
//  	usernameTreeJson[i].children[0].leaf = true;
//  	usernameTreeJson[i].children[0].cls = 'file';
  	usernameTreeJson[i].children[0] = new Ext.tree.TreeNode();
  	usernameTreeJson[i].children[0].text = 'cPanel';
  	usernameTreeJson[i].children[0].id = rows[i]['user'] + '_CPANEL';;
  	usernameTreeJson[i].children[0].leaf = true;
  	usernameTreeJson[i].children[0].cls = 'file';

  	// check if user matches owner -> reseller account
  	if (rows[i]['user'] == rows[i]['owner']) {
  		usernameTreeJson[i].children[1] = new Ext.tree.TreeNode();
  		usernameTreeJson[i].children[1].text = 'WHM';
  		usernameTreeJson[i].children[1].id = rows[i]['user'] + '_WHM';;
  		usernameTreeJson[i].children[1].leaf = true;
  		usernameTreeJson[i].children[1].cls = 'file';
  	}
  }

  return usernameTreeJson;
}

function packageTreeGetJson(rows) {
  
  var tmpJson = new Array();
  var arrayCount = 0;
  for (var i = 0; i < rows.length; i++) {
  	if (tmpJson[rows[i]['plan']] == undefined) {
  		tmpJson[rows[i]['plan']] = new Array();
  		tmpJson[rows[i]['plan']][0] = rows[i];
  		// array.length only works with integer keys, so we need to count manually
  		arrayCount++;
  	} else {
  		tmpJson[rows[i]['plan']][tmpJson[rows[i]['plan']].length] = rows[i];
  	}
  }

  var packageTreeJson = new Array();
  
  var packageName = '';
  var packageCounter = 0;
  for (var n in tmpJson) if (n != 'remove' && n != 'indexOf') {
	packageTreeJson[packageCounter] = new Ext.tree.TreeNode();
  	packageTreeJson[packageCounter].text = n;
  	packageTreeJson[packageCounter].id = packageCounter;
  	packageTreeJson[packageCounter].leaf = false;
  	packageTreeJson[packageCounter].cls = 'folder';
  	packageTreeJson[packageCounter].children = new Array();
  	for (var i = 0; i < tmpJson[n].length; i++) {
  		packageTreeJson[packageCounter].children[i] = new Ext.tree.TreeNode();
  		packageTreeJson[packageCounter].children[i].text = tmpJson[n][i]['domain'];
  		packageTreeJson[packageCounter].children[i].id = packageCounter + '0000' + i;
  		packageTreeJson[packageCounter].children[i].leaf = true;
	 		packageTreeJson[packageCounter].children[i].cls = 'file';
  	}
  	packageCounter++;
  }

  return packageTreeJson;
}

var cp;
var win;

  // save data in db
  function syncData() {
	  	var initStore = new Ext.data.JsonStore({
	    	url: 'nExtPanelSync.php',
	    	root: 'results',
	    	fields: ['disklimit', 'diskused', 'domain', 'email', 'ip', 'owner', 'partition', 'plan', 'startdate', 'suspended', 'theme', 'user'],
	    	listeners: {
	    		load: function() {
//  	  			store.data.items[0].data
	    			gearsExecuteQuery('DELETE FROM cpanel');
	    			for (var i = 0; i < initStore.data.items.length; i++) {
//						console.log(store.data.items[i].data['user']);
	    				gearsExecuteQuery("INSERT INTO cpanel ('disklimit', 'diskspace', 'domain', 'email', 'ip', 'owner', 'partition', 'plan', 'startdate', 'suspended', 'theme', 'user') VALUES ( '" + initStore.data.items[i].data['disklimit'] + "', '" + initStore.data.items[i].data['diskused'] + "', '" + initStore.data.items[i].data['domain'] + "', '" + initStore.data.items[i].data['email'] + "', '" + initStore.data.items[i].data['ip'] + "', '" + initStore.data.items[i].data['owner'] + "', '" + initStore.data.items[i].data['partition'] + "', '" + initStore.data.items[i].data['plan'] + "', '" + initStore.data.items[i].data['startdate'] + "', '" + initStore.data.items[i].data['suspended'] + "', '" + initStore.data.items[i].data['theme'] + "' , '" + initStore.data.items[i].data['user'] + "')");
	    			}
					// reload page
	    			window.location.reload();
	    		}
	    	}
		});
		initStore.load();
  }
    
  
  
  function initLoginWindow()
  {
	    var login = new Ext.FormPanel({
	    	 
	      	labelWidth: 130,
	      	url: 'login.php', 
	      	frame: true, 
	      	title: 'Please Login', 
	      	width: 250, 
	      	padding: 200, 
	      	defaultType: 'textfield',
	      	monitorValid: true,
	    	items:[{
	            fieldLabel: 'WHM Domain',
	            id: 'whmDomain', 
	            name: 'whmDomain',
	            value: cp.get('whmDomain'),
	            allowBlank: false 
	        },{ 
	            fieldLabel: 'WHM Username', 
	            id: 'whmUsername', 
	            name: 'whmUsername', 
	            value: cp.get('whmUsername'),
	            allowBlank: false 
	        },{ 
	            fieldLabel: 'WHM Password', 
	            id: 'whmPassword', 
	            name: 'whmPassword', 
	            inputType: 'password' 
	        },{ 
	            fieldLabel: 'WHM Access Key', 
	            id: 'whmKey', 
	            name: 'whmKey', 
	            inputType: 'password'             
	        }],
	    	buttons:[{
	            text: 'Login',
	            formBind: true,	 
	            handler: function(){ 
	                login.getForm().submit({ 
	                    method: 'POST', 
	                    waitTitle: 'Connecting', 
	                    waitMsg: 'Sending data...',
	                    success: function(){
				   					cp.set('whmDomain', Ext.get('whmDomain').getValue());
				   					cp.set('whmUsername', Ext.get('whmUsername').getValue());
				   					win.hide();
				   					syncData();
	                    },
	                    failure: function(form, action){
	                        if(action.failureType == 'server'){
	                            obj = Ext.util.JSON.decode(action.response.responseText);
	                            Ext.Msg.alert('Login Failed!', obj.errors.reason); 
	                        } else { 
	                            Ext.Msg.alert('Warning!', 'Authentication server is unreachable : ' + action.response.responseText); 
	                        } 
	                    } 
	                }); 
	            } 
	        }] 
		});
	
	 	win = new Ext.Window({
	    	layout: 'fit',
	    	width: 300,
	    	height: 200,
	    	closable: true,
	    	resizable: false,
	    	plain: true,
	    	items: [login],
	    	draggable: false,
	    	modal: true
		});
		win.show();
  }


Ext.onReady(function(){

  cp = new Ext.state.CookieProvider();
  Ext.state.Manager.setProvider(cp);

  
  // get data from gearsDB
  if (gearsInit() == false) {
  	// no data in db yet -> sync with cpanel
  	// get whm login details
	initLoginWindow();
  } else {

  var gearsData = gearsGetData();
  
  var viewport = new Ext.Viewport({
    layout:'border',
    items:[
      new Ext.BoxComponent({ // raw
        region: 'north',
        el: 'topComponent',
        height: 50
      }),{
        region:'south',
        contentEl: 'statusComponent',
        height: 50,
        split: false,
        minSize: 60,
        maxSize: 70,
        title: 'StatusBar',
        margins: '0 0 0 0'
      }, 
        new Ext.TabPanel({
        	header: true,
        	margins: '0 3 3 3',
        	title: 'Finder',
		  	region: 'west',
		  	deferredRender: false,
		  	activeTab: 0,
		  	width: 230,
		  	minWidth: 230,
		  	maxWidth: 300,
		  	plain: true,
		  	items: [{
		  		contentEl: 'west1',
		  		title: 'Domains',
		  		autoScroll: true
		  	}, {
		  		contentEl: 'west2',
		  		title: 'Usernames',
		  		autoScroll: true
		  	}, {
		  		contentEl: 'west3',
		  		title: 'Packages',
		  		autoScroll: true
		  	}]
  	  }), {
        region:'center',
        contentEl: 'centerComponent',
        id: 'centerBox',
        split: true,
        minSize: 100,
        maxSize: 200,
        title: 'Domain &amp; Account Management',
        margins: '0 3 3 3'
      }
    ]
  });
  
  var domainTreeJson = domainTreeGetJson(gearsData);
  
  var domainTree = new Ext.tree.TreePanel({
  	border: false,
  	loader: new Ext.tree.TreeLoader(),
  	useArrows: true,
  	autoScroll: true,
  	animate: true,
  	enableDD: false,
  	ddScroll: true,
  	height: 400,
  	containerScroll: true
  });
  
  function treeClick(e)
	{
		// check the clicked TreeNode is a 'leaf' (an element, not a folder)
		if (e.leaf)
		{
			// check if selected tab already exists & set it as activeTab if it does
			if (!Ext.get(e.id))
			{
				
				if (e.id.slice(e.id.indexOf('_WHM'), e.id.length) == "_WHM")
				{
			    	var clickedTab = new Ext.Panel({
						id: e.id, // username is unique on server, so safe to use as element ID
						title: e.parentNode.text + " - WHM", // use the parent nodes text => accounts domain name 
						html: '<iframe src="http://' + e.parentNode.text + ':2086/" width="100%" height="100%" frameborder="0"></iframe>',
						closable: true
					});
				}
				else if (e.id.slice(e.id.indexOf('_CPANEL'), e.id.length) == "_CPANEL")
				{
			    	var clickedTab = new Ext.Panel({
						id: e.id, // username is unique on server, so safe to use as element ID
						title: e.parentNode.text + " - CPanel", // use the parent nodes text => accounts domain name 
						html: '<iframe src="http://' + e.parentNode.text + ':2082/" width="100%" height="100%" frameborder="0"></iframe>',
						closable: true
					});
				}
				else
				{
			    	var clickedTab = new Ext.Panel({
						id: e.id, // username is unique on server, so safe to use as element ID
						title: e.parentNode.text + " - Management", // use the parent nodes text => accounts domain name 
						html: 'Account Management',
						closable: true
					});
				}
				centerTabs.add(clickedTab).show();
				
	
			} else {
				// make existing tab active one
				centerTabs.setActiveTab(e.id);
			}
		}
	}
  domainTree.on('click', treeClick);
  
  
  var domainTreeRoot = new Ext.tree.AsyncTreeNode({
	text: 'My Domains',
	draggable: false,
	id: 'source',
	children: domainTreeJson
  });

  domainTree.setRootNode(domainTreeRoot);
  domainTree.render('domainTree');
  domainTree.getRootNode().expand();
  
  
  var usernameTreeJson = usernameTreeGetJson(gearsData);
  
  var usernameTree = new Ext.tree.TreePanel({
  	border: false,
  	loader: new Ext.tree.TreeLoader(),
  	useArrows: true,
  	autoScroll: true,
  	animate: true,
  	enableDD: false,
  	ddScroll: true,
  	height: 400,
  	containerScroll: true
  });
  
  
  function usernameClick(e)
	{
		// check the clicked TreeNode is a 'leaf' (an element, not a folder)
		if (e.leaf)
		{
			// check if selected tab already exists & set it as activeTab if it does
			if (!Ext.get(e.id))
			{
				
				if (e.id.slice(e.id.indexOf('_WHM'), e.id.length) == "_WHM")
				{
			    	var clickedTab = new Ext.Panel({
						id: e.id, // username is unique on server, so safe to use as element ID
						title: e.parentNode.attributes.domain + " - WHM", // use the parent nodes text => accounts domain name 
						html: '<iframe src="http://' + e.parentNode.attributes.domain + ':2086/" width="100%" height="100%" frameborder="0"></iframe>',
						closable: true
					});
				}
				else if (e.id.slice(e.id.indexOf('_CPANEL'), e.id.length) == "_CPANEL")
				{
			    	var clickedTab = new Ext.Panel({
						id: e.id, // username is unique on server, so safe to use as element ID
						title: e.parentNode.attributes.domain + " - CPanel", // use the parent nodes text => accounts domain name 
						html: '<iframe src="http://' + e.parentNode.attributes.domain + ':2082/" width="100%" height="100%" frameborder="0"></iframe>',
						closable: true
					});
				}
				else
				{
			    	var clickedTab = new Ext.Panel({
						id: e.id, // username is unique on server, so safe to use as element ID
						title: e.parentNode.attributes.domain + " - Management", // use the parent nodes text => accounts domain name 
						html: 'Account Management',
						closable: true
					});
				}
				centerTabs.add(clickedTab).show();
				
	
			} else {
				// make existing tab active one
				centerTabs.setActiveTab(e.id);
			}
		}
	}
  usernameTree.on('click', usernameClick);
   
  var usernameTreeRoot = new Ext.tree.AsyncTreeNode({
	text: 'My Accounts',
	draggable: false,
	id: 'source',
	children: usernameTreeJson
  });

  usernameTree.setRootNode(usernameTreeRoot);
  usernameTree.render('usernameTree');
  usernameTree.getRootNode().expand();
  
  var packageTreeJson = packageTreeGetJson(gearsData);
  
  var packageTree = new Ext.tree.TreePanel({
  	border: false,
  	loader: new Ext.tree.TreeLoader(),
  	useArrows: true,
  	autoScroll: true,
  	animate: true,
  	enableDD: false,
  	ddScroll: true,
  	height: 400,
  	containerScroll: true
  });

  function packageClick(e) {
	// check the clicked TreeNode is a 'leaf' (an element, not a folder)
	if (e.leaf)
	{
		// check if selected tab already exists & set it as activeTab if it does
		if (!Ext.get(e.id))
		{
			var clickedTab = new Ext.Panel({
				id: e.id, // username is unique on server, so safe to use as element ID
				title: e.text, // use the parent nodes text => accounts domain name 
				html: '<iframe src="http://' + e.text + '" width="100%" height="100%" frameborder="0"></iframe>',
				closable: true
			});
			centerTabs.add(clickedTab).show();
		} else {
			// make existing tab active one
			centerTabs.setActiveTab(e.id);
		}
	}
  }
  packageTree.on('click', packageClick);

  var packageTreeRoot = new Ext.tree.AsyncTreeNode({
	text: 'My Packages',
	draggable: false,
	id: 'source',
	children: packageTreeJson
  });

  packageTree.setRootNode(packageTreeRoot);
  packageTree.render('packageTree');
  packageTree.getRootNode().expand();

  
  var centerTabs = new Ext.TabPanel({
    renderTo: 'centerTabComponent',
    defaults: {autoScroll: true},
    activeTab: 0,
    height: (Ext.get('centerBox').getHeight() - 26),
    enableTabScroll: true,
    items: [{
        title: 'Account List',
        id: 'accountListTab',
        contentEl: 'centerTabAccountList'
    }]
  });
  
  var store;
  
// **************************************************************************************************************************
  
var DataStore;	
var ListingEditorGrid;	
function initGrid()
{
	DataStore = new Ext.data.Store({
		id: 'DataStore',
      	proxy: new Ext.data.HttpProxy({
      		url: 'ajax.php',
            method: 'GET'
        }),
        baseParams: { task: "LISTING" },
        reader: new Ext.data.JsonReader({
        	root: 'images',
        	totalProperty: 'total',
        	id: 'id'
      	},[  
        	{ name: 'Domain', type: 'string', mapping: 'domain' },
        	{ name: 'Quota', type: 'int', mapping: 'diskspace' },
        	{ name: 'Email', type: 'string', mapping: 'email' },
        	{ name: 'Ip', type: 'string', mapping: 'ip' },
        	{ name: 'Disklimit', type: 'string', mapping: 'disklimit' },
        	{ name: 'Owner', type: 'string', mapping: 'owner' },
        	{ name: 'Partition', type: 'string', mapping: 'partition' },
        	{ name: 'Startdate', type: 'string', mapping: 'startdate' },
        	{ name: 'Suspended', type: 'string', mapping: 'suspended' },
        	{ name: 'Theme', type: 'string', mapping: 'theme' },
        	{ name: 'Plan', type: 'string', mapping: 'plan' },
        	{ name: 'User', type: 'string', mapping: 'user' }
      	]),
    	sortInfo:{ field: 'Domain', direction: "ASC" }
    });

    function renderYesNo(val){
        if(val == 'yes'){
            return '<span style="color:red;">' + val + '</span>';
        return val;
     }};
    
	var MyColumnModel = new Ext.grid.ColumnModel(
    [{
        header: 'Domain',
        readOnly: true,
        dataIndex: 'Domain',
        width: 150,
        hidden: false
      },{
        header: 'Quota',
        dataIndex: 'Quota',
        width: 30
      },{
        header: 'Email',
        dataIndex: 'Email',
        width: 150,
        editor: new Ext.form.TextField({
          allowBlank: false,
          maxLength: 20,
          maskRe: /([a-zA-Z0-9\s]+)$/
          })
      },{
        header: 'IP',
        readOnly: true,
        dataIndex: 'Ip',
        width: 100,
        hidden: true
      },{
        header: 'Disklimit',
        readOnly: true,
        dataIndex: 'Disklimit',
        width: 30,
        hidden: true
      },{
        header: 'Owner',
        readOnly: true,
        dataIndex: 'Owner',
        width: 50,
        hidden: true
      },{
        header: 'Partition',
        readOnly: true,
        dataIndex: 'Partition',
        width: 50,
        hidden: true
      },{
        header: 'Startdate',
        readOnly: true,
        dataIndex: 'Startdate',
        width: 100,
        hidden: true
      },{
        header: 'Suspended',
        readOnly: true,
        dataIndex: 'Suspended',
        renderer: renderYesNo,
        width: 30,
        hidden: true
      },{
        header: 'Theme',
        readOnly: true,
        dataIndex: 'Theme',
        width: 30,
        hidden: true
      },{
        header: 'Plan',
        dataIndex: 'Plan',
        width: 100,
        readOnly: true
      },{
        header: 'User',
        dataIndex: 'User',
        width: 150,
        readOnly: true
      }]
    );
    MyColumnModel.defaultSortable= true;

    // add grid to centerTabAccountList tab
	ListingEditorGrid =  new Ext.grid.GridPanel({
		id: 'ListingEditorGrid',
      	store: DataStore,
      	cm: MyColumnModel,
      	enableColLock: false,
      	autoHeight: true,
      	width: (Ext.get('centerBox').getWidth() - 5),
      	viewConfig: {
      		autoFill: true,
      		forceFit: true
      	},
      	frame: true,
      	stripeRows: true,
		bbar: new Ext.StatusBar({
            id: 'basic-statusbar',
	        items: [{
	            text: 'Sync Data',
	            handler: function() {
	            	initLoginWindow();
	            }
	        }]
        })
      	
    });
    
    ListingEditorGrid.render(Ext.get('centerTabAccountList'));

}
	
	initGrid();
  
	var testData = new Array();
	testData['images'] = gearsData;
    DataStore.loadData(testData);
  }  
});