var EventList = new Array();
var EventWindow;
var EventListWindow;
var MainScreenPanel;
var DISCLAIMER = "<BR/>DISCLAIMER:  This is for informational purposes only.  Genesis and the College and community partners of the College Community Network do not endorse any event or business.";

Ext.onReady(function() {

	var EntityType = document.getElementById("EntityTypeID").value;
    //Create a group store for the grid declared later
	var EventStore = new Ext.data.Store({
        url			: '/ajax/events.php?entitytype='+EntityType,// load using HTTP
        reader		: new Ext.data.XmlReader({// the return will be XML, so lets set up a reader
               record	: 'Record', // records will have an "Record" tag
               id		: 'CalendarID'
           }, [
               // set up the fields mapping into the xml doc
               // The first needs mapping, the others are very basic
               //{name: 'Author', mapping: 'ItemAttributes > Author'},
               'CalendarID', 'EventDesc', 'EntityShortDesc', 'CalendarStartTime', 'CalendarEndTime',
               'CalendarDate', 'EntityName', 'EntityColor', 'EventDesc2'
           ])
	});
	
	EventStore.load({
	    params: { //this is only parameters for the FIRST page load,
	        //use baseParams in the store config to have 
	        //params applied to EVERY load request.
	        foo: 'bar',
	        start: 0, //pass start/limit parameters for paging
	        limit: 10
	    },
	    //scope:myStore
	    callback: function(rec, options, success){
			this.toDay = new Date().clearTime();
	    	
	    	//For testing, add multiple events to the calendar

	    	//Fill the list here
	        for(i=0; i<this.getTotalCount(); i++){
	        	var record = this.getAt(i);
	        	var rId = i+1;
	        	var all_day = false;
	        	var startTime = record.get("CalendarStartTime");
	        	var endTime = record.get("CalendarEndTime");
	        	
	        	//Set as an "all day" event if no start time is set
	        	if(startTime == "00:00:00"){
	        		endTime = "23:59:00";
	        		all_day = true;	
	        	}
	        	else{
	        		if(endTime == "00:00:00"){
	        			var arr = startTime.split(":");
	        			var nHour = parseInt(arr[0])+2;
	        			if(nHour < 10){
	        				nHour = "0"+nHour;//Pad with 0
	        			}
	        			endTime = nHour+":"+arr[1]+":"+arr[2];
	        			//alert(endTime);
	        		}
	        	}
	        	
	        	EventList.push(Ext.util.JSON.encode({
	        		id: rId, 
	        		calendarid: record.get("CalendarID"),
	        		summary: record.get("EventDesc2"),
	        		shortsummary: record.get("EventShortDesc"),
	        		entity: record.get("EntityName"),
	        		entitycolor: record.get("EntityColor"),
	        		dtstart: record.get("CalendarDate")+" "+startTime, 
	        		dtend: record.get("CalendarDate")+" "+endTime, 
	        		is_all_day_event: all_day
	        	}));
	        	//alert(record.get("EventDesc"));
	        }
	    	
	        
	        //alert("DONE LOADING: "+EventList);
	        document.getElementById("loading").style.display = "none";
	        
			MainScreenPanel = new Tine.Calendar.MainScreenCenterPanel();
    
		    new Ext.Viewport({
		        layout: 'fit',
		        items: MainScreenPanel
		    });	        
	    }
	});
	
	var EventWindowHTML = "<iframe frameborder='0' scrollbars='yes' id='EventWindowFrame' src='about:blank' width='100%' height='91%'></iframe>";
	EventWindowHTML += DISCLAIMER;
    EventWindow = new Ext.Window({
        applyTo     : 'eventwindow',
        title	    : 'Event Details',
        layout      : 'fit',
        width       : 600,
        height      : 400,
        closeAction :'hide',
        plain       : true,
		modal		: true,
		resizable	: false,
		draggable	: false,
		html		: EventWindowHTML,
        buttons: [{
            text     : 'Close',
            handler  : function(){
                EventWindow.hide();
                document.getElementById("EventWindowFrame").src = "about:blank";                
            }
        }]
    });
    
    //Open the event list
    openEventListWindow();
});

/**
 * This is the function that creates the modal window
 * show the event information.  The id passed in is 
 * the database identifier, not the array identifier
 * in the EventList array.
 */
function openEventWindow(id){
	document.getElementById("EventWindowFrame").src = "/eventinfo.php?id="+id;
	EventWindow.show();
}

/**
 * Opens the Event List.  This is shown when
 * the calendar first loads.
 */
function openEventListWindow(){
	var EventListWindowHTML = "<iframe frameborder='0' scrollbars='yes' id='EventListWindowFrame' src='/eventlist.php' width='100%' height='88%'></iframe>";
	EventListWindowHTML += DISCLAIMER;
    EventListWindow = new Ext.Window({
        title	    : 'Upcoming Events',
        layout      : 'fit',
        width       : 450,
        height      : 440,
        plain       : true,
		modal		: true,
		resizable	: false,
		draggable	: false,
		closable	: false,
		html		: EventListWindowHTML,
        buttons: [{
            text     : 'Month View',
            id		 : 'GoToMonthCalendarButton',
        	iconCls  : 'cal-month-view',
            handler  : function(){
				openMonthCalendar();
            }
        },{
            text     : 'Go To Calendar >>>',
            id		 : 'GoToCalendarButton',
            handler  : function(){
				openCalendar();
            }
        }]
    });
    
	EventListWindow.show();
	//document.getElementById("EventListWindowFrame").src = "/eventlist.php";
}

/**
 * Streamlines opening the calendar once the screen
 * panel has finished loading
 */
function openCalendar(){
    //MainScreenPanel.changeView('month'); 
    EventListWindow.hide();
    document.getElementById("EventListWindowFrame").src = "about:blank";     
}

/**
 * Streamlines opening the calendar once the screen
 * panel has finished loading
 */
function openMonthCalendar(){
    MainScreenPanel.changeView('month'); 
	openCalendar();
}