/*!
 * Ext JS Library 3.4.0
 * Copyright(c) 2006-2011 Sencha Inc.
 * licensing@sencha.com
 * http://www.sencha.com/license
 */
/**
 * @class Ext.calendar.EventEditWindow
 * @extends Ext.Window
 * <p>A custom window containing a basic edit form used for quick editing of events.</p>
 * <p>This window also provides custom events specific to the calendar so that other calendar components can be easily
 * notified when an event has been edited via this component.</p>
 * @constructor
 * @param {Object} config The config object
 */
Ext.calendar.EventEditWindow = function(config) {
	/**
	var M = Ext.calendar.EventMappings;
    start = config.rec[M.StartDate.name];
    alert(start.getDate());
    **/
	this.accountData = config.accountData;
    
	this.itemStore = new Ext.data.Store({
		proxy: new Ext.data.HttpProxy({
			url:'./src/api/Interface.php'		
		}),
		baseParams:{
			'class':'Reservation',
			'method':'getEmptyReservation'
		},
	  	reader: new Ext.data.JsonReader(
	  		{
	   			root:'data'
			},
	  		[{name: 'value', mapping:'value'}, {name: 'name', mapping:'name'}])
	 
	 });
    
 	// this.itemStore.load();

	this.reservationComboBox = new Ext.form.ComboBox({
		id:"reservationComboBox",
		anchor:'100%',
		store:this.itemStore,
		fieldLabel: '위치',
		displayField:'name',
        editable:false,
        hiddenName:'location',
       	valueField:'value',
        typeAhead: true,
        mode: 'local',
        triggerAction: 'all',
        emptyText:'예약위치 선택',
        allowBlank:false,
        selectOnFocus:true
    });
	
    var formPanelCfg = {
        xtype: 'form',
        labelWidth: 65,
        frame: false,
        bodyStyle: 'background:transparent;padding:5px 10px 10px;',
        bodyBorder: false,
        border: false,
        items: [{
            id: 'user',
            name: 'camping_user_name',
            fieldLabel: '예약자',
            xtype: 'textfield',
            anchor: '50%',
            value:NAME
        },{
            id: 'tel',
            name: 'camping_user_tel',
            fieldLabel: '연락처',
            emptyText : '-을 빼고 번호만 작성해 주세요.',
            vtype:'numeric',
            allowBlank:false,
            xtype: 'textfield',
            anchor: '50%'
        },
        {
            xtype: 'daterangefield',
            id: 'date-range',
            anchor: '100%',
            fieldLabel: '예약일'
        },this.reservationComboBox]
    };
    
    
    this.formPanel = new Ext.form.FormPanel(formPanelCfg);
    
  
    
    
    
   //formPanelCfg.items.push(this.reservationComboBox);
    
/**
    if (config.calendarStore) {
        this.calendarStore = config.calendarStore;
        delete config.calendarStore;

        formPanelCfg.items.push(this.reservationComboBox);
    }
**/
    Ext.calendar.EventEditWindow.superclass.constructor.call(this, Ext.apply({
        titleTextAdd: '예약',
        titleTextEdit: '예약',
        width: 600,
        autocreate: true,
        border: true,
        closeAction: 'hide',
        modal: false,
        resizable: false,
        buttonAlign: 'left',
        savingMessage: 'Saving changes...',
        deletingMessage: 'Deleting event...',

        fbar: [
        '->', {
            text: '예약',
            disabled: false,
            handler: this.onSave,
            scope: this
        },
        {
            text: '취소',
            disabled: false,
            handler: this.onCancel,
            scope: this
        }],
        items: this.formPanel
    },
    config));
};

