diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 994e63c..8557259 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -646,6 +646,29 @@ StTooltip {
     spacing: 6px;
 }
 
+/* clock properties popup */
+
+#clockPropertiesPopup {
+    border-radius: 5px;
+    background: rgba(0,0,0,0.9);
+    border: 1px solid rgba(128,128,128,0.45);
+    color: #FFFFFF;
+    font-size: 14px;
+}
+
+#clockPropertiesPopup .properties {
+    padding: 10px;
+}
+
+#clockPropertiesPopup .properties .properties-checkbox {
+    font-weight:bold;
+    padding-left:10px;
+}
+
+#clockPropertiesPopup .properties .properties-checkbox:pressed {
+    background-color: #777777;
+}
+
 /* Calendar popup */
 
 #calendarPopup {
diff --git a/js/ui/clockProperties.js b/js/ui/clockProperties.js
new file mode 100644
index 0000000..49df429
--- /dev/null
+++ b/js/ui/clockProperties.js
@@ -0,0 +1,70 @@
+const St = imports.gi.St;
+const Gtk = imports.gi.Gtk;
+const Shell = imports.gi.Shell;
+const Lang = imports.lang;
+const Gettext = imports.gettext.domain('gnome-shell');
+const _ = Gettext.gettext;
+
+function ClockProperties(panel, isSecVisible, isDateVisible) {
+    this._init(panel, isSecVisible, isDateVisible);
+}
+
+ClockProperties.prototype = {
+    _init: function(panel, isSecVisible, isDateVisible) {
+	this.actor = new St.Table({homogeneous: false,
+				  style_class: "properties",
+				  reactive: true});
+	this._isSecVisible = isSecVisible;
+	this._isDateVisible = isDateVisible;
+	var key;
+	for (key in Shell.GConf)
+		print(String(key) + ":" + String(Shell.GConf[key]));
+	this._gconf = Shell.GConf.get_default();
+	for (key in this._gconf)
+		print(String(key) + ":" + String(this._gconf[key]));
+	this._panel = panel;
+	this._okLabel = /*"☑"*/ "<b>&#9745;</b>";
+	this._noLabel = /*"☐"*/ "<b>&#9744;</b>";
+	let dateLabel = new St.Label({text: _("View Date")});
+	this.actor.add(dateLabel, {row: 0, col: 0});
+	this._dateCheckInd = this.actor.get_children().length;
+	this._update();
+    },
+
+    _update: function() {
+	let dateCheck = new St.Button({label: 
+	      (this._isDateVisible ? this._okLabel : this._noLabel), 
+	      style_class: "properties-checkbox"});
+	let secCheck = new St.Button({label: 
+	      (this._isSecVisible ? this._okLabel : this._noLabel),
+	      style_class: "properties-checkbox"});
+	let secLabel = new St.Label({text: _("View Seconds")});
+	this.actor.add(dateCheck, {row: 0, col: 1});
+	dateCheck.connect('clicked', Lang.bind(this, this._toggleDateVisibility));
+	this.actor.add(secLabel, {row: 1, col:0});
+	this.actor.add(secCheck, {row: 1, col:1});
+	secCheck.connect('clicked', Lang.bind(this, this._toggleSecVisibility));
+    },
+
+    _toggleDateVisibility: function() {
+	this._isDateVisible = !(this._isDateVisible);
+	let c = this.actor.get_children();
+	for (let i = this._dateCheckInd; i < c.length; i++)
+	    c[i].destroy();
+	this._update();
+	this._panel.setClockDateVisible(this._isDateVisible);
+	this._gconf.set_boolean('/apps/gnome-shell/panel_clock/prefs/show_date',
+							this._isDateVisible);
+    },
+
+    _toggleSecVisibility: function() {
+	this._isSecVisible = !(this._isSecVisible);
+	let c = this.actor.get_children();
+	for (let i = this._dateCheckInd; i < c.length; i++)
+	    c[i].destroy();
+	this._update();
+	this._panel.setClockSecVisible(this._isSecVisible);
+	this._gconf.set_boolean('/apps/gnome-shell/panel_clock/prefs/show_seconds',
+							this._isSecVisible);
+    }
+}
diff --git a/js/ui/panel.js b/js/ui/panel.js
index 31007fb..56a9368 100644
--- a/js/ui/panel.js
+++ b/js/ui/panel.js
@@ -13,6 +13,7 @@ const Gettext = imports.gettext.domain('gnome-shell');
 const _ = Gettext.gettext;
 
 const AppDisplay = imports.ui.appDisplay;
