Fix #58 - Adds buttonTimeout option, enableStateButtons() api method,…

… and disableStateButtons api method to prevent multiple submit of each state

dist/index.html

@@ -188,6 +188,9 @@ <h3>options</h3>
 						<dt>buttons</dt>
 						<dd>An object containing the text and values of each button the user may click. <em>Default: { Ok : true }</em></dd>
 
+						<dt>buttonTimeout</dt>
+						<dd>A time frame in milliseconds to disable buttons after a click to prevent double submitting.  -1 will disable this feature. <em>Default: 1000</em></dd>
+
 						<dt>classes</dt>
 						<dd>An object of class names for each part of a prompt for greater compatibilty with existing css frameworks.  For example if you would like to use twitter bootstrap you would include the base theme (in the themes folder), then pass the following classes:
 <pre><code>{
@@ -317,6 +320,12 @@ <h2>Methods</h2>
 						<dt>jQuery.prompt.prevState(callback)</dt>
 						<dd>Transitions to the previous state. Callback represents a statechanged event.</dd>
 
+						<dt>jQuery.prompt.enableStateButtons(stateName, buttons)</dt>
+						<dd>Enable buttons in a state.  stateName defaults to the current state and buttons is an array of button values to enable.  Omit the buttons argument to enable all buttons.</dd>
+
+						<dt>jQuery.prompt.disableStateButtons(stateName, buttons)</dt>
+						<dd>disable buttons in a state.  stateName defaults to the current state and buttons is an array of button values to disable.  Omit the buttons argument to disable all buttons.</dd>
+
 						<dt>jQuery.prompt.close()</dt>
 						<dd>Closes the prompt.</dd>
 					</dl>

dist/jquery-impromptu.css

@@ -5,6 +5,10 @@
 	position: absolute; 
 	background-color: #777777; 
 }
+iframe.jqifade{
+	display:block;
+	z-index:-1;
+}
 div.jqi{ 
 	width: 400px; 
 	max-width:90%;
@@ -44,6 +48,9 @@ div.jqi .jqimessage{
 	color: #444444; 
 	overflow: auto;
 }
+div.jqi .jqibuttonshide{
+	display: none;
+} 
 div.jqi .jqibuttons{ 
 	text-align: right; 
 	margin: 0 -7px -7px -7px;

dist/jquery-impromptu.js

@@ -58,6 +58,7 @@
 		buttons: {
 			Ok: true
 		},
+		buttonTimeout: 1000,
 		loaded: function(e){},
 		submit: function(e,v,m,f){},
 		close: function(e,v,m,f){},
@@ -189,7 +190,7 @@
 			//build the box and fade
 			var msgbox = '<div class="'+ opts.prefix +'box '+ opts.classes.box +'">';
 			if(opts.useiframe && ($('object, applet').length > 0)) {
-				msgbox += '<iframe src="javascript:false;" style="display:block;position:absolute;z-index:-1;" class="'+ opts.prefix +'fade '+ opts.classes.fade +'"></iframe>';
+				msgbox += '<iframe src="javascript:false;" class="'+ opts.prefix +'fade '+ opts.classes.fade +'"></iframe>';
 			} else {
 				msgbox += '<div class="'+ opts.prefix +'fade '+ opts.classes.fade +'"></div>';
 			}
@@ -236,11 +237,20 @@
 			t.jqi.on('click', '.'+ opts.prefix +'buttons button', function(e){
 				var $t = $(this),
 					$state = $t.parents('.'+ opts.prefix +'state'),
-					stateobj = t.options.states[$state.data('jqi-name')],
+					statename = $state.data('jqi-name'),
+					stateobj = t.options.states[statename],
 					msg = $state.children('.'+ opts.prefix +'message'),
 					clicked = stateobj.buttons[$t.text()] || stateobj.buttons[$t.html()],
 					forminputs = {};
 
+				// disable for a moment to prevent multiple clicks
+				if(t.options.buttonTimeout > 0){
+					t.disableStateButtons(statename);
+					setTimeout(function(){
+						t.enableStateButtons(statename);
+					}, t.options.buttonTimeout);
+				}
+
 				// if for some reason we couldn't get the value
 				if(clicked === undefined){
 					for(var i in stateobj.buttons){
@@ -441,10 +451,10 @@
 				showHtml = 'Error: html function must return text';
 			}
 
-			state += '<div class="'+ opts.prefix + 'state" data-jqi-name="'+ statename +'" style="display:none;">'+
+			state += '<div class="'+ opts.prefix + 'state" data-jqi-name="'+ statename +'">'+
 						arrow + title +
 						'<div class="'+ opts.prefix +'message '+ opts.classes.message +'">' + showHtml +'</div>'+
-						'<div class="'+ opts.prefix +'buttons '+ opts.classes.buttons +'"'+ ($.isEmptyObject(stateobj.buttons)? 'style="display:none;"':'') +'>';
+						'<div class="'+ opts.prefix +'buttons'+ ($.isEmptyObject(stateobj.buttons)? 'hide ':' ') + opts.classes.buttons +'">';
 
 			// state buttons may be in object or array, lets convert objects to arrays
 			if($.isArray(stateobj.buttons)){
@@ -474,7 +484,7 @@
 
 			state += '</div></div>';
 
-			$state = $(state);
+			$state = $(state).css({display:'none'});
 
 			$state.on('impromptu:submit', stateobj.submit);
 
@@ -576,6 +586,38 @@
 			return this.currentStateName;
 		},
 
+		/**
+		* disableStateButtons - Disables the buttons in a state
+		* @param statename String - Name of the state containing buttons
+		* @param buttons Array - Array of button values to disable. By default all are disabled
+		* @param enable Boolean - True to enable the buttons instead of disabling (internally use only)
+		* @return Void
+		*/
+		disableStateButtons: function(statename, buttons, enable) {
+			var t = this;
+
+			if($.isArray(statename)){
+				buttons = statename;
+				statename = null;
+			}
+
+			t.getState(statename || t.getCurrentStateName()).find('.'+ t.options.prefix + 'button').each(function(i,btn){
+				if(buttons === undefined || $.inArray(btn.value, buttons) !== -1){
+					btn.disabled = !enable;
+				}
+			});
+		},
+
+		/**
+		* enableStateButtons - Enables the buttons in a state
+		* @param statename String - Name of the state containing buttons. Defaults to current state
+		* @param buttons Array - Array of button values to enable. By default all are enabled
+		* @return Void
+		*/
+		enableStateButtons: function(statename, buttons) {
+			this.disableStateButtons(statename, buttons, true);
+		},
+
 		/**
 		* position - Repositions the prompt (Used internally)
 		* @return void