$(document).ready( function() {

	// ---------------------- INITIALIZE ------------------------------

	var fluxCalID = '#fluxCalendar'; // reference element on site
	$.fluxCal = $(fluxCalID);

	var fetchingRecords = false; // tracks if an AJAX request is active

	var weekStr = "";

	$.ajaxSetup({cache:false});

	var debug = 0;
	var mobileBreakPoint = 420;

	// ----------------------------------------------------------------

	if (debug) { 
		$("<div id='debug'></div>")
			.css('position', 'fixed')
			.css('top', '5px')
			.css('right', '45px')
			.css('padding', '5px')
			.css('background-color', '#fff')
			.css('border', '1px solid #000')
			.appendTo('body');
	}

	function loadEvents(){
		var json = null;
		fetchingRecords = true;
		if ($.fluxCal.data('params')) { $.params = '&'+$.fluxCal.data('params'); } else { $.params = ''; }
		if ($.fluxCal.data('pastevents')) { $.pastevents = '&pastevents='+$.fluxCal.data('pastevents'); } else { $.pastevents = ''; }
		$.ajax({
			'async': false,
			'global': false,
			'url': 'https://calendar.instone.com/get.php?cal='+$.fluxCal.data('id')+$.params+'&offset='+$.fluxCal.data('offset')+'&limit='+$.fluxCal.data('limit')+$.pastevents,
			'dataType': "jsonp",
			'success': function(response) {

				if (!response.length==0) { // if we have events to show

					// append new records
					for (i in response) {
						// ------------- calendar template start -----------------

						if (response[i].WeekEnd==1) { dayClass='holiday' } else {dayClass='weekday'}
						if (response[i].LocationName!=0) {locationData="<a href='#'>"+response[i].LocationName+"</a>"} else {locationData='&nbsp;'}
						if (response[i].TravelTime!='') {travelTime=response[i].TravelTime+' minutes'} else {travelTime='&nbsp;'}
						if (response[i].ArriveTimeDT!='') {arriveBy=response[i].ArriveTime} else {arriveBy='&nbsp;'}
						if (response[i].BusTime) {busTime=response[i].BusTime;} else {busTime='';}
						if (response[i].Opponent) {opponent=response[i].Opponent} else {opponent='&nbsp;'}
						if (response[i].Score) {score=response[i].Score} else {score='&nbsp;'}
						if (response[i].Description) {description="<table class='notesBlck' cellspacing='0'><tr><td>"+response[i].Description+"</td></tr></table>"} else {description=''}
						if (response[i].PostponedContent) {description="<table class='notesBlck' cellspacing='0'><tr><td>"+response[i].PostponedContent+"</td></tr></table>"}
						if (response[i].Directions==null) {response[i].Directions='';}
						if (response[i].Phone==null) {response[i].Phone='';}
						if (response[i].PhotoExists==1) {
							locationImg="<img src='/system/calendar/locationphoto.php?id="+response[i].LocationID+"' class='locationPic'>";
							photoClass="WithPhoto";
						} else {
							locationImg='';
							photoClass="";
						}

						if (response[i].rsvp.length==4) {
							rsvpStr = "<span class='rsvpY' title='Yes'>"+response[i].rsvp[0]+"</span> <span class='rsvpN' title='No'>"+response[i].rsvp[1]+"</span> <span class='rsvpM' title='Maybe'>"+response[i].rsvp[2]+"</span> <span class='rsvpX'  title='No response yet'>"+response[i].rsvp[3]+"</span>";
						} else {
							rsvpStr = "-";
						}

						if (!$("#calWrap #calTitle").length) {

							subscribeURL = "<a href='https://calendar.instone.com/cadmin/subscription/wizard/"+$.fluxCal.data('id')+"' class='subscribe' target='_blank'>Subscribe</a>";
							
							$("<div id='calManage' class='login'>"+subscribeURL+"<span class='loginLink'> | "+"<a href='https://calendar.instone.com/cadmin' target='_blank'>Login</a></span></div>").appendTo("#calWrap");
							$("<h2 id='calTitle'>"+response[i].calendarName+"</h2>").appendTo("#calWrap");
						}
						
						if ($.fluxCal.data('week')=="show") {
							if (response[i].Week != $.fluxCal.data('weeknum')) {
								weekStr = "<p class='weekNum'>Week "+response[i].Week+"</p>";
							} else {
								weekStr = "";
							}
							$.fluxCal.data('weeknum', response[i].Week);
						}

						// same layout for desktop/mobile; table layout for school calendars  
calStr = 
	weekStr + 
	"<table id='r"+response[i].AppointmentID+"' class='calendarElm "+response[i].classByStatAndTense+"' cellspacing='0'>"+
		"<tr>"+
			"<td class='dateBlck'>"+
				"<table cellspacing='0' class='"+dayClass+"'>"+
					"<tr><td class='fYearMon'>"+response[i].MonthYear+"</td></tr>"+
					"<tr><td class='fDayNum'>"+response[i].Day+"</td></tr>"+
					"<tr><td class='fDayName'>"+response[i].DayName+"</td></tr>"+
				"</table>"+
			"</td>"+
			"<td class='fieldsBlck'>"+
				"<div class='wrapme'>"+
					"<table class='g1' cellspacing='0'>"+
						"<tr class='r1'>"+
							"<td class='fEventType'>"+
								"<span class='lbl' style='color:#808080;'><strong>"+response[i].EventType+"</strong></span>"+
								"<div class='dta'>"+response[i].Event+"</div>"+
							"</td>"+
							"<td class='fTeam'>"+
								"<span class='lbl'>Team</span>"+
								"<div class='dta'>"+response[i].teamNames+"</div>"+
							"</td>"+
							"<td class='fTime'>"+
								"<span class='lbl'>Time</span>"+
								"<div class='dta'>"+response[i].Time+"</div>"+
							"</td>"+
						"</tr>"+
						"<tr class='r2'>"+
							"<td class='fLocation'>"+
								"<span class='lbl'>Location</span>"+
								"<div class='dta'>"+locationData+"</div>"+
							"</td>"+
							"<td>"+
								"<span class='lbl'>Opponent</span>"+
								"<div class='dta'><strong>"+opponent+"</strong></div>"+
							"</td>"+
							"<td class='fStatus'>"+
								"<span class='lbl'>Status</span>"+
								"<div class='dta'>"+response[i].apntStatus+"</div>"+
							"</td>"+
						"</tr>"+
					"</table>"+
					description+
					"<table class='descrBlck' cellspacing='0'>"+
						"<tr>"+
							"<td>"+
								locationImg+
								"<a href='"+response[i].MapURL+"' class='gmaps' target='_blank'><img src='public/media/images/gmaps64.png' width='64' height='64' /></a>"+
								"<div class='descr"+photoClass+"'>"+
									"<h2>"+response[i].LocationName+"</h2>"+
									"<div class='address'>"+
										response[i].Address+"<br/>"+	
										response[i].City+", "+response[i].StateID+" "+response[i].ZIP+"<br/>"+response[i].Phone+
									"</div>"+
									"<h3>Directions</h3>"+
									"<p>"+response[i].Directions+"</p>"+
								"</div>"+
							"</td>"+
						"</tr>"+
					"</table>"+
				"</div>"+
			"</td>"+
		"</tr>"+
	"</table>"+
	"<div class='addTo'>"+response[i].addTo+"</div>";						
						$(calStr).appendTo("#calWrap");

						// --------------calendar template end   -----------------

					}

					$.fluxCal.data('offset', $.fluxCal.data('offset') + $.fluxCal.data('limit')); // update offset value

					fetchingRecords = false;

					if (debug) { $("#debug").text( $.fluxCal.data('offset') ); }

				} else if ($(".calendarElm").length==0) {
					$("<p class='calFeedback'>There are no future events to show. <a href='https://calendar.instone.com/cadmin' target='_blank'>Login</a></p>").appendTo("#calWrap");
				} else {
					$("<p class='calFeedback'>End of future events.</p>").appendTo("#calWrap");
				}

			}
		});
	}

	if ($.fluxCal.length>0) {// if a fluxcalendar is embedded

		// toggle description box for a calendar event
		$("body").on('click', ".fLocation a", function(){
			$(".descrBlck").hide();
			$(".descrBlck", $(this).closest('.fieldsBlck')).toggle();
			return false;
		});

		// triggering reachBottom event
		$(window).scroll( function(){
			if ($(".calendarElm").length != 0) { // if there is an embedded calendar with future events 
				if ( ($(window).scrollTop() - $(".calendarElm").last().offset().top + $(window).height()) > -($(window).height() ) && !fetchingRecords ) {
					$.fluxCal.trigger({type:'reachBottom'}); // trigger event
				}
			}
		});

		// additional load of content
		$(document).on('reachBottom', fluxCalID, loadEvents);

		// initial load of content
		(function(){
			$.fluxCal.empty();
			$("<div id='calWrap'></div>").appendTo(fluxCalID);
			loadEvents();
		})();

	}

});