styles = new Array("default","gs1","gs2","gs3","gs4","gs5","gs6");

function applyStyles() {
	var items = $(".sidebar .grp").each(function(i) {
		var styleId = $(this).attr("id");
		var pickButton = $(this).find(".pick");
		var events = $("."+styleId);
		for (var k = 0; k < styles.length; k++) {
			if (pickButton.hasClass(styles[k])) {
				events.addClass(styles[k]);
			} else {
				events.removeClass(styles[k]);
			}
		}
	});
}

$(document).ready(function(){
	showPickerFn = function() {
		var pick = this;
		var groupCalendarLink = $(this).parent().find(".ref a").attr("href");
		var s = groupCalendarLink.replace('/calendar.html','');
		var styleId = $(this).parent().attr("id");
		var setStyleLink = groupCalendarLink.replace("calendar.html","setstyle.do");
		$(this).parent().append('<span class="colorpicker"></span>');
		var picker = $(this).parent().find(".colorpicker");
		var removeFn = function() {
			picker.remove();
		};
		var selectFn = function() {
			var groupEvents = $("."+styleId);
			for (var i = 0; i < styles.length; i++) {
				if ($(this).hasClass(styles[i])) {
					$.post(setStyleLink, {"style" : styles[i] });
					$(pick).addClass(styles[i]);
					if (groupEvents.length > 0) {
						groupEvents.addClass(styles[i]);
					}
				} else {
					$(pick).removeClass(styles[i]);
					if (groupEvents.length > 0) {
						groupEvents.removeClass(styles[i]);
					}
				}
			}
			removeFn();
		}
		for (var i = 0; i < styles.length; i++) {
			a = picker.append('<a class="item '+styles[i]+'"></a>');
		}
		picker.append("<span class='close'>or <a href='#'>don't change</a></span>");
		$(".item", picker).click(selectFn);
		$(".close a", picker).click(removeFn);
	};
	$(".pick").css('visibility','visible');
	$(".pick").click(showPickerFn);
	/* apply styles to the events */
	applyStyles();
});