$(document).ready(function(){
			// FANCY TOOLTIP

			$(".playInfo").tipTip({maxWidth: "auto", edgeOffset: 10});
		// select the overlay element - and "make it an overlay"
		$("#facebox").overlay({
			// custom top position
			top: 272,
			// some expose tweaks suitable for facebox-looking dialogs
			expose: {
				// you might also consider a "transparent" color for the mask
				color: '#fff',
				// load mask a little faster
				loadSpeed: 200,
				// highly transparent
				opacity: 0.5
			},
			// disable this for modal dialog-type of overlays
			closeOnClick: false,
			// we want to use the programming API
			api: true
		// load it immediately after the construction
		}).load();
		// main vertical scroll
		$("#main").scrollable({

			// basic settings
			vertical: true,
			size: 1,
			clickable: false,

			// up/down keys will always control this scrollable
			keyboard: 'static',

			// assign left/right keys to the actively viewed scrollable
			onSeek: function(event, i) {
				horizontal.scrollable(i).focus();
			}

		// main navigator (thumbnail images)
		}).navigator("#main_navi");

		// horizontal scrollables. each one is circular and has its own navigator instance
		var horizontal = $(".scrollable").scrollable({size: 1}).circular().navigator(".navi");


		// when page loads setup keyboard focus on the first horzontal scrollable
		horizontal.eq(0).scrollable().focus();
});


	$(window).load(function(){		

		

			//  + http://hv-designs.co.uk/2010/01/13/learn-how-to-add-a-jquery-fade-in-and-out-effect/


			// OPACITY OF BUTTON SET TO 50%
			$("ol").css("opacity","0.7");

			// ON MOUSE OVER
			$("ol").hover(function () {

			// SET OPACITY TO 100%
			$(this).stop().animate({
			opacity: 1.0
			}, "slow");
			},

			// ON MOUSE OUT
			function () {

			// SET OPACITY BACK TO 50%
			$(this).stop().animate({
			opacity: 0.7
			}, "slow");
			});



			// OPACITY OF BUTTON SET TO 50%
			$("ul").css("opacity","0.7");

			// ON MOUSE OVER
			$("ul").hover(function () {

			// SET OPACITY TO 100%
			$(this).stop().animate({
			opacity: 1.0
			}, "slow");
			},

			// ON MOUSE OUT
			function () {

			// SET OPACITY BACK TO 50%
			$(this).stop().animate({
			opacity: 0.7
			}, "slow");
			});




			$(".success").live('click', function(event) {
			        $.notifyBar({ cls: "default", html: '<img src="ux/tick.png" width="32" height="32" alt="Tick"/>' });
				});

			});