/**
 * Collabofit Data Entry Widget Javascript
 *
 * This code is shared by all the Javascript widget implementations
 *
 * $Id: collabofit_data_entry_widget.js 1614 2006-09-08 22:30:27Z gserafini $
 *
 */

var glassDoneButton;
var whiteInfoButton;

// TODO: retrieve user profile info so we know their first name and have a username
var name_first = 'Gabriel';
var username = 'gserafini';
var base_url = 'http://collabofit.com';

var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];


var current_date = new Date();
var date_default = months[current_date.getMonth()] + " " + current_date.getDate() + ", " + current_date.getFullYear();

var user_home_url = base_url + '/members/' + username;


// TODO: pull panel contents down from server as JSON array so we can update content (for widgets)
var panelContent = new Array();

panelContent["signed_in_default"]  = '<h1>Welcome, ' + name_first + '</h1>';
panelContent["signed_in_default"] += '<div class="panel-instructions">';
panelContent["signed_in_default"] += 'Click on an activity button to record your results.<br /><br />';
panelContent["signed_in_default"] += 'View your user home page:<br /> <a href="' + user_home_url + '" onclick="openURL(\'' + user_home_url + '\');">' + user_home_url + '</a>';
panelContent["signed_in_default"] += '</div>';



/**
 * Build activity entry panels
 */
function buildActivityDataEntryPanel(activity) {

	var statInstructions = "";
	var statTitle = activity.toCapitalCase();
	var exerciseName = activity;
	var activityDate;

	var activityStatHTML = "";
	var templateHTML = "";

	// Build activity-specific stat entry templates
	switch (activity) {

		case "walking" :
		case "running" :
		case "swimming" :
		case "cycling" :

			statInstructions = "Enter distance and/or duration for this activity.";

			activityStatHTML += '<tr>';
			activityStatHTML += '<th>Duration:</th>';
			activityStatHTML += '<td><input type="text" class="input-duration input-focus" id="' + activity + '-duration" name="' + activity + '-duration" /></td>';
			activityStatHTML += '<td>';
			activityStatHTML += '<select id="' + activity + '-duration-units" name="' + activity + '-duration-units">';
			activityStatHTML += '<option value="min">Minutes</option>';
			activityStatHTML += '<option value="hr">Hours</option>';
			activityStatHTML += '<option value="s">Seconds</option>';
			activityStatHTML += '<option value="time">HH:MM:SS</option>';
			activityStatHTML += '</select>';
			activityStatHTML += '</td>';
			activityStatHTML += '</tr>';

			activityStatHTML += '<tr>';
			activityStatHTML += '<th>Distance:</th>';
			activityStatHTML += '<td><input type="text" class="input-distance" id="' + activity + '-distance" name="' + activity + '-distance" /></td>';
			activityStatHTML += '<td>';
			activityStatHTML += '<select id="' + activity + '-distance-units" name="' + activity + '-distance-units">';
			activityStatHTML += '<option value="mi">Miles</option>';
			activityStatHTML += '<option value="km">Kilometers</option>';
			activityStatHTML += '<option value="m">Meters</option>';
			activityStatHTML += '</select>';
			activityStatHTML += '</td>';
			activityStatHTML += '</tr>';

			break;

		case "pushups":
		case "situps":

			statInstructions = "How many did you do?";

			activityStatHTML += '<tr>';
			activityStatHTML += '<th>Sets:</th>';
			activityStatHTML += '<td><input type="text" class="input-sets input-focus" id="' + activity + '-sets" name="' + activity + '-sets" /></td>';
			activityStatHTML += '<td>';
			activityStatHTML += '</td>';
			activityStatHTML += '</tr>';

			activityStatHTML += '<tr>';
			activityStatHTML += '<th>Reps:</th>';
			activityStatHTML += '<td><input type="text" class="input-reps" id="' + activity + '-reps" name="' + activity + '-reps" /></td>';
			activityStatHTML += '<td>';
			activityStatHTML += '</td>';
			activityStatHTML += '</tr>';

			activityStatHTML += '<tr>';
			activityStatHTML += '<th>Weight:</th>';
			activityStatHTML += '<td><input type="text" class="input-weight" id="' + activity + '-weight" name="' + activity + '-weight" /></td>';
			activityStatHTML += '<td>';
			activityStatHTML += '<select id="' + activity + '-weight-units" name="' + activity + '-weight-units">';
			activityStatHTML += '<option value="lb">Pounds</option>';
			activityStatHTML += '<option value="kg">Kilograms</option>';
			activityStatHTML += '</select>';
			activityStatHTML += '</td>';
			activityStatHTML += '</tr>';

			break;

		case "steps":

			statInstructions = "What was your step count?";

			activityStatHTML += '<tr>';
			activityStatHTML += '<th>Steps:</th>';
			activityStatHTML += '<td><input type="text" class="input-steps input-focus" id="' + activity + '-steps" name="' + activity + '-steps" /></td>';
			activityStatHTML += '<td>';
			activityStatHTML += '</td>';
			activityStatHTML += '</tr>';

			break;

		case "weigh-in":
		case "weight":
		case "weighin":

			statTitle = "Weigh-In";
			exerciseName = "Weigh-In";
			activity = "weight";

			statInstructions = "What's your weight?";

			activityStatHTML += '<tr>';
			activityStatHTML += '<th>Weight:</th>';
			activityStatHTML += '<td><input type="text" class="input-weight input-focus" id="' + activity + '-weight" name="' + activity + '-weight" /></td>';
			activityStatHTML += '<td>';
			activityStatHTML += '<select id="' + activity + '-weight-units" name="' + activity + '-weight-units">';
			activityStatHTML += '<option value="lb">Pounds</option>';
			activityStatHTML += '<option value="kg">Kilograms</option>';
			activityStatHTML += '</select>';
			activityStatHTML += '</td>';
			activityStatHTML += '</tr>';

		default :
			break;
	}


	// If the date has been set or changed, leave it alone, otherwise use default date
	if (document.getElementsByClassName("input-date", "front-content-panel").length > 0) {
		activityDate = document.getElementsByClassName("input-date", "front-content-panel")[0].value;
	}
	else {
		activityDate = date_default;
	}


	// Build the HTML to return
	
	templateHTML += '<h1>' + statTitle + '</h1>';
	
	templateHTML += '<div class="panel-instructions">' + statInstructions + '</div>';

	templateHTML += '<input type="hidden" name="exercise" value="' + exerciseName + '" />';
	templateHTML += '<table>';

	templateHTML += activityStatHTML;

	templateHTML += '<tr>';
	templateHTML += '<th>Date:</th>';
	templateHTML += '<td><input type="text" class="input-date" id="' + activity + '-date" name="' + activity + '-date" value="' + activityDate + '" /></td>';
	templateHTML += '<td>';
	templateHTML += '<a href="#" class="calendarButton" title="Click to pick a date" id="f_trigger_c"></a>';
	templateHTML += '</td>';
	templateHTML += '</tr>';
	
	templateHTML += '<tr>';
	templateHTML += '<td></td><td colspan="2"><input type="submit" name="save-button" value="Save" class="submit-save-stats" /></td>';
	templateHTML += '</tr>';

	templateHTML += '</table>';


	return templateHTML;

}



