/**
*
* 	Projects viewer v 1.0 alias 'the moobox' ;)
*	@author Nils Destoop alias Zuuperman
*
**/	

// make the object
if (!PROJECTS) { var PROJECTS = new Object(); }


/**
*
* 	The core of the project viewer, all the inits, getters and other non visible stuff is located inhere
*
**/	
PROJECTS.core = {
	/**
	*   Init the projectviewer, get all the blocks and bind them with an eventlistener
	**/
	init 	: function(classToSearch) {
		
		// if detailprojects is found, we are in the detailview of 1 project
		if($('detailprojects')) {
			PROJECTS.core.initPicNavs($('block_0'), true);
		} else {		
			var blocks = $('contentBlock').getElementsByClassName(classToSearch);
			$A(blocks).each(function(caseBlock) {
					PROJECTS.core.initPicNavs(caseBlock, false);
					
					Event.observe(caseBlock,'click',
						PROJECTS.view.slideOpen.bindAsEventListener($('box_page_content_float'), caseBlock), true);		
					
			}.bind(this));
		}
	},
	
	/**
	*   Init the buttons for showing an image
	*	@param caseBlock:	the caseblock that contains picture navigations
	*	@param detailView:	are we in the detail of 1 project?
	**/	
	initPicNavs		: function(caseBlock, detailView) {

		if(detailView) {
			PROJECTS.core.initImageDiv(caseBlock);
		}
		
		var detailblock_id = "detail_"+caseBlock.id;		
		
		var pic_blocks = $(detailblock_id).getElementsByClassName('pic_nav');

		$A(pic_blocks).each(function(s) {
				Event.observe(s,'click', PROJECTS.core.loadImage.bindAsEventListener(caseBlock, s), true);				 
		}.bind(this));		
		
	},
		
	/**
	*   Set the height and width from the imageDiv to the first image dimensions
	*	@param caseBlock:	the block that contains the imageDiv that needs to be set
	**/	
	initImageDiv	: function(caseBlock) {
		
		var detailblock_id = "img_"+caseBlock.id;
		var activeImages = PROJECTS.core.getActiveStuff(detailblock_id, 'active_image');
		if(activeImages) {
			
			var dimensions = activeImages[0].getDimensions(); // get the dimensions of the new photo
			$(detailblock_id).style.height = dimensions["height"]+'px';
			$(detailblock_id).style.width = dimensions["width"]+'px';
			$(detailblock_id).style.backgroundColor = "#999999";
		}
	},
	
	/**
	*   Set the text from a project to the text that belongs to the first picture
	*	@param caseBlock:	the block that contains the text that needs to be set
	**/	
	initText	: function(caseBlock) {

		var detailblock_id = "img_"+caseBlock.id;
		var activeText = PROJECTS.core.getActiveStuff(detailblock_id, 'active_text');
		if(activeText) {
			$('paragraph_'+caseBlock.id).update(activeText[0].innerHTML);
		}
	},	
	
	/*
	*	Get the active stuff in a given detailBlock by classname
	*	@param activeBlockId: 	the ID from the block wherein we need to search for active images
	*	@param className: 	classname to search on	
	*/		
	getActiveStuff		: function(activeBlockId, className) {
		
		var activeStuff = $(activeBlockId).getElementsByClassName(className);
		
			if(activeStuff.length > 0)
				return activeStuff;
		
		return false;
	},
	
	/*
	*	Load the new image and display the text that belongs to it
	*	@param caseBlock: 	the block wherein the image is located	
	*	@param picNavId: 	the ID from the clicked navigation
	*/		
	loadImage		: function(caseBlock, picNavId) {
		var detailblock_id = picNavId.id;

		var aDetails = detailblock_id.split("_");

		if(aDetails.length < 3)
			return false;
		
		var blocknumber = aDetails[1] + "_" + aDetails[2];
		var imageId		= aDetails[3];
		
		imageToShow_id = "img_"+blocknumber+"_"+imageId;
		PROJECTS.view.showImage(blocknumber, imageToShow_id);
		
		textToShow_id = "text_"+blocknumber+"_"+imageId;
		PROJECTS.view.showText(blocknumber, textToShow_id);	
//		new Effect.ScrollTo($(detailblock_id));	 // when fully loaded, scroll to it

	}
}


