(function(){
	
	var calendar;
	
	// force ie6 sidebar to be correct height. called every time I change the display of an item.
	var fixSidebar = function(){
		if (Browser.Engine.trident4) {
			var right = $('content-right');
			right.setStyle('height', right.getParent().getSize().y);
		}
	};
	
	
	var addMonthControls = function(){
		var caption = calendar.element().getElement('caption');
		
		new Element('span', {
			html: '<span>Prev<br />Month</span>&lsaquo;',
			events: {
				click: function(){
					calendar.deincrementMonth();
					addMonthControls();
				}
			}
		}).inject(caption, 'top');
		
		new Element('span', {
			html: '&rsaquo;<span>Next<br />Month</span>',
			events: {
				click: function(){
					calendar.incrementMonth();
					addMonthControls();
				}
			}
		}).inject(caption);
	};
	
	var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
	
	var findEvents = function(timestamp){
		// build the list and details if necessary
		var listContainer = $('list-container');
		var details = $('details');
		
		// empty the list and details right off the bat if they are defined
		if (details) details.empty();
		
		if (!listContainer)
			buildList();
		else
			$('list').empty();
			
		// insert an ajax loader image
		var loader = new Element('img', {
			src: 'http://downtownseattleevents.com/event/images/ajax-loader.gif',
			id: 'loader'
		}).inject('list');
		
		// request the events for the day
		new Request({
			url: '/calendar/request/' + timestamp / 1000, // javascript does its timestamp in milliseconds so divide by 1000
			noCache: true,
			onSuccess: function(response){
				if (loader) loader.dispose();
				
				displayEvents(response);
				
				var date = new Date(timestamp);
				var month = months[date.getMonth()];
				var day = date.getDate();
				$('list-date').set('html', month + ' ' + day);
			}
		}).get();
	};
	
	
	var displayEvents = function(response){
		// build the list if necessary
		if (!$('list-container'))
			buildList();
		
		// decode the json response
		var events = new Hash(JSON.decode(response));
		
		// variable to determine if some events have been returned
		var thereAreEvents = false;
		
		// display the events in the list
		events.each(function(event){
			new Element('li', {
				html: event.name,
				events: {
					click: displayDetails.pass(event)
				}
			}).inject('list');
			
			thereAreEvents = true;
		});
		
		if (!thereAreEvents){
			new Element('li', {
				html: 'No Events Scheduled Today'
			}).inject('list');
		}
	};
	
	var displayDetails = function(event){
		var details = $('details');
		
		// build the details if necessary		
		if (!details){
			buildDetails();
			var details = $('details');
		}
		
		details.empty();
		details.setStyle('visibility', 'visible');
		
		if (event.image){
			new Element('img', {
				src: '/images/event/' + event.image
			}).inject(details);
		}
		
		new Element('h3', {
			html: event.name
		}).inject(details);
		
		new Element('address', {
			html: event.company
		}).inject(details);
		
		new Element('address', {
			html: event.address
		}).inject(details);
		
		if (event.time){
			new Element('address', {
				html: event.time
			}).inject(details);
		}		
		
		new Element('p', {
			html: event.description
		}).inject(details);
		
		if (event.price){
			new Element('address', {
				html: event.price
			}).inject(details);
		}
		
		if (event.website){
			new Element('a', {
				html: event.website,
				href: event.website
			}).inject(details);
		}
	};
	
	
	var buildList = function(){
		var container = new Element('div', {
			id: 'list-container'
		}).inject('content-left');
		
		var h2 = new Element('h2', {
			html: 'Events for '
		}).inject(container);
		
		new Element('span', {
			id: 'list-date'
		}).inject(h2);
		
		new Element('div', {
			html: 'click an event for more info'
		}).inject(container);
		
		new Element('ul', {
			id: 'list'
		}).inject(container);
	};
	
	var buildDetails = function(){
		var details = new Element('div', {
			id: 'details'
		}).inject('content-left');
	};
	
	
	window.addEvent('domready', function(){
		
		// fix the sidebar for ie6
		fixSidebar();
		
		
		calendar = new Calendar({
			dayLabels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
			shortYear: true,
			dayFunction: function(date, calendar) {
				this.set({
					html: date.getDate(),
					events: {
						click: function() {
							calendar.changeDay(date);
							findEvents(date.getTime());
						}
					}
				});
			},
			todayFunction: function(date){
				this.set({
					html: date.getDate(),
					events: {
						click: function() {
							calendar.changeDay(date);
							findEvents(date.getTime());
						}
					}
				});
				findEvents(date.getTime());
			}
		});
		
		addMonthControls();
		
		calendar.element().inject('content-left');
		
	});

})();