$(document).ready(function()
{
	setDialogs();
});

function setDialogs()
{
	//set style for the dialog
	$.fn.qtip.styles.dialog = { 
		width: { min: 500, max: 500 },
		height: '500px',
		overflow: 'scroll',
		padding: '14px',
		background: '#a38e30',
		color: '#000000',
		border: {
			width: 7,
			radius: 7,
			color: '#584207'
		}					
	};
	
	//set dialogs
	$('div.roomIndex div.roomItem a').each(
		function()
		{
			var dialogTips = {
				content: {
					title: {
						text: $(this).attr("title"),
						button: 'Close',
						'background': '#a38e30'
					},
					url: '/app/modules/rooms/scripts/roomData.php',
					data: { room_id: $(this).attr("href").substring(11) },
					method: 'post'
				},
				position: {
					target: $(document.body), 
					corner: 'center'
				},
				show: {
					when: 'click',
					solo: true
				},
				hide: false,
				style : {
					name: 'dialog',
					title: {
						'background': '#584207',
						'color':'#fff',
						'font-size': '12px'
					}
				},
				api: {
					onRender : function () {
						$('#qtip_close_button').click(this.hide);
					},
					beforeShow: function() {
						$('#qtip-blanket').fadeIn(this.options.show.effect.length);
					},
					beforeHide: function() {
						$('#qtip-blanket').fadeOut(this.options.hide.effect.length);
					}
				}
			};
			
			$(this).click().qtip(dialogTips);
		}
	);
	
	//display background mask
	$('<div id="qtip-blanket">')
		.css({
			position: 'absolute',
			top: $(document).scrollTop(),
			left: 0,
			height: 2000, //$(document).height(),
			//height: getPageSize('height'), 
			width: '100%',
			opacity: 0.7,
			backgroundColor: 'black',
			zIndex: 5000
		})
		.appendTo(document.body)
		.hide();
		
	console.log($(document).height());

}