<style>
		body { font-size: 62.5%; }
		label, input { display:block; margin:5px 0px 0px 0px; }
		/*input.text { margin-bottom:12px; width:95%; padding: .4em; }*/
		textarea { display:block; margin:5px 0px 0px 0px; width:320px; height:100px; font-family:Tahoma, Arial; font-size:12px; }
		fieldset { padding:0; border:0; margin-top:20px; }
		h1 { font-size: 1.2em; margin: .6em 0; }
		div#users-contain { width: 350px; margin: 20px 0; }
		div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
		div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
		.ui-dialog .ui-state-error { padding: 0px 0px 0px 5px; }
		.validateTips { border: 1px solid transparent; padding: 0.3em; }
	</style>
	<script>

	$(function() {
		// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
		$( "#dialog:ui-dialog" ).dialog( "destroy" );
		
		var note_content = $( "#note_content" ),
			allFields = $( [] ).add( note_content ),
			tips = $( ".validateTips" );

		function updateTips( t ) {
			tips
				.text( t )
				.addClass( "ui-state-highlight" );
			setTimeout(function() {
				tips.removeClass( "ui-state-highlight", 1500 );
			}, 500 );
		}

		function checkLength( o1, min, max) {
			if ( o1.val().length < min && o1.val().length > max) {
				//o1.addClass( "ui-state-error" );
				updateTips( "Note content may have minimum "+ min +" and maximum "+max + "characters." );
				return false;
			} else {
				return true;
			}
		}

		
		$( "#dialog-form" ).dialog({
			autoOpen: false,
			height: 300,
			width: 350,
			modal: true,
			resizable: false,
			buttons: {
				"Add Note": function() {
					var bValid = true;
					allFields.removeClass( "ui-state-error" );

					bValid = checkLength( note_content, 0, 250 );
			
					if ( bValid ) {
						// INSERT PAGE
						// CREATE NOTE
						
						xmlhttp = new XMLHttpRequest();
						xmlhttp.open("POST","ajax/add_note.php",true);
						xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
						xmlhttp.send("content="+note_content.val()+"&id=<?php echo $id; ?>");
						
						xmlhttp.onreadystatechange=function() {
  							if (xmlhttp.readyState==4 && xmlhttp.status==200) {
    							if (xmlhttp.responseText == "success") {
									//updateTips (xmlhttp.responseText);
									$( "#dialog-form" ).dialog( "close" );				
									$( "#dialog-message" ).dialog( "open" );
								}
							}
						}
						
						// title.val()
						// pagelink.val() 
						// pid.val() 
						//$( this ).dialog( "close" );
					}
				},
				Cancel: function() {
					$( this ).dialog( "close" );
				}
			},
			close: function() {
				allFields.val( "" ).removeClass( "ui-state-error" );
			}
		});
		
		$( "#dialog-message" ).dialog({
			autoOpen: false,
			height: 300,
			width: 350,
			modal: true,
			resizable: false,
			buttons: {
				Ok: function() {
					$( "#dialog-form" ).dialog( "close" );
					$( this ).dialog( "close" );
				}
			}
		});

		$( "#create_page" )
			.button()
			.click(function() {
				$( "#dialog-form" ).dialog( "open" );
			});
	});
	
	</script>


<div id="dialog-form" title="Add Note">
	<p class="validateTips">Please enter Note details.</p>

	<form>
	<fieldset>
		<label for="note_content">Note Content</label>
		<textarea name="note_content" id="note_content" class="text ui-widget-content ui-corner-all"></textarea>
	</fieldset>
	</form>
</div>


<div id="dialog-message" title="Note sucessfully submitted">
	<p>Your Note is added and will be visible soon.<br /><br />
Thank You!</p>
</div>


<?php if (isset ($_SESSION['user'])) {


$userId = $_SESSION['id'];
$addUserView = " AND UserId = '$userId' ";
if ($_SESSION['priv'] != 'Superadmin') {
	$addUserView = " AND (Public = 1 OR Id IN (SELECT NoteId FROM user_note WHERE UserId = '$userId' )) ";
} else {
	$addUserView = ' ';
}

$res = mysql_query ("SELECT * FROM note WHERE PageId = '$id' " . $addUserView . " ORDER BY Date DESC " );
$nr = mysql_num_rows ($res);
?>
<div class="huge_box_header" id="notes" style="width:604px; padding-right:0px;">
<div class="title">Notes</div>
<div style="font-size:10px; float:right; padding:5px 10px 7px 15px;"><button id="create_page">Add Note</button></div>
</div>
<div class="huge_box_content">


	<?php
	if ($nr == 0) {
	?>
    <div class="description">You don't have notes for this page.</div>
    <?	
	}
	while ($nr>0) {
		$row = mysql_fetch_array ($res);
		extract ($row);
		?>
        <div class="date"><?php echo formatDate($Date); ?></div>
		<div class="description"><?php echo $Content; ?></div>
		<?php
		$nr--;
	}
?>    
</div>
<?php } ?>
