var months = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep",
		"Oct", "Nov", "Dec" ];

var changingCaprPeriod = false;

var report = "" + "OTH1:Administration&Paperworks|" + "CRD:Card Testing|"
		+ "RD2:RnD Consultancies|" + "DOC:Documentation|"
		+ "HCL:HCL Device Testing|" + "IM:Incident Management (HD)|"
		+ "INT:Internal Projects|" + "MTG:Meetings|" + "CAL:On-Call support|"
		+ "OI:On-site support/installation|" + "YU2:Trainings|" + "OTH3:Other|"
		+ "PRS:Pre-sales support|" + "RD1:Quality Assurance|"
		+ "RI:Remote Support|"
		+ "SE:Self Education|VAC:Vacation/Holiday/Illness";

var activityList = new Array();

var winW = 640;
var winH = 480;
var _margin = 5;

// returns array with width and height of the actual window
function getWindowSize() {
	if (parseInt(navigator.appVersion) > 3) {
		// if (navigator.appName == "Netscape") {
		//			
		// }
		if (navigator.appName.indexOf("Microsoft") != -1) {
			winW = document.body.offsetWidth - 20;
			winH = document.body.offsetHeight - 20;
		} else {
			winW = self.innerWidth - 16;
			winH = self.innerHeight - 16;
			window.captureEvents(Event.RESIZE);
			window.onresize = handleResize;
		}
	}
	return (new Array(winW, winH));
}

function handleResize() // This is needed to make Netscape reload the object
{
	location.reload();
	return false;
}

// returns report name from list (report) by code
function reportByCode(code) {
	var ReportLineArray = report.split('|'); // Split into lines
	var selObj = document.getElementById('cr_action');
	if (selObj) {
		selObj.options[0] = new Option('Select Action', '');
		selObj.options[0].style.color = '#B7B7B7';
		selObj.selectedIndex = 0;
	}
	for ( var loop = 0; loop < ReportLineArray.length; loop++) {
		lineArray = ReportLineArray[loop].split(':');
		ReportCode = TrimString(lineArray[0]);
		ReportName = TrimString(lineArray[1]);
		if (ReportCode == code)
			return ReportName;
	}

	return 'Unknown task';
}

function TrimString(sInString) {
	if (sInString) {
		sInString = sInString.replace(/^\s+/g, "");// strip leading
		return sInString.replace(/\s+$/g, "");// strip trailing
	}
}

// Populates the Action List selected with the items from the report list
function buildActionList(where) {
	var ReportLineArray = report.split('|'); // Split into lines
	var selObj = document.getElementById(where);
	selObj.options[0] = new Option('Select Action', '');
	selObj.selectedIndex = 0;
	for ( var loop = 0; loop < ReportLineArray.length; loop++) {
		lineArray = ReportLineArray[loop].split(':');
		ReportCode = TrimString(lineArray[0]);
		ReportName = TrimString(lineArray[1]);
		if (ReportCode != '') {
			selObj.options[loop + 1] = new Option(ReportName, ReportCode);
		}
	}
}

// build list of the days on top
var curDate = 0; // date of today
var selDate = 0; // date selected for display
function buildCal(shift) {
	var today = new Date();

	if (shift == null)
		curDate = today;
	else
		curDate.setDate(curDate.getDate() + shift);

	var t = curDate.getDate();

	var str = "<a class='cal0' href='#'  onClick='buildCal(-1)'><div>&lt;--</div></a>";
	for ( var i = t - 5; i < t + 2; i++) {
		var dt = new Date(curDate);
		dt.setDate(i);
		var fy = "" + dt.getFullYear();
		var fm = dt.getDate() + "-" + months[dt.getMonth()] + "-"
				+ fy.substring(2);

		var istoday = (dt.getDate() == today.getDate())
				&& (dt.getMonth() == today.getMonth())
				&& (dt.getYear() == today.getYear());
		var issel = (dt.getDate() == curDate.getDate())
				&& (dt.getMonth() == curDate.getMonth())
				&& (dt.getYear() == curDate.getYear());

		if (istoday)
			str += "<a class='cal0' href='#' onClick='buildCapr(\"" + fm
					+ "\")'><div id='a" + fm.replace(/-/g, "") + "'><b>" + fm
					+ "</b></div></a> ";
		else
			str += "<a class='cal0' href='#' onClick='buildCapr(\"" + fm
					+ "\")'><div id='a" + fm.replace(/-/g, "") + "'>" + fm
					+ "</div></a> ";
	}
	str += "<a class='cal0' href='#' onClick='buildCal(1)'><div>--&gt;</div></a> ";
	// str += "<a class='cal0' href='#'
	// onClick='buildCal()'><div>today</div></a> ";

	var obj = _getById('cal');
	obj.innerHTML = str;

	var fy = "" + curDate.getFullYear();
	var fm = curDate.getDate() + "-" + months[curDate.getMonth()] + "-"
			+ fy.substring(2);
	buildCapr(fm, -5, 2);
}

