Add title option

3 files changed, 22 insertions, 9 deletions

diff --git a/default.css b/default.css
index 8225d8e..6af8c30 100644
--- a/default.css
+++ b/default.css
@@ -21,7 +21,6 @@ div.jqi{
 	padding: 7px;
 }
 div.jqi .jqicontainer{ 
-	font-weight: bold; 
 }
 div.jqi .jqiclose{ 
 	position: absolute;
@@ -31,6 +30,12 @@ div.jqi .jqiclose{
 	color: #bbbbbb; 
 	font-weight: bold; 
 }
+div.jqi .jqititle{
+	padding: 5px 10px;
+	font-size: 16px; 
+	line-height: 20px; 
+	border-bottom: solid 1px #eeeeee;
+}
 div.jqi .jqimessage{ 
 	padding: 10px; 
 	line-height: 20px; 
diff --git a/demo.html b/demo.html
index 096a09d..117b83f 100644
--- a/demo.html
+++ b/demo.html
@@ -18,7 +18,7 @@
 			#wrapper{ text-align: left; margin: 0 auto; background-color: #ffffff; width: 500px; min-height: 200px; padding: 25px; }
 
 		</style>
-		<link href="default.css" rel="stylesheet" type="text/css" />
+		<link href="themes/zoo.css" rel="stylesheet" type="text/css" />
 		
 		<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
 		<script type="text/javascript" src="jquery-impromptu.js"></script>
@@ -42,8 +42,9 @@
 				},
 				states = [
 					{
-						html: 'Welcome to the tour',
-						buttons: { Next: 1 },
+						title: 'Welcome to the Tour',
+						html: 'Get ready for a tour through the adventurous lands of Impromptzoo!',
+						buttons: { Next: 1, 'Lets Go': true },
 						submit: submitFunc
 					},
 					{
@@ -82,7 +83,7 @@
 						submit: submitFunc
 					}
 				];
-				var $jqi = $.prompt(states, { opacity: 0.3 });
+				var $jqi = $.prompt(states, { prefix: 'jqizoo' });
 
 				$jqi.bind('promptstatechanged', function(e,to){
 					if(window.console) console.log(arguments);
@@ -100,8 +101,10 @@
 				There are also an events attached by using bind()
 			*/
 			function standard(){
-				var $jqi = $.prompt('<p>Standard Issue Prompt</p>',{ 
+				var $jqi = $.prompt('<p>A simple prompt with the simplest of states.</p>',{ 
 						overlayspeed:'fast',
+						title: 'Standard Issue Prompt',
+						prefix: 'jqizoo',
 						buttons: [
 								{ title: 'Ok', value: '1', classes: ['foo','bar'] },
 								{ title: 'Cancel', value: '0', classes: "test1 test2" },
diff --git a/jquery-impromptu.js b/jquery-impromptu.js
index d69a766..a7bd794 100644
--- a/jquery-impromptu.js
+++ b/jquery-impromptu.js
@@ -47,6 +47,7 @@
 		if(message.constructor == String){

 			message = {

 				state0: {

+					title: $.prompt.options.title,

 					html: message,

 				 	buttons: $.prompt.options.buttons,

 				 	focus: $.prompt.options.focus,

@@ -62,11 +63,13 @@
 				stateobj = $.extend({},$.prompt.defaults.state,stateobj);

 				message[statename] = stateobj;

 				

-				var arrow = "";

+				var arrow = "",

+					title = "";

 				if(stateobj.position.arrow !== null)

 					arrow = '<div class="'+ $.prompt.options.prefix + 'arrow '+ $.prompt.options.prefix + 'arrow'+ stateobj.position.arrow +'"></div>';

-				    

-				states += '<div id="'+ $.prompt.options.prefix +'_state_'+ statename +'" class="'+ $.prompt.options.prefix + '_state" style="display:none;">'+ arrow +'<div class="'+ $.prompt.options.prefix +'message">' + stateobj.html +'</div><div class="'+ $.prompt.options.prefix +'buttons">';

+				if(stateobj.title && stateobj.title !== '')

+				    title = '<div class="'+ $.prompt.options.prefix + 'title '+ $.prompt.options.prefix + 'title">'+  stateobj.title +'</div>';

+				states += '<div id="'+ $.prompt.options.prefix +'_state_'+ statename +'" class="'+ $.prompt.options.prefix + '_state" style="display:none;">'+ arrow + title +'<div class="'+ $.prompt.options.prefix +'message">' + stateobj.html +'</div><div class="'+ $.prompt.options.prefix +'buttons">';

 				

 				$.each(stateobj.buttons, function(k, v){

 					if(typeof v == 'object'){

@@ -217,6 +220,7 @@
 	$.prompt.defaults = {

 		prefix:'jqi',

 		classes: '',

+		title: '',

 		buttons: {

 			Ok: true

 		},

@@ -236,6 +240,7 @@
 	  	persistent: true,

 	  	timeout: 0,

 	  	state: {

+	  		title: '',

 			html: '',

 		 	buttons: {

 		 		Ok: true