Ext.onReady(function(){
    // second tabs built from JS
	  // create the Data Store
var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Loading..."});
myMask.show();

var htmlFlex = '<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="750" HEIGHT="400" id="FC2Column"  ALIGN="center"><PARAM NAME=movie VALUE="http://www.v-tadawul.com/stocks-info/FC2MSArea.swf?dataUrl=http://www.v-tadawul.com/scripts/tasichart__.php"><PARAM NAME=quality VALUE=high><PARAM NAME=bgcolor VALUE=#FFFFFF><EMBED src="http://www.v-tadawul.com/stocks-info/FC2MSArea.swf?dataUrl=http://www.v-tadawul.com/scripts/tasichart__.php" quality=high bgcolor=#FFFFFF WIDTH="750" HEIGHT="400" NAME="FC2Column" ALIGN="center" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED></OBJECT>';
            
var uploader =     new Ext.Panel(
{
                        html:htmlFlex,
                        bodyStyle:'background-color:#FFFFFF;align:center;',
				        plain:true,
                        border:false
                        //height:200
 });
/*
var sectors_store = new Ext.data.Store({
        // load using HTTP
	proxy: new Ext.data.HttpProxy({         
		//where to retrieve data                
		url: '/scripts/sectors.php', //url to data object (server side script)
		method: 'POST'
	}),   
        // the return will be XML, so lets set up a reader
        reader: new Ext.data.XmlReader({
               // records will have an "Item" tag
               record: 'Item',
               totalRecords: '@total'
           }, [
               // set up the fields mapping into the xml doc
               // The first needs mapping, the others are very basic
               {name: 'SectorID'},
               {name: 'SectorName'}
          ])
    });
 
 var combo = new Ext.form.ComboBox({
        store: sectors_store,
         id: 'sectors',
		name: 'sectors',
    fieldLabel: 'Sectors',
           displayField: 'SectorName',
           valueField: 'SectorID',
    mode: 'local',
    width: 200,
    editable: false,
    emptyText: 'Select a Sector',
    triggerAction: 'all',
    renderTo: 'tasi_tabs'
 });
 sectors_store.load();
*/

var detailed_store = new Ext.data.Store({
        // load using HTTP
	proxy: new Ext.data.HttpProxy({         
		//where to retrieve data                
		url: '/scripts/detailed.php', //url to data object (server side script)
		method: 'POST'
	}),   
        // the return will be XML, so lets set up a reader
        reader: new Ext.data.XmlReader({
               // records will have an "Item" tag
               record: 'Item',
               totalRecords: '@total'
           }, [
               // set up the fields mapping into the xml doc
               // The first needs mapping, the others are very basic
               {name: 'Close'},
               {name: 'Last'},
               {name: 'Open'}, 
			   {name: 'High'},
			   {name:  'Low'},
			   {name:  'Last'},
			   {name:  'Change'},
			   {name:  'ChangePer'},
			   {name:  'TotalVolume'},
   			   {name:  'Transactions'},
			   {name:  'Trades'},
				{name:  'TradeSize'}


           ])
    });
  
    // create the grid
    var detailed_grid = new Ext.grid.GridPanel({
        store: detailed_store,
        columns: [
			{header: "<b>متوسط كمية الصفقة</b>", width: 120, dataIndex: 'TradeSize', sortable: false,align: 'right'},
       		{header: "<b>عدد الصفقات</b>", width: 80, dataIndex: 'Trades', sortable: false,align: 'right'},
            {header: "<b>الأسهم المتداولة</b> ", width: 100, dataIndex: 'Transactions', sortable: false,align: 'right'},
           {header: "<b>القيمة المتداولة</b>", width: 100, dataIndex: 'TotalVolume', sortable: false,align: 'right'},
            {header: "<b>%نسبة التغير</b>", width: 60, dataIndex: 'ChangePer', sortable: false,align: 'right'},
		    {header: "<b>التغير</b>", width: 60, dataIndex: 'Change', sortable: false,align: 'right'},
            {header: "<b>آخر</b>", width: 60, dataIndex: 'Last', sortable: false,align: 'right'},
             {header: "<b>ادني</b>", width: 60, dataIndex: 'Low', sortable: false,align: 'right'},
            {header: "<b>أعلى</b>", width: 60, dataIndex: 'High', sortable: false,align: 'right'},
            {header: "<b> إفتتاح</b>" , width: 60, dataIndex: 'Open', sortable: false,align: 'right'},
            {header: "<b>إغلاق سابق</b>", width: 60, dataIndex: 'Close', sortable: false,align: 'right'}
        ],
		tbar:[{
            tooltip:'Refresh',
            iconCls:'refresh',
			handler: loadStore
        }],
        width:850,
        loadMask: true,
        enableColumnMove: false,
		enableColumnResize : false,
		enableHdMenu: false,
		enableColumnHide: false, 
						enableColumnResize : false, 

        autoHeight:true
    });


   function loadStore(){
       detailed_store.load();
	   //alert("hello");
	};


    detailed_store.load();
	myMask.hide();


	var chart_store = new Ext.data.Store({
        // load using HTTP
	proxy: new Ext.data.HttpProxy({         
		//where to retrieve data                
		url: '/scripts/detailed.php', //url to data object (server side script)
		method: 'POST'
	}),   
        // the return will be XML, so lets set up a reader
        reader: new Ext.data.XmlReader({
               // records will have an "Item" tag
               record: 'Item',
               totalRecords: '@total'
           }, [
               // set up the fields mapping into the xml doc
               // The first needs mapping, the others are very basic
               {name: 'Close'},
               {name: 'Last'},
               {name: 'Open'}, 
			   {name: 'High'},
			   {name:  'Low'},
			   {name:  'Last'},
			   {name:  'Change'},
			   {name:  'ChangePer'},
			   {name:  'TotalVolume'},
   			   {name:  'Transactions'},
  {name:  'Trades'},
				{name:  'TradeSize'}
           ])
    });
  
    // create the grid
    var chart_grid = new Ext.grid.GridPanel({
        store: chart_store,
        columns: [
       	{header: "<b>متوسط كمية الصفقة</b>", width: 120, dataIndex: 'TradeSize', sortable: false,align: 'right'},
       		{header: "<b>عدد الصفقات</b>", width: 80, dataIndex: 'Trades', sortable: false,align: 'right'},
            {header: "<b>الأسهم المتداولة</b> ", width: 100, dataIndex: 'Transactions', sortable: false,align: 'right'},
           {header: "<b>القيمة المتداولة</b>", width: 100, dataIndex: 'TotalVolume', sortable: false,align: 'right'},
            {header: "<b>%نسبة التغير</b>", width: 60, dataIndex: 'ChangePer', sortable: false,align: 'right'},
		    {header: "<b>التغير</b>", width: 60, dataIndex: 'Change', sortable: false,align: 'right'},
            {header: "<b>آخر</b>", width: 60, dataIndex: 'Last', sortable: false,align: 'right'},
             {header: "<b>ادني</b>", width: 60, dataIndex: 'Low', sortable: false,align: 'right'},
            {header: "<b>أعلى</b>", width: 60, dataIndex: 'High', sortable: false,align: 'right'},
            {header: "<b> إفتتاح</b>" , width: 60, dataIndex: 'Open', sortable: false,align: 'right'},
            {header: "<b>إغلاق سابق</b>", width: 60, dataIndex: 'Close', sortable: false,align: 'right'}
        ],
		tbar:[{
            tooltip:'Refresh',
            iconCls:'refresh',
			handler: loadChartStore
        }],
        width:855,
				       loadMask: true,
 enableColumnMove: false,
		enableColumnResize : false,
		enableHdMenu: false,
		enableColumnHide: false, 
						enableColumnResize : false, 
        autoHeight:true
    });


   function loadChartStore(){
	   	   tasiinfo.doLayout();
//alert("hello 2");
       chart_store.load();
	   
	   tasiinfo.doLayout();

	};


    detailed_store.load();

var week_store = new Ext.data.Store({
        // load using HTTP
	proxy: new Ext.data.HttpProxy({         
		//where to retrieve data                
		url: '/scripts/perf.php', //url to data object (server side script)
		method: 'POST'
	}),   
        // the return will be XML, so lets set up a reader
        reader: new Ext.data.XmlReader({
               // records will have an "Item" tag
               record: 'Item',
               totalRecords: '@total'
           }, [
               // set up the fields mapping into the xml doc
               // The first needs mapping, the others are very basic
               {name: 'Last'},
               {name: 'Open'}, 
			   {name: 'High'},
			   {name:  'Low'},
			   {name:  'Last'},
			   {name:  'Change'},
			   {name:  'ChangePer'},
			   {name:  'TotalVolume'},
   			   {name:  'Transactions'},
			   {name:  'Trades'},
			  {name:  'Date'}


           ])
    });
  
 
    // create the grid
    var  week_grid = new Ext.grid.GridPanel({
        store: week_store,
        columns: [
            {header: "<b>أقل سعر</b>", width: 70, dataIndex: 'Low', sortable: false,align: 'right'},
            {header: "<b>أعلى سعر</b>", width: 70, dataIndex: 'High', sortable: false,align: 'right'},
            {header: "<b>قيمة المؤشر في بداية الفترة</b>" , width: 150, dataIndex: 'Open', sortable: false,align: 'right'},
            {header: "<b>القيمة المتداولة</b>", width: 100, dataIndex: 'TotalVolume', sortable: false,align: 'right'},
            {header: "<b>%نسبة التغير</b>", width: 80, dataIndex: 'ChangePer', sortable: false,align: 'right'},
		    {header: "<b>التغير</b>", width: 70, dataIndex: 'Change', sortable: false,align: 'right'},
            {header: "<b>قيمة المؤشر في نهاية الفترة</b>", width: 150, dataIndex: 'Last', sortable: false,align: 'right'},
			{header: "<b>تاريخ</b>", width: 75, dataIndex: 'Date', sortable: false,align: 'right'}
		],
		tbar:[{
            tooltip:'Go',
            iconCls:'refresh',
			handler: loadWeekStore
        }],
        width:780,
				       loadMask: true,
 enableColumnMove: false,
		enableColumnResize : false,
		enableHdMenu: false,
		enableColumnHide: false, 
						enableColumnResize : false, 

        autoHeight:true
    });

function loadWeekStore(){
       var endDate = new Date();
       endDate.setDate((endDate.getDate()-1));
       endDate =  endDate.format('Y-m-d'); 
	   var startDate = new Date();
       startDate.setDate((startDate.getDate()-6));
       startDate =  startDate.format('Y-m-d');
	  
	   tasiinfo.doLayout();
	  //  week_store.load();
	    week_store.load({params:{startDate:startDate, endDate:endDate}});
	  
	   tasiinfo.doLayout();

	};

var performance_store = new Ext.data.Store({
        // load using HTTP
	proxy: new Ext.data.HttpProxy({         
		//where to retrieve data                
		url: '/scripts/perf.php', //url to data object (server side script)
		method: 'POST'
	}),   
        // the return will be XML, so lets set up a reader
        reader: new Ext.data.XmlReader({
               // records will have an "Item" tag
               record: 'Item',
               totalRecords: '@total'
           }, [
               // set up the fields mapping into the xml doc
               // The first needs mapping, the others are very basic
               {name: 'Close'},
               {name: 'Open'}, 
			   {name: 'High'},
			   {name:  'Low'},
			   {name:  'Last'},
			   {name:  'Change'},
			   {name:  'ChangePer'},
			   {name:  'TotalVolume'},
   			   {name:  'Transactions'},
			   {name:  'Trades'},
				  {name:  'Date'}

           ])
    });
  
       var endDate = new Date();
       endDate.setDate((endDate.getDate()-1));
       endDate =  endDate.format('Y-m-d');   var prevDate = new Date();
  prevDate.setMonth((prevDate.getMonth()-1));
  
  var dateFrom = new Ext.form.DateField({
        id: 'StartDate',
        width: 80,
		fieldLabel : 'Start Date', 
        value: prevDate,
        selectOnFocus: false,
        allowBlank: false
    });
 var dateTo = new Ext.form.DateField({
        id: 'EndDate',
        width: 80,
		fieldLabel : 'End Date', 
        value: endDate,
        selectOnFocus: false,
        allowBlank: false
    });

    // create the grid
    var performance_grid = new Ext.grid.GridPanel({
        store: performance_store,
        columns: [
       		{header: "<b>عدد الصفقات</b>", width: 80, dataIndex: 'Trades', sortable: false,align: 'right'},
            {header: "<b>الأسهم المتداولة</b> ", width: 150, dataIndex: 'Transactions', sortable: false,align: 'right'},
            {header: "<b>القيمة المتداولة</b>", width: 150, dataIndex: 'TotalVolume', sortable: false,align: 'right'},
            {header: "<b>ادني</b>", width: 80, dataIndex: 'Low', sortable: false,align: 'right'},
            {header: "<b>أعلى</b>", width: 80, dataIndex: 'High', sortable: false,align: 'right'},
            {header: "<b> إفتتاح</b>", width: 80, dataIndex: 'Open', sortable: false,align: 'right'},
            {header: "<b> إغلاق</b>", width: 80, dataIndex: 'Last', sortable: false,align: 'right'},
			{header: "<b>تاريخ</b>", width: 80, dataIndex: 'Date', sortable: false}

        ],
		tbar:[dateFrom,'-',dateTo,'-',{
            tooltip:'Go',
            iconCls:'refresh',
			handler: loadPerformanceStore
        }],
				       loadMask: true,
 enableColumnMove: false,
		enableColumnResize : false,
		enableHdMenu: false,
		enableColumnHide: false, 
		enableColumnResize : false, 
        autoHeight:true,
						stripeRows: true,//applies css classname to alternate rows, defaults to false
			trackMouseOver: true,//highligts rows on mousever (default = false for editor grid)
        width:780
			});


   function loadPerformanceStore(){
	   var startDate = Ext.getCmp('StartDate').getValue().format('Y-m-d');
	   var endDate = Ext.getCmp('EndDate').getValue().format('Y-m-d');
       tasiinfo.doLayout();
	   //alert(startDate + "-" + endDate)
	   performance_store.load({params:{startDate:startDate, endDate:endDate}});
	   //performance_store.load();
	   tasiinfo.doLayout();

	};

     var tasiinfo = new Ext.TabPanel({
        renderTo:  'tasi_tabs',
        activeTab: 0,
        plain:true,
	     loadMask: true,
        defaults:{autoHeight:true,autoWidth:true},
        items:[ {
                id : 'DetailedIndex',
                title: '<img src="images/detailedindex.gif">',
                items: [detailed_grid]
            },{
                id: 'Performance',
                title: '<img src="images/performance.gif">',
                listeners: {activate: handleActivate},
                items: [performance_grid]
				//html : 'hello'
            },{
                title: '<img src="images/chart.gif">',
                id: 'Chart',
				listeners: {activate: handleActivate},
                items: [chart_grid,uploader]
            },{
                id: 'Last6TradedDays',
                title: '<img src="images/last.gif">',
	            listeners: {activate: handleActivate},
                items: [week_grid]
            }
        ]
    });
		          tasiinfo.doLayout();


  function handleActivate(tab){
          
		  if(tab.id=="Performance") loadPerformanceStore();
		  if(tab.id=="Chart") loadChartStore()
		  if(tab.id=="Last6TradedDays") loadWeekStore();
		  
		  tasiinfo.doLayout();

		   
	   }
});