// converts minute amount to string '45m' or '1h'
function formatTime(minutes) {
	if (minutes < 60)
		return minutes + "m";
	else {
		hours = parseInt(minutes / 60);
		mins = parseInt(minutes % 60);

		return TrimString(((hours > 0) ? hours + "h " : "")
				+ ((mins > 0) ? mins + "m" : ""));
	}
}

function parseTime(time) {
	var total = 0;
	var vals = time.replace("h", "h ").replace("H", "H ").split(" ");
	for (i = 0; i < vals.length; i++) {
		var val = vals[i];
		if ((val.indexOf("m") > 0) || (val.indexOf("m") > 0))
			total += parseInt(val.replace("m", "").replace("M", ""));
		else if ((val.indexOf("h") > 0) || (val.indexOf("h") > 0))
			total += 60 * parseInt(val.replace("h", "").replace("H", ""));
	}

	return total;
}

// adds "increment" amount of time to "value"
function modifyTime(value, increment) {
	var total = parseTime(value);

	total += increment;
	if (total < 0)
		total = 0;
	return formatTime(total);
}

function showCapacityReport(xml) {
	var total = 0;
	var target = _getById('cReport');
	var str = "";

	// <cr date='02-Nov-09' time='45' action='IM' travel='0'>customer 1</cr>
	var list = xml.getElementsByTagName('cr');
	var cntItem = 0;
	var prevDate = 0;
	for (i = 0; i < list.length; i++) {
		var _id = list[i].getAttribute("id");
		var _date = list[i].getAttribute("date");
		var _time = parseInt(list[i].getAttribute("time"));
		var _travel = parseInt(list[i].getAttribute("travel"));

		if (prevDate != _date) {
			if (prevDate != 0)
				updateDaySelector(_date, -1);
			prevDate = _date;
		}
		// store the time amount for particular date
		updateDaySelector(_date, _time + _travel);

		if (_date.indexOf(selDate) < 0)
			continue;

		var _action = list[i].getAttribute("action");

		var info = list[i].firstChild.nodeValue;

		if (cntItem == 0)
			str += "<div class='time'>" + _date + "</div>";
		cntItem++;
		total += (parseInt(_time) + parseInt(_travel));

		str += "" + "<div class='info'>"
				+ "	<div class='i0'><a href='#' onClick='delCrep(" + _id
				+ ")'>X</a></div>" + "	<div class='i1'>" + formatTime(_time)
				+ "</div>" + "	<div class='i2'>" + reportByCode(_action)
				+ "</div>" + "	<div class='i3'>" + info + "</div>"
				+ "</div><br clear='all'>";

		if (_travel > 0)
			str += "" + "<div class='info'>" + "	<div class='i0'>&nbsp;</div>"
					+ "	<div class='i1'>" + formatTime(_travel) + "</div>"
					+ "	<div class='i2'>Travelling</div>" + "	<div class='i3'>"
					+ info + "</div>" + "</div><br clear='all'>";
	}

	if (cntItem == 0)
		str = "<div class='time'>No record has been defined for " + selDate
				+ "</div>";
	else
		str += "<p>&nbsp;</p><div class='time'>Reported Total: "
				+ formatTime(total) + "</div><br>";

	target.innerHTML = str;
}

