$(function() {   
	  

        //$('a[@rel*=lightbox]').lightBox();                  

		// thumbnail scrollable
		$("#thumbnails").scrollable({size: 5, clickable: false}).find("img").each(function(index) {

			// thumbnail images trigger overlay
			$(this).overlay({
				target: '#box',
				expose: {maskId: 'mask'},

				/*
					when box is opened, scroll to correct position (in 0 seconds)
					the "images" variable is defined below
				*/
				onLoad: function() {
					images.seekTo(index, 0);
				}
			});
		});



		// scrollable inside the box. Its API is assigned to the "images" variable
		var images = $("#images").scrollable({size: 1, api:true});



		// enable reflections
		$("#thumbnails img").reflect({height: 0.5, opacity: 0.6});



		// when scrollable moves ...
		images.onSeek(function() {

			var i = this.getIndex();

			// grab previous/current/next items and place the image inside them
			this.getItems().slice(Math.max(i-2, 0), i+2).each(function() {

				var el = $(this);

				// if image has not already been created ...
				if (!el.find("img").length) {

					// create it
					var img = $("<img/>");
					img.attr("src", "images/galeria/" + el.attr("title") + ".jpg");
					el.prepend(img).removeAttr("title");


					// and initialize the tooltip for it
					img.tooltip({
						effect: 'toggle',
						position: ['bottom', 'center'],
						offset: [-85, -30],
						opacity: 0.8,
						effect: 'fade'
					});
				}
			});
		});
		
		
     $('#btFechar').click(function(){
			$('#mask').hide();
		    $('#box').hide(); 
	 })   
	 
	});