// Prepare for the dynamic animations
window.addEvent('domready', function() {
    // hide the thumbnails so they can be animated in
	//thum image dimensions are x=320 y=200
	// css relative top is 210px
	var arrImgs = $('idPortfolioWrapper').getElements('.clsThumb');
	arrImgs.setStyle('height', '0px');
	arrImgs.setStyle('top', '-105px');
	
	
	// add in page image viewing using ReMooz
	var arrAs = $('idPortfolioWrapper').getElements('a');
	arrAs.each(function(element) {
		
        // Constructor, takes the element and options as arguments
        new ReMooz(element, {
            'centered': true, // Zoom the center of the screen
            'origin': element.getElement('img'), // Take the image inside as origin for the zooming element
			'shadow': 'onOpenEnd', // fx is faster because shadow appears after resize animation
			'resizeFactor': 0.8, // resize to maximum 80% of screen size
			'cutOut': false, // don't hide the original
			'opacityResize': 0.4, // opaque resize
			'dragging': false // disable dragging	
        });
 
    });
	
});

arrPortfolioThumbs = null;
// helper function used to animate thumbs but with an offset for start of each one


window.addEvent('load', function() {
   
	//thum image dimensions are x=320 y=200
	arrPortfolioThumbs = $('idPortfolioWrapper').getElements('.clsThumb'); // stores in global
	arrPortfolioThumbs.reverse();
	
	var intFxStartOffset = 500; // in miliseconds
	var intFxDelay = 500;
	for (var i=1; i<= arrPortfolioThumbs.length; i++) {
		
		// helper function that is called in delayed offset start to animate the thumbs
		(function _animateThumb() {
		var LogoFx = new Fx.Morph(arrPortfolioThumbs.pop(), {duration: 1000, transition: Fx.Transitions.Bounce.easeOut });
			LogoFx.start({
			'height':200,
			'top': -210
			}
		)
		
		}).delay(intFxDelay);
		intFxDelay = intFxDelay + intFxStartOffset;
			
	}
	

	
});