// delete one item in capacity report
function delCrep(id) {
	if (confirm("Are you sure you want to delete this report (#" + id + ")?")) {
		var href = "task=DEL&id=" + id + "&date=" + selDate;
		_XHR(contextPath + '/servlet/eu.ysoft.capr.CaprServlet', href,
				showCapacityReport);
	}
}

// update selector so the color displays how much is reported for the day
function updateDaySelector(_date, _time) {
	var TOTAL_DAY = 8 * 60;

	var obj = _getById("a" + _date.replace(/-/g, ""));
	if (obj == null)
		return;

	var reported = 0;
	if ((obj.reported == null) || (typeof (obj.reported) == 'undefined')
			|| (_time == -1))
		obj.reported = 0;

	reported += parseInt(obj.reported);
	obj.reported = reported + parseInt(_time);

	if (obj.reported <= (TOTAL_DAY / 3))
		obj.style.backgroundColor = '#AAAABB';
	else if (obj.reported <= (TOTAL_DAY / 2))
		obj.style.backgroundColor = '#8888BB';
	else if (obj.reported > (TOTAL_DAY / 2))
		obj.style.backgroundColor = '#669';

}

// updates the capacity report and stores it to DB
function storeCapr() {
	var time = _getById('cr_time');
	var action = _getOpt('cr_action');
	var trip = _getById('cr_trip');
	var customer = _getById('cr_customer');

	var _time = parseTime(time.value);
	var _trip = parseTime(trip.value);

	if ((_time == 0) || isNaN(_time)) {
		alert("Please specify the time!\nEnter time and units (eg. 3h or 25m or 2h 30m)\nOr use keyboard arrow UP/DOWN to modify time.");
		time.focus();
		return;
	}

	if (action.value == '') {
		alert("Please specify what have you done!");
		_getById('cr_action').focus();
		return;
	}

	if (('customer or project' == customer.value) || ('' == customer.value)) {
		alert('Please specify who was the target customer or what project did you work at.\nTry to enter few letters and select from the list');
		customer.focus();
		return;
	}

	var href = "task=SAVE&date=" + selDate + "&action=" + action.value
			+ "&time=" + _time + "&trip=" + _trip + "&customer="
			+ customer.value;
	_XHR(contextPath + '/servlet/eu.ysoft.capr.CaprServlet', href,
			showCapacityReport);

	setAddNewItemBehaviour();
	_getById('cr_time').focus();
}

// AJAX download of the information about reported items
function buildCapr(date, min, max) {
	_getById('cReport').innerHTML = "<div class='time'><img class='right' src="
			+ contextPath
			+ "'/img/load_icon.gif' id='_main_load'> loading ...</div>";
	_getById('cr_date').value = date;
	selDate = date;
	var href = "task=DLIST&date=" + date;
	_XHR(contextPath + '/servlet/eu.ysoft.capr.CaprServlet', href,
			showCapacityReport);
}

function setAddNewItemBehaviour() {
	setAddNewItemBehaviourFor('cr_time', 'time', 30);
	setAddNewItemBehaviourFor('cr_trip', 'travel', 30);
	setAddNewItemBehaviourFor('cr_customer', 'customer or project');
}

// initialize capacity report -> the editation part
function initCapr() {
	var options = {
		script : contextPath + "/servlet/eu.ysoft.capr.CaprServlet?task=CLIST&",
		varname : "customer",
		minchars : 1
	};
	var as = new AutoSuggest('cr_customer', options);
	buildCal();
	buildActionList('cr_action');
	setAddNewItemBehaviour();
	_getById('cr_time').focus();
}

// initialize capacity report -> the reporting part
function initCapr2(_date) {
	var date = _date;
	if (_date == null) {
		var cd = new Date();
		var fy = "" + cd.getFullYear();
		date = "1-" + months[cd.getMonth()] + "-" + fy.substring(2);
	}

	var href = "task=REP&date=" + date;
	_XHR(contextPath + '/servlet/eu.ysoft.capr.CaprServlet', href,
			showBigReport);
}

