window.addEvent('domready', function() {
	// Enable lightboxes on all pages
	var oMultiBox = new multiBox({
		mbClass: '.mb',
		container: $(document.body),
		descClassName: 'multiBoxDesc',
		useOverlay: true,
		maxSize: null,
		addDownload: false
	});


	// Make sure that the correct hover state is displayed in the main menu
	// so that the shadows behind the hovered or active items are continuous
	$$('#mainnav li a').addEvent('mouseover', fSetMainnavBG);
	$$('#mainnav li a').addEvent('mouseout', fSetMainnavBG);

	// Implementing a fade-in / fade-out effect for the employee navigation menu
	if ($('employeenav')) {
		if ($$('#employeenav li a.active')[0]) {
			// If an anchor element has the active class on page-load, make sure it
			// appears active and the rest of the menu items appear inactive
			$$('#employeenav li').setStyle('opacity', 0.5);
			$$('#employeenav li a.active')[0].getParent().setStyle('opacity', 1);

			// Envoke the function to enable the fade-in/-out effect for the menu
			fEmployeeNavFadeFX('employeenav', 'active');
		} else {
			fEmployeeNavFadeFX('employeenav', 'inactive');
		}
	}

	// Functions for the "Oooh!" page (playground)
	if ($('oooh')) {
		// Create the MooTools Tips for any elements which are specified to have tooltips
		var oPgTips = new Tips('.oooh-tip', {
			className: 'tooltip',
			// showDelay: 500,
			fixed: false,
			// fixed: true,
			offset: {
				'x': 16,
				'y': 16
			},
			onShow: function(oTip, elemOwner) {
				/*oTip.position({
					relativeTo: elemOwner,
					position: 'centerRight',
					edge: 'topLeft',
					offset: {
						x: -30,
						y: 0
					}
				});*/
				// fxTipSlide.slideIn();
			},
			onHide: function(oTip, elemOwner) {
				$$('div.tooltip')[0].setStyle('left', '-1000px');
				// fxTipSlide.slideOut().chain(function() {
				// 	$$('div.tooltip')[0].setStyle('left', '-1000px');
				// });
			}
		});
		$$('div.tooltip')[0].setStyle('left', '-1000px');

		// Set up the sliding effect for showing and hiding the
		// MooTools tip and then set it to be hidden on page load
		// var fxTipSlide = new Fx.Slide($$('div.tooltip div.tip')[0], {
		// 	mode: 'horizontal',
		// 	duration: 400,
		// 	transition: Fx.Transitions.Expo.easeOut
		// });
		// fxTipSlide.hide();

		// In case the user moves from one item to another very quickly, make sure that whenever
		// an image is hovered or left by the mouse, the tooltip DIV is moved off-screen instantly
		// (this prevents the tooltip DIV from jumping around until the Fx.Slide effect is finished)
		// $$('#oooh div.content img.oooh-tip').addEvent('mouseover', function() { $$('div.tooltip')[0].setStyle('left', '-1000px'); });
		// $$('#oooh div.content img.oooh-tip').addEvent('mouseout', function() {
		// 	if ($$('div.tooltip div.tip')[0].getStyle('margin-left') == "-237px") {
		// 		fxTipSlide.hide();
		// 	}
		// });

		// Same as above, but for hiding the tooltip DIV instantly once the modalbox is launched
		$$('#oooh div.content a.mb').addEvent('click', function() {
			$$('div.tooltip')[0].setStyle('left', '-1000px');
		});
		// $$('#oooh div.content a.mb').addEvent('click', function() {
		// 	fxTipSlide.slideOut().chain(function() {
		// 		$$('div.tooltip')[0].setStyle('left', '-1000px');
		// 	});
		// });

		// When static images which have hover images are hovered, the SRC attribute
		// of the static and hover versions should be interchanged and vice-versa
		$$('#oooh div.content img.swap').addEvent('mouseover', fPgToggleAnim);
		$$('#oooh div.content img.swap').addEvent('mouseout', fPgToggleAnim);

		// Enable dragging of all element with the draggable class
		var oDragElems = $$('#oooh div.content .draggable');
		for (iCnt = 0; iCnt < oDragElems.length; iCnt++) {
			var newDrag = new Drag.Move(oDragElems[iCnt].get('id'), {container: 'ooohBg'});
		}

		// Adjust some properties of the MultiBox object for this page
		oMultiBox.options.fixedTop = 290;		// Just below the monitor
		// MultiBox.options.openFromLink = false;		// Open from center
		oMultiBox.options.showNumbers = false;		// No numbers at the bottom of the modalbox
		oMultiBox.options.showControls = false;		// No controls at the bottom of the modalbox
	}


	// Employee page - AJAX contact form
	if ($('contactEmployee')) {
		$('butSend').addEvent('click', fSendEmail);
	}


	// Default template - "Call me" AJAX form
	if ($('quickcall')) {
		// Create floating labels on top of the input elements of the form
		var lblName = new OverText($('txtName'));
		var lblTelNr = new OverText($('txtTelNr'));

		$('butSend').addEvent('click', fCallMeSend);
	}


	// Functions for the "Work" page
	if ($$('#content.work')[0]) {
		// Render the slideshow anchor elements targetless
		$$('#slideshow a').addEvent('click', fNoClickAnchor);

		var bOutsideViewport = false;

		// Create a noobSlide image gallery for the portfolio
		var oPortfolioSlide = new noobSlide({
			box: $('slideshowImages'),
			items: $$('#slideshowImages img'),
			size: 700,
			handles: $$('#slideshownav li span'),
			addButtons: {
				previous: $$('#slideshow a.prev'),
				next: $$('#slideshow a.next')
			},
			fxOptions: {
				property: 'left',
				duration: 400,
				transition: Fx.Transitions.Sine.easeOut,
				wait: false
			},
			onWalk: function(currentItem, currentHandle) {
				// Make the current thumbnail appear active
				this.handles.removeClass('active');
				currentHandle.addClass('active');

				// If the current thumbnail is outside of the screen, scroll to it
				if (this.handles.length > 5) {
					var navScroll = new Fx.Scroll('navMask', {
						'x': 120,
						'y': 0
					});

					// Only scroll if the navigation element being set to active is outside of the viewport
					var iCurrentPos = currentHandle.getParent().getAllPrevious('li').length;

					if (iCurrentPos == 0 ) bOutsideViewport = false;

					if (iCurrentPos >= 4 || bOutsideViewport) {
						navScroll.set(currentHandle.offsetLeft-120, 0);
						bOutsideViewport = true;
					}

				}
			},
			startItem: 0,
			rewind: false
		});

		if ($('video')) {
			// If videos have been added to the portfolio item, add events to the video hyperlinks
			$$('#videonav li a').addEvent('click', fSwapVideos);
		}
	}


	// Functions for the "Nominatie" page
	if ($$('#content.nominate')[0]) {
		// Render the slideshow anchor elements targetless
		$$('#slideshow a').addEvent('click', fNoClickAnchor);

		var bOutsideViewport = false;

		// Create a noobSlide image gallery for the portfolio
		var oPortfolioSlide = new noobSlide({
			box: $('slideshowImages'),
			items: $$('#slideshowImages img'),
			size: 443,
			handles: $$('#slideshownav li span'),
			addButtons: {
				previous: $$('#slideshow a.prev'),
				next: $$('#slideshow a.next')
			},
			fxOptions: {
				property: 'left',
				duration: 200,
				transition: Fx.Transitions.Sine.easeOut,
				wait: false
			},
			onWalk: function(currentItem, currentHandle) {
				// After sliding by clicking a radio button and then using the "Next" arrow to move to another
				// slide, an error will occur due to there being no currentHandle available; this is a fix
				if (!currentHandle) {
					var iNextID = parseInt(($$('input.radioInput[checked]')[0].get('id')).replace(/card/, "")) + 1;
					currentHandle = $('kaartthumb' + iNextID);
					currentItem = $$('#slideshowImages img')[iNextID];

					var iMaskPos = iNextID * 443;
					var fCorrectMaskPos = function() { $('slideshowImages').setStyle('left', '-' + iMaskPos + 'px'); }
					fCorrectMaskPos.delay(500);
				}

				// Make the current thumbnail appear active
				this.handles.removeClass('active');
				currentHandle.addClass('active');

				// If the current thumbnail is outside of the screen, scroll to it
				if (this.handles.length > 4) {
					var navScroll = new Fx.Scroll('navMask', {
						'x': 75,
						'y': 0
					});

					// Only scroll if the navigation element being set to active is outside of the viewport
					var iCurrentPos = currentHandle.getParent().getAllPrevious('li').length;

					if (iCurrentPos == 0) { bOutsideViewport = false; }

					if (iCurrentPos >= 4 || bOutsideViewport) {
						navScroll.set(currentHandle.offsetLeft - 75, 0);
						bOutsideViewport = true;
					}
				}

				//preselect radio-buttons for voting
//gesloten:
//				$('card' + (currentHandle.id).replace("kaartthumb", "")).checked = true;
			},
			startItem: 0,
			rewind: false
		});


		// Bind action to top10-list for viewing
		$$('#results ol li a').addEvent('click', function(){
			oPortfolioSlide.walk((this.id).replace("showcard",""));
			return false;
		});

//gesloten:
//		if (Cookie.read('oooh') == 'voted') {
//			//show results (already voted)
//			$('nominateFavorite').dispose();
//			$('results').setStyle('display', 'block');
//
//		} else {
//			// Bind action to radio-buttons for voting
//			$$('#nominateFavorite .radioInput').addEvent('change', function(){
//				if (this.checked) {
//					oPortfolioSlide.walk((this.id).replace("card",""));
//				}
//			});
//			$$('#nominateFavorite .radioInput').addEvent('click', function(){ this.blur(); });
//
//			$('butSend').addEvent('click', fVoteForCard);
//		}
	}
});


