/**
 * @filename summaryData.js
 * 
 * @description 
 * 
 * @author Michael Bina
 * @email michael.bina@garmin.com
 *
 * Copyright(c) 2008, Garmin International
 */

Ext.namespace("Garmin", "Garmin.activity");

/**
 * ActivityFormFieldsConstants.formFieldNames
 */
var ActivityInfoComponentConstants = {
	// Form Field IDs
	formFieldNames: {
		ACTIVITY_NAME: 'activityName',
		ACTIVITY_DESCRIPTION: 'activityDescription',
		START_DATE_TIME_ZONE: 'startDateTimeZone'
	},
	// non-form fields
	elementIds: {
	    LOCATION_NAME: 'locationName',
	    USERNAME: 'username'
	},
	
	formFieldLimits: {
		ACTIVITY_NAME: 75,
		ACTIVITY_DESCRIPTION: 2000
	}
};

ActivityInfoComponent = function(){
	return {
		init : function(){
			Ext.QuickTips.init();
			
//			this.displayPotentiallyLongStrings();
			
			if(Activity.IS_OWNER) {
				this.makeFieldsEditable();
			}
		},
		
		displayPotentiallyLongStrings: function() {
            var locationElement = $(ActivityInfoComponentConstants.elementIds.LOCATION_NAME);
			locationElement.update(locationElement.innerHTML.truncate()); // Defaults to 30 chars, including '...'
			locationElement.show();
		},
		
	    makeFieldsEditable: function() {
			this.activityNameElement = Ext.get(ActivityInfoComponentConstants.formFieldNames.ACTIVITY_NAME);
			this.activityDescriptionElement = Ext.get(ActivityInfoComponentConstants.formFieldNames.ACTIVITY_DESCRIPTION);
			this.startDateTimeZoneElement = Ext.get(ActivityInfoComponentConstants.formFieldNames.START_DATE_TIME_ZONE);
			
			var fields = Garmin.form.ActivityFormFields;
			var timezone = Garmin.form.TimezoneFormField;
			var activityClient = new Garmin.service.ActivityClient();
			
			var activityNameField = new Ext.form.TextField({
				allowBlank: false,
				value: this.activityNameElement.dom.innerHTML,
				width: 500,
				maxLength: ActivityInfoComponentConstants.formFieldLimits.ACTIVITY_NAME,
				msgTarget: 'side',
				autoCreate: {tag: "input", type: "text", autocomplete: "off", maxlength: ActivityInfoComponentConstants.formFieldLimits.ACTIVITY_NAME}
			});
			
			fields.makeFieldEditable(
				this.activityNameElement, 
				activityNameField,
				function(newValue, oldValue) {
					activityClient.updateName(Activity.ACTIVITY_ID, activityNameField.getValue(), {
						onSuccess: function(response) {
							eval("var responseObject = " + response.responseText);
							this.activityNameElement.dom.innerHTML = responseObject.display.value;
						}.bind(this),						
						onFailure: function(xhr) {
							fields.alertError(xhr.statusText);
							this.activityNameElement.dom.innerHTML = oldValue;
						}.bind(this)
					});
				}.bind(this),
				{ tooltipText: bundle_activity_api.name } //config
			);

			var activityDescriptionField = new Ext.form.TextArea({
				allowBlank: true,
				value: (Activity.DESCRIPTION.strip() == '' || Activity.DESCRIPTION == null) ? '' : this.activityDescriptionElement.dom.innerHTML.strip(),
				maxLength: ActivityInfoComponentConstants.formFieldLimits.ACTIVITY_DESCRIPTION,
				height: 20,
				width: 750,
				autoCreate: {tag: "input", type: "textarea", autocomplete: "off", maxlength: ActivityInfoComponentConstants.formFieldLimits.ACTIVITY_DESCRIPTION}
			});

			fields.makeFieldEditable(
				this.activityDescriptionElement, 
				activityDescriptionField,
				function(newValue, oldValue) {
//					activityClient.updateDescription(Activity.ACTIVITY_ID, activityDescriptionField.getValue(), {
					activityClient.updateDescription(Activity.ACTIVITY_ID, newValue, {
						onSuccess: function(response) {
							eval("var responseObject = " + response.responseText);
							this.activityDescriptionElement.dom.innerHTML = responseObject.display.value;
						}.bind(this),						
						onFailure: function(xhr) {
							fields.alertError(xhr.statusText);
							this.activityDescriptionElement.dom.innerHTML = oldValue;
						}.bind(this)
					});
				}.bind(this),
				{ // config
				    tooltipText: bundle_activity_api.description,
				    blankText: bundle_activity_api.description_default,
				    autoHyperlink: true
			    } 
			);
			
			var timeZoneCombo = timezone.getTimeZonesCombo({
				width: 250
			});
			var timeZoneEditor = fields.makeFieldEditable(
				this.startDateTimeZoneElement, 
				timeZoneCombo,
				function(newValue, oldValue) {
					activityClient.updateTimeZone(Activity.ACTIVITY_ID, timeZoneCombo.getValue(), {
						onSuccess: function(response) {
							eval("var responseObject = " + response.responseText);
							this.startDateTimeZoneElement.dom.innerHTML = responseObject.timeZoneUnit.abbr;
						}.bind(this),						
						onFailure: function(xhr) {
							fields.alertError(xhr.statusText);
							this.startDateTimeZoneElement.dom.innerHTML = oldValue;
						}.bind(this)
					});
				}.bind(this),
				{ tooltipText: bundle_activity_api.timezone }
			);
			
			timeZoneEditor.on('show', function() {
				timeZoneCombo.setRawValue(this.startDateTimeZoneElement.dom.innerHTML.replace('&', '&'));
			}.bind(this));
	    }
	 };
}();
//document.observe("dom:loaded", function() {
// This needs to run on window load to prevent antsy users from crashing the page load in IE7 and below.
Event.observe(window, 'load', function() {
  ActivityInfoComponent.init();
});