+const ClockProperties = imports.ui.clockProperties;
 const Calendar = imports.ui.calendar;
 const Main = imports.ui.main;
 const StatusMenu = imports.ui.statusMenu;
@@ -405,12 +406,43 @@ Panel.prototype = {
                                           y_fill: true });
         this._centerBox.add(clockButton, { y_fill: false });
         clockButton.connect('clicked', Lang.bind(this, this._toggleCalendar));
+		clockButton.connect('button-release-event', 
+							Lang.bind(this,	this._toggleClockPropertiesPopup));
 
         this._clock = new St.Label();
         clockButton.set_child(this._clock);
         this._clockButton = clockButton;
 
         this._calendarPopup = null;
+		this._clockPropertiesPopup = null;
+		let gconf = Shell.GConf.get_default();
+		this._isDateVisible = true;
+		this._isSecVisible = true;
+		try {
+			this._isDateVisible = gconf.get_boolean(
+					'/apps/gnome-shell/panel_clock/prefs/show_date');
+			this._isSecVisible = gconf.get_boolean(
+					'/apps/gnome-shell/panel_clock/prefs/show_seconds');
+		} catch (noneyet) {
+			print(String(noneyet));
+			for (let i = 0; i < 20; i++) {
+				if (gconf.get_string('/apps/panel/applets/applet_' + i + '/bonobo_iid')
+						== 'OAFIID:GNOME_ClockApplet') {
+					this._isDateVisible = gconf.get_boolean(
+							'/apps/panel/applets/applet_' + i + '/prefs/show_date');
+					this._isSecVisible = gconf.get_boolean(
+							'/apps/panel/applets/applet_' + i + '/prefs/show_seconds');
+					print('date visibility ' + this._isDateVisible);
+					print('sec visibility ' + this._isSecVisible);
+					print('ind ' + i);
+					i = 20;
+				}
+			}
+			gconf.set_boolean('/apps/gnome-shell/panel_clock/prefs/show_date',
+							  this._isDateVisible);
+			gconf.set_boolean('/apps/gnome-shell/panel_clock/prefs/show_seconds',
+							  this._isSecVisible);
+		}
 
         /* right */
 