// A function which is triggered by hovering a main menu item
// and checks to see which of the items should have their
// backgrounds set to display continuous shadows
function fSetMainnavBG(event) {
	// Only execute this function on menu items which aren't active and if
	// there is an active menu item on the page
	if (!this.hasClass('active') && $$('#mainnav li a.active')[0]) {
		// The backgrounds are set based on the kind of event which was fired
		switch(event.type) {
			case "mouseover":
				// Store references to the previous and next LI siblings of the main menu
				var oPreviousLI = this.getParent().getPrevious('li');
				var oNextLI = this.getParent().getNext('li');

				// If there was a next sibling and it is active, set the active menu item to a continuous shadow background
				if (oNextLI != null) {
					// Store a reference to the anchor element within this menu item
					var oSiblingAnchor = oNextLI.getChildren('a')[0];

					if (oSiblingAnchor.hasClass('active')) {
						oSiblingAnchor.setStyle('background-position', '0 -306px');
					}
				}

				// If there was a previous sibling and it is active, set the current menu item to a continuous shadow background
				if (oPreviousLI != null) {
					// Store a reference to the anchor element within this menu item
					var oSiblingAnchor = oPreviousLI.getChildren('a')[0];

					if (oSiblingAnchor.hasClass('active')) {
						this.setStyle('background-position', '0 -306px');
					}
				}
				break;

			case "mouseout":
				// Reset the background styles for all menu items
				$$('#mainnav li a').setStyle('background-position', '0 0');
				$$('#mainnav li a.active')[0].setStyle('background-position', '0 -153px');

				// Remove the style attributes afterwards to prevent the inline CSS styles
				// from overriding the external CSS styles
				$$('#mainnav li a').set('style', '');
				break;
		}
	}
}


