document.observe('dom:loaded',
	function (event) {
		$$('#Map area').invoke('observe', 'click', createPopup);
		$$('img.video').invoke('observe', 'click', showVideo);		
	});

var photoOptions = {
	closeButton: true,
	fixed: true,
	hideOthers: true,
	fixed: true,
	hideOn: false,
	showOn: 'click',
	style: 'darkgrey',
	offset: { x: 20, y: 20 },
	width: 'auto'
};

function createPopup(event) {
	var area = Event.findElement(event, 'area');
	var entry = POPUP.get(area.id);
	var img = new Image();

	// Wait until image is loaded to get its width
	$(img).observe('load',
		(function (event) {
			var img = this;
			var content = new Element('div', { className: "popupDiv" });

			photoOptions.width = img.width + 10;
			photoOptions.title = '<span style="font-size: 12pt;">' + entry.name + '</span>';
			content.update(img).insert('<div class="popupDesc">' + entry.desc + '</div>');
			area.observe('prototip:hidden',
				function (event) {
					Tips.remove(Event.findElement(event, 'area'));
					area.stopObserving('prototip:hidden');
				});
			new Tip(area, content, photoOptions);
			area.prototip.show();
			img.stopObserving('load');
		}).bind(img)); // img.observe
    img.src = entry.photo;
}

var videoOpts = {
	closeButton: true,
	style: 'darkgrey',
	hideOthers: true,
	fixed: true,
	viewport: true,
	hideOn: false,
	width: 'auto'
};

function showVideo(event) {
	var img = Event.element(event);
	var entry = POPUP.get(img.title);
	var wh = { width: 320, height: 240 };	// Default values

	pageTracker._trackEvent('Videos', 'Play', img.title);
	event.stop();
	$('video-holder').update("<div id='inner'></div>");	// Keeps IE happy
	if (entry.aspect) wh = calcWH(wh, entry.aspect);
	swfobject.embedSWF(entry.video+'&jsapi=1', 'inner', wh.width, wh.height, "8");
	img.observe('prototip:hidden',
		function (event) {
			Tips.remove(img);
			img.stopObserving('prototip:hidden');
		});
	new Tip(img, $('inner'), videoOpts);
	img.prototip.show();
}

function calcWH(wh, ratio) {
	w = wh.width;
	h = wh.height
	oRatio = w / h;
	rWidth = ratio.width;
	rHeight = ratio.height;
	if (rWidth/rHeight > oRatio)
		w = h * oRatio;
	else
		h = w / oRatio;

	return { width: w, height: h };
}

