/***************************************************************************************************************
Scripts related to photo ablum display.

Contributors:
  Keith Richardson
  Bess Fernandez
***************************************************************************************************************/




/***************************************************************************************************************
PhotoAlbumSelector

Manages display of a collection of photo albums and their associated photo galleries
, where all albums links are displayed and only one is ever showing its photos.

There are of course a variety of html elements that must pre-exist for this to work.
***************************************************************************************************************/
var PhotoAlbumSelector = Class.create(
{
	initialize: function(albums) 
	{			
		this.albumCollection = albums;
		
		// hold each albums photos
        this.photoSelectorArray = [];

        if (!this.albumCollection[0] || this.albumCollection.length == 1 ) {// if no photos are on page or only 1, we dont' need nav
            return;
        }
        
        // store current album so it can be hidden
        this.currentAlbum = this.albumCollection[0];

		// Loop through each album and set up its photos
		
		for(var i=0; i < this.albumCollection.length; i++)
		{
			photoAlbumElement = this.albumCollection[i];
			
			// determine album id
			_index = photoAlbumElement.id.lastIndexOf('_');

			var albumId = photoAlbumElement.id.substring(_index + 1);

			// find this albums photos, which sets up all handling
			var albumPhotoSelector = new PhotoSelector($$('#photos_tab_content_' + albumId + ' div.image_div'), albumId, i != 0);

			var ablumNameElement = $$('#album_' + albumId + ' a.albumTitle')[0];
			var ablumSummaryElement = $$('#album_' + albumId + ' div.albumSummary')[0];
			var ablumImageElement = $$('#album_' + albumId + ' a.albumImage')[0];
								
			albumPhotoSelector.AlbumName = ablumNameElement.innerHTML;
			albumPhotoSelector.AlbumSummary = ablumSummaryElement.innerHTML;
			
			this.photoSelectorArray.push(albumPhotoSelector);
			
			// store current photo selector so it can be hidden
			if (i == 0)
			{
				this.currentAlbumPhotoSelector = albumPhotoSelector;
			}
			
			// set up click events
			
			Event.observe(ablumNameElement, "click", this.__Click.bindAsEventListener(this));
			Event.observe(ablumImageElement, "click", this.__Click.bindAsEventListener(this));
		}
		
        
        // hide all images onload
        this.hidePhotoAlbums();
	},
	
	hidePhotoAlbums: function() 
	{
		// hides extended details about an album
	    for(var i=0; i < this.albumCollection.length; i++) 
	    {
			this.hidePhotoAlbum(this.photoSelectorArray[i]);
	    }
	},
	
	hidePhotoAlbum: function(photoSelector) 
	{
		//album.addClassName("hide");
		photoSelector.hideSelector();
				//photoSelector.hidePhoto(photoSelector.currentPhoto);
	},
	
	showAlbum: function(arrayNumber) 
	{
		// show album info
		var photoAlbum = this.albumCollection[arrayNumber];
		var photoSelector = this.photoSelectorArray[arrayNumber];
		
		// make sure this item really exists
		if (photoAlbum)
		{		
			// hide the visible photo of the previous album
			this.hidePhotoAlbum(this.currentAlbumPhotoSelector);
			
			this.currentAlbum = photoAlbum;
			this.currentAlbumPhotoSelector = photoSelector;
			
			var ablumNameElement = $$('#album_name')[0];
			var ablumSummaryElement = $$('#album_summary')[0];
			
			// display selected album info
			ablumNameElement.innerHTML = ' -' + photoSelector.AlbumName;		// this removes the sifr
			
			if (ablumNameElement.offsetWidth >= 440) {      // if photo album title is too long, move it below h1 and move intro paragraph down
			    ablumNameElement.style.marginTop = "-30px";
			    ablumSummaryElement.style.marginTop = "30px";
			}
			
			ablumSummaryElement.innerHTML = photoSelector.AlbumSummary;
			
			
			// re-load sifr on album name	
			ablumNameElement.removeClassName("sIFR-replaced"); // must clear classname or it thinks its already set
			POP.Sifr.addSifrElement(({element:"#album_title h3",flash:POP.Sifr._fontPath+ "GothamBook.swf", color:"#cc3300", link:"#cc3300", hover:"#cc3300", bg:"null", mode:"transparent", vars:"offsetLeft=0&offsetTop=0", padding:"0", scase:"upper"}));
					//POP.Sifr.addSifrElement(({element:"#album_title h3",flash:this._fontPath+ "GothamBook.swf", color:"#cc3300", link:"#cc3300", hover:"#cc3300", bg:"null", mode:"transparent", vars:"offsetLeft=0&offsetTop=0", padding:"0", scase:"upper"}));
			
			// show previously shown image of selected album
			photoSelector.showSelector();
			
			// if not shown before, show first image
			if (!photoSelector.currentPhoto)
			{
				photoSelector.selectItemByIndex(0);
			}
		}
	    return;
	},
	
	/**
	 * Deal with a clicked div in the gallery nav
	 */
	__Click: function(e) 
	{
	   var e = e || window.event;
        Event.stop(e);
        var element = Event.element(e);	
        
        // grab parent album_div
        if (element.nodeName == "IMG")
        {
			element = element.parentNode.parentNode;
        }
        else
        {
			element = element.parentNode;
        }
        
        this.arrayIndex = this.albumCollection.indexOf(element);       // find index of array based on clicked element
        
        // show selected album
        this.showAlbum(this.arrayIndex);
	}
});