// A function which receives the ID of the current page and if this page exists in
// a menu on the page, make the anchor element appear active
function fActiveSubmenu(iPageID) {
	if ($('a' + iPageID)) {
		$('a' + iPageID).addClass('active');
	}
}


// Implementing fade in and out on the employee navigation menu
// Arguments:
// @sElementID - a string which refers to the ID of the element to animate
// @sInitState - a string which refers to the load state of the employees menu
function fEmployeeNavFadeFX(sElementID, sInitState) {
	$$('#' + sElementID).each(function(container) {
		container.getChildren().each(function(child) {
			var siblings = child.getParent().getChildren().erase(child);

			if (sInitState == 'active') {
				// If a menu-item is specified as active, iterate through each menu-item
				// and when one is found with the active class, alter it's mouseleave event
				// and remove it from the array of menu items which will be animated
				for (var iCnt = 0; iCnt < siblings.length; iCnt++) {
					if (siblings[iCnt].getChildren('a')[0].get('class') == 'active') {
						$$('#' + sElementID + ' li a.active').getParent().addEvent('mouseleave', function() { this.tween('opacity', 1); });
						siblings.splice(iCnt, 1);
					}
				}
			}

			child.addEvents({
				mouseenter: function() {
					if (sInitState == 'active') {
						// When there is an active menu-item, hovering on another
						// menu-item should cause it to fade in instead of others fading out
						this.tween('opacity', 1);
					}

					// The rest of the menu items should fade out when another item has focus
					siblings.tween('opacity', 0.5);
				},
				mouseleave: function() {
					if (sInitState == 'active') {
						// When there is an active menu-item, moving the mouse off of it should
						// cause only that item to fade out (the others will already be faded out)
						this.tween('opacity', 0.5);
					} else {
						// Without active menu items, moving the mouse off of an item should
						// cause all the menu items to fade in
						siblings.tween('opacity', 1);
					}
				}
			});
		});
	});
}


