// create custom validation types
Ext.apply(Ext.form.VTypes, {
  validRA: function(val, field) {
	if (((val <= 0) || (val > 360)) || isNaN(val)){
		return false;
	}
	return true;
   },
  validDEC: function(val, field){
	if ((val >= -90) && (val <= 90)){
		return true;
	}
	return false;
  },
  validSIZE: function(val, field){
	if ((val > 0) && (val <= 600)){
		return true;
	}
	return false;
  }
});

// show the slider tips as you drag the slider
Ext.ux.SliderTip = Ext.extend(Ext.Tip, {
        minWidth: 10,
        offsets : [0, -10],
        init : function(slider){
                slider.on('dragstart', this.onSlide, this);
                slider.on('drag', this.onSlide, this);
                slider.on('dragend', this.hide, this);
                slider.on('destroy', this.destroy, this);
        },
        onSlide : function(slider){
                this.show();
                this.body.update(this.getText(slider));
                this.doAutoWidth();
                this.el.alignTo(slider.thumb, 'b-t?', this.offsets);
		if (slider.id=='slider1'){
			sliderTextField.setValue(slider.getValue()/100);
		}else if (slider.id=='slider2'){
			sliderTextField2.setValue(slider.getValue()/100);
		}else if (slider.id=='slider3'){
			sliderTextField3.setValue(slider.getValue()/10);
		}
	
        },
        getText : function(slider){
		if (slider.id=='slider1'){
                	return (slider.getValue()/100);
		}else if (slider.id=='slider2'){
			return (slider.getValue()/100);
		}else if (slider.id=='slider3'){
			return (slider.getValue()/10);
		}
        }
});

// initialize slider vars
var slider1;
var sliderVal2;
var sliderVal3;
var sliderTextField;
var sliderTextField2;
var sliderTextField3;
var objectQueryType;



// initialize the RA/DEC form fields
	var frmRA = new Ext.form.TextField({
			xtype:'textfield',
                    	fieldLabel: 'RA (degree)',
                     	name: 'ra',
                     	allowBlank: false,
                     	vtype: 'validRA',
			id:'ra'
	});

	var frmDEC = new Ext.form.TextField({
		  layout:'form',
                  xtype:'textfield',
                  fieldLabel: 'DEC (degree)',
                  name: 'dec',
                  allowBlank:false,
                  vtype: 'validDEC',
		  id:'dec'	
	});

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