/***************************************************************************************************************
PhotoSelector

Manages display of a collection of photos as a photo gallery, where only one is ever visible.

There are of course a variety of html elements that must pre-exist for this to work.
***************************************************************************************************************/
var PhotoSelector = Class.create(
{
	initialize: function(aPhoto, albumId, dontStartVisible) 
	{
	    this.photos = aPhoto;
		this.albumId = albumId;
        this.divArray = [];                                                 // create an empty array where the gallery nav divs will live

        if (!this.photos[0] || this.photos.length == 1 ) {                  // if no photos are on page or only 1, we don't need nav
            return;
        }              
        
        // hide all images onload
        this.hidePhotos();

        // show first item by default
        if (!dontStartVisible)
        {
			this.photos[0].removeClassName("hide"); 
        
			// keep pointer to current image so it can be hidden
			this.currentPhoto = this.photos[0];
		}
                        
		// Loop through each image and create a div for it				
		for(var i=0; i<this.photos.length; i++) 
		{
		    var imageDivs = new Element('div', { 'class': "imageNav " + " " + i});      // spitting out array # in class name for debugging
		    this.divArray.push(imageDivs);	                                            // adding each div our array
		    
		    Event.observe(imageDivs, "click", this.__Click.bindAsEventListener(this));  // observe click on each div
		} 				
		
		// show first item by default
        if (!dontStartVisible)
        {
			// keep pointer to current div so it can be hidden
			this.currentDiv = this.divArray[0];
        }
		
		// generate nav items
		this.photoNavigation = $('image_navigation_' + this.albumId);
		
		// for each created div, write it into the DOM		            
		for(var j=0; j<this.divArray.length; j++) 
		{              
            this.photoNavigation.insert(this.divArray[j]);	
		}  	
		
		// onload turn first item div item to class on (before click)
		this.divArray[0].addClassName("on"); 
		// set arrayIndex to 0, so that left and right arrows know where to start
		this.arrayIndex = 0;                   
		
		// create nodes for left and right arrows for gallery                
        var leftArrow = new Element('div', { 'class': "arrow_left"});
        var rightArrow = new Element('div', { 'class': "arrow_right"});
        
		// Insert back and forward Arrows on top and bottom of photo nav divs
	    new Insertion.Top(this.photoNavigation, leftArrow);
	    new Insertion.Bottom(this.photoNavigation, rightArrow);					
		                   

        Event.observe(leftArrow, "click", this.__ClickArrowLeft.bindAsEventListener(this));  // observe click on each div
		Event.observe(rightArrow, "click", this.__ClickArrowRight.bindAsEventListener(this));  // observe click on each div
	},
	
	// hides this entire selector item
	hideSelector: function() 
	{
		// hide entire parent element
		this.photoNavigation.parentNode.addClassName("hide");
				//this.hidePhoto(this.currentPhoto);

	},
	
	// shows this entire selector item
	showSelector: function() 
	{
		// hide entire parent element
		this.photoNavigation.parentNode.removeClassName("hide");
				//this.hidePhoto(this.currentPhoto);

	},
	
	hidePhotos: function() 
	{
	    for(var i=0; i<this.photos.length; i++) 
	    {
	        this.hidePhoto(this.photos[i]);
	    }
	},
	
	hidePhoto: function(photo) 
	{
		if (photo)
		{
			photo.addClassName("hide");
		}
	},
	
	hideGalleryNav: function() 
	{
	    for(var j=0; j<this.divArray.length; j++) 
	    {
	        this.hideGalleryNavItem(this.divArray[j]);
	    }
	},
	
	hideGalleryNavItem: function(navItem) 
	{
		if (navItem)
		{
			navItem.removeClassName("on");
		}
	},
	
	showImage: function(arrayNumber) 
	{
		// hide previous item
		this.hidePhoto(this.currentPhoto);
		
		var photo = this.photos[arrayNumber];
		
		// turn on item that matches number in array
	    photo.removeClassName("hide");
			// new Effect.SlideDown(this.photos[arrayNumber],{duration:1.5,from:0.0, to:1.0});			   
		
		// store pointer to current item
		this.currentPhoto = photo;
	    return;
	},
	
	showGalleryNavItem: function(divElement) 
	{
		divElement.addClassName("on");
		
        // store pointer to current item
        this.currentDiv = divElement;				
	},
	
	// shows an item and hides the previously displayed item
	selectItem: function() 
	{
		// hide previous gallery nav div on state
		this.hideGalleryNavItem(this.currentDiv);	                
        
        // show photo in gallery
		this.showImage(this.arrayIndex);
        
        // turn item on in nav      
        this.showGalleryNavItem(this.divArray[this.arrayIndex]);		
	},
	
	// shows an item and hides the previously displayed item
	selectItemByIndex: function(index) 
	{
		this.arrayIndex = index;
		
		// hide previous gallery nav div on state
		this.hideGalleryNavItem(this.currentDiv);	                
        
        // show photo in gallery
		this.showImage(this.arrayIndex);
        
        // turn item on in nav      
        this.showGalleryNavItem(this.divArray[this.arrayIndex]);		
	},
	
	/**
	 * Deal with a clicked div in the gallery nav
	 */
	__Click: function(e) 
	{
	   var e = e || window.event;
        Event.stop(e);
        var element = Event.element(e);		
        this.arrayIndex = this.divArray.indexOf(element);       // find index of array based on clicked element
        
        // hide previous gallery nav div on state
        // send item number to be show                
        // turn 'on' state for this clicked div     
        this.selectItem();
	},
	
	/**
	 * Deal with a clicked left arrow
	 */
	__ClickArrowLeft: function(e) {
        if (this.arrayIndex <= 0) {                             // if we are at end of array, exit
            return;
        } 
        else 
        {
            this.arrayIndex = this.arrayIndex - 1;	            // step one item back in array       		  
            
            // hide previous gallery nav div on state
            // show previous photo in gallery
            // turn previous item on in nav
            this.selectItem();
        }
	},			
	
	/**
	 * Deal with a clicked right arrow
	 */
	__ClickArrowRight: function(e) {
        if (this.arrayIndex == (this.photos.length -1)) {       // if we are at top of array, ignore exit
           return;
        } 
        else 
        {
            this.arrayIndex = this.arrayIndex + 1;              // step one item up in array
            
            // turn off gallery nav
            // turn next item on in nav     
            // show next photo in gallery
            this.selectItem();
        }
	}		
});