// A function which sends an e-mail to an employee using an AJAX call
function fSendEmail() {
	// Validate the form first
	var iValidation = 0;
	if (fieldIsEmpty('txtName', 'naam is een verplicht veld')) { iValidation++; }
	if (fieldIsEmpty('txtEmail', 'e-mail is een verplicht veld')) { iValidation++; }
	if (validate_email('txtEmail', 'dit is geen geldig e-mail adres')) { iValidation++; }
	if (fieldIsEmpty('txtMessage', 'een bericht typen is verplicht')) { iValidation++; }
	if ($('hidID').get('value') == "") { iValidation++; }

	if (iValidation == 0) {
		// Hide all form elements
		$$('#contactEmployee div.row').setStyle('display', 'none');
		$$('#contactEmployee input').setStyle('display', 'none');
		$$('#contactEmployee textarea').setStyle('display', 'none');

		// Generate an AJAX icon and information message for the user during the wait
		var divAjax = new Element("div", {"class": "ajaxInfo"}).injectInside($$('#contactEmployee fieldset')[0]);
		var imgAjax = new Element("img", {
			"src": sUrlPrefix + "media/img/icon-ajax.gif",
			"width": "32",
			"height": "32",
			"class": "ajaxIcon",
			"alt": "loading..."
		}).injectInside(divAjax);
		var spanInfo = new Element("span", {"text": "Bericht wordt verzonden..."}).injectInside(divAjax);

		// Make the AJAX call
		var sendmailRequest = new Request.JSON({
			url: sUrlPrefix + "media/include/ajaxreq_sendmail.asp",
			onSuccess: function(response) {
				// Get rid of the AJAX message and icon
				$$('#contactEmployee div.ajaxInfo')[0].empty();

				// Depending on the JSON result, display an error or success message
				if (response.result == "error") {
					var spanError = new Element("span", {
						"class": "error",
						"text": "Het bericht kon niet worden verstuurd, want: "
					}).injectInside(divAjax);

					var spanReason = new Element("span", {
						"class": "error",
						"text": response.message
					}).injectAfter(spanError);
					var brReason = new Element("br").injectAfter(spanReason);

					var aAttempt = new Element("a", {
						"href": "#",
						"title": "Probeer het nogmaals",
						"html": "Probeer het nogmaals &raquo;"
					}).injectAfter(brReason);

					aAttempt.addEvent('click', fResetEmpContact);
				} else if (response.result == "success") {
					// Remove all of the form elements from the DOM
					$$('#contactEmployee div.row').dispose();
					$$('#contactEmployee input').dispose();
					$$('#contactEmployee textarea').dispose();

					// Display a success message
					var imgSuccess = new Element("img", {
						"src": sUrlPrefix + "media/img/icon-success_lightbrown.gif",
						"width": "16",
						"height": "16",
						"alt": "loading..."
					}).injectInside(divAjax);
					var spanSuccess = new Element("span", {
						"class": "success_message",
						"text": response.message
					}).injectInside(divAjax);
				}
			}
		}).get({
			'req': 'employee',
			'empId': $('hidID').get('value'),
			'name': $('txtName').get('value'),
			'email': $('txtEmail').get('value'),
			'message': $('txtMessage').get('value')
		});
	}
}


