// <![CDATA[

Event.observe(window, 'load', function () {

  // booking form
	Event.observe('searchHotel', 'submit', function (e) {
		if (null == $('promo').getValue()) { // only display the popup if they haven't ticked the residents' box
		   Event.stop(e);
			 // console.log('are you sure??');
			 var destUrl = $('searchHotel').readAttribute('action');
			 var resident = $('promo').readAttribute('value');
			 var data = $('searchHotel').serialize();
			 displayPopup(destUrl +'?'+ data +'&promo='+ resident, destUrl +'?'+ data);
		}
	});
	
	// offers links
	if (null != $('offerlink_za')) {
		$('offerlink_za').up('p').hide(); // hide the residents' link
		Event.observe('offerlink', 'click', function (e) {
			Event.stop(e);
			displayPopup($('offerlink_za').readAttribute('href'), $('offerlink').readAttribute('href'));
		});
	}
	
});

function displayPopup(linkYes, linkNo) {
  var iebody = (document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body;
	var dsoctop = document.all ? iebody.scrollTop : pageYOffset; // how far down the page are we?
	var zapopup = getPopupHtml(linkYes, linkNo);
	$$('body')[0].appendChild(zapopup);
	$('overlay_zares').setStyle({ top: dsoctop +'px', opacity: 0.0 }); // move the popup down a bit if necessary
	$('zares_choice').setStyle({ opacity: 0.0 });
	if (1 == $$('.join-our-newsletter-index').length) $$('.join-our-newsletter-index')[0].hide(); // hide the newsletter input box
	if (1 == $$('.join-our-newsletter').length) $$('.join-our-newsletter')[0].hide(); // hide the newsletter input box
	new Effect.Appear('overlay_zares', { to: 0.85, duration: 0.2, queue: 'end' }); // display the modal
	new Effect.Appear('zares_choice', { to: 1.0, duration: 0.2, queue: 'end' }); // display the choice
}

function getPopupHtml(linkYes, linkNo) {
  var el = document.createElement('div');
  el.setAttribute('id', 'overlay_zares');
  var el2 = document.createElement('div');
  el2.setAttribute('id', 'zares_choice');
  el2.innerHTML = '<br /><br /><p>Are you a South African resident?<br /><br /><br /> ' +
			'<a href="'+ linkYes +'">YES&nbsp;</a> ' +
			'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' +
			'<a href="'+ linkNo +'">NO&nbsp;&nbsp;</a><br /><br /><br /></p>';
  el.appendChild(el2);
  return el;
}

// ]]>