/**
 * Initialize the widget.
 */
function init() {

	buildButtons();
	showPanel("signed_in_default");

}


/**
 * Open a URL
 * param string url - URL to open
 */
function openURL(url) {
	widget.openURL(url);
	return false;
}

/**
 * Apple widget function: build special OS buttons for widget
 */
function buildButtons() {


		glassDoneButton = new AppleGlassButton(document.getElementById("done-button"), "Done", hidePrefs);
		whiteInfoButton = new AppleInfoButton(document.getElementById("info-button"), document.getElementById("front"), "white", "white", showPrefs);


}

/**
 * Apple widget function: show prefs (flip widget)
 */
function showPrefs() {

	var front = document.getElementById("front");
	var back = document.getElementById("back");
	
	if (window.widget) {
		widget.prepareForTransition("ToBack");
	}
	
	front.style.display="none";
	back.style.display="block";
	
	if (window.widget) {
		setTimeout ('widget.performTransition();', 0);
	}

}


/**
 * Apple widget function: hide prefs (flip widget back to front)
 */
function hidePrefs() {

	var front = document.getElementById("front");
	var back = document.getElementById("back");
	
	if (window.widget)
		widget.prepareForTransition("ToFront");
	
	back.style.display="none";
	front.style.display="block";
	
	if (window.widget)
		setTimeout ('widget.performTransition();', 0);	
}


/**
 * show a specific content panel
 * param String content - panel to display
 */
function showPanel(content) {

	//var panel = $("front-content-panel");
	//panel.innerHTML = buildActivityDataEntryPanel(content);

	if ($("calendar-button-container")) {
		initCal(content);
	}

	// Clear any previously selected buttons
	if (document.getElementsByClassName("select-stats-entry-selected", "select-stats-entry").length > 0) {
		document.getElementsByClassName("select-stats-entry-selected", "select-stats-entry")[0].className = "";
	}

	// Leave button in selected state
	if ($("activityButton-" + content)) {
		$("activityButton-" + content).className = "select-stats-entry-selected";
	}

	// Set focus on the first input in the form
	// If the date has been set or changed, leave it alone, otherwise use default date
	if (document.getElementsByClassName("input-focus", "front-content-panel").length > 0) {
		document.getElementsByClassName("input-focus", "front-content-panel")[0].focus();
	}
	
	return;

}

function initCal(content) {
	// Writing this out using Javascript so that non-javascript browsers won't see a
	// useless button that they can't click (ie mobile phones)
	$("calendar-button-container").innerHTML = '<a href="#" class="calendarButton" title="Click to pick a date" id="f_trigger_c"></a>';

	// Setup the calendar picker
	Calendar.setup({
		inputField     :    content + "-date",
		ifFormat       :    "%B %e, %Y",
		button         :    "f_trigger_c",
		align          :    "bR",
		singleClick    :    true,
		weekNumbers    :    false,
		cache          :    true
	});
}