// A function which returns the employee contact form to its original state (pre-AJAX)
function fResetEmpContact() {
	$$('#contactEmployee div.ajaxInfo')[0].dispose();
	$$('#contactEmployee div.row').setStyle('display', 'block');
	$$('#contactEmployee input').setStyle('display', 'inline');
	$$('#contactEmployee input.textbox').setStyle('border', '1px solid #ffffff');
	$$('#contactEmployee textarea').setStyles({
		display: 'inline',
		border: '1px solid #ffffff'
	});
	return false;
}


// A function which validates and submits the "Call me" quickcall form and
// calls an AJAX request to send an e-mail
function fCallMeSend() {
	// Validate the form first
	var iValidation = 0;
	if (($('txtName').get('value') == "") || ($('txtName').get('value') == "naam...")) {
		setErrText('txtName', 'naam is een verplicht veld', 'do');
		iValidation++;
	} else {
		setErrText('txtName', '', 'undo');
	}

	if (($('txtTelNr').get('value') == "") || ($('txtTelNr').get('value') == "telefoonnummer...")) {
		setErrText('txtTelNr', 'telefoonnummer is een verplicht veld', 'do');
		iValidation++;
	} else {
		setErrText('txtTelNr', '', 'undo');
	}

	if (iValidation == 0) {
		// Hide all form elements
		$$('#quickcall div.err_message').setStyle('display', 'none');
		$$('#quickcall input').setStyle('display', 'none');

		// Generate an AJAX icon and information message for the user during the wait
		var divAjax = new Element("div", {"class": "ajaxInfo"}).injectInside($$('#quickcall fieldset')[0]);
		var imgAjax = new Element("img", {
			"src": sUrlPrefix + "media/img/icon-ajax.gif",
			"width": "32",
			"height": "32",
			"class": "ajaxIcon",
			"alt": "loading..."
		}).injectInside(divAjax);
		var spanInfo = new Element("span", {"text": "Bericht wordt verzonden..."}).injectInside(divAjax);

		// Make the AJAX call
		var sendmailRequest = new Request.JSON({
			url: sUrlPrefix + "media/include/ajaxreq_sendmail.asp",
			onSuccess: function(response) {
				// Get rid of the AJAX message and icon
				$$('#quickcall div.ajaxInfo')[0].empty();

				// Depending on the JSON result, display an error or success message
				if (response.result == "error") {
					var spanError = new Element("span", {
						"class": "error",
						"text": "Het bericht kon niet worden verstuurd, want: "
					}).injectInside(divAjax);

					var spanReason = new Element("span", {
						"class": "error",
						"text": response.message
					}).injectAfter(spanError);
					var brReason = new Element("br").injectAfter(spanReason);

					var aAttempt = new Element("a", {
						"href": "#",
						"title": "Probeer het nogmaals",
						"html": "Probeer het nogmaals &raquo;"
					}).injectAfter(brReason);

					aAttempt.addEvent('click', fResetCallMe);
				} else if (response.result == "success") {
					// Remove all of the form elements from the DOM
					$$('#quickcall div.err_message').dispose();
					$$('#quickcall input').dispose();

					// Display a success message
					var imgSuccess = new Element("img", {
						"src": sUrlPrefix + "media/img/icon-success_lightbrown.gif",
						"width": "16",
						"height": "16",
						"alt": "loading..."
					}).injectInside(divAjax);
					var spanSuccess = new Element("span", {
						"class": "success_message",
						"text": response.message
					}).injectInside(divAjax);

				}
			}
		}).get({
			'req': 'quickcall',
			'title': $('hidTitle').get('value'),
			'name': $('txtName').get('value'),
			'telnr': $('txtTelNr').get('value'),
			'email': cfgContactMail
		});
	} else {
		OverText.update();
	}
}


