/**
 * 
 * 
 * 1) listen for a click on the "RESERVATIONS" link; when that happens,
 * 2) build the dialog box - only have to do this once.  Thereafter, we can 
 *    just reopen the existing dialog.
 *
 * Generated this map with this link: 
 *
 * Written by James Revillini <james@revillini.com>.  E-mail for support.
 **/

jQuery(function ($) {

	//register event listeners. listen for whenever visitor clicks a link with class 'open-table'
	$('a[href^=http://www.opentable.com]').click(function (evt) {
	
		//cancel default action
		evt.preventDefault();
		
		//capture the open table LINK HREF - NOTE: this means the link MUST have the exact opentable link for what you want to show!
		var url = $(this).attr('href');
		var iframe_url = url.replace('iwloc=r0', '')+'output=embed';
	
		//check if we already built the contact dialog
		if (!$('#opentable-dialog').length) {
			//no dialog has been built yet; build it!
			$('head').append('<link rel="stylesheet" type="text/css" href="opentable.css">');
			$('body').append('<div id="opentable-dialog" title="Make a reservation with Open Table"><iframe name="opentable" width="100%" height="450" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="'+iframe_url+'"></iframe></div>');
			$('#opentable-dialog').dialog({
				autoOpen	: true,

				width		: 980,
				height		: 450,

				modal		: true,
				zIndex		: 999999,
				buttons: {
					"Close": function() { 

						$(this).dialog("close"); 

					},
					"Open Full-Screen": function() { 

						window.open(url);

					} 

				}
				
			});
			return;
		
		}
		
		
		//ok, dialog HAS been built, so just reload the iframe in there and then show it
		$('#opentable-dialog').dialog('open');
		$('#opentable-dialog iframe').attr('src', url);
		
		return;
	});

});