/**
*
* 	The view of projects, all the visible stuff is located inhere
*
**/	
PROJECTS.view = {
	
	/*
	*   Slide the detail of a project open and scroll to it
	*	@param parent: 		the parentdiv where all blocks are in located
	*	@param caseBlock:	the caseBlocked that's clicked on
	*/	
	slideOpen	: function(parent, caseBlock) {	
		
		PROJECTS.view.closeActiveBlock();
		
		var detailblock_id = "detail_"+caseBlock.id;		
		Effect.SlideUp(caseBlock, {duration:1,
			afterFinish: function() { 				
				PROJECTS.core.initText(caseBlock);
				// let the detailblock grow
				Effect.Grow($(detailblock_id), {
					direction: 'top-left',duration:2, 
					afterFinish: function() {
						
						new Effect.ScrollTo($(detailblock_id));	 // when fully loaded, scroll to it
						/* 
						*	set the imageDiv to the right dimensions so that the scrollbar wont jump up
						*  	while switching between two photos
						*	do it after finish so that the picture is already visible (else height and weight = 0)
						*/
						PROJECTS.core.initImageDiv(caseBlock);
						
					}
					
				});					
			}
		});
		
		$(detailblock_id).addClassName('active');	
	},
	
	/*
	*	Show the requested image
	*	@param blocknumber:	the active block	
	*	@param imageToShow_id:	the ID from the images that needs to be loaded
	*/		
	showImage	: function(blocknumber, imageToShow_id) {
		
		PROJECTS.view.transformImageDiv(blocknumber, imageToShow_id);
		PROJECTS.view.swapImages(blocknumber, imageToShow_id);

		$(imageToShow_id).addClassName('active_image');	
	},
	
	/*
	*	Display the text that belongs to a picture
	*	@param blocknumber:	the active block	
	*	@param textToShow_id:	the ID from the text that's needs to be displayed
	*/		
	showText	: function(blocknumber, textToShow_id) {
		var new_text = $(textToShow_id).innerHTML;
		$('paragraph_'+blocknumber).update(new_text);
			
	},	
	
	/*
	*   Close the active block, and show the non-detail version
	*/		
	closeActiveBlock	: function() {
	
		var activeblocks = $('contentBlock').getElementsByClassName('active'); 
		
		// if none is active, no need to run it :)
		if(activeblocks.length > 0) {
			var activeBlock_id = activeblocks[0].id; //detail_block_id
			$(activeBlock_id).removeClassName('active');
			Effect.SlideUp(activeBlock_id, {duration:1}); // hide the detail from active block
			activeBlock_id = activeBlock_id.substr(7,activeBlock_id.length); // result: block_id
			Effect.SlideDown(activeBlock_id); // show the non-detail version of this block
		}
	
	},
	
	/*
	*	Switch between 2 images
	*	@param blocknumber: 	the ID from the block where in the images are located
	*	@param imageToShow_id:	the ID from the images that's need to be showed
	*/		
	swapImages	: function(blocknumber, imageToShow_id) {
		var activeImages = PROJECTS.core.getActiveStuff("img_"+blocknumber, 'active_image');
		
		if(activeImages) {
			
			activeImages[0].style.display = "none";
			Effect.Appear($(imageToShow_id), {duration:2});
			activeImages[0].removeClassName('active_image');
			
		}		
	},
	
	/*
	*	Transform the imageDiv to the dimensions of the new picturen
	*	@param blocknumber: 	the ID from the block where in the image is located
	*	@param imageToShow_id:	the ID from the images that's need to be showed
	*/		
	transformImageDiv	: function(blocknumber, imageToShow_id) {

		var img_dimensions = $(imageToShow_id).getDimensions();
		
		new Effect.Morph($('img_'+blocknumber),
			{
				style:{
					width:img_dimensions["width"]+'px',height:img_dimensions["height"]+'px'
				},
				duration: 1	,
				afterFinish: function() {
					
					new Effect.ScrollTo($("nav_"+blocknumber+"_0"));	 // when fully loaded, scroll to it	
				}
			}
		);						   
	}
}

Event.observe(window, 'load', initProjectsViewer, false);