$(document).ready(function(){

        var tot=$('.event').length;
        
        var screenWidth = $('.events').width();

        var bord = $('.event').outerWidth() - $('.event').innerWidth();
        var padd = $('.event').innerWidth() - $('.event').width();
        var marg = $('.event').outerWidth(true) - $('.event').outerWidth();
        $('.event').width((screenWidth-(tot * (bord+padd+marg)+1))/tot);

        $('.eventDate').each(function(index, value) {
		var colours = ['a', 'b', 'c', 'd', 'e', 'f'];
		$(this).addClass(colours[index % 6]);
	});


        $('.eventField').each(function(index, value) {
                var classStr = $(this).attr('class').split(/\s+/);
                if(classStr.indexOf('start') != -1) {
                        $(this).show();
                } else if(classStr.indexOf('summary') != -1) {
                        $(this).show();
                }
        });

	$('.eventEl').click(function() {
		showWindow($(this));
	});

});

function showWindow(data) {
           
        var title = $('.summary',data).text();
        var body = $('.description',data).html();

        if(body == null) {
                body = 'no description available';
        }

        $('<div id="overlay">').css({
                width:$(document).width(),
                height:$(document).height(),
                opacity:0.6

        }).appendTo('body').click(function(){
                $(this).remove();
                $('#windowBox').remove();
        });

        $('body').append('<div id="windowBox"><div id="titleDiv">'+title+'</div>'+body+'</div>');

        $('#windowBox').css({
                width:500,
                height:350,
                left: ($(window).width() - 500)/2,
                top: ($(window).height() - 350)/2
        });
}