/*
	mooSlideCaption v0.5 - A sliding image caption built upon mooTools

	(C) 2007 Peter Klein <peter@umloud.dk>

	Special thanks to Georg Ringer for ideas and testing.
	
	MIT-style license.
	
	Tested in the following browsers:
		IE6/7 (Pc)
		Mozilla Firefox (Pc/Mac)
		Opera (Pc)
		Konqueror (Linux)
		Safari (Mac)
	
	Example usage:
	
		$$('.teaserimg').each(function(el){
			var myField = new mooSlideCaption(el,{fxDuration: 400});
		});
		var myField = new mooSlideCaption($('mooSlide'),{overlayBGColor: '#ff0000', overlayTxtEndColor: '#fff', overlayText: 'Example3|This example uses text provided by the javascript when the object is created.'});
		var myField = new mooSlideCaption($('mooSlide2'),{overlayFull: 1, overlayBGColor: '#00ff00', overlayTxtEndColor: '#000000', overlayText: $('mooSlide2').getProperty('alt')});
		var myField = new mooSlideCaption($('mooSlide3'),{overlayFull: 1, overlayBGColor: '#00ffff', overlayTxtEndColor: '#000000', overlayText: $('mooSlide2').getProperty('alt')});
	
*/	
    var mooSlideCaption = new Class({
		options: {
			overlayBGColor: '#666',							// Background overlay color 
			overlayTxtStartColor: '#ffffff',					// Starting text color (collapsed)
			overlayTxtEndColor: '#ffffff',					// Ending text color (expanded)
			overlayTxtOpacity: .9,							// Starting text opacity
			overlayText: '',								// Text to display as caption. Seperate header and bodytext with a pipe char (|)
			overlayOpacity: .8,								// Background overlay opacity 
			overlayFull: false,								// Scroll overlay to full size of image? 
			visiblePart: 30,								// Visible part of overlay shown on top of image
			fxDuration: 500,								// Duration of transition
			fxTransition: Fx.Transitions.Quad.easeInOut		// Transition for sliding overlay in/out
		},
		initialize: function(element, options) {
			this.element = element; 	// Image Element

			this.setOptions(options);
			// If no overlayText is defined, then use the ALT tag of the element
			this.options.overlayText = this.options.overlayText ? this.options.overlayText : this.element.getProperty('alt');
			this.mooSlide();
		},
		mooSlide: function(){		
			//this.element.setStyle('border', 'none');					// Remove border if image is clickable
			this.element.dimensions = this.element.getCoordinates();	// Get and save Dimensions of Image Element

			// Create wrapper object
			this.wrapper = new Element('div').setProperty('class', 'mooSlideWrapper').setStyles({
				width: this.element.dimensions.width,
				height: this.element.dimensions.height,
				cursor: this.element.getParent().nodeName=='A' ? 'pointer' : '',		// Add pointer cursor if it's inside a A HREF tag.
				margin: 0,
				padding: 0
			}).injectAfter(this.element);				// Add wrapper after original image object

			this.element.remove();						// Remove original image object
			this.element.injectInside(this.wrapper);	// and place it inside the wrapper object

			// Create overlay object
			this.overlay = new Element('div').setProperty('class', 'mooSlideOverlay').setStyles({
				height: this.options.visiblePart,
				width: this.element.dimensions.width,
				top: this.element.dimensions.bottom - this.options.visiblePart,
				left: this.element.dimensions.left,
				position: 'absolute',
				overflow: 'hidden',
				color: this.options.overlayTxtStartColor
			}).injectInside(this.wrapper);	// and place it inside the wrapper object

			// Create overlay background object
			this.overlayBg = new Element('div').setProperty('class', 'mooSlideOverlayBg').setStyles({
				height: this.element.dimensions.height,
				width: this.element.dimensions.width,
				position: 'absolute',

				opacity: this.options.overlayOpacity,
				background: this.options.overlayBGColor
			}).injectInside(this.overlay);	// and place it inside the overlay object
						
			// Create overlay text object
			this.overlayTxt = new Element('div').setProperty('class', 'mooSlideOverlayTxt').setStyles({
				width: this.element.dimensions.width,
				overflow: 'hidden',
				position: 'absolute',
				opacity: this.options.overlayTxtOpacity,
				color: this.options.overlayTxtStartColor
			}).injectInside(this.overlay);	// and place it inside the overlay object	
			
			// Clear the alt tag on the image, as we don't want the hoverbox to appear
			this.element.setProperty('alt','');

			// Split the overlayText in Header & Bodytext 
			var captiontext = this.options.overlayText.split('|');

			// Create Header text object and place it inside the overlay text object
			this.header = new Element('h4').injectInside(this.overlayTxt).setHTML(captiontext[0]);

			// Create Bodytext text object and place it inside the overlay text object
			this.bodytext = new Element('p').injectInside(this.overlayTxt).setHTML(captiontext[1]);

			if (this.wrapper.getParent().nodeName=='A') {
				// Removes underline on text if image is wrapped in A HREF tag.
				// In order for this to work in Safari, textDecoration must be set to none on the A Tag.
				this.wrapper.getParent().setStyle('textDecoration','none');
			}
			
			// Get and save Dimensions of Header Element
			this.header.dimensions = this.header.getCoordinates();

			// Set new visiblePart based on the height of the header + the top & bottom margin of the header element
			this.options.visiblePart = this.header.dimensions.height + this.header.getStyle('marginTop').toInt() + this.header.getStyle('marginBottom').toInt();

			// Adjust overlay height and top to match new visible height
			this.overlay.setStyles({
				height: this.options.visiblePart,
				top: this.element.dimensions.bottom - this.options.visiblePart
			})

			// FX Stuff
			var overlayFx = new Fx.Styles(this.overlay, {duration: this.options.fxDuration, transition: this.options.fxTransition, wait:false});
			var overlayTxtFx = new Fx.Styles(this.overlayTxt, {duration: this.options.fxDuration, transition: this.options.fxTransition, wait:false});
			if (this.options.overlayFull) {
				// Full overlay slide
				this.wrapper.fxvars =({
					topStart: this.element.dimensions.bottom - this.options.visiblePart,
					topEnd: this.element.dimensions.top,
					heightStart: this.options.visiblePart,
					heightEnd: this.element.dimensions.height,
					startColor: this.options.overlayTxtStartColor,
					endColor: this.options.overlayTxtEndColor,
					txtOpacity: this.options.overlayTxtOpacity
				});
			}
			else {
				// Partial slide
				this.overlay.dimensions = this.overlayTxt.getCoordinates();	// Dimensions of Overlay Text Element	
				this.wrapper.fxvars =({
					topStart: this.element.dimensions.bottom - this.options.visiblePart,
					topEnd: Math.max(this.element.dimensions.top,this.element.dimensions.top + this.element.dimensions.height - this.overlay.dimensions.height),
					heightStart: this.options.visiblePart,
					heightEnd: Math.min(this.element.dimensions.height,this.overlay.dimensions.height),
					startColor: this.options.overlayTxtStartColor,
					endColor: this.options.overlayTxtEndColor,
					txtOpacity: this.options.overlayTxtOpacity
				});
			}	

			this.wrapper.addEvent("mouseenter", function(){
				overlayFx.start({
					top: [this.fxvars.topStart, this.fxvars.topEnd],
					height: [this.fxvars.heightStart, this.fxvars.heightEnd]
				});
				overlayTxtFx.start({
					color: [this.fxvars.startColor,this.fxvars.endColor],
					opacity: [ this.fxvars.txtOpacity,1]
				});
			});
			this.wrapper.addEvent("mouseleave", function(){
				overlayFx.start({
					top: this.fxvars.topStart,
					height: this.fxvars.heightStart
				});
				overlayTxtFx.start({
					color: [this.fxvars.startColor],
					opacity: [ this.fxvars.txtOpacity]
				});
			});
		}
	});
	mooSlideCaption.implement(new Options);