// shows summarized report per action and employee
function showBigReport(xml) {
	var users = _reportGetUserCount(xml);
	var str = "";
	var ReportLineArray = report.split('|'); // Split into lines

	str += "<tr><td valign='bottom'>action</td>"
	for ( var i = 0; i < users.length; i++) {
		str += "<td class='vert' width='30px'>" + users[i] + "</td>";
	}
	str += "<td class='vert' width='40px'>total</td>"
	str += "</tr>";

	for ( var loop = 0; loop < ReportLineArray.length; loop++) {
		lineArray = ReportLineArray[loop].split(':');
		ReportCode = TrimString(lineArray[0]);
		ReportName = TrimString(lineArray[1]);

		str += "<tr>" + "<td>" + ReportName + "</td>";

		var sum = 0;
		for ( var i = 0; i < users.length; i++) {
			var _sum = _reportGetTimeFor(xml, users[i], ReportCode, "time");
			str += "<td>" + formatTime(_sum) + "</td>";
			sum += parseInt(_sum);
		}
		str += "<td>" + formatTime(sum) + "</td>";

		str += "</tr>";
	}

	_getById('cReport').innerHTML = "<table border='1'>" + str + "</table>";
}

function _reportGetUserCount(xml) {
	var myArray = [];
	var list = xml.getElementsByTagName('sum');
	for (i = 0; i < list.length; i++) {
		var user = list[i].getAttribute("user");
		if (myArray.indexOf(user) == -1)
			myArray[myArray.length] = user;
	}

	return myArray;
}

function _reportGetTimeFor(xml, user, action, whatTime) {
	var list = xml.getElementsByTagName('sum');
	for (i = 0; i < list.length; i++) {
		var _user = list[i].getAttribute("user");
		var _action = list[i].getAttribute("action");
		if ((_user == user) && (_action == action))
			return list[i].getAttribute(whatTime)
	}

	return 0;
}

function setCaprPeriod() {
	var selectedPeriod = "";
	var periodSelectorElem = _getById("periodSelector");
	if (_getOpt('periodSelector') == null) {
		periodSelectorElem.options[0].selected = 1;
	}
	if (_getOpt('periodSelector') != null) {
		selectedPeriod = _getOpt('periodSelector').value;
	}

	var yearSelector = _getById("yearSelector");
	var monthSelector = _getById("monthSelector");
	var daySelector = _getById("daySelector");
	var weekSelector = _getById("weekSelector");

	if ("month" == selectedPeriod) {
		yearSelector.disabled = false;
		monthSelector.disabled = false;
		daySelector.disabled = true;
		weekSelector.disabled = true;
	} else if ("week" == selectedPeriod) {
		yearSelector.disabled = false;
		monthSelector.disabled = true;
		daySelector.disabled = true;
		weekSelector.disabled = false;
	} else if ("day" == selectedPeriod) {
		yearSelector.disabled = false;
		monthSelector.disabled = false;
		daySelector.disabled = false;
		weekSelector.disabled = true;
	} else {

	}
}

function loadCaprPeriodReport() {

	var selectedPeriod = "";
	var periodSelectorElem = _getById("periodSelector");
	if (_getOpt('periodSelector') == null) {
		periodSelectorElem.options[0].selected = 1;
	}
	if (_getOpt('periodSelector') != null) {
		selectedPeriod = _getOpt('periodSelector').value;
	}

	var selectedYear = "";
	if (_getOpt("yearSelector")) {
		selectedYear = _getOpt('yearSelector').value;
	}

	var selectedMonth = "";
	if (_getOpt("monthSelector")) {
		selectedMonth = _getOpt('monthSelector').value;
	}

	var selectedDay = "";
	if (_getOpt("daySelector")) {
		selectedDay = _getOpt('daySelector').value;
	}

	var selectedWeek = "";
	if (_getOpt("weekSelector")) {
		selectedWeek = _getOpt('weekSelector').value;
	}

	var href = "";
	switch (selectedPeriod) {
	case "month":
		href = "selectedPeriod=" + selectedPeriod + "&year=" + selectedYear
				+ "&month=" + selectedMonth;
		break;
	case "day":
		href = "selectedPeriod=" + selectedPeriod + "&year=" + selectedYear
				+ "&month=" + selectedMonth + "&day=" + selectedDay;
		break;
	case "week":
		href = "selectedPeriod=" + selectedPeriod + "&year=" + selectedYear
				+ "&week=" + selectedWeek;
		break;

	default:
		href = "selectedPeriod=" + selectedPeriod + "&year=" + selectedYear
				+ "&month=" + selectedMonth;
		break;
	}

	var xsltTransformer = new XmlXslt('caprReportContent');
	// alert(contextPath+"/rest/caprPeriodReport?fullHtml=1"+"&"+href);
	xsltTransformer.loadXml(contextPath + "/rest/caprPeriodReport?fullHtml=0"
			+ "&" + href);
	xsltTransformer.loadXsl(contextPath + "/xslt/caprReport/caprReport.xsl");

}

