////////////////////////////////////////////////
// gCalendar.js
//  - created by Ryan Jensen
//    m.ryan.jensen@gmail.com
//  - created on 10/23/2009
////////////////////////////////////////////////


/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//
// the section below defines the calendars
// that will be included on the page.
//
// calendars should be entered as follows:
// { domain:"XXXXXXXX", danceStyle:"XXXXXXXX", eventType:"XXXXXXXX", color:"XXXXXXXX", htmlUrl:"XXXXXXXX" }
//
//  - domain:		the domain of the site / person that owns the calendar
//  - danceStyle:	one of the items defined above in the danceStyles array
//  - eventType:	one of the items defined above in the eventTypes array
//  - color:		the color the calender items should be displayed in
//			(can either be the name of a color or the hex code)
//  - htmlUrl:		the html url of the calendar provided by Google Calendars
//  - sourceId:		can be used in place of htmlUrl.  this is the ID of the calendar
//    (optional)	as provided by Google Calendars
//
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var eventCalendar =
{
	sources:
	[
		{ domain:"convergencedbc.com", danceStyle:"Tango", eventType:"Class", displayName:"Tango Classes", color:"green", htmlUrl:"http://www.google.com/calendar/embed?src=10b3rtc3ka40sq7l3jpt7q24og%40group.calendar.google.com&ctz=America/Chicago" },
		{ domain:"convergencedbc.com", danceStyle:"Tango", eventType:"Dance", displayName:"Milongas", color:"darkblue", htmlUrl:"http://www.google.com/calendar/embed?src=rbvti6d2j3a2g6baqfku158jnk%40group.calendar.google.com&ctz=America/Chicago" },
		{ domain:"convergencedbc.com", danceStyle:"Salsa", eventType:"Class", displayName:"Salsa Class", color:"red", htmlUrl:"http://www.google.com/calendar/embed?src=mj83jr7uv8rs2k7dm36j846guk%40group.calendar.google.com&ctz=America/Chicago" },
		{ domain:"convergencedbc.com", danceStyle:"Yoga", eventType:"Class", displayName:"Yoga", color:"yellow", htmlUrl:"http://www.google.com/calendar/embed?src=gtjc3r3b24h1no7sbjv32ok0vs%40group.calendar.google.com&ctz=America/Chicago" },
		{ domain:"convergencedbc.com", danceStyle:"Swing/Ballroom", eventType:"Class", displayName:"Swing/Ballroom Class", color:"lightpurple", htmlUrl:"http://www.google.com/calendar/embed?src=1fe99sgk7m0476gbkdsarodhic%40group.calendar.google.com&ctz=America/Chicago" }
	]
};


/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//
// Blank calendar URL (needed for when all filters are unselected)
//
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var blankCalendarUrl = "http://www.google.com/calendar/embed?src=jb8scjufnvi5hvhc48plhjmgcc%40group.calendar.google.com&ctz=America/Chicago";

////////////////////////////////////////////////
//
// set the following variable to your
// site's domain.  this will prevent users
// from excluding your calendar(s) through
// the filter
//
//////////////////////////////////////////////
var homeDomain  = "convergencedbc.com";		// set this to your domain; these calendar items can't be turned off

//////////////////////////////////////////////
//
// set the size of the calendar
//
//////////////////////////////////////////////
var height = 600;	// height in pixels
var width = 759;	// width in pixels

//////////////////////////////////////////////
//
// the next two lines define the calendar
// filters that will appear on the page
//
//////////////////////////////////////////////
var danceStyles = new Array("Tango", "Salsa", "Swing/Ballroom", "Yoga", "Belly Dancing");	// dance styles to use as a calendar filter
var eventTypes  = new Array("Dance", "Class", "Workshop");				// the types of events to be used as a secondary filter





//////////////////////////////////////////////////////////////////
//
//	*** DO NOT MODIFY ANY OF THE FOLLOWING CODE ***
//
//////////////////////////////////////////////////////////////////

// list of colors whose names can be used in calendar defs to be translated to hex
var calendarColors = [ {colorName:"red", hex:"#A32929"}, {colorName:"lightred", hex:"#B1365F"}, {colorName:"darkred", hex:"#865A5A"},
	{colorName:"orange", hex:"#B1440E"}, {colorName:"lightorange", hex:"#BE6D00"}, {colorName:"darkorange", hex:"#8D6F47"},
	{colorName:"yellow", hex:"#AB8B00"}, {colorName:"lightyellow", hex:"#88880E"}, {colorName:"darkyellow", hex:"#6E6E41"},
	{colorName:"green", hex:"#0D7813"}, {colorName:"lightgreen", hex:"#528800"}, {colorName:"darkgreen", hex:"#28754E"},
	{colorName:"blue", hex:"#2952A3"}, {colorName:"lightblue", hex:"#1B887A"}, {colorName:"darkblue", hex:"#4A716C"}, {colorName:"navy", hex:"#29527A"},
	{colorName:"purple", hex:"#5229A3"}, {colorName:"lightpurple", hex:"#7A367A"}, {colorName:"darkpurple", hex:"#705770"},
	{colorName:"grey", hex:"#705770"}, {colorName:"lightgrey", hex:"#5A6986"}, {colorName:"darkgrey", hex:"#4E5D6C"} ];
