function start(){
	new Effect.Opacity($('shadow-box'), {from: 0.85, to: 0.85 });
	$('oimg2').hide();
	$('oimg3').hide();
	$('oimg4').hide();
	$('oimg5').hide();
	$('oimg6').hide();
	
	$('iimg2').hide();
	$('iimg3').hide();
	$('iimg4').hide();
	$('iimg5').hide();
	$('iimg6').hide();
	
	addObserves();
	fireOImg2.delay(4);
	fireIImg2.delay(6);
	
	var pHeight = $('portal-box').getHeight() - 2;
	$('shadow-box').setStyle({height: pHeight + "px"});
	$('portal-box').setStyle({background: 'none'});
	
	$('images-left').setStyle({display: 'block'});
	$('images-right').setStyle({display: 'block'});
}

function startArea(){
	new Effect.Opacity($('shadow-box'), {from: 0.85, to: 0.85 });
	$('img2').hide();
	$('img3').hide();
	$('img4').hide();
	$('img5').hide();
	
	addAreaObserves();
	fireImg2.delay(5);
		
	var pHeight = $('portal-box').getHeight() - 2;
	$('shadow-box').setStyle({height: pHeight + "px"});
	$('portal-box').setStyle({background: 'none'});
	
	$('images-left').setStyle({display: 'block'});
}

function startGallery(){
	var pHeight = $('#portal-box').height() - 2;
	$('#shadow-box').css('height', pHeight + "px");
	$('#portal-box').css('background', 'none');
}

function startContact(){
	var pHeight = $('portal-box').getHeight() - 2;
	$('shadow-box').setStyle({height: pHeight + "px"});
	$('portal-box').setStyle({background: 'none'});
	
}

function addObserves() {
	// out foto 
	$('oimg1').observe('oimg1:changed' , function(event) {
		new Effect.Fade($('oimg6'),{ duration: 3});
		new Effect.Appear(this, { duration: 3, afterFinish: function() {fireOImg2.delay(5);}
	})	
	});
		
	$('oimg2').observe('oimg2:changed' , function(event) {
		new Effect.Fade($('oimg1'),{ duration: 3});
		new Effect.Appear(this, { duration: 3, afterFinish: function() {fireOImg3.delay(5);}
		})
	});
		
	$('oimg3').observe('oimg3:changed' , function(event) {
		new Effect.Fade($('oimg2'),{ duration: 3});
		new Effect.Appear(this, { duration: 3, afterFinish: function() {fireOImg4.delay(5);}
		})
	});
		
	$('oimg4').observe('oimg4:changed' , function(event) {
		new Effect.Fade($('oimg3'),{ duration: 3});
		new Effect.Appear(this, { duration: 3, afterFinish: function() {fireOImg5.delay(5);}
		})
	});
		
	$('oimg5').observe('oimg5:changed' , function(event) {
		new Effect.Fade($('oimg4'),{ duration: 3});
		new Effect.Appear(this, { duration: 3, afterFinish: function() {fireOImg6.delay(5);}
		})
	});
		
	$('oimg6').observe('oimg6:changed' , function(event) {
		new Effect.Fade($('oimg5'),{ duration: 3});
		new Effect.Appear(this, { duration: 3, afterFinish: function() {fireOImg1.delay(5);}
		})
	});
	
	// in foto
	$('iimg1').observe('iimg1:changed' , function(event) {
		new Effect.Fade($('iimg6'),{ duration: 3});
		new Effect.Appear(this, { duration: 3, afterFinish: function() {fireIImg2.delay(5);}
	})	
	});
		
	$('iimg2').observe('iimg2:changed' , function(event) {
		new Effect.Fade($('iimg1'),{ duration: 3});
		new Effect.Appear(this, { duration: 3, afterFinish: function() {fireIImg3.delay(5);}
		})
	});
		
	$('iimg3').observe('iimg3:changed' , function(event) {
		new Effect.Fade($('iimg2'),{ duration: 3});
		new Effect.Appear(this, { duration: 3, afterFinish: function() {fireIImg4.delay(5);}
		})
	});
		
	$('iimg4').observe('iimg4:changed' , function(event) {
		new Effect.Fade($('iimg3'),{ duration: 3});
		new Effect.Appear(this, { duration: 3, afterFinish: function() {fireIImg5.delay(5);}
		})
	});
		
	$('iimg5').observe('iimg5:changed' , function(event) {
		new Effect.Fade($('iimg4'),{ duration: 3});
		new Effect.Appear(this, { duration: 3, afterFinish: function() {fireIImg6.delay(5);}
		})
	});
		
	$('iimg6').observe('iimg6:changed' , function(event) {
		new Effect.Fade($('iimg5'),{ duration: 3});
		new Effect.Appear(this, { duration: 3, afterFinish: function() {fireIImg1.delay(5);}
		})
	});
}