function loadCaprPeriodReportFrame() {

	var selectedPeriod = "";
	var periodSelectorElem = _getById("periodSelector");
	if (_getOpt('periodSelector') == null) {
		periodSelectorElem.options[0].selected = 1;
	}
	if (_getOpt('periodSelector') != null) {
		selectedPeriod = _getOpt('periodSelector').value;
	}

	var selectedYear = "";
	if (_getOpt("yearSelector")) {
		selectedYear = _getOpt('yearSelector').value;
	}

	var selectedMonth = "";
	if (_getOpt("monthSelector")) {
		selectedMonth = _getOpt('monthSelector').value;
	}

	var selectedDay = "";
	if (_getOpt("daySelector")) {
		selectedDay = _getOpt('daySelector').value;
	}

	var selectedWeek = "";
	if (_getOpt("weekSelector")) {
		selectedWeek = _getOpt('weekSelector').value;
	}

	var href = "";
	switch (selectedPeriod) {
	case "month":
		href = "selectedPeriod=" + selectedPeriod + "&year=" + selectedYear
				+ "&month=" + selectedMonth;
		break;
	case "day":
		href = "selectedPeriod=" + selectedPeriod + "&year=" + selectedYear
				+ "&month=" + selectedMonth + "&day=" + selectedDay;
		break;
	case "week":
		href = "selectedPeriod=" + selectedPeriod + "&year=" + selectedYear
				+ "&week=" + selectedWeek;
		break;

	default:
		href = "selectedPeriod=" + selectedPeriod + "&year=" + selectedYear
				+ "&month=" + selectedMonth;
		break;
	}

	// var xsltTransformer = new XmlXslt('caprReportContent');

	// xsltTransformer.loadXml(contextPath+"/rest/caprPeriodReport?fullHtml=0"+"&"+href);
	// xsltTransformer.loadXsl(contextPath+"/xslt/caprReport/caprReport.xsl");
	var targetElement = _getById('caprReportContent');
	if (targetElement) {
		_clearEl(targetElement);
		var innerFrame = document.createElement("iFrame");
		innerFrame.setAttribute("width", "98%");
		innerFrame.setAttribute("height", "90%");
		innerFrame.setAttribute("style", "height: 90%;");
		innerFrame.setAttribute("src", contextPath
				+ "/rest/caprPeriodReport?fullHtml=1" + "&" + href);

		targetElement.appendChild(innerFrame);
	}
}