var defaultCalendarColor = "#2952A3";

// wrapper method that creates the necessary divs for the calendar filters
var generateFilters = function() {
	var filterContainer = document.createElement("div");
	filterContainer.id = "calendarFilterContainer";

	var danceStyleFilterDiv = createFilterDiv("danceStylesFilter", danceStyles);
	var eventFilterDiv = createFilterDiv("eventTypeFilter", eventTypes);

	filterContainer.appendChild(danceStyleFilterDiv);
	filterContainer.appendChild(eventFilterDiv);

	return filterContainer;
};

// generic method to create a filter div of a given type
//  - divName:		the id of the div and base id of child inputs
//  - itemArray:	elements to be turned into filter options
var createFilterDiv = function(divName, itemArray) {
	// create div container to be returned
	var filterDiv = document.createElement("div");
	filterDiv.id = divName;
	filterDiv.className = "calendarFilter";

	// create ul
	var filterList = document.createElement("ul");
	filterDiv.appendChild(filterList);

	// create filter list items
	for(var filterIndex = 0; filterIndex < itemArray.length; filterIndex++)
	{
		var filter = itemArray[filterIndex];
		var filterItem = document.createElement("li");
		filterList.appendChild(filterItem);

		var filterCheckbox = document.createElement("input");
		filterCheckbox.id = divName + cleanString(filter);
		filterCheckbox.setAttribute("type", "checkbox");
		filterCheckbox.setAttribute("checked", "true");
		filterCheckbox.defaultChecked = true;
		filterCheckbox.onclick = filterChanged;
		filterItem.appendChild(filterCheckbox);

		var filterLabel = document.createElement("label");
		filterLabel.setAttribute("for", filterCheckbox.id);
		filterLabel.appendChild(document.createTextNode(filter));
		filterItem.appendChild(filterLabel);
	}

	return filterDiv;
};

// creates a color-coded div for all the calendars
var generateLegend = function() {
	var legendDiv = document.createElement("div");
	legendDiv.className = "calendarLegend";

	var calendarList = document.createElement("ul");
	legendDiv.appendChild(calendarList);

	for(var calendarIndex = 0; calendarIndex < eventCalendar.sources.length; calendarIndex++)
	{
		var calendar = eventCalendar.sources[calendarIndex];
		var calendarColor = getHexColor(calendar.color);

		var legendItem = document.createElement("li");
		calendarList.appendChild(legendItem);

		var colorSample = document.createElement("div");
		colorSample.className = "colorSample";
		colorSample.setAttribute("style", "background-color:" + calendarColor + ";");
		colorSample.style.backgroundColor = calendarColor;
		legendItem.appendChild(colorSample);

		var calendarName = document.createElement("div");
		calendarName.className = "calendarName";
		calendarName.setAttribute("style", "color:" + calendarColor + ";");
		calendarName.style.color = calendarColor;
		calendarName.appendChild(document.createTextNode(calendar.displayName));
		legendItem.appendChild(calendarName);
	}

	return legendDiv;
};

// create the iframe src attribute for the embedded Google calendar
var generateSrcAttribute = function() {
	// set some base parameters (no title, no tabs, height, width, etc.)
	var url = "http://www.google.com/calendar/embed?showTitle=0&showTabs=0&showCalendars=0&height=" + height + "&wkst=1&bgcolor=%23ffffff";
	var calendarSources = "";

	// loop through each calendar and see if it meets the filter criteria
	for(var calendarIndex = 0; calendarIndex < eventCalendar.sources.length; calendarIndex++)
	{
		var calendar = eventCalendar.sources[calendarIndex];
		var showCalendar = true;

		var danceStyleFilter = document.getElementById("danceStylesFilter" + cleanString(calendar.danceStyle));
		var eventTypeFilter = document.getElementById("eventTypeFilter" + cleanString(calendar.eventType));

		if(danceStyleFilter == null || !(danceStyleFilter.checked)) { showCalendar = false; }
		if(eventTypeFilter == null || !(eventTypeFilter.checked)) { showCalendar = false; }

		if(showCalendar)
		{
			calendarSources += "&src=" + (calendar.htmlUrl != null ? getSrcFromUrl(calendar.htmlUrl) : calendar.sourceId) + "&color=" + getHexColor(calendar.color).replace("#", "%23");
		}
	}

	if(calendarSources.length == 0)
		calendarSources = "&src=" + getSrcFromUrl(blankCalendarUrl);	// adding another parameter prevents the iframe from displaying Google's login page and keeps an empty calendar on the screen

	return url + calendarSources + "&ctz=America%2FChicago";
};