var POPUP = $H({
	Lobby:  {
		name: 'The Lobby',
		video: 'http://www.youtube.com/v/Ylhp9ygGPUk',
		aspect: { w: 16, h: 9 },
		photo: 'images/virtualtour/popup/lobby.jpg',
		desc: '<b>The Lobby</b> serves as the Sanctuary’s reception area.  It has a vaulted ceiling and \
				large skylights.  Directly ahead of people when they enter are floor-to-ceiling windows \
				that look into the cat suites.'
	},
	exam: {
		name: 'Examination/Surgery Room',
		video: 'http://www.youtube.com/v/MIV0_imQLok',
		aspect: { w: 16, h: 9 },
		photo: 'images/virtualtour/popup/exam-surgery.jpg',
		desc: '<b>The Exam & Surgery Room</b> is where medical examinations and procedures are \
				performed.  Our onsite medical facility allows us to provide high-quality, prompt \
				medical care at a lower cost and with less stress to our residents.</p>The medical \
				facility is equipped with<ul><li>Exam/surgery table</li><li>anesthesia machine</li> \
				<li>EKG machine</li><li>pulse oximeter</li><li>culture incubator</li><li>dental \
				machine</li><li>microscope (for fungal, fecal, urinary and blood analysis)</li> \
				<li>large stock of vaccines and drugs</li></ul>'
	},
	'Holding Rooms': {
		name: 'Holding Rooms',
		video: 'http://www.youtube.com/v/ahFQgrgR2XE',
		aspect: { w: 16, h: 9 },
		photo: 'images/virtualtour/popup/holding-room.jpg',
		desc: '<b>Holding Rooms</b> are where newly-admitted residents are isolated to adjust to their \
				new surroundings and to be observed for signs of disease.  Cats found to have \
				communicable diseases, injuries or other medical needs are treated before being \
				introduced to the general population.<p>The quarantine period also enables us to \
				assess each cat’s personality and determine for which suite he/she would be best \
				suited.  This is the only time a cat will be in a cage, unless it is recovering \
				from illness or surgery.</p>'
	},
	'Suites Overview': {
		name: 'Intro to Cat Suites',
		video: 'http://www.youtube.com/v/sQDbEwvMWd4',
		photo: 'images/virtualtour/popup/cat-suites.jpg',
		desc: '<b>Cat Suites</b> are large open rooms where the majority of our residents are housed.  \
				The floor-to-ceiling windows enable visitors to view the cats from the lobby (and \
				enable the cats to observe our visitors).<p> Each suite has<ul><li>customized \
				furniture, providing the cats with lots of vertical space and cubby holes for \
				hiding, playing and sleeping</li><li>a ramp that provides a high walkway</li><li>a \
				tunnel that lead cats to an outdoor solarium for fresh air and sunshine</li><li>a \
				closet that contains a sink and cleaning supplies (and serves as another perch for \
				the cats)</li><li>specialized flooring and walls to facilitate cleaning and minimize \
				the spread of disease</li></ul></p>'
	},
	'Suite B': {
		name: 'Suite B',
		video: 'http://www.youtube.com/v/MDOZlIgi42M',
		aspect: { w: 16, h: 9 }
	},
	'Suite C': {
		name: 'Suite C',
		video: 'http://www.youtube.com/v/bQOpcXD5P2g',
		aspect: { w: 16, h: 9 }
	},
	'Special Needs Suite': {
		name: 'Special Needs Suite',
		video: 'http://www.youtube.com/v/kTgN_3TI-us',
		aspect: { w: 16, h: 9 }
	},
	'FIV Suite': {
		name: 'FIV Suite',
		video: 'http://www.youtube.com/v/kiNngW1l-mw',
		aspect: { w: 16, h: 9 }
	},
	solarium: {
		name: 'The Solariums',
		video: 'http://www.youtube.com/v/_uRJzNjhvvM&',
		photo: 'images/virtualtour/popup/solarium.jpg',
		desc: '<b>Solariums</b> provide the cats with fresh air and sunshine.  During the day, the \
				cats may pass freely between their suites and solariums using enclosed overhead \
				walkways.'
	},
	operations_center: {
		name: 'The Operations Center',
		video: 'http://www.youtube.com/v/0hC55-RWNMQ',
		aspect: { w: 16, h: 9 },
		photo: 'images/virtualtour/popup/operations-center.jpg',
		desc: '<b>Sanctuary Operations Center</b> is where laundry, dishwashing, and food preparation \
				are performed.'
	},
	community: {
		name: 'The Community Room',
		video: 'http://www.youtube.com/v/fvu96D2XArU',
		aspect: { w: 16, h: 9 },
		photo: 'images/virtualtour/popup/community.jpg',
		desc: 'The <b>Community Room</b> is used for staff and volunteer training, Board of Trustees \
				meetings, and classes open to the public (e.g., feline behavior, feline health).  \
				In addition, this room houses work areas of some staff members.'
	},
	apartment: {
		name: 'The Resident Apartment',
		photo: 'images/virtualtour/popup/apartment.gif',
		desc: '<b>Apartment</b> is where the resident employee lives, ensuring 24x7 care of the cats.'
	},
	lounge: {
		name: 'Lounge',
		video: 'http://www.youtube.com/v/xUNTuidxAtw',
		aspect: { w: 16, h: 9 },
		photo: 'images/virtualtour/popup/lounge.jpg',
		desc: '<b>Employee/Volunteer Lounge</b> is where employees and volunteers can enjoy lunch \
				and relax.  Hanging in the Lounge is a community bulletin board that keeps everyone up \
				to date on the adoptions and events at Tabby’s Place.  The Lounge is also home to \
				Lillian, an 11-year-old feline with glaucoma, who will glue herself to the lap of \
				anyone who sits down.'
	},
	office: {
		name: "Executive Director's Office",
		video: 'http://www.youtube.com/v/K06UoyZxZUY',
		aspect: { w: 16, h: 9 },
		photo: 'images/virtualtour/popup/exec-dir.jpg',
		desc: '<b>Office</b> of the Executive Director.  Jonathan shares his office with \
				Susie, a very voluptuous, beautiful and intelligent feline (who is currently on a diet).'
	},
	hospital: {
		name: 'Hospital',
		photo: 'images/virtualtour/popup/hospital.jpg',
		desc: 'The <b>Hospital</b> houses cats recovering from illness or surgery.'
	},
	'Specialty Care Rooms': {
		name: 'Specialty Care Rooms',
		video: 'http://www.youtube.com/v/mJzcqWRfll4',
		aspect: { w: 16, h: 9 },
		photo: 'images/virtualtour/popup/speciality-care.jpg',
		desc: '<b>Specialty Care Rooms</b> are cozy, home-like living environments for cats who are \
				not suited to the group living environments of the suites. These rooms serve: \
				<ul><li>cats with special handicaps or disabilities</li><li>old, frail, or \
				sickly cats</li><li>cats requiring special diets</li></ul></p>'
	}
});