Ext.extend(Ext.calendar.EventEditWindow, Ext.Window, {
	
	
	// private
    onSave: function() {
    	
    	if(this.formPanel.getForm().isValid()){
			this.formPanel.form.submit(
			{	waitMsg: '예약 등록 중 입니다...',
				url:'./src/api/Interface.php',
				params :{
							'class':'Reservation',
							method:'regReservation',
							date:this.starDate,
							camping_list_uid:this.camping_list_uid
							
						},
				scope:this,
				success: function(form, action) {
					if(action.result.success){
						
						this.hide();
						this.formPanel.getForm().reset();
						this.fireEvent(this.isAdd ? 'eventadd': 'eventupdate', this, this.activeRecord);
						
						
						Ext.MessageBox.alert('안내', '대기자 등록이 완료되었습니다. 입금이 완료되면 예약완료됩니다.');
						
						
						
					}else{
            			Ext.MessageBox.alert('예약 등록 중 오류', action.result.msg)
            		}
					
  										
				},
				failure: function(form, action) { 
					Ext.MessageBox.alert('Error', '예약 등록 중 오류가 발생 했습니다.')
				}
			});
            		//loginWindow.close();
		}

        
    },
    /**
	onSave : function(){
		alert("save");
		
		//var loginWindow = Ext.getCmp('loginWindow');
		if(this.formPanel.getForm().isValid()){
			this.formPanel.form.submit(
			{	waitMsg: '항목 등록 중...',
				url:'./src/api/Interface.php',
				params :{
							'class':'User',
							method:'joinUser'
							
						},
				scope:this,
				success: function(form, action) {
					if(action.result.success){
						this.hide();
						this.formPanel.getForm().reset();
					}else{
            			Ext.MessageBox.alert('회원가입 오류', action.result.msg)
            		}
					
  										
				},
				failure: function(form, action) { 
					Ext.MessageBox.alert('Error', '항목등록 오류가 발생 했습니다.')
				}
			});
            		//loginWindow.close();
		}
		
		
	},**/
	
    // private
    newId: 10000,

    // private
    initComponent: function() {
        Ext.calendar.EventEditWindow.superclass.initComponent.call(this);

        this.formPanel = this.items.items[0];

        this.addEvents({
            /**
             * @event eventadd
             * Fires after a new event is added
             * @param {Ext.calendar.EventEditWindow} this
             * @param {Ext.calendar.EventRecord} rec The new {@link Ext.calendar.EventRecord record} that was added
             */
            eventadd: true,
            /**
             * @event eventupdate
             * Fires after an existing event is updated
             * @param {Ext.calendar.EventEditWindow} this
             * @param {Ext.calendar.EventRecord} rec The new {@link Ext.calendar.EventRecord record} that was updated
             */
            eventupdate: true,
            /**
             * @event eventdelete
             * Fires after an event is deleted
             * @param {Ext.calendar.EventEditWindow} this
             * @param {Ext.calendar.EventRecord} rec The new {@link Ext.calendar.EventRecord record} that was deleted
             */
            eventdelete: true,
            /**
             * @event eventcancel
             * Fires after an event add/edit operation is canceled by the user and no store update took place
             * @param {Ext.calendar.EventEditWindow} this
             * @param {Ext.calendar.EventRecord} rec The new {@link Ext.calendar.EventRecord record} that was canceled
             */
            eventcancel: true,
            /**
             * @event editdetails
             * Fires when the user selects the option in this window to continue editing in the detailed edit form
             * (by default, an instance of {@link Ext.calendar.EventEditForm}. Handling code should hide this window
             * and transfer the current event record to the appropriate instance of the detailed form by showing it
             * and calling {@link Ext.calendar.EventEditForm#loadRecord loadRecord}.
             * @param {Ext.calendar.EventEditWindow} this
             * @param {Ext.calendar.EventRecord} rec The {@link Ext.calendar.EventRecord record} that is currently being edited
             */
            editdetails: true
        });
    },

    // private
    afterRender: function() {
        Ext.calendar.EventEditWindow.superclass.afterRender.call(this);

        this.el.addClass('ext-cal-event-win');

        /**
        Ext.get('tblink').on('click',
        function(e) {
            e.stopEvent();
            this.updateRecord();
            this.fireEvent('editdetails', this, this.activeRecord);
        },
        this);
        **/
    },

    /**
     * Shows the window, rendering it first if necessary, or activates it and brings it to front if hidden.
	 * @param {Ext.data.Record/Object} o Either a {@link Ext.data.Record} if showing the form
	 * for an existing event in edit mode, or a plain object containing a StartDate property (and 
	 * optionally an EndDate property) for showing the form in add mode. 
     * @param {String/Element} animateTarget (optional) The target element or id from which the window should
     * animate while opening (defaults to null with no animation)
     * @return {Ext.Window} this
     */
    show: function(o, animateTarget, camping_list_uid) {
        // Work around the CSS day cell height hack needed for initial render in IE8/strict:
        var anim = (Ext.isIE8 && Ext.isStrict) ? null: animateTarget;

        Ext.calendar.EventEditWindow.superclass.show.call(this, anim,
        function() {
            Ext.getCmp('tel').focus(false, 100);
        });
       // Ext.getCmp('delete-btn')[o.data && o.data[Ext.calendar.EventMappings.EventId.name] ? 'show': 'hide']();

        var rec,
        f = this.formPanel.form;

        
        if (o.data) {
            rec = o;
            this.isAdd = !!rec.data[Ext.calendar.EventMappings.IsNew.name];
            if (this.isAdd) {
                // Enable adding the default record that was passed in
                // if it's new even if the user makes no changes
                rec.markDirty();
                this.setTitle(this.titleTextAdd);
            }
            else {
                this.setTitle(this.titleTextEdit);
            }

           // f.loadRecord(rec);
        }
        else {
        
            this.isAdd = true;
            this.setTitle(this.titleTextAdd);

            var M = Ext.calendar.EventMappings,
            eventId = M.EventId.name,
            start = o[M.StartDate.name],
            end = o[M.EndDate.name] || start.add('h', 1);

            rec = new Ext.calendar.EventRecord();
            rec.data[M.EventId.name] = this.newId++;
            rec.data[M.StartDate.name] = start;
            rec.data[M.EndDate.name] = end;
            rec.data[M.IsAllDay.name] = !!o[M.IsAllDay.name] || start.getDate() != end.clone().add(Date.MILLI, 1).getDate();
            rec.data[M.IsNew.name] = true;

            f.reset();
            f.loadRecord(rec);
        }
        /**
        if (this.calendarStore) {
            Ext.getCmp('calendar').setValue(rec.data[Ext.calendar.EventMappings.CalendarId.name]);
        }
        **/
        /**
        this.itemStore.load({
        	date:''
        })
        **/
        //alert(rec.data.format('Y-m-d'));                         
        this.starDate = rec.data[Ext.calendar.EventMappings.StartDate.name].format('Y-m-d');
        
        this.camping_list_uid = camping_list_uid;
        
        this.itemStore.load({
        	params:{
        		date:this.starDate,
        		camping_list_uid:this.camping_list_uid
        	}
        	
        })
        
        
        Ext.getCmp('date-range').setValue(rec.data);
        this.activeRecord = rec;

        return this;
    },

    // private
    roundTime: function(dt, incr) {
        incr = incr || 15;
        var m = parseInt(dt.getMinutes(), 10);
        return dt.add('mi', incr - (m % incr));
    },

    // private
    onCancel: function() {
    	this.formPanel.getForm().reset();
        this.cleanup(true);
        this.fireEvent('eventcancel', this);
    },

    // private
    cleanup: function(hide) {
        if (this.activeRecord && this.activeRecord.dirty) {
            this.activeRecord.reject();
        }
        delete this.activeRecord;

        if (hide === true) {
            // Work around the CSS day cell height hack needed for initial render in IE8/strict:
            //var anim = afterDelete || (Ext.isIE8 && Ext.isStrict) ? null : this.animateTarget;
            this.hide();
        }
    },

    // private
    updateRecord: function() {
        var f = this.formPanel.form,
        dates = Ext.getCmp('date-range').getValue(),
        M = Ext.calendar.EventMappings;

        f.updateRecord(this.activeRecord);
        this.activeRecord.set(M.StartDate.name, dates[0]);
        this.activeRecord.set(M.EndDate.name, dates[1]);
        this.activeRecord.set(M.IsAllDay.name, dates[2]);
        this.activeRecord.set(M.CalendarId.name, this.formPanel.form.findField('calendar').getValue());
    },

    

    // private
    onDelete: function() {
        this.fireEvent('eventdelete', this, this.activeRecord);
    }
});