var filterChanged = function() {
	var calendarFrame = document.getElementById(homeDomain + "EventCalendar");
	var newSrc = generateSrcAttribute();
	if(newSrc != calendarFrame.src)
	{
		calendarFrame.src = newSrc;
	}
};


// ensures user input strings can match system strings
// (removes spaces from inputString and changes to lowercase)
var cleanString = function(inputString) {
	return inputString.replace(/\s/g, "").toLowerCase();
};

// nabs the needed src string from Google's HTML Calendar URL
//  - htmlCalendarUrl:	Google's HTML Calendar URL
var getSrcFromUrl = function(htmlCalendarUrl) {
	// http://www.google.com/calendar/embed?src=7ob8f9opobci509tg4jgq3auos%40group.calendar.google.com&ctz=America/Chicago
	var srcIndex = htmlCalendarUrl.indexOf("src=");
	var endIndex = htmlCalendarUrl.indexOf("&", srcIndex);

	if(srcIndex == -1)
		return "";
	return htmlCalendarUrl.substring(srcIndex + 4, (endIndex == -1 ? htmlCalendarUrl.length : endIndex));
};

// convert the name of a color to a corresponding hex color
var getHexColor = function(someColorType) {
	if(someColorType.charAt(0) == "#")
		return someColorType;
	else
	{
		var colorToMatch = cleanString(someColorType);
		for(var colorIndex = 0; colorIndex < calendarColors.length; colorIndex++)
		{
			if(colorToMatch == calendarColors[colorIndex].colorName)
				return calendarColors[colorIndex].hex;
		}
	}

	return defaultCalendarColor;	// default color to return if no match is found
};

// puts the contents into a rounded box container
var putInRoundBox = function(innerContents) {
	var roundBox = document.createElement("div");
	roundBox.className = "roundBox";

	var roundTop = getRoundTopHtml();
	var contents = document.createElement("div");
	contents.className = "crtlContainerfg";
	contents.appendChild(innerContents);
	var roundBottom = getRoundBottomHtml();

	roundBox.appendChild(roundTop);
	roundBox.appendChild(contents);
	roundBox.appendChild(roundBottom);

	return roundBox;
};
var getRoundTopHtml = function() {
	var c1 = document.createElement("b");
	c1.className = "crtlContainer";
	var c2 = document.createElement("b");
	c2.className = "crtlContainer1";
	c1.appendChild(c2);
	c2.appendChild(document.createElement("b"));
	var c3 = document.createElement("b");
	c3.className = "crtlContainer2";
	c1.appendChild(c3);
	c3.appendChild(document.createElement("b"));
	var c4 = document.createElement("b");
	c4.className = "crtlContainer3";
	c1.appendChild(c4);
	var c5 = document.createElement("b");
	c5.className = "crtlContainer4";
	c1.appendChild(c5);
	var c6 = document.createElement("b");
	c6.className = "crtlContainer5";
	c1.appendChild(c6);

	return c1;
};
var getRoundBottomHtml = function() {
	var c1 = document.createElement("b");
	c1.className = "crtlContainer";
	var c2 = document.createElement("b");
	c2.className = "crtlContainer5";
	c1.appendChild(c2);
	var c3 = document.createElement("b");
	c3.className = "crtlContainer4";
	c1.appendChild(c3);
	var c4 = document.createElement("b");
	c4.className = "crtlContainer3";
	c1.appendChild(c4);
	var c5 = document.createElement("b");
	c5.className = "crtlContainer2";
	c1.appendChild(c5);
	c5.appendChild(document.createElement("b"));
	var c6 = document.createElement("b");
	c6.className = "crtlContainer1";
	c1.appendChild(c6);
	c6.appendChild(document.createElement("b"));

	return c1;
}


// insert the calendar onto the page
calendarDiv = document.getElementById("googleEventCalendar");
if(calendarDiv != null)
{
	var filters = generateFilters();
	calendarDiv.appendChild(filters);

	var legend = generateLegend();
	var boxedLegend = putInRoundBox(legend);
	calendarDiv.appendChild(boxedLegend);

	var calendarFrame = document.createElement("iframe");
	calendarFrame.id = homeDomain + "EventCalendar";
	calendarFrame.setAttribute("src", generateSrcAttribute());
	calendarFrame.setAttribute("style", "border-width:0");
	calendarFrame.setAttribute("width", width);
	calendarFrame.setAttribute("height", height);
	calendarFrame.setAttribute("frameborder", "0");
	calendarFrame.setAttribute("scrolling", "no");

	// add the iframe to the calendarDiv
	calendarDiv.appendChild(calendarFrame);

}