// JavaScript Document
var currentGalleryIdentifier;


var wr_photogallery_class = new Class({
									  
									  
	/*******************************************************************************************************************/
	/* align all active thumbnails to the active navigation-entry (nav level-1)
		- aligns active subgallery-thumb (by absolute positioning of its parent container)
		- aligns active image-thumb of current (sub-)gallery by setting left to parent container)

		function recognizes active thumbs by its class "active", so this should be set first
	*/

	updateThumbnailPosition: function(animate){
    	var thumbContainerSubGalleries = $('wr_photogallery_subgalleries');				// contains the image links
    	var thumbContainerSubGalleriesOuter = $('wr_photogallery_subgalleries_outer');	// contains the subgalleries container above
    	var thumbContainerImagesOuter = $('wr_photogallery_thumbs');					// contains the image thumbnails

		//align thumbnailcontainer of subgalleries to top of footer (if subgalleries exits)
		if (thumbContainerSubGalleriesOuter) thumbContainerSubGalleriesOuter.setStyle('bottom', $('footer').getSize().y);
		
		//align thumbnailcontainer of images to top of footer (if subgalleries exits)
		if (thumbContainerImagesOuter) {
			var yPos = $('footer').getSize().y;
						
			if (thumbContainerSubGalleriesOuter) thumbContainerSubGalleriesOuter.setStyle('visibility', 'hidden');
			if (thumbContainerSubGalleries) {
				yPos += thumbContainerSubGalleries.getSize().y;
				if (thumbContainerSubGalleries.getSize().y > 0) thumbContainerSubGalleriesOuter.setStyle('visibility', 'visible');
			}
			
			thumbContainerImagesOuter.setStyle('bottom', yPos);
		}

		//get x-position of active nav-element (center of it)
		var n1Children = $('nav-level-1').getChildren('.active');
		if (n1Children.length < 1) return;
		var n1Pos = n1Children[0].getPosition($(document.body)).x;
		n1Pos += n1Children[0].getSize().x/2;
		
		//set content to this point - (half thumb width)
		$('content').setStyle('margin-left', n1Pos-17);
	
		//align active thumb (subgals) to n1Pos
		if (thumbContainerSubGalleries) {
			var activeThumbs = thumbContainerSubGalleries.getChildren('.active');
			if (activeThumbs.length < 1) activeThumbs = thumbContainerSubGalleries.getChildren(); //if not active is found, get all => will center first thumb
			if (activeThumbs.length > 0) {
				var thumbPos = activeThumbs[0].getPosition(thumbContainerSubGalleries).x;
				thumbPos += activeThumbs[0].getSize().x/2;
				
				if (thumbContainerSubGalleries.getStyle('left').toInt() != n1Pos-thumbPos) { //perhaps not need to change pos
				
					$('wr_photogallery-activeSubGal-marker').setStyle('visibility', 'hidden');
					if (animate) {
						var myFx = new Fx.Morph(thumbContainerSubGalleries);
						myFx.start({'left':n1Pos-thumbPos}).chain(function() { $('wr_photogallery-activeSubGal-marker').setStyle('visibility', 'visible'); });
						
					} else {
						thumbContainerSubGalleries.setStyle('left', n1Pos-thumbPos);
						this.centerOnto($('wr_photogallery-activeSubGal-marker'), activeThumbs[0].getFirst(), $('wr_photogallery_subgalleries_outer'));
						$('wr_photogallery-activeSubGal-marker').setStyle('visibility', 'visible');
					}
				
				}
			}
		}
	
	
		//align active thumb (images) to n1Pos
		if (currentGalleryIdentifier) {
			var thumbContainerImages = $('thumbs-'+currentGalleryIdentifier);
		}
		if (thumbContainerImages) {
			var activeThumbs = thumbContainerImages.getChildren('.active');
			if (activeThumbs.length < 1) activeThumbs = thumbContainerImages.getChildren(); //if not active is found, get all => will center first thumb
			if (activeThumbs.length > 0) {
				var thumbPos = activeThumbs[0].getPosition(thumbContainerImages).x;
				thumbPos += activeThumbs[0].getSize().x/2;
				
				$('wr_photogallery-activeImage-marker').setStyle('visibility', 'hidden');
				if (animate && thumbContainerImages.getStyle('left').toInt() != 0) {
					var myFx2 = new Fx.Morph(thumbContainerImages);
					myFx2.start({'left':n1Pos-thumbPos}).chain(function() { $('wr_photogallery-activeImage-marker').setStyle('visibility', 'visible'); });
				} else {
					thumbContainerImages.setStyle('left', n1Pos-thumbPos);
					this.centerOnto($('wr_photogallery-activeImage-marker'), activeThumbs[0].getFirst(), $('wr_photogallery_thumbs'));
					$('wr_photogallery-activeImage-marker').setStyle('visibility', 'visible');
				}
			}
		}	

	
		
    },
    
	/*******************************************************************************************************************/
	/*  switch active-states to a specific (call with identifier) or the first subgallery (without indentifier) 
		- switches the thumbnail of the subgallery to active
		- switches the container of the subgallery-thumb-images to active
		- calls switchToImage to switch to the first image in subgallery-container
	*/
    switchToSubGallery: function(identifier) {
    	var thumbContainerSubGalleries = $('wr_photogallery_subgalleries');
    	if (!thumbContainerSubGalleries) return;

    	if (!identifier)
    		//no identifier delivered => activate first subgallery
    		var activeSubGalleryThumbContainer = thumbContainerSubGalleries.getFirst();
    	else
    		var activeSubGalleryThumbContainer = $(identifier);


		//switch thumbnail of selected subgallery to active
    	if (activeSubGalleryThumbContainer) {
	    	currentGalleryIdentifier = activeSubGalleryThumbContainer.get('id');
    	
	    	//switch thumbnail to active and all others to "not-active"
    		thumbContainerSubGalleries.getChildren().each(function(thumbContainer, index){
				if (thumbContainer == activeSubGalleryThumbContainer) {
					thumbContainer.addClass('active');
				} else {
					thumbContainer.removeClass('active');
				}
			});
		}
    	
    	
		//switch image-thumbnail-container of selected subgallery to active
    	var thumbContainerImages = $('thumbs-'+currentGalleryIdentifier);
    	if (!thumbContainerImages) return;
    	
    	//switch first image-thumbnail in container to active
    	var activeImageThumb = thumbContainerImages.getFirst();
	
    	//switch gallery thumbnail container to active and all others to "not-active"
    	$('wr_photogallery_thumbs').getChildren().each(function(thumbContainer, index){
			if (thumbContainer == thumbContainerImages) {
				thumbContainer.addClass('active');
				thumbContainer.setStyle('left', 0);
			} else {
				thumbContainer.removeClass('active');
			}
		});   	
	
		if (activeImageThumb)
			this.switchToImage(activeImageThumb.get('id'), false);
	
    	
    },
    
	/*******************************************************************************************************************/
	/* switch to a specific image 
		- switches image (big one) to active
		- switches thumbnail-image to active
	*/    
	switchToImage: function(identifier, animate, filename) {
    	
		if (!identifier) return;
		
    	var imageContainer = $('wr_photogallery_images');
    	if (!imageContainer) return;
    	
    	var currentImage = $('image-'+identifier);
		
		if ((!currentImage) && filename) {
			//Image container missing and filename given => create image-tag (will cause the client-browser to load the image
			currentImage  = new Element('div', {'id': 'image-'+identifier, 'class': 'image'});
			var newImage  = new Element('img', {'src': filename, 'alt': ''});
			currentImage.inject(imageContainer);
			newImage.inject(currentImage);
		}
		
    	
		//show only this image and hide others
    	imageContainer.getChildren().each(function(image, index){
			if (image == currentImage) {
				image.addClass('active');
            } else {
				image.removeClass('active');
            }
		});       	
    	
		//active thumbnail for this image
    	var thumbContainer = $('wr_photogallery_thumbs');
    	if (!thumbContainer) return;

    	thumbContainer.getElements('a').each(function(image, index){
			if (image.get('id') == identifier) {
				image.addClass('active');
            } else {
				image.removeClass('active');
            }
		});

        // call fitToScreen() to fit image into available area
        this.fitToScreen();
    },


	/* fit image to screen
	*/
    fitToScreen : function() {

      var availHeight = $(document.body).getSize().y - $$('div#wr_photogallery_thumbs')[0].getSize().y - $$('div#wr_photogallery_subgalleries_outer')[0].getSize().y - $$('div#footer')[0].getSize().y - 55;
      var availWidth = $(document.body).getSize().x - 385

      $$('div#wr_photogallery_images div.image.active img')[0].setStyle('max-height', availHeight).removeProperty('width').removeProperty('height');
      $$('div#wr_photogallery_images div.image.active img')[0].setStyle('max-width', availWidth).removeProperty('width').removeProperty('height');
    },


	/*******************************************************************************************************************/
	/* centers a html-element onto another element
		- elToCenter: Element to center (has to be position:absolute and should be below commonOrigin)
		- desitnation: Element where to center on (no need to be position:absolute, but should be below commonOrigin)
		- commonOrigin: Element wich is the common origin of both elements (for absolute positioning, has to be position:absolute, fixed or relative)
	*/    
     centerOnto: function(elToCenter, destination, commonOrigin) {
     
     	elToCenter.setStyle('left', destination.getPosition($(commonOrigin)).x + (destination.getSize().x-elToCenter.getSize().x)/2);
     	elToCenter.setStyle('top', destination.getPosition($(commonOrigin)).y + (destination.getSize().y-elToCenter.getSize().y)/2);
    		
     }
    
    
});