var SampleDataStore;         // this will be our datastore
var PresidentsColumnModel;       // this will be our columnmodel
var PresidentListingEditorGrid;
var PresidentListingWindow;


Ext.onReady(function(){
  Ext.QuickTips.init();

Ext.apply(Ext.QuickTips.getQuickTip(), {
    maxWidth: 160,
    minWidth: 160,
    showDelay: 50,
	trackMouse: true,
	mouseOffset: [10, 10]
});

var qTip = new Ext.QuickTips.getQuickTip();

var showFunc = function(){
	var posOffX = null;
	var posOffY = null;

	var scrLeft = null;
	var scrTop = null;
	var scrRight = null;
	var scrBottom = null;

	var posx = null;
	var posy = null;
	var pos = null;
	
	var innerWidth = null;
	var innerHeight = null;
	
	scrLeft = Geometry.getHorizontalScroll();
	scrTop = Geometry.getVerticalScroll();
	scrRight = Geometry.getViewportWidth() + Geometry.getHorizontalScroll();
	scrBottom = Geometry.getViewportHeight() + Geometry.getVerticalScroll();

	pos = qTip.getPosition();
	posx = pos[0] - qTip.mouseOffset[0];
	posy = pos[1] - qTip.mouseOffset[1];
	
	innerWidth = qTip.getInnerWidth();
	innerHeight = qTip.getInnerHeight();
	
	posOffX = ((posx + innerWidth) < scrRight) ? 0 : (innerWidth * (-1));
	posOffY = ((posy - innerHeight) < scrTop) ? 20 : 0;

	qTip.mouseOffset = [posOffX+10, posOffY+10];
}

qTip.addListener({
	'show' : showFunc
});

SampleDataStore = new Ext.data.Store({
      id: ' SampleDataStore',
      proxy: new Ext.data.HttpProxy({
                url: 'data.php',      // File to connect to
                method: 'POST'
            }),
	  remoteSort: true,
      baseParams:{task: "LISTING"}, // this parameter asks for listing
      reader: new Ext.data.JsonReader({   // we tell the datastore where to get his data from
        root: 'results',
        totalProperty: 'total',
        id: 'id'
      },[ 
        {name: 'username', type: 'string', mapping: 'username'},
        {name: 'name', type: 'string', mapping: 'name'},
        {name: 'ish', type: 'string', mapping: 'ish'},
        {name: 'catName', type: 'string', mapping: 'catName'},
        {name: 'bname', type: 'string', mapping: 'bname'},
        {name: 'estimated_users_count', type: 'string', mapping: 'estimated_users_count'},
        {name: 'hardware', type: 'string', mapping: 'hardware'},
        {name: 'vm_hardware_storage_disk', type: 'string', mapping: 'vm_hardware_storage_disk'},
        {name: 'performance_average_cpu', type: 'string', mapping: 'performance_average_cpu'},
        {name: 'performance_maximum_cpu', type: 'string', mapping: 'performance_maximum_cpu'},
        {name: 'performance_average_memory', type: 'string', mapping: 'performance_average_memory'},
        {name: 'performance_maximum_memory', type: 'string', mapping: 'performance_maximum_memory'},
        {name: 'vote_column', type: 'string', mapping: 'vote_column'},
        {name: 'edit_column', type: 'string', mapping: 'edit_column'},
        {name: 'delete_column', type: 'string', mapping: 'delete_column'},
        {name: 'avgrate', type: 'string', mapping: 'avgrate'},
        {name: 'info_column', type: 'string', mapping: 'info_column'}
      ]),
      sortInfo:{field: 'avgrate', direction: "DESC"}
    });
//----------------------------------------------	
    var pagingBar = new Ext.PagingToolbar({
        pageSize: 15,
        store: SampleDataStore,
        displayInfo: true,
        displayMsg: 'Displaying records {0} - {1} of {2}',
        emptyMsg: "No records to display"
	
});

function ltrim(s_in) {
	var ptrn = /\s*((\S+\s*)*)/;
	return s_in.replace(ptrn, "$1");
}

function rtrim(s_in) {
	var ptrn = /((\s*\S+)*)\s*/;
	return s_in.replace(ptrn, "$1");
}

function trim(s_in) {
	return ltrim(rtrim(s_in));
}

function renderFoo(value, p, record){
	 var s = value;

	 re=/(<[^>]*>)|((&lt;)[^>]*(&gt;))/gi;
	 s = trim(s.replace(re,""));
 	 if (s!=""){
		p.attr = 'ext:qtip="'+s+'"';
	 }
     return s;
}

function renderFooComment(value, p, record){
	 var s = value;

	 re=/(<[^>]*>)|((&lt;)[^>]*(&gt;))/gi;
	 s = trim(s.replace(re,""));
 	 if (s!=""){
		p.attr = 'ext:qwidth="160" ext:qtip="' + s + '"';
	 }

     return s;
}

var user_name = "Name of the user created this configuration";
var name = "The configuration name";
var software_name = "Primary application that is runing inside this VM";
var version = "Software version";
var user_count="Number of users";
var hardware = "The name of a server and its model";
var host_memory = "Amount of server memory, Gb ";
var allocated_storage = "Ammount of allocated disk storage, Gb";
var allocated_cpu_aver = "Average consumption of the CPU's processing power.";
var allocated_cpu_max = "The maximum CPU value represents an absolute fixed<br> "+
"upper limit on the consumption of the CPU's processing power.";
var allocated_memory_aver = "Average amount of RAM allocated to the virtual appliance.";
var allocated_memory_max = "Maximum amount of RAM allocated to the virtual appliance.";
	
//----------------------------------------------	
	SampleColumnModel = new Ext.grid.ColumnModel(
    [
	 {
        header: 'User<br />name',
        readOnly: true,
        dataIndex: 'username',
        width: 45,
        hidden: false,
        renderer: renderFoo,
		tooltip:user_name
      },{
		header: 'Name',
        dataIndex: 'name',
        width: 70,
		readOnly: true,
        hidden: false,
        renderer: renderFoo,
		tooltip:name
      },{
        header: 'Software<br />Name',
        dataIndex: 'catName',
        width: 70,
		readOnly: true,
        hidden: false,
        renderer: renderFoo,
		tooltip:software_name
      },{
        header: 'Version',
        dataIndex: 'bname',
        width: 57,
		readOnly: true,
        hidden: false,
        renderer: renderFoo,
		tooltip:version
      },{
        header: 'User<br />Count',
        dataIndex: 'estimated_users_count',
        width: 60,
		readOnly: true,
        hidden: false,
        renderer: renderFoo,
		tooltip:user_count
      },{
        header: 'Hardware',
        dataIndex: 'hardware',
        width: 83,
		readOnly: true,
        hidden: false,
        renderer: renderFoo,
		tooltip:hardware
      },{
        header: 'Allocated<br />Storage,<br />Gb',
        dataIndex: 'vm_hardware_storage_disk',
        width: 52,
		readOnly: true,
        hidden: false,
		tooltip:allocated_storage
      },{
        header: 'Usage<br />CPU (aver.),<br />MHz',
        dataIndex: 'performance_average_cpu',
        width: 60,
		readOnly: true,
        hidden: false,
		tooltip: allocated_cpu_aver
      },{
        header: 'Usage<br />CPU(max.),<br />MHz',
        dataIndex: 'performance_maximum_cpu',
        width: 60,
		readOnly: true,
        hidden: false,
		tooltip:allocated_cpu_max
      },{
        header: 'Usage<br />Memory<br />aver.), Mb',
        dataIndex: 'performance_average_memory',
        width: 60,
		readOnly: true,
        hidden: false,
		tooltip: allocated_memory_aver
      },{
        header: 'Usage<br />Memory<br />(max.), Mb',
        dataIndex: 'performance_maximum_memory',
        width: 60,
		readOnly: true,
        hidden: false,
		tooltip: allocated_memory_max
      },{
        header: 'Comment',
        dataIndex: 'info_column',
        width: 70,
		readOnly: true,
		sortable: false, 
		menuDisabled:true,
        hidden: false,
		renderer: renderFooComment,
		tooltip:'Comment'
      },{
        header: 'Rating',
        readOnly: true,
        dataIndex: 'avgrate',
        width: 80,
		css:'height:29px;',
        hidden: false,
		readOnly: true,
		tooltip:'Rating'
      },{
        header: 'Voting',
        dataIndex: 'vote_column',
        width: 47,
		readOnly: true,
		sortable: false, 
		menuDisabled:true,
        hidden: false,
		tooltip:'Voting'
      },{
        header: 'Editing',
        dataIndex: 'edit_column',
        width: 43,
		readOnly: true,
		sortable: false, 
		menuDisabled:true,
        hidden: false,
		tooltip:'Editing'
      },{
        header: 'Deleting',
        dataIndex: 'delete_column',
        width: 47,
		readOnly: true,
		sortable: false, 
		menuDisabled:true,
        hidden: false,
		tooltip:'Deleting'
      }]
    );
	SampleColumnModel.defaultSortable= true;
	
	var gridView = new Ext.grid.GridView({ 
    getRowClass : function (row, index) { 
      var cls = ''; 
      var data = row.data; 
	  cls = 'default-row';
      switch (data.ish) { 
         case '1' : 
            cls = 'yellow-row'// highlight row yellow 
            break; 
      }//end switch 
      return cls; 
   } 
	});  //end gridView 
	
totalheight = 565;
if (Ext.isIE6){
	totalheight = 625;
}

	SampleGrid =  new Ext.grid.GridPanel({
	      id: ' SampleGrid',
		  view: gridView,
	      store: SampleDataStore,     // the datastore is defined here
	      cm: SampleColumnModel,      // the columnmodel is defined here
	  	  stripeRows: true,
		  width:970,
		  height:totalheight,
		 loadMask: true,
	     selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),

	      tbar: pagingBar
    });
	

  SampleGrid.render('tablediv');
  


});