function resetCaprPeriodSelectors() {
	var selectedPeriod = "";
	if (!changingCaprPeriod) {
		changingCaprPeriod = true
		var periodSelectorElem = _getById("periodSelector");
		if (_getOpt('periodSelector') == null) {
			periodSelectorElem.options[0].selected = 1;
		}
		if (_getOpt('periodSelector') != null) {
			selectedPeriod = _getOpt('periodSelector').value;
		}

		var selectedYear = "";
		if (_getOpt("yearSelector")) {
			selectedYear = _getOpt('yearSelector').value;
		}

		var selectedMonth = "";
		if (_getOpt("monthSelector")) {
			selectedMonth = _getOpt('monthSelector').value;
		}

		var selectedDay = "";
		if (_getOpt("daySelector")) {
			selectedDay = _getOpt('daySelector').value;
		}

		var selectedWeek = "";
		if (_getOpt("weekSelector")) {
			selectedWeek = _getOpt('weekSelector').value;
		}

		var href = "";
		switch (selectedPeriod) {
		case "month":
			href = "selectedPeriod=" + selectedPeriod + "&year=" + selectedYear
					+ "&month=" + selectedMonth;
			break;
		case "day":
			href = "selectedPeriod=" + selectedPeriod + "&year=" + selectedYear
					+ "&month=" + selectedMonth + "&day=" + selectedDay;
			break;
		case "week":
			href = "selectedPeriod=" + selectedPeriod + "&year=" + selectedYear
					+ "&week=" + selectedWeek;
			break;

		default:
			href = "selectedPeriod=" + selectedPeriod + "&year=" + selectedYear
					+ "&month=" + selectedMonth;
			break;
		}

		_XHR(contextPath + '/rest/caprPeriod/', href,
				resetCaprPeriodSelectorsCB);
	}
}

function resetCaprPeriodSelectorsCB(xml) {
	var selectedPeriod = "";
	var periodSelectorElem = _getById("periodSelector");
	if (_getOpt('periodSelector') == null) {
		periodSelectorElem.options[0].selected = 1;
	}
	if (_getOpt('periodSelector') != null) {
		selectedPeriod = _getOpt('periodSelector').value;
	}

	var yearSelector = _getById("yearSelector");
	var monthSelector = _getById("monthSelector");
	var daySelector = _getById("daySelector");
	var weekSelector = _getById("weekSelector");

	var list = xml.getElementsByTagName('periodResolution');
	var selectPeriodValue;
	for (i = 0; i < list.length; i++) {
		selectPeriodValue = list[i].getAttribute("id");
	}

	if (periodSelectorElem != null && periodSelectorElem.options != null) {
		for (i = 0; i < periodSelectorElem.options.length; i++) {
			if (selectPeriodValue == periodSelectorElem.options[i].value) {
				periodSelectorElem.options[i].selected = true;
			} else {
				periodSelectorElem.options[i].selected = false;
			}
		}
	}

	removeAllOptionsFromSelection(yearSelector);
	var list = xml.getElementsByTagName('year');
	appendOptionsFromXMLList(yearSelector, list);

	removeAllOptionsFromSelection(monthSelector);
	list = xml.getElementsByTagName('month');
	appendOptionsFromXMLList(monthSelector, list);

	removeAllOptionsFromSelection(daySelector);
	list = xml.getElementsByTagName('day');
	appendOptionsFromXMLList(daySelector, list);

	removeAllOptionsFromSelection(weekSelector);
	list = xml.getElementsByTagName('week');
	appendOptionsFromXMLList(weekSelector, list);

	setCaprPeriod();

	changingCaprPeriod = false;
}

function removeAllOptionsFromSelection(selection) {
	for (i = selection.length - 1; i >= 0; i--) {
		selection.options[i] = null;
	}
	if (selection.length > 0) {
		selection.selectedIndex = 0;
	}
}

function appendOptionsFromXMLList(element, list) {
	for (i = 0; i < list.length; i++) {
		var value = list[i].childNodes[0].nodeValue;
		var id = list[i].getAttribute("id");
		var selected = list[i].getAttribute("selected");
		var elementOption = document.createElement('option');
		elementOption.setAttribute("value", id);
		elementOption.appendChild(document.createTextNode(value));
		if (selected == "1") {
			elementOption.setAttribute("selected", "selected");
		}
		element.appendChild(elementOption);

	}
}

function initCaprReportGui() {
	setCaprPeriod();
	adjustCaprReportContent();
	// loadCaprPeriodReport();
	// loadCaprPeriodReportFrame();
}