// A function which returns the quickcall form to its original, pre-AJAX state
function fResetCallMe() {
	$$('#quickcall div.ajaxInfo')[0].dispose();
	$$('#quickcall input').setStyles({
		display: 'inline',
		border: '1px solid #ffffff'
	});

	return false;
}


// A function submits the Vote For Card form and
// calls an AJAX request to store vote
function fVoteForCard() {
		// Hide all form elements
		$$('#nominateFavorite #radioBtns').setStyle('display', 'none');
		$$('#nominateFavorite #butSend').setStyle('display', 'none');

		// Generate an AJAX icon and information message for the user during the wait
		var divAjax = new Element("div", {"class": "ajaxInfo"}).injectInside($$('#nominateFavorite fieldset')[0]);
		var imgAjax = new Element("img", {
			"src": sUrlPrefix + "media/img/icon-ajax.gif",
			"width": "32",
			"height": "32",
			"class": "ajaxIcon",
			"alt": "loading..."
		}).injectInside(divAjax);
		var spanInfo = new Element("span", {"text": "Je stem wordt verwerkt..."}).injectInside(divAjax);

		// Make the AJAX call
		var sendmailRequest = new Request.JSON({
			url: sUrlPrefix + "media/include/ajaxreq_vote.asp",
			onSuccess: function(response) {
				// Get rid of the AJAX message and icon
				$$('#nominateFavorite div.ajaxInfo')[0].empty();

				// Depending on the JSON result, display an error or success message
				if (response.result == "error") {
					var spanError = new Element("span", {
						"class": "error",
						"text": "Je stem kon niet verwerkt worden, want: "
					}).injectInside(divAjax);

					var spanReason = new Element("span", {
						"class": "error",
						"text": response.message
					}).injectAfter(spanError);
					var brReason = new Element("br").injectAfter(spanReason);

					var aAttempt = new Element("a", {
						"href": "#",
						"title": "Probeer het nogmaals",
						"html": "Probeer het nogmaals &raquo;"
					}).injectAfter(brReason);

					aAttempt.addEvent('click', fResetVote);



				} else if (response.result == "iperror") {
					var spanError = new Element("span", {
						"class": "error",
						"text": "Je stem kon niet verwerkt worden, want: "
					}).injectInside(divAjax);

					var spanReason = new Element("span", {
						"class": "error",
						"text": response.message
					}).injectAfter(spanError);
					var brReason = new Element("br").injectAfter(spanReason);

					Cookie.write('oooh', 'voted', {duration: 60});



				} else if (response.result == "success") {
					// Remove all of the form elements from the DOM
					$$('#nominateFavorite div.err_message').dispose();
					$$('#nominateFavorite input').dispose();
					$('results').setStyle('display', 'block');

					// Display a success message
					var imgSuccess = new Element("img", {
						"src": sUrlPrefix + "media/img/icon-success_lightbrown.gif",
						"width": "16",
						"height": "16",
						"alt": "loading..."
					}).injectInside(divAjax);
					var spanSuccess = new Element("span", {
						"class": "success_message",
						"text": response.message
					}).injectInside(divAjax);

					Cookie.write('oooh', 'voted', {duration: 60});
				}
			}
		}).post({
			'req': 'nominateFavorite',
			'nominatie': $$('#nominateFavorite input:checked')[0].get('value'),
			'hash': Math.floor(Math.random()*11344)*5436
		});
}