@@ -546,13 +578,12 @@ Panel.prototype = {
 
     _updateClock: function() {
         let displayDate = new Date();
-        let msecRemaining = 60000 - (1000 * displayDate.getSeconds() +
-                                     displayDate.getMilliseconds());
-        if (msecRemaining < 500) {
-            displayDate.setMinutes(displayDate.getMinutes() + 1);
-            msecRemaining += 60000;
-        }
-
+	let msecRemaining = 0;
+	/* Translators: time format for day */
+	let timestyle = _("%a ");
+	if (this._isDateVisible)
+	    /* Translators: time format for full date */
+	    timestyle += _("%e %B, %Y ");
         // if the locale representations of 05:00 and 17:00 do not
         // start with the same 2 digits, it must be a 24h clock
         let fiveAm = new Date();
@@ -562,17 +593,64 @@ Panel.prototype = {
         let isTime24h = fiveAm.toLocaleFormat("%X").substr(0,2) !=
                         fivePm.toLocaleFormat("%X").substr(0,2);
         if (isTime24h) {
-            /* Translators: This is the time format used in 24-hour mode. */
-            this._clock.set_text(displayDate.toLocaleFormat(_("%a %R")));
+            /* Translators: time format used in 24-hour mode. */
+            timestyle += _("%R");
         } else {
-            /* Translators: This is a time format used for AM/PM. */
-            this._clock.set_text(displayDate.toLocaleFormat(_("%a %l:%M %p")));
+            /* Translators: time format used for AM/PM. */
+            timestyle += _("%l:%M");
         }
+	if (this._isSecVisible) {
+	    msecRemaining = 1000 - displayDate.getMilliseconds();
+	    if (msecRemaining < 100) {
+		displayDate.setSeconds(displayDate.getSeconds() + 1);
+		msecRemaining += 1000;
+	    }
+	    /* Translators: time format */
+	    timestyle += _(" %S");
+		if (!isTime24h)
+			/* Translators: time format*/
+			timestyle += _(" %p");
+	} else {
+	    msecRemaining = 60000 - (1000 * displayDate.getSeconds() +
+					displayDate.getMilliseconds());
+	    if (msecRemaining < 500) {
+		displayDate.setMinutes(displayDate.getMinutes() + 1);
+		msecRemaining += 60000;
+	    }
+	    if (!isTime24h)
+			/* Translators: time format*/
+			timestyle += _(" %p");
+	}
+        this._clock.set_text(displayDate.toLocaleFormat(timestyle));
         Mainloop.timeout_add(msecRemaining, Lang.bind(this, this._updateClock));
         return false;
     },
 
-    _toggleCalendar: function(clockButton) {
+    setClockSecVisible: function(isSecVisible) {
+	this._isSecVisible = isSecVisible;
+	this._updateClock();
+    },
+
+    setClockDateVisible: function(isDateVisible) {
+	this._isDateVisible = isDateVisible;
+	this._updateClock();
+    },
+
+    _toggleClockPropertiesPopup: function(clockWidget, buttonEvent) {
+	/* placeholder */
+	if (this._clockPropertiesPopup == null)
+	    this._clockPropertiesPopup = new ClockPropertiesPopup(this);
+	if (this._clockPropertiesPopup.isVisible())
+	    this._clockPropertiesPopup.hide(false);
+	else if ((this._calendarPopup == null) ||
+		!(this._calendarPopup.isVisible()))
+	    this._clockPropertiesPopup.show();
+    },
+    
+   _toggleCalendar: function(clockButton) {
+	if ((this._clockPropertiesPopup != null) && 
+		(this._clockPropertiesPopup.isVisible()))
+	    this._clockPropertiesPopup.hide(true);
         if (clockButton.checked) {
             if (this._calendarPopup == null)
                 this._calendarPopup = new CalendarPopup();
@@ -660,6 +738,57 @@ Panel.prototype = {
     }
 };
 
+function ClockPropertiesPopup(panel) {
+    this._init(panel);
+}
+
+ClockPropertiesPopup.prototype = {
+    _init: function(panel) {
+	let panelActor = Main.panel.actor;
+	this.panel = panel;
+
+	this.actor = new St.BoxLayout({name: 'clockPropertiesPopup' });
+	this.clockProperties = new ClockProperties.ClockProperties(
+	      panel, panel._isSecVisible, panel._isDateVisible);
+	this.actor.add(this.clockProperties.actor);
+
+	Main.chrome.addActor(this.actor, { visibleInOverview: true,
+					    affectsStruts: false });
+	this.actor.y = (panelActor.y + panelActor.height - this.actor.height);
+	this._isVisible = false;
+    },
+    
+    show: function() {
+	let panelActor = Main.panel.actor;
+        this.actor.x = Math.round(panelActor.x + (panelActor.width - this.actor.width) / 2);
+        this.actor.lower(panelActor);
+        this.actor.show();
+        Tweener.addTween(this.actor,
+                         { y: panelActor.y + panelActor.height,
+                           time: 0.2,
+                           transition: "easeOutQuad"
+                         });	
+	this._isVisible = true;
+    },
+
+    hide: function(quick) {
+        let panelActor = Main.panel.actor;
+	let speed = (quick) ? 0.001 : 0.2;
+        Tweener.addTween(this.actor,
+                         { y: panelActor.y + panelActor.height - this.actor.height,
+                           time: speed,
+                           transition: "easeOutQuad",
+                           onComplete: function() { this.actor.hide(); },
+                           onCompleteScope: this
+                         });
+	this._isVisible = false;
+    },
+
+    isVisible: function() {
+	return this._isVisible;
+    }
+}
+
 function CalendarPopup() {
     this._init();
 }
@@ -676,6 +805,7 @@ CalendarPopup.prototype = {
         Main.chrome.addActor(this.actor, { visibleInOverview: true,
                                            affectsStruts: false });
         this.actor.y = (panelActor.y + panelActor.height - this.actor.height);
+	this._isVisible = false;
     },
 
     show: function() {
@@ -692,6 +822,7 @@ CalendarPopup.prototype = {
                            time: 0.2,
                            transition: "easeOutQuad"
                          });
+	this._isVisible = true;
     },
 
     hide: function() {
@@ -704,5 +835,10 @@ CalendarPopup.prototype = {
                            onComplete: function() { this.actor.hide(); },
                            onCompleteScope: this
                          });
+	this._isVisible = false;
+    },
+
+    isVisible: function() {
+	return this._isVisible;
     }
 };
