$(document).ready(function(){
	var options = { 
		dataType:		"json",
		success:		processJsonResult
	};
	
    $("#formSelectCourse").submit(function(){
	    $(this).ajaxSubmit(options);
	    return false;
	});
	
	$("#courseID").change(function() {
		submitClassesLookUp();
	});
	
	if($("#courseID").val().length) $("#courseID").change(); 
});

function validateFormSelectCourse() {
	var message = "";
	
	if(!$("#courseID").val().length) {
		message += "\nCourse must be selected.";
		$("#courseID").focus();
	}
	
	if(message.length) {
		alert("There have been some errors:" + message);
		return false;
	}
	else {
		return true;
	}
}

function submitClassesLookUp() {	
	$("#formSelectCourse").block();
	
	// submit the form is validated
	if ($("#courseID").val().length) {
		$("#listClassesContainer").html("").hide();
		$("#loadingImage").show();
		$("#formSelectCourse").submit();
	}
	else {
		$("#listClassesContainer").html("").hide();
		$("#loadingImage").show();
		$("#loadingImage").hide();
		$("#listClassesContainer").html("").show("slide");
	}	
	
	$("#formSelectCourse").unblock();
	
	return false;
}

function processJsonResult(data) {
	var queryString = "", element = "";
	var classesNumber = data.ACLASSES.length;
	
	if (!data.SUCCESS) {
		queryString = getErrorMessage(data.MESSAGE);
	}
	else {
		queryString += "<br />";
		
		/* display course information */
		if(classesNumber > 0) {
			element = data.ACLASSES[0];
			queryString += toHTML("div", "span-18",
				toHTML("div", "section",
					toHTML("span", "sectionName", "Course Selected:") +
					toHTML("span", "sectionContent", getCourseString(element.CLASSID, element.COURSEID, element.COURSENAME, element.COURSEDESCRIPTION))
				)
			) + toHTML("div", "clearfloat", "") + toHTML("div", "", "&nbsp;");
		}
		
		/* diaply all the classes for the course */
		for (var i = 0; i < classesNumber; i++) {
			element = data.ACLASSES[i];
			queryString += toHTML("div", "span-18",
				"<hr />" +
				toHTML("div", "span-16",
					toHTML("div", "section",
						toHTML("span", "sectionName", "Class Session:") +
						toHTML("span", "sectionContent", getClassString(element.CLASSCODE, element.CLASSSESSIONSTATUS, element.CLASSSESSIONSTARTDATE, element.CLASSSESSIONENDDATE))
					) +
					toHTML("div", "section",
						toHTML("span", "sectionName", "Language:") +
						toHTML("span", "sectionContent", getLanguageString(element.LANGUAGENAME))
					) +
					toHTML("div", "section",
						toHTML("span", "sectionName", "Location:") +
						toHTML("span", "sectionContent", getLocationString(element.LOCATIONID, element.LOCATIONCODE, element.LOCATIONNAME))
					) +
					toHTML("div", "section",
						toHTML("span", "sectionName", "Instructor:") +
						toHTML("span", "sectionContent", getInstructorString(element.USERFIRSTNAME, element.USERLASTNAME))
					)
				) +
				toHTML("div", "span-1", '<button onclick="gotoSchedule(' + element.CLASSID + ');">Schedule</button>') +
				toHTML("div", "clearfloat", "") + toHTML("div", "", "&nbsp;")
			);
		}
	}
	
	$("#loadingImage").hide();
	$("#listClassesContainer").html(queryString).show("slide");
}

function toHTML(typeOfElement, className, data) {
	var stringToReturn = "<" + typeOfElement;
	if (className.length) 
		stringToReturn += " class='" + className + "'";
	stringToReturn += ">" + data + "</" + typeOfElement + ">";
	return stringToReturn;
}

function getClassString(classCode, classSessionStatus, classSessionStartDate, classSessionEndDate) {
	return toHTML("strong", "positive", getSessionStatusString(classSessionStatus)) + "&nbsp;&nbsp;&nbsp;" + getSessionDatesString(classSessionStartDate, classSessionEndDate);
}

function getSessionStatusString(classSessionStatus) {
	return (classSessionStatus.length) ? classSessionStatus.substr(0, 1).toUpperCase() + classSessionStatus.substr(1, classSessionStatus.length - 1).toLowerCase()  + " Session": "";
}

function getSessionDatesString(classSessionStartDate, classSessionEndDate) {
	if (classSessionStartDate.length && !classSessionEndDate.length)
		return toHTML("small", "", "starts: ") + classSessionStartDate;
	else if (classSessionStartDate.length && classSessionEndDate.length)
		return toHTML("small", "", "dates: ") + classSessionStartDate + " &ndash; " + classSessionEndDate;
	else if (!classSessionStartDate.length && classSessionEndDate.length)
		return toHTML("small", "", "ends: ") + classSessionEndDate;
	else
		return "";
}

function getLanguageString(languageName) {
	return toHTML("span", "language", languageName);
}

function getCourseString(classID, courseID, courseName, courseDescription) {
	var courseString =	"<a style='padding: 2px 2px 2px 0;' href='" + getBaseTemplate() + "/courseDescription.cfm?courseID=" + courseID + "'>" + courseName + "</a>"
						+ "&nbsp;&nbsp;&nbsp;"
						+ toHTML("span", "fltrt",
							toHTML("small", "", "[ <a id='linkCourseDescription_" + classID + "' style='padding: 2px 2px 2px 0;' href='javascript: void(0);' onclick='toggleCourseDescription(" + classID + ");' title='Click here to show/hide course description'>show description</a> ]")
						);
	
	courseString += "<div style='display: none;' id='courseDescription_" + classID + "'>" + "<br />" + courseDescription + "</div>";
	
	return courseString;
}

function getLocationString(locationID, locationCode, locationName) {
	return	"<a style='padding: 2px 2px 2px 0;' href='" + getBaseTemplate() + "/locationMap.cfm?locationID=" + locationID + "'>" + "(" + locationCode + ") " + locationName + "</a>"
			+ "&nbsp;" + toHTML("small", "", "(click the link to view location map)");
}

function getInstructorString(userFirstName, userLastName) {
	return userFirstName + " " + userLastName;
}

function getErrorMessage(message) {
	return '<div class="notice" style="padding-left:30px; position:relative"><img src="' + getBaseTemplate() + '/css/bluetrip/img/icons/information.png" style="position:absolute; left:5px;" /><span style="font-family: Verdana,Arial,Helvetica,sans-serif; font-weight: bold; font-size: 14px;">&nbsp;&nbsp;&nbsp;' + message + '</span></div>';
}

function getBaseTemplate() {
	return $("#baseTemplateContainer").html();
}

function gotoSchedule(classID) {
	document.location = getBaseTemplate() + "/listSchedules.cfm?classID=" + classID;
	return false;
}

function toggleCourseDescription(classID) {
	var currentStateString = $("#linkCourseDescription_" + classID).html();
	
	$("#courseDescription_" + classID).slideToggle("slow");
	if(currentStateString == "show description")
		$("#linkCourseDescription_" + classID).html("hide description");
	else
		$("#linkCourseDescription_" + classID).html("show description");
}