function addAreaObserves() {
	
	// atea foto
	$('img1').observe('img1:changed' , function(event) {
		new Effect.Fade($('img6'),{ duration: 3});
		new Effect.Appear(this, { duration: 3, afterFinish: function() {fireImg2.delay(5);}
	})	
	});
		
	$('img2').observe('img2:changed' , function(event) {
		new Effect.Fade($('img1'),{ duration: 3});
		new Effect.Appear(this, { duration: 3, afterFinish: function() {fireImg3.delay(5);}
		})
	});
		
	$('img3').observe('img3:changed' , function(event) {
		new Effect.Fade($('img2'),{ duration: 3});
		new Effect.Appear(this, { duration: 3, afterFinish: function() {fireImg4.delay(5);}
		})
	});
		
	$('img4').observe('img4:changed' , function(event) {
		new Effect.Fade($('img3'),{ duration: 3});
		new Effect.Appear(this, { duration: 3, afterFinish: function() {fireImg5.delay(5);}
		})
	});
		
	$('img5').observe('img5:changed' , function(event) {
		new Effect.Fade($('img4'),{ duration: 3});
		new Effect.Appear(this, { duration: 3, afterFinish: function() {fireImg1.delay(5);}
		})
	});
		
}
		
function fireOImg1() {
	$('oimg1').fire('oimg1:changed');
}
		
function fireOImg2() {
	$('oimg2').fire('oimg2:changed');
}
		
function fireOImg3() {
	$('oimg3').fire('oimg3:changed');
}
	
function fireOImg4() {
	$('oimg4').fire('oimg4:changed');
}
		
function fireOImg5() {
	$('oimg5').fire('oimg5:changed');
}
		
function fireOImg6() {
	$('oimg6').fire('oimg6:changed');
}

function fireIImg1() {
	$('iimg1').fire('iimg1:changed');
}
		
function fireIImg2() {
	$('iimg2').fire('iimg2:changed');
}
		
function fireIImg3() {
	$('iimg3').fire('iimg3:changed');
}
	
function fireIImg4() {
	$('iimg4').fire('iimg4:changed');
}
		
function fireIImg5() {
	$('iimg5').fire('iimg5:changed');
}
		
function fireIImg6() {
	$('iimg6').fire('iimg6:changed');
}

function fireImg1() {
	$('img1').fire('img1:changed');
}

function fireImg2() {
	$('img2').fire('img2:changed');
}

function fireImg3() {
	$('img3').fire('img3:changed');
}

function fireImg4() {
	$('img4').fire('img4:changed');
}

function fireImg5() {
	$('img5').fire('img5:changed');
}

function loadGallery() {
	$('#gallery').galleria({
			history   : true, // activates the history object for bookmarking, back-button etc.
			clickNext : true, // helper for making the image clickable
			insert    : '#main_image', // the containing selector for our main image
			onImage   : function(image,caption,thumb) { // let's add some image effects for demonstration purposes
				
				// fetch the thumbnail container
				var _li = thumb.parents('li');
				
				// fade out inactive thumbnail
				_li.siblings().children('img.selected').fadeTo(500,0.3);
				
				// fade in active thumbnail
				thumb.fadeTo('fast',1).addClass('selected');
				
				// add a title for the clickable image
				image.attr('title','Next image >>');
			},
			onThumb : function(thumb) { // thumbnail effects goes here
				
				// fetch the thumbnail container
				var _li = thumb.parents('li');
				
				// if thumbnail is active, fade all the way.
				var _fadeTo = _li.is('.active') ? '1' : '0.3';
				
				// fade in the thumbnail when finnished loading
				thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);
				
				// hover effects
				thumb.hover(
					function() { thumb.fadeTo('fast',1); },
					function() { _li.not('.active').children('img').fadeTo('fast',0.3); } // don't fade out if the parent is active
				)
			}
		});
}