/**
*	@package		My Own Art
*	@subpackage		Javascript
*	@author			Ben Sekulowicz-Barclay
*	@copyright		Copyright 2008, Outside Line.
*	@version		1.00
*
************************************************************************************************************************ **/

var moa_about = Class.create({	
	
	initialize: function() {
		
		document.observe('dom:loaded', function(e) {
			
			$$('div#roomCreate div.content div.section ul.listArtwork li').each(function(li) {				
				
				// Add the left/right JS class, depending on where it is
				if (li.positionedOffset().left < 400) {
					li.addClassName('jsLeft');
				} else {
					li.addClassName('jsRight');
				}
				
				// Hide the description				
				li.down('div.description').hide();
				
				// Add the 'about' button ...
				li.down('div.description').insert({ before: '<p class="aboutTheArtwork"><a href="" class="ir">About The Artwork</a></p>' });
				
				// Add the event observer for the 'about' button
				li.select('p.aboutTheArtwork a').first().observe('click', this.onClickOpen.bindAsEventListener(this));
				li.select('p.aboutTheArtwork a').first().onclick = function() { return false; }				
				
				// Add the event observer for the 'close' button
				li.select('div.description h3').first().observe('click', this.onClickClose.bindAsEventListener(this));
				
			}.bind(this));
			
		}.bindAsEventListener(this));
	},
	
	/* ****************************************************************************************************************** */
	
	onClickClose: function(e) {		
		this.fadeOut(Event.findElement(e, 'h3').up());
	},
	
	/* ****************************************************************************************************************** */
	
	onClickOpen: function(e) {
		// Find and show the target 'description' div
		var target = Event.findElement(e, 'p').up().down('div.description');
		this.fadeIn(target);
		
		// Hide all non-target 'description' divs and update the 'about' button
		$$('div#roomCreate div.content div.section ul.listArtwork li div.description').each(function(div) {
			if (div != target) { 			
				this.fadeOut(div);
			}										
		}.bind(this));
	},
	
	/* ****************************************************************************************************************** */		
	
	fadeIn: function(div) {
		// Show the div
		div.appear({ duration: 0.3 });
		
		// Update the 'about' button		
		div.up().down('p.aboutTheArtwork a').addClassName('jsActive');
		
		// Update the zIndex, (IE Bug)
		if (Prototype.Browser.IE) { div.up().style.zIndex = '200'; }
	},
	
	/* ****************************************************************************************************************** */	
	
	fadeOut: function(div) {
		// Hide the div
		div.fade({ duration: 0.3 });
		
		// Update the 'about' button		
		div.up().down('p.aboutTheArtwork a').removeClassName('jsActive');
		
		// Update the zIndex, (IE Bug)
		if (Prototype.Browser.IE) { div.up().style.zIndex = '100'; }
	}
	
	/* ****************************************************************************************************************** */
});