function showCaprDetail(dataIndex) {
	var targetElement = _getById('showCaprDetail');
	if (targetElement) {
		if (activityList[dataIndex]) {
			getWindowSize();
			_clearEl(targetElement);
			targetElement.style.display = "block";
			targetElement.style.border = "solid 1px black";
			targetElement.style.width = "" + (winW - _margin) + "px";
			targetElement.style.height = "" + (winH - (2 * _margin)) + "px";
			targetElement.style.top = "" + (_margin) + "px";
			targetElement.style.left = "" + (_margin) + "px";

			var elementContainer = document.createElement("div");
			targetElement.appendChild(elementContainer);

			var elementContent = document.createElement("div");
			elementContent.setAttribute("class", "record");
			elementContent.setAttribute("id", "cReport");

			var elementCloseActionContainer = document.createElement("div");
			elementCloseActionContainer.style.textAlign = "right";

			var elementCloseAction = _createEl("a", {
				href : "#",
				onclick : hideCaprDetail
			}, "Close [X]", true);
			elementCloseActionContainer.appendChild(elementCloseAction);
			refreshStyleDisp(elementCloseAction);

			elementContainer.appendChild(elementCloseActionContainer);
			refreshStyleDisp(elementCloseActionContainer);

			elementContainer.appendChild(elementContent);
			refreshStyleDisp(elementContent);

			var caprRecords = activityList[dataIndex];
			for (i = 0; i < caprRecords.length; i++) {
				var caprRecord = caprRecords[i];
				var _time = caprRecord["time"];
				var _trip = caprRecord["trip"];
				var _action = caprRecord["action"];
				var _customer = caprRecord["customer"];

				if (i == 0) {
					var userNameElem = document.createElement("div");
					userNameElem.setAttribute("class", "caprMember");
					userNameElem.setAttribute("id", "caprMemberName");
					var _username = caprRecord["member"];
					if (_username) {
						userNameElem.appendChild(document
								.createTextNode(_username));
						elementContent.appendChild(userNameElem);
					}
					refreshStyleDisp(userNameElem);

					userNameElem = document.createElement("div");
					userNameElem.setAttribute("class", "caprMember");
					userNameElem.setAttribute("id", "caprRecordDate");
					var _recordDate = caprRecord["recordDate"];
					if (_recordDate) {
						_recordDate = new Date(parseInt(_recordDate, 10));
						userNameElem.appendChild(document
								.createTextNode(_recordDate
										.toLocaleDateString()));
						elementContent.appendChild(userNameElem);
						refreshStyleDisp(userNameElem);
					}

					var clearElem = document.createElement("br");
					clearElem.setAttribute("clear", "all");
					elementContent.appendChild(clearElem);
					refreshStyleDisp(clearElem);

				}

				var caprRecordElement = document.createElement("div");
				caprRecordElement.setAttribute("class", "info");
				caprRecordElement.setAttribute("id", "caprInfo");
				refreshStyleDisp(caprRecordElement);

				var caprRecordItem = document.createElement("div");
				caprRecordItem.setAttribute("class", "i0");
				caprRecordItem.setAttribute("id", "#caprInfoI0");
				caprRecordItem.appendChild(document.createTextNode("X"));
				caprRecordElement.appendChild(caprRecordItem);
				refreshStyleDisp(caprRecordItem);

				caprRecordItem = document.createElement("div");
				caprRecordItem.setAttribute("class", "i1");
				caprRecordItem.setAttribute("id", "#caprInfoI1");
				caprRecordItem.appendChild(document
						.createTextNode(formatTime(_time)));
				caprRecordElement.appendChild(caprRecordItem);
				refreshStyleDisp(caprRecordItem);

				caprRecordItem = document.createElement("div");
				caprRecordItem.setAttribute("class", "i2");
				caprRecordItem.setAttribute("id", "#caprInfoI2");
				caprRecordItem.appendChild(document
						.createTextNode(reportByCode(_action)));
				caprRecordElement.appendChild(caprRecordItem);
				refreshStyleDisp(caprRecordItem);

				caprRecordItem = document.createElement("div");
				caprRecordItem.setAttribute("class", "i3");
				caprRecordItem.setAttribute("id", "#caprInfoI3");
				caprRecordItem.appendChild(document.createTextNode(_customer));
				caprRecordElement.appendChild(caprRecordItem);
				refreshStyleDisp(caprRecordItem);

				caprRecordItem = document.createElement("br");
				caprRecordItem.setAttribute("clear", "all");
				caprRecordElement.appendChild(caprRecordItem);
				elementContent.appendChild(caprRecordElement);
				refreshStyleDisp(caprRecordItem);
				refreshStyleDisp(caprRecordElement);
				refreshStyleDisp(elementContent);

				if (_trip != null && _trip > 0) {
					caprRecordElement = document.createElement("div");
					caprRecordElement.setAttribute("class", "info");

					caprRecordItem = document.createElement("div");
					caprRecordItem.setAttribute("class", "i0");
					caprRecordItem.setAttribute("id", "#caprInfoI0");
					// caprRecordItem.appendChild(document.createTextNode("&nbsp;"));
					caprRecordItem.innerHTML = "&nbsp;";
					caprRecordElement.appendChild(caprRecordItem);
					refreshStyleDisp(caprRecordItem);

					caprRecordItem = document.createElement("div");
					caprRecordItem.setAttribute("class", "i1");
					caprRecordItem.setAttribute("id", "#caprInfoI1");
					caprRecordItem.appendChild(document
							.createTextNode(formatTime(_trip)));
					caprRecordElement.appendChild(caprRecordItem);
					refreshStyleDisp(caprRecordItem);

					caprRecordItem = document.createElement("div");
					caprRecordItem.setAttribute("class", "i2");
					caprRecordItem.setAttribute("id", "#caprInfoI2");
					caprRecordItem.appendChild(document
							.createTextNode("Travelling"));
					caprRecordElement.appendChild(caprRecordItem);
					refreshStyleDisp(caprRecordItem);

					caprRecordItem = document.createElement("div");
					caprRecordItem.setAttribute("class", "i3");
					caprRecordItem.setAttribute("id", "#caprInfoI3");
					caprRecordItem.appendChild(document
							.createTextNode(_customer));
					caprRecordElement.appendChild(caprRecordItem);
					refreshStyleDisp(caprRecordItem);

					caprRecordItem = document.createElement("br");
					caprRecordItem.setAttribute("clear", "all");
					caprRecordElement.appendChild(caprRecordItem);
					refreshStyleDisp(caprRecordItem);
					elementContent.appendChild(caprRecordElement);
					refreshStyleDisp(caprRecordElement);
					refreshStyleDisp(elementContent);
				}
			}

			refreshStyleDisp(elementContainer);
			// targetElement.appendChild(elementCloseActionContainer);

			refreshStyleDisp(targetElement);
		}
	}
}