// A function which returns the quickcall form to its original, pre-AJAX state
function fResetVote() {
	$$('#nominateFavorite div.ajaxInfo')[0].dispose();
	$$('#nominateFavorite #radioBtns').setStyle('display', 'block');
	$$('#nominateFavorite #butSend').setStyle('display', 'block');

	return false;
}


// A function which uses the HREF attribute of an anchor element to
// load a new Vimeo video into the existing video player object
function fSwapVideos() {
	// Set all video navigation hyperlinks to appear inactive and
	// the clicked element to appear active
	$$('#videonav li a').removeClass('active');
	this.addClass('active');

	// Retrieve the clicked hyperlink's video ID
	var sVidOptions = (this.get('href'));
	var iNewVideoID = sVidOptions.substring(sVidOptions.indexOf('video=')+6);
	if (sVidOptions.match(/type\=youtube/i)) {
		var sNewObjectURL = 'http://www.youtube.com/v/' + iNewVideoID + '&amp;hl=nl_NL&amp;fs=1';

		// Mark-up a new video object element for the clicked hyperlink's YuoTube ID
		var htmlVideo = '<object width="400" height="242">' +
												'<param name="movie" value="' + sNewObjectURL + '" />' +
												'<param name="allowFullScreen" value="true" />' +
												'<param name="allowscriptaccess" value="always" />' +
												'<embed src="' + sNewObjectURL + '" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="400" height="242"></embed>' +
										'</object>';
	} else {
		var sNewObjectURL = 'http://vimeo.com/moogaloop.swf?clip_id=' + iNewVideoID + '&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1';

		// Mark-up a new video object element for the clicked hyperlink's Vimeo ID
		var htmlVideo = '<object type="application/x-shockwave-flash" data="' + sNewObjectURL + '" width="400" height="255">' +
												'<param name="movie" value = "' + sNewObjectURL + '" />' +
												'<param name="FlashVars" value="playerNode=embedded" />' +
											'</object>';
	}


	// Destroy the current object element and replace it with the one generated above
	$('activeVideo').empty();
	$('activeVideo').set('html', htmlVideo);

	// Make sure clicking the hyperlink doesn't load a page
	return false;
}


// A function which causes clicking a hyperlink to have no effect whatsoever
function fNoClickAnchor() { return false; }


/********** OOOH PLAYGROUND FUNCTIONS **************************************************/
	function fPgToggleAnim() {
		// Store the current value of the SRC attribute and its hover counterpart
		var sStaticSrc = this.get('src');
		var oHoverImg = $(this.get('id') + '_hover');
		var sHoverSrc = oHoverImg.get('src');

		// Switch the SRC and LONGDESC attribute values around
		this.set('src', sHoverSrc);
		oHoverImg.set('src', sStaticSrc);
	}


	function fToggleHoverTxt() {
		// Find the numeric value in the element's ID which triggered this
		// event and discard the rest, so that the ID can be used to find the
		// corresponding hover text DIV
		var iElementID = (this.get('id')).replace(/[^0-9]+/, '');

		// If there is a hover DIV with this element's ID, toggle its
		// state by fading it in or out
		if ($('hover' + iElementID)) {
			if ($('hover' + iElementID).getStyle('display') == 'none') {
				(function() { $('hover' + iElementID).reveal(); }).delay(100);
			} else {
				(function() { $('hover' + iElementID).dissolve(); }).delay(100);
			}
		}
	}
/***************************************************************************************/