Ext.onReady(function(){
    Ext.QuickTips.init();
    // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = 'side';
    var bd = Ext.getBody();
    var xg = Ext.grid;
    var smImages = new xg.CheckboxSelectionModel();
    // shared reader
    var reader = new Ext.data.ArrayReader({}, [
       {name: 'Image'}
    ]);


   // clear the labels associated with the text controls
  Ext.override(Ext.layout.FormLayout, {
    renderItem : function(c, position, target){
        if(c && !c.rendered && c.isFormField && c.inputType != 'hidden'){
            var args = [
                   c.id, c.fieldLabel,
                   c.labelStyle||this.labelStyle||'',
                   this.elementStyle||'',
                   typeof c.labelSeparator == 'undefined' ? this.labelSeparator : c.labelSeparator,
                   (c.itemCls||this.container.itemCls||'') + (c.hideLabel ? ' x-hide-label' : ''),
                   c.clearCls || 'x-form-clear-left' 
            ];
            if(typeof position == 'number'){
                position = target.dom.childNodes[position] || null;
            }
            c.actionMode = 'formItem';
            if(position){
                c.formItem = Ext.get(this.fieldTpl.insertBefore(position, args));
            }else{
                c.formItem = Ext.get(this.fieldTpl.append(target, args));
            }
            c.render('x-form-el-'+c.id);
        }else {
            Ext.layout.FormLayout.superclass.renderItem.apply(this, arguments);
        }
    }
});


	var sm = new xg.CheckboxSelectionModel();

	// need to have global scope for some controls
	var advImgButton = new Ext.Button({
		text: 'Advanced Image Options',
		id:'advImgButton'
	});

	// add the Advanced Options as an action button
	var advImgAction = new Ext.Action({
		text:'Advanced Image Options',
		handler: function(){
			loadSettings();
		}
	});


	// define hidden fields for min level
	var minLevelHField = new Ext.form.Hidden({
		name:'minLevel'
	});
	var maxLevelHField = new Ext.form.Hidden({
		name: 'maxLevel'
	});

	var gammaLevelHField = new Ext.form.Hidden({
		name: 'gammaLevel'
	});

	var advImgOpt = new Ext.form.Hidden({
		name: 'advImg',
		value: '0'
	});

	// default slider values
	Ext.grid.sliderVal=[[5],[99],[22]];

	// additional controls  
	var objNameRadio = new Ext.form.Radio({
		id:'objectname',
		name: 'csource',
                boxLabel:'Object&nbsp;Name',
                value: 'objectname'
	});

       /*********************************************************
		CODE FOR CAPTURING THE RADIO SELECTION
		AND SHOWING THE OBJECT NAME
	*********************************************************/
	Ext.override(Ext.form.Radio, {
  	onClick : function() {
    	if(this.el.dom.checked != this.checked) {
      	var els = this.el.up('form').select('input[name='+this.el.dom.name+']');
      	els.each(function(el) {
        	if(el.dom.id == this.id) {
			if (this.id==objNameRadio.id){
				showObjectSettings();
			}else if (this.id=='ned'){
				objectQueryType='ned';	
			}else if (this.id=='simbad'){
				objectQueryType='simbad';
			}else{
			}
          		this.setValue(true);
        	} else {
          		Ext.getCmp(el.dom.id).setValue(false);   
        	}
     		}, this);
    	}
  	}
	});

   // main deep reference image query form
    var simple = new Ext.FormPanel({
    	id:'simple',
	header:false,
        layout:'form',
        frame:true,
	bodyStyle:'padding:5px 5px 0',       
        defaults: {	width: 800},
        width: 800,
	height: 150,
	autoHeight:false,
	collapsible:false,
	draggable:false,
	floating:false,
	autoshow:false,
	autoscroll:false,
	monitorResize:false,
	shadow:false,
	items: [{
                width:800,
                layout: 'column',
              items: [{
		width:300,
		layout:'column',
			items: [{
		    		width:75,
				height:25,
                    		html:'Query By:'
                	}
            		,{
                	layout: 'column',
			width:75,
			items: [{
                    		xtype:'radio',
                    		name: 'csource',
                    		boxLabel:'RA/DEC',
                   		value:'radec',
				checked:true
                	}]
            		},{
                	layout: 'column',
			width:120,
			items: [objNameRadio.show()]
            	},
		{
			layout: 'form',
			width:300,
                	items: [frmRA.show()
                     	]

        	},
        	{
                	layout:'form',
			width:300,
                	items: [frmDEC.show()
                        ]

		}]},{
		  width:250,
		  items:[{
                    width:275,
                    layout: 'form',
                    items: [{
                            xtype:'textfield',
                            fieldLabel: 'Size (arcsec)',
                            labelWidth:50,
			    width:90,
                            name: 'imgSize',
				id:'imgSize',
                             allowBlank:false,
                            vtype: 'validSIZE',
				value:'300',
                   }]
             	},
             	{
                layout: 'form',
                items: [{
                    xtype:'datefield',
                            fieldLabel: 'Start date',
                            labelWidth:50,
                            name: 'sDate',
			    id:'sDate',
				format:'Y-m-d',
                             allowBlank:true
                }]
              	},{
                layout: 'form',
                items: [{
                    xtype:'datefield',
                            fieldLabel: 'End date',
                            labelWidth:50,
                            name: 'eDate',
			    id:'eDate',
				format:'Y-m-d',
                             allowBlank:true
                }]
	      	},
			new Ext.Button(advImgAction)	
		]},minLevelHField,
		maxLevelHField,
		gammaLevelHField,
		advImgOpt,
       		{
		width:200,
        	layout:'column',
		autoheight:true,
        		items: [
        			new Ext.grid.GridPanel({
			    	store: new Ext.data.Store({
			          	reader: reader,
			          	data: xg.dummyData
			    	  }),
					cm: new xg.ColumnModel([
            			   	sm,
				   	{header: "<b>(All Devices)</b>", width: 120, sortable: true, dataIndex: 'Image'},
				   ]),
			    	viewConfig: {
			        forceFit: true
			    },
			    	sm: sm,
			    	width:200,
			    	height:150,
			    	frame:true,
			    	title:'Device Type',
			    	iconCls:'icon-grid'
				})
        		]
        }
	]}]
    });


  // object query function to show form
  function showObjectSettings(){
	var objNameNED = new Ext.form.Radio({
                id:'ned',
		name:'osource',
                boxLabel:'NED',
                value:'Ned'
        });

        var objNameSIMBAD = new Ext.form.Radio({
                id:'simbad',
		name:'osource',
                boxLabel:'SIMBAD',
                value:'SIMBAD'
        });


        var objNameTextField = new Ext.form.TextField({
                fieldLabel: 'Object Name',
                labelWidth:50,
                name: 'objName',
                allowBlank:true
        });

	var objNameForm = new Ext.form.FormPanel({
                id:'objForm',
                layout:'form',
                height:40,
		frame:true,
                        items: [
                        {
                        layout:'column',
                        items:[{
                                width:200,
                                layout: 'column',
                                items: [{
                                        html:'Get object coordinates from'
                                }]
                        },{
                                layout: 'column',
                                width:75,
				items: [
                                        objNameNED.show()
                                ]
                        },{
                                layout: 'column',
				width:75,
                                items: [
                                        objNameSIMBAD.show()
                                ]
                        },      
                        ]}]     
                                
        });                     
                               
	var val='m30'; 
        var objNameFormField = new Ext.form.FormPanel({
                id:'objFormField',
                layout:'form',
		height:40,
                frame:true,
                        items: [
                        {
                                layout:'form',
                                items:[
                                        objNameTextField.show()
                                ]       
                        }]      
        });

	// object proxy data store: calls proxy file to determine the source of data (i.e., ned vs. simbad)
	var store = new Ext.data.Store({
        	// load using HTTP
        	
		/*	
		proxy: new Ext.data.ScriptTagProxy({
        		url: 'http://data.nersc.gov/project/deepsky/devel/ui/objectProxy.pl?source=simbad&object=m3'
           	}),
		*/	
		proxy: new Ext.data.HttpProxy({
			url: 'http://portal.nersc.gov/project/deepsky/devel/ui/objectProxy.pl'
		}),
        	// the return will be XML, so lets set up a reader
        	reader: new Ext.data.XmlReader({
        	// records will have an "Item" tag
		root:'ObjectItems',
        	record: 'ObjectItem',
        	id: 'ObjectName',
        	totalRecords: '@total'
        	}, [
        	// set up the fields mapping into the xml doc
        	// The first needs mapping, the others are very basic
        	{name: 'ObjectName', mapping: 'ObjectName'},
        	'ObjectRA', 
		'ObjectDEC'
         	])
         	});

         	// create the grid
        var grid = new Ext.grid.GridPanel({
         	store: store,
         	columns: [
         		{header: "Object Name", width: 120, dataIndex: 'ObjectName', sortable: false},
         		{header: "RA", width: 100, dataIndex: 'ObjectRA', sortable: false},
         		{header: "DEC", width: 100, dataIndex: 'ObjectDEC', sortable: false}
         	],
         	//renderTo:'objwin',
         	width:330,
		height:200,
		loadMask:{msg:'Loading...'},
         });


	// When a row is selected from the results then the associated RA & DEC 
	// should be populated into the main panel's text boxes.
	grid.on('rowclick', function(grid, rowIndex, e) {
                  var row = grid.getView().getRow(rowIndex);
                  var record = store.getAt(rowIndex); 
		  var raCell = record.get('ObjectRA');
		  var decCell = record.get('ObjectDEC');  
		  Ext.getCmp('ra').setValue(raCell.replace("+",""));
		  Ext.getCmp('dec').setValue(decCell.replace("+",""));
        });
	
	var pbar1 = new Ext.ProgressBar({
       		text:''
    	});


	// Remote object query form
	var objOptWin = new Ext.Window({
        title: 'Object Query Options',
        id:'objwin',
	width: 450,
        autoHeight:true,
        minWidth: 300,
        layout: 'form',
        plain:true,
        bodyStyle:'padding:5px;',
        buttonAlign:'center',
        items: [objNameForm,
		objNameFormField,
                grid],
                buttons: [{
                        text: 'Get Coordinates',
                        handler:function(){
				//waitMsg:"Please wait",
				// determine the type of query selected
				// get the object name
				//Ext.MessageBox.progress('Please wait');
				// conduct query
				val=objNameTextField.getValue();
				store.baseParams = {source:objectQueryType, object:val};
				store.reload();
				//Ext.MessageBox.hide();
				var view = grid.getView();
				view.refresh();
			
			}
                }
                ]
    });
	objOptWin.show();
  }


   function loadSettings(){
	var advSlider1 = new Ext.Slider({
                id:'slider1',
                width: 300,
                value: 1,
                increment: 5,
                minValue: 0,
                maxValue: 200,
		stateful:true,
                plugins: new Ext.ux.SliderTip()
        });

        sliderTextField = new Ext.form.TextField({
                id:'sliderText1',
                hideLabel:true,
                allowBlank:false,
                width:40
        });

        var advSlider2 = new Ext.Slider({
                id:'slider2',
                width: 300,
                value: 1,
                increment: 5,
                minValue: 0,
                maxValue: 200,
                plugins: new Ext.ux.SliderTip()
        });

        sliderTextField2 = new Ext.form.TextField({
                id:'sliderText2',
                hideLabel:true,
                allowBlank:false,
                width:40
        });

        var advSlider3 = new Ext.Slider({
                id:'slider3',
                width: 300,
                value: 1,
                increment: 1,
                minValue: 0,
                maxValue: 30,
                plugins: new Ext.ux.SliderTip()
        });

        sliderTextField3 = new Ext.form.TextField({
                id:'sliderText3',
                hideLabel:true,
                allowBlank:false,
                width:40
        });


        // capture the slider event to show the tip
        var tip = new Ext.ux.SliderTip({
        getText: function(slider){
            return String.format('<b>{0}% complete</b>', slider.getValue());
        }
        });

	var advOptformc = new Ext.form.FormPanel({
                id:'formpanel3',
                layout:'form',
                frame:true,
                        items: [{
                                width:400,
                                layout:'column',
                                height:50,
                                items: [{
                                        width:50,
                                        html:'Gamma: '
                                },
                                advSlider3.show(),
				sliderTextField3.show()
				]
                        }]

        });

       var advOptformb = new Ext.form.FormPanel({
		id:'formpanel2',
		layout:'form',
		frame:true,
			items: [{
                        	width:400,
                        	layout:'column',
                        	height:50,
                        	items: [{
                                	width:50,
                                	html:'Max&nbsp;Level: '
                        	},
                        	  advSlider2.show(),
				  sliderTextField2.show()
				]
                	}]

	});

	var advOptform = new Ext.form.FormPanel({
	id:'formpanel1',
	layout:'form',
	frame:true,
        url:'save-form.php',
	items: [{
		width:400,
		layout:'column',
		autoHeight:true,
		items: [{
			width:400,
                	layout:'column',
                	height:50,
       			items: [{
				width:50,
				html:'Min&nbsp;Level: '	
			},
			  advSlider1.show(),
			  sliderTextField.show()
			]
		}]
	}]
    });         
  

    // window for advanced image options. The sliders are added to panels and panels are added to the window. 
    var advOptWin = new Ext.Window({
        title: 'Advanced Image Options',
        width: 450,
        autoHeight:true,
        minWidth: 450,
        layout: 'form',
        plain:true,
        bodyStyle:'padding:5px;',
        buttonAlign:'center',
        items: [advOptform,
		advOptformb,
		advOptformc
		],
        	buttons: [{
            		text: 'Cancel',
        		handler:function(){
				advOptWin.close();
			}
		},{         
            		text: 'Apply',
			handler:function(){
					// save slider state and close window
					Ext.grid.sliderVal[0]=advSlider1.getValue();
					Ext.grid.sliderVal[1]=advSlider2.getValue();
					Ext.grid.sliderVal[2]=(advSlider3.getValue());
					minLevelHField.setValue(advSlider1.getValue()/100);
					maxLevelHField.setValue(advSlider2.getValue()/100);
					gammaLevelHField.setValue(advSlider3.getValue()/10);
					raVal = frmRA.getValue();
					decVal = frmDEC.getValue();
					imageSize = Ext.getCmp('imgSize').getValue();
					var minLevelField = minLevelHField.getValue();
					var maxLevelField = maxLevelHField.getValue();
					var gammaLevelField = gammaLevelHField.getValue();
					var startDate = Ext.getCmp('sDate').getRawValue();
					var endDate = Ext.getCmp('eDate').getRawValue();
					advImgOpt.setValue("1");
					advOptWin.close();
				simple.form.submit({
                                method:'POST',
                                waitTitle:'Connecting',
                                waitMsg:'Processing Query...Approximate wait time: 30 secs',
                                url:'getRefImages.pl',
                                timeout:300000,
                                success:function(f,a){
                                        if (a.response.responseText == "0"){
                                                Ext.Msg.alert('Response','No Search Results Found');
                                        }else{
                                        	var thisStore = Ext.util.JSON.decode(a.response.responseText);
                                        	store.loadData(thisStore,false);
                                        	pageStore.loadData(thisStore,false);
                                        	deepRefPanel.render('results');
						procGrid.render('gridResults');
                                        	pageStore.baseParams = {ra:raVal, dec:decVal, imgSize:imageSize, minLevel:minLevelField, maxLevel:maxLevelField, gammaLevel:gammaLevelField, sDate:startDate, eDate:endDate, advImg:'1'};

                                        }
                                },
                                failure:function(form, action){
                                        if(action.failureType == 'server'){
                                                obj = Ext.util.JSON.decode(action.response.responseText);
                                                Ext.Msg.alert('Oops!', obj.errors.reason);
                                        }else{
                                                Ext.Msg.alert('Message', 'Please make sure the indicated fields have valid data.');
                                        }
                                        if (action.response.responseText=="0"){
                                                Ext.Msg.alert('Response','No Search Results Found');
                                        } else if (action.response.responseText=="-1") {
                                                Ext.Msg.alert('Message','An SQL error has occurred.  Please contact Janet Jacobsen.');
                                        } else if (action.response.responseText=="-2") {
                                                Ext.Msg.alert('Message','The Deep Sky database is off-line.');
                                        } else if (action.response.responseText=="-3") {
						Ext.Msg.alert('Message','Unable to render the images based on your image settings. Please adjust your advanced image options.');
					} else if (action.response.responseText=="-4") {
						Ext.Msg.alert('Message','Your image selection cannot be rendered at this time.');
					} else {
                                                Ext.Msg.alert('Message','There are difficulties displaying the results. '+action.response.responseText);
                                        }
                                },
                                });


			}
        	}]       
    });

	advOptWin.show();
	advSlider1.setValue(new Number(Ext.grid.sliderVal[0])); 
	advSlider2.setValue(new Number(Ext.grid.sliderVal[1]));
	advSlider3.setValue(new Number(Ext.grid.sliderVal[2]));
	sliderTextField.setValue(new Number(Ext.grid.sliderVal[0]/100));
	sliderTextField2.setValue(new Number(Ext.grid.sliderVal[1]/100));
	sliderTextField3.setValue(new Number(Ext.grid.sliderVal[2]/10));
    }	

    function submitForm(){
        simple.getForm().submit({url:'get-images.pl',success:function(){;}});
    }
    
    function getPostData(){    	
    }
    function formFailure(){
    }
    function myFunc(){
	Ext.Msg.alert('Message','A processing error has occurred.  Please contact Randy Kersnick.');
    } 
    
    	var imageSize;
	minLevelHField.setValue(Ext.grid.sliderVal[0]/100);
        maxLevelHField.setValue(Ext.grid.sliderVal[1]/100);
        gammaLevelHField.setValue(Ext.grid.sliderVal[2]/10);
   
    /***** MAIN QUERY WINDOW *****/
    var mainWin = new Ext.Window({
        title: 'Query Deep Reference Images',
        width: 800,
	height: 230,
        autoHeight:false,
        minWidth: 300,
        layout: 'form',
        plain:true,
        bodyStyle:'padding:3px;',
        buttonAlign:'center',
	animateTarget:'thisform',
	closable:false,
	draggable:false,
        renderTo:'thisform',
	tbar: [],
	items: [simple,
                ],
    		buttons: [{
                        text: 'Query Images',
			type: 'submit',
                        scope: this,
                        handler:function(){
					raVal = frmRA.getValue();
					decVal = frmDEC.getValue();
					imageSize = Ext.getCmp('imgSize').getValue();
					var minLevelField = minLevelHField.getValue();
					var maxLevelField = maxLevelHField.getValue();
					var gammaLevelField = gammaLevelHField.getValue();
					var startDate = Ext.getCmp('sDate').getRawValue();
					var endDate = Ext.getCmp('eDate').getRawValue();	
                                	advImgOpt.setValue("0");
				simple.form.submit({
                                method:'POST',
                                waitTitle:'Connecting',
                                waitMsg:'Processing Query...Approximate wait time: 30 secs',
                                url:'getRefImages.pl',
                                timeout:300000,
                                success:function(f,a){
                                        if (a.response.responseText == "0"){
                                                Ext.Msg.alert('Response','No Search Results Found');
                                        }else{
                                        	var thisStore = Ext.util.JSON.decode(a.response.responseText);
                                        	store.loadData(thisStore,false);
        
						//procstore.loadData(thisStore,false);
						//procPageBar.bind(pageStore);
						pageStore.loadData(thisStore,false);
						//processedPanel.setTitle("Component Processed Images: ("+procstore.getTotalCount()+" items returned)");
						deepRefPanel.render('results');
                                        	//procGrid.show();
						procGrid.render('gridResults');
						 pageStore.baseParams = {ra:raVal, dec:decVal, imgSize:imageSize, minLevel:minLevelField, maxLevel:maxLevelField, gammaLevel:gammaLevelField, sDate:startDate, eDate:endDate, advImg:'0'};
						//Ext.Msg.alert("ra: "+ra);

						//processedPanel.render('results');
                                        }
                                },
                                failure:function(form, action){
                                        if(action.failureType == 'server'){
                                                obj = Ext.util.JSON.decode(action.response.responseText);
                                                Ext.Msg.alert('Oops!', obj.errors.reason);
                                        }else{
                                                Ext.Msg.alert('Message', 'Please make sure the indicated fields have valid data.');
                                        }
					
					if (action.response.responseText=="0"){
                                                Ext.Msg.alert('Response','No Search Results Found');
                                        } else if (action.response.responseText=="-1") {
                                                Ext.Msg.alert('Message','An SQL error has occurred.  Please contact Janet Jacobsen.');
                                        } else if (action.response.responseText=="-2") {
                                                Ext.Msg.alert('Message','The Deep Sky database is off-line.');
                                        } else if (action.response.responseText=="-3") {
                                		Ext.Msg.alert('Message','Unable to render the images based on your image settings. Adjusting your advanced image options might correct the issue.');
                                        } else if (action.response.responseText=="-4") {
                                                Ext.Msg.alert('Message','Your image selection cannot be rendered at this time.');
                                        } else {
                                                Ext.Msg.alert('Message','There are difficulties displaying your results. '+action.response.responseText);
                                        }

                                },
                                });}
                        }]
	});
/***** END MAIN QUERY WINDOW *****/

var radecStore = new Ext.data.SimpleStore({
        fields: ['val', 'coord'],
        data : Ext.grid.radecCoordinates // from states.js
    });



 // combo for RA/DEC suggestions
 var radecCombo = new Ext.form.ComboBox({
        store: radecStore,
        displayField:'coord',
        typeAhead: true,
        mode: 'local',
	editable:false,
        triggerAction: 'all',
        emptyText:'RA/DEC Suggestions',
        selectOnFocus:true,
        width:135,
	listWidth:135,
	id:'radecCombo',
	valueField:'val'
    });

// set the RA/DEC text fields to the value selected in the combo
radecCombo.on('select', 
		function(o,record,index){
			var selVal=this.getValue();
			var arySelVal=selVal.split(",");
			Ext.getCmp('ra').setValue(arySelVal[0]);
                  	Ext.getCmp('dec').setValue(arySelVal[1]);
		}
);

// show the main window, onload
mainWin.show();

// add the RA/DEC combo to the window
mainWin.getTopToolbar().add('&nbsp;&nbsp;&nbsp;', radecCombo,{
        text: '',
        handler: function(){
        }         
}); 

// add the help item to the toolbar
mainWin.getTopToolbar().add('->', {
        text: 'help',
        handler: function(){
        }
});



    var xd = Ext.data;
    // Show box for loading image search results
    var store = new Ext.data.JsonStore({
        url: 'getRefImages.pl',
        root: 'images',
        fields: ['name', 'url', 'size', 'downloadLink', 'mapLink', {name:'lastmod', type:'date', dateFormat:'timestamp'}]
    });
    store.load();

    var tpl = new Ext.XTemplate(
		'<tpl for=".">',
            '<div class="thumb-wrap" id="{name}">',
		    '<div class=""><img src="{url}" title="{name}"></div>',
		    '<span class="x-editable">{name}</span></div>',
        '</tpl>',
        '<div></div>'
	);

   // define deep reference image template
    var deepRefTpl = new Ext.XTemplate(
		'<tpl for=".">',
		    '<center><table border=0 cellpadding=2 cellspacing=2><tr><td align="center">',
		    '<div style="text-align:center"><img src="{url}" title="{name}"></div>',
		    '</td>',
                    '</tr></table>',
		    '<tpl if="this.isBlank(name) == false">',
		       '<table><tr><td valign=top align="left">',
		       '<div style="text-align:center">&nbsp;<a href="{mapLink}" target="_blank">View Reference Image Map</a><br><a href="{downloadLink}">{name}</a>',
		       '<br><br><input type="button" id="annotation" name="deepRefAnnotation" value="Add Annotation" />',
		       '<br><br><input type="button" id="tags" name="deepRefTag" value="Tag this Image" />',
		       '</div>',
		       '</td>',
                       '</tr></table>',
		   '</tpl>', 
		    '</center>',
        	'</tpl>',{
     		isBlank: function(name){
         		return name == '';
     		}
	});


     // processed images template definition when displayed in the grid panel 
     var processedTpl = new Ext.XTemplate(
		'<tpl for=".">',
            '<div class="dsImageText" id="{name}"><img src="{url}" title="{name}"><a href="">{name}</a>',
		    '<p>&nbsp;Observation: {observation}</p>',
		    '<p>&nbsp;Telescope: {telescope}</p>',
		    '<p>&nbsp;Instrument: {instrument}</p>',
		    '<p>&nbsp;Image type: {imagetype}</p>',
		    '<p>&nbsp;Obs mode: {obsmode}</p>',
		    '<p>&nbsp;Obs date: {date_obs}</p>',
		    '<p>&nbsp;Sky: {sky}</p>',
		    '<p>&nbsp;Zp: {zp}</p>',
			'</div>',
        '</tpl>'
	);

     // text defined by the user to annotate the images
     var drAnnotationText = new Ext.form.TextArea({
    	id:'imgAnnotationTxt',
	fieldLabel: 'Annotation',
        hideLabel:false,
        allowBlank:true,
        width:340,
	height:200,
	maxLengthText:2000
    });

    // panel containing the text field definition for annotations.
    // panel added to window for saving
    var drAnnotationPanel = new Ext.form.FormPanel({
		id:'drAnnotationPanel1',
		layout:'form',
		frame:true,
			items: [{
                        	width:400,
                        	layout:'column',
                        	height:200,
                        	items: [{
                                	width:60,
                                	html:'Annotation:&nbsp;&nbsp;'
                        	},
                        	 drAnnotationText.show()
				]
                	}]

	});

   


    // define window for adding annotations
    var drAnnotationWin = new Ext.Window({
        title: 'Add Image Annotation',
        width: 450,
        autoHeight:true,
        minWidth: 450,
        layout: 'form',
	closeAction:'hide',
        plain:true,
        bodyStyle:'padding:5px;',
        buttonAlign:'center',
        items: [drAnnotationPanel
		],
        	buttons: [{
            		text: 'Cancel',
        		handler:function(){
				drAnnotationWin.hide();
			}
		},{         
            		text: 'Save',
			handler:function(){

				simple.form.submit({
                                method:'POST',
                                waitTitle:'Please wait...',
                                waitMsg:'Saving annotation',
                                url:'saveAnnotation.pl',
                                timeout:300000,
                                success:function(f,a){
                                        if (a.response.responseText == "0"){
                                                Ext.Msg.alert('Response','No Search Results Found');
                                        }else{
                                        	// close the window
                                        }
                                },
                                failure:function(form, action){
                                        if(action.failureType == 'server'){
                                                obj = Ext.util.JSON.decode(action.response.responseText);
                                                Ext.Msg.alert('Oops!', obj.errors.reason);
                                        }else{
                                                Ext.Msg.alert('Message', 'Please make sure the indicated fields have valid data.');
                                        }
                                },
                                });


			}
        	}]       
      });

     // text defined by the user to annotate the images
     var tagText = new Ext.form.TextArea({
    	id:'tagTxt',
	fieldLabel: 'Tag Image',
        hideLabel:false,
        allowBlank:true,
        width:340,
	height:200,
	maxLengthText:2000
    });

    // panel containing the text field definition for annotations.
    // panel added to window for saving
    var tagPanel = new Ext.form.FormPanel({
		id:'tagPanel1',
		layout:'form',
		frame:true,
			items: [{
                        	width:400,
                        	layout:'column',
                        	height:200,
                        	items: [{
                                	width:60,
                                	html:'Image Tag:&nbsp;&nbsp;'
                        	},
                        	 tagText.show()
				]
                	}]

	});

         // define window for adding annotations
    var tagWin = new Ext.Window({
        title: 'Add Image Tag',
        width: 450,
        autoHeight:true,
        minWidth: 450,
        layout: 'form',
	closeAction:'hide',
        plain:true,
        bodyStyle:'padding:5px;',
        buttonAlign:'center',
        items: [tagPanel
		],
        	buttons: [{
            		text: 'Cancel',
        		handler:function(){
				tagWin.hide();
			}
		},{         
            		text: 'Save',
			handler:function(){

				simple.form.submit({
                                method:'POST',
                                waitTitle:'Please wait...',
                                waitMsg:'Saving annotation',
                                url:'saveTags.pl',
                                timeout:300000,
                                success:function(f,a){
                                        if (a.response.responseText == "0"){
                                                Ext.Msg.alert('Response','No Search Results Found');
                                        }else{
                                        	// close the window
                                        }
                                },
                                failure:function(form, action){
                                        if(action.failureType == 'server'){
                                                obj = Ext.util.JSON.decode(action.response.responseText);
                                                Ext.Msg.alert('Oops!', obj.errors.reason);
                                        }else{
                                                Ext.Msg.alert('Message', 'Please make sure the indicated fields have valid data.');
                                        }
                                },
                                });


			}
        	}]       
      });

     // Panel displaying the deep reference images resulting from searching
     // the deep sky database
     var deepRefPanel = new Ext.Panel({
        id:'deep-ref-image',
        frame:true,
        width:800,
        autoHeight:true,
        collapsible:true,
        layout:'fit',
        title:'Deep Reference Image',

        items: new Ext.DataView({
            store: store,
            autoWidth:true,
            tpl: deepRefTpl,
            autoHeight:true,
	    multiSelect: true,
  	    overClass:'x-view-over',
            itemSelector:'div.thumb-wrap',
            emptyText: 'No images to display',
	    	listeners:{
			containerclick: function(dataView, e){
				var target = e.getTarget();
					if (target.name == "deepRefAnnotation"){
						//Ext.Msg.alert('message Annotation','voila');
						drAnnotationWin.show();
					}else if(target.name == "deepRefTag"){
						tagWin.show();
					}
			}
		}
	    /*
	    ,
            plugins: [
                new Ext.DataView.DragSelector(),
                new Ext.DataView.LabelEditor({dataIndex: 'name'})
            ],

            prepareData: function(data){
                data.shortName = Ext.util.Format.ellipsis(data.name, 15);
                data.sizeString = Ext.util.Format.fileSize(data.size);
                data.dateString = data.lastmod.format("m/d/Y g:i a");
                return data;
            }
	   */
        })
    });

    // pluggable renders
    function renderTopic(value, p, record){
	 return String.format(
         	'<img src="{1}" align="left"><div><table><tr><td>observation:</td><td>{3}</td></tr><tr><td>telescope:</td><td>{4}</td></tr><tr><td>instrument:</td><td>{5}</td></tr><tr><td>image type:</td><td>{6}</td></tr><tr><td>obs mode:</td><td>{7}</td></tr><tr><td>date observed:</td><td>{8}</td></tr><tr><td>sky:</td><td>{9}</td></tr><tr><td>zp:</td><td></td></tr><tr><td>size:</td><td>{10}</td></tr><tr><td>Download:</td><td><a href="{12}">{2}</a></td><tr><td><input type="button" id="{13}" name="{13}" value="Add Annotation" /></td><td></td></tr><td><input type="button" id="{13}" name="{13}" value="Tag this Image" /></td><td></td></table></div>',value, record.data.url, record.id, record.data.observation, record.data.telescope, record.data.instrument, record.data.imagetype, record.data.obsmode, record.data.date_obs,record.data.sky,record.data.zp,record.data.size,record.data.downloadLink,record.data.name);

    }
    function renderLast(value, p, r){
        //return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']);
    }

    // data grid definition
    // create the Data Store
    var pageStore = new Ext.data.Store({
        // load using script tags for cross domain, if the data in on the same domain as
        // this page, an HttpProxy would be better
        proxy: new Ext.data.HttpProxy({
            url: 'getRefImages.pl',
	    method:'GET',
	    timeout:300000,
        }), 
        baseParams:{start:0, limit:5},
        // create reader that reads the Topic records
        reader: new Ext.data.JsonReader({
            root: 'procimages',
            totalProperty: 'totalCount',
            id: 'name',
        fields: ['name', 'url', 'observation', 'telescope', 'instrument', 'imagetype', 'obsmode', 'date_obs', 'sky', 'zp', 'size', 'downloadLink', {name:'lastmod', type:'date', dateFormat:'timestamp'}]         }),
        
        // turn on remote sorting
        remoteSort: false, 
    }); 

    // dataIndex maps the column to the specific data field in
    // the data store
    var gridCols = new Ext.grid.ColumnModel([{
           id: 'url', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
           header: "Processed Image",
           dataIndex: 'url',
           width: 570,
           renderer: renderTopic
        }]);
        
    // by default columns are sortable
    gridCols.defaultSortable = true;

    // processed images paging toolbar
    var procPageBar = new Ext.PagingToolbar({                                                
            pageSize: 5,                                                             
            store: pageStore,                                                        
            displayInfo: true,                                                       
            displayMsg: 'Displaying {0} - {1} of {2}',                               
            emptyMsg: "No images to display",                                        
            items:[                                                                                      
                '-', {                                                               
                pressed:false,                                                       
                enableToggle:true,                                                   
                text: "Download Fits Files",                                         
                cls: 'x-btn-text-icon details',
		toggleHandler:toggleDownload                                    
            }]                                                                       
        });    


    // processed images grid panel -- enables listener for annotations
    var procGrid = new Ext.grid.GridPanel({
	el:'topic-grid',
        width:800,
        height:500,
        title:'Processed Images',
        store: pageStore,
        cm: gridCols,
        trackMouseOver:false,
        sm: new Ext.grid.RowSelectionModel({selectRow:Ext.emptyFn}),
        loadMask: true,
		listeners:{
			click: function(e){
				//e.preventDefault();
				var target = e.getTarget();
					//Ext.Msg.alert('message',target.id+' '+target.value);
				if (target.value == "Add Annotation"){	
					drAnnotationWin.show();
				}else if (target.value == "Tag this Image"){
					//Ext.Msg.alert('message',target.id+' '+target.name);
					tagWin.show();
				}
			}
		},
        viewConfig: {
            forceFit:true,
            enableRowBody:true,
            showPreview:false,
            getRowClass : function(record, rowIndex, p, store){
                if(this.showPreview){
                    p.body = '<p>'+record.data.excerpt+'</p>';
                    return 'x-grid3-row-expanded';
                }
                return 'x-grid3-row-collapsed';
            }
        },
        bbar: procPageBar 
     });                                        	
	procGrid.render();
	procPageBar.render();   

    function toggleDetails(btn, pressed){
	var startDate = Ext.getCmp('sDate').getRawValue();
	var aryStartDate = startDate.split("/");
	var endDate = Ext.getCmp('eDate').getRawValue();
	var aryEndDate = endDate.split("/");
//	Ext.Msg.alert("date",aryStartDate[2]+'-'+aryStartDate[0]+'-'+aryStartDate[1]);
        var view = procGrid.getView();
        view.showPreview = pressed;
        view.refresh();
    }

    function toggleDownload(btn, pressed){
        
	//Ext.Ajax.on('beforerequest', this.showSpinner, this);
	//var startDate = new Date(Ext.getCmp('sDate').getValue());
	
	window.location='getFits.pl?ra='+frmRA.getValue()+'&dec='+frmDEC.getValue()+'&imgSize=300&sDate=1970-01-01&eDate=2009-02-01';
	//Ext.Msg.alert("Message","sDate: "+startDate.getDay());


//	}
    }


	var advOptform = new Ext.form.FormPanel({
        baseCls: 'x-plain',
        labelWidth: 55,
        url:'save-form.php',
        defaultType: 'textfield',

        items: [{
            fieldLabel: 'Send To',
            name: 'to',
            anchor:'100%'  // anchor width by percentage
        },{
            fieldLabel: 'Subject',
            name: 'subject',
            anchor: '100%'  // anchor width by percentage
        }, {
            xtype: 'textarea',
            hideLabel: true,
            name: 'msg',
            anchor: '100% -53'  // anchor width by percentage and height by raw adjustment
        }]
    });

    // advanced image options window
    var advOptWin = new Ext.Window({
        title: 'Resize Me',
        width: 500,
        height:300,
        minWidth: 300,
        minHeight: 200,
        layout: 'fit',
        plain:true,
        bodyStyle:'padding:5px;',
        buttonAlign:'center',
        items: advOptform,

        buttons: [{
            text: 'Send'
        },{
            text: 'Cancel'
        }]
    });

var resizer = new Ext.Resizable("simple",{
});
resizer.all.setDisplayed(true);

/****** NOT USED: MAY BE USEFUL FOR OVER-RIDING RADIO SELECTIONS
Ext.override(Ext.form.Radio, {
  onClick : function() {
	Ext.Msg.alert('click',this.el.dom.name);
    if(this.el.dom.checked != this.checked) {
      Ext.Msg.alert('click',this.el.dom.name);
	var els = this.el.up('form').select('input[name='+this.el.dom.name+']');
      els.each(function(el) {
        if(el.dom.id == this.id) {
          this.setValue(true);
        } else {
          Ext.getCmp(el.dom.id).setValue(false);   
        }
      }, this);
    }
  }
});
*/


});


/***** BEGIN DUMMY TEST DATA *****/


Ext.grid.dummyData = [
    ['Observation'],
    ['Telescope'],
    ['Instrument'] 
];

Ext.grid.radecCoordinates = [
    ['180.5\,11.5','RA:180.5\,DEC:11.5'],
    ['10.5\,0.5','RA:10.5\,DEC:0.5'],
    ['10.5\,-0.5','RA:10.5\,DEC:-0.5'],
];


Ext.grid.dummyData2 = [
    ['<img src="/images/arrow_down1.gif">','gif'],
    ['<img src="/images/arrow_up.gif">','gif'],
    ['<img src="/images/arrow_up1.gif">','gif'],
    ['<img src="/images/bw_arrow.jpg">','gif'] 
];

Ext.grid.dummyData3 = [
    ['<img src="/images/arrow_down1.gif">','gif']
];

/***** END DUMMY TEST DATA *****/