function hideCaprDetail() {
	var targetElement = _getById('showCaprDetail');
	if (targetElement) {
		_clearEl(targetElement);
		targetElement.style.display = "none";
	}
}

function adjustSizeOfCaprReport() {
	getWindowSize();
	var targetElement = _getById('displayPanel');
	if (targetElement) {
		targetElement.style.display = "block";
		targetElement.style.border = "none";
		targetElement.style.position = "absolute";
		targetElement.style.width = "" + (winW - (2 * _margin)) + "px";
		targetElement.style.height = "" + (winH - (2 * _margin)) + "px";
		targetElement.style.top = "" + (_margin) + "px";
		targetElement.style.left = "" + (_margin) + "px";
	}
}

function adjustCaprReportContent() {
	getWindowSize();
	var _top = _getTop(_getById('anchor1'));
	var targetElement = _getById('caprReportContent');
	if (targetElement) {
		targetElement.style.display = "block";
		targetElement.style.border = "none";
		targetElement.style.position = "absolute";
		targetElement.style.width = "" + (winW) + "px";
		targetElement.style.height = "" + (winH - _top) + "px";
		targetElement.style.top = "" + (_top) + "px";
		targetElement.style.left = "" + (0) + "px";
	}
}

function refreshStyleDisp(elm) {
//	var disp = elm.style.display;
//	elm.style.display = "none";
//	var redrawFix = elm.offsetHeight;
//	elm.style.display = disp;
	
	if(elm != null && elm.getAttribute("class") != null){
		elm.className  = elm.getAttribute("class");
	}
	
//	var n = document.createTextNode(' ');
//	elm.appendChild(n);
//	setTimeout(function() {
//		n.parentNode.removeChild(n);
//	}, 0);
	return elm;
}