$(document).ready(function(){
	var options = { 
		dataType:		"json",
		success:		processJsonResult
	};
	
    $("#formListClasses").submit(function(){
	    $(this).ajaxSubmit(options);
	    return false;
	});
	
	submitClassesLookUp();
});

function validateFormListCourses() {
	var message = "";
	if($("#classSessionStartDate").val().length && !isValid("Date", $("#classSessionStartDate").val())) {
		message += "\nStart date must be a valid date in format of MM/DD/YYYY.";
		$("#classSessionStartDate").focus();
	}
	if($("#classSessionEndDate").val().length && !isValid("Date", $("#classSessionEndDate").val())) {
		message += "\nEnd date must be a valid date in format of MM/DD/YYYY.";
		$("#classSessionEndDate").focus();
	}
	if( isValid("Date", $("#classSessionStartDate").val()) && isValid("Date", $("#classSessionEndDate").val()) ) {
		var startDate = new Date($("#classSessionStartDate").val());
		var endDate = new Date($("#classSessionEndDate").val());
		
		if( startDate.getTime() > endDate.getTime() ) {
			message += "\nStart date can not be later then End date.";
			$("#classSessionStartDate").focus();
		}
	}
	
	if(message.length) {
		alert("There have been some errors:" + message);
		return false;
	}
	else {
		return true;
	}
}

function submitClassesLookUp() {	
	$("#formListClasses").block();
	
	// submit the form is validated
	if (validateFormListCourses()) {
		$("#listClassesContainer").html("").hide();
		$("#loadingImage").show();
		$("#formListClasses").submit();
	}	
	
	$("#formListClasses").unblock();
	
	return false;
}

function submitAllClassesLookUp() {
	// reset form
	$("#courseID").val("");
	$("#locationID").val("");
	$("#userID_instructor").val("");
	$("#classSessionStartDate").val("");
	$("#classSessionEndDate").val("");
	
	// submit form
	return submitClassesLookUp();
}

function processJsonResult(data) {
	var queryString = "", element = "";
	var classesNumber = data.ACLASSES.length;
	
	if (!data.SUCCESS) {
		queryString = getErrorMessage(data.MESSAGE);
	}
	else {
		queryString += "<br />";
		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", "Instructor:") +
						toHTML("span", "sectionContent", getInstructorString(element.USERFIRSTNAME, element.USERLASTNAME))
					) +
					toHTML("div", "section",
						toHTML("span", "sectionName", "Location:") +
						toHTML("span", "sectionContent", getLocationString(element.LOCATIONID, element.LOCATIONCODE, element.LOCATIONNAME))
					) +
					toHTML("div", "section",
						toHTML("span", "sectionName", "Course:") +
						toHTML("span", "sectionContent", getCourseString(element.CLASSID, element.COURSEID, element.COURSENAME, element.COURSEDESCRIPTION))
					)
				) +
				toHTML("div", "span-1", '<button onclick="gotoRegister();">Register</button>') +
				toHTML("div", "clearfloat", "")
			);
		}
	}
	
	$("#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 getSecureTemplate() {
	return $("#secureTemplateContainer").html();
}

function gotoRegister() {
	document.location = getSecureTemplate() + "/registerStudent.cfm";
	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");
}