current_big = [];

PhotoArray = { 
	photo_blank: {height: '360px', width: '288px'},
	photo_1_small : {height: '200px', width: '160px',left:'41px'},
	photo_1_big: {height: '360px', width: '288px',left:'1px'},
	photo_2_small : {height: '200px', width: '160px',left:'226px'},
	photo_2_big: {height: '360px', width: '288px',left:'160px'},
	photo_3_small : {height: '200px', width: '160px',left:'402px'},
	photo_3_big: {height: '360px', width: '288px',left:'330px'},
	photo_4_small : {height: '200px', width: '160px',left:'588px'},
	photo_4_big: {height: '360px', width: '288px',left:'500px'}
};
Event.observe(window,'load',function(e){
	/*
	Event.observe('photo_1','click',growPhoto);
	Event.observe('photo_2','click',growPhoto);
	Event.observe('photo_3','click',growPhoto);
	Event.observe('photo_4','click',growPhoto);
	Event.observe('photo_blank','click',shrinkPhoto);
	Event.observe('photo_1_main_text','click',shrinkPhoto);
	Event.observe('photo_2_main_text','click',shrinkPhoto);
	Event.observe('photo_3_main_text','click',shrinkPhoto);
	Event.observe('photo_4_main_text','click',shrinkPhoto);
	*/

});
function shrinkPhoto(event){
	var element = $('photo_blank');
	new Effect.Fade(element.id,{duration:0.2, queue: 'end'});
	var size = "small"
	var item = current_big.shift()
	var text1 = item + '_main_text';
	var text2 = item + '_lower_text';
	$(text1).hide();
	try{
		$(text2).hide();
	} catch(e) {}
	new Effect.Morph(item, { duration:0.5,transition: Effect.Transitions.sinoidal,
		style: PhotoArray[item + '_' + size], queue: 'end'}); 


}	
function growPhoto(event,text) {
	var element = Event.element(event);
	var photo_id = element.id;

	var new_photo_id = 'photo_blank';

	if (current_big.size() != 0 ){
		shrinkPhoto(event,text);	
	}
	current_big.push(photo_id);

	new Effect.Morph(photo_id, { duration:0.5,transition: Effect.Transitions.sinoidal,
		style: PhotoArray[photo_id + '_big'], queue: 'end', 
		afterFinish: function(effect) { 
			position = element.positionedOffset();
			var data = {left:position.left +'px',top:position.top +'px'}
			$(new_photo_id).setStyle(data);
			new Effect.Appear(new_photo_id, {
				afterFinish: function(effect){
					$(current_big.last() + '_main_text').show();
					try{
						$(current_big.last() + '_lower_text').show();
					} catch(e) {}
				}
			});
			
		}
	});
}