/*
*	Image Transitions Manager, version 0.1
*	(c) 2007 Ajaxorized.com
*
*	Authors:	Willem Spruijt
*			Martijn de Kuijper
*	Website:	http://www.ajaxorized.com/
*   Adaptacion:    JPL for Prosys http://www.prosys.cl
*/

Element.addMethods( {
		bringToFront : function(p_eElement) {
			p_eElement.setStyle({zIndex:'2'});
			return p_eElement;
		},
		sendToBack : function(p_eElement) {
			p_eElement.setStyle({zIndex:'1'});
			return p_eElement;
		},
		getHeight : function (p_eElement) {
			return p_eElement.offsetHeight;	
		},
		getWidth : function (p_eElement) {
			return p_eElement.offsetWidth;	
		},		
		getCenterHeight : function(p_eElement) {	
			return (p_eElement.offsetHeight/2);
		},
		getCenterWidth : function(p_eElement) {
			return (p_eElement.offsetWidth/2);
		},
		isLoaded : function (p_eElement) {
			return (p_eElement.complete);
		}
	}
);

var Transition = Class.create();
Transition.prototype = {
		initialize: function( p_eTarget, p_sImage, width, height ) {
		this.m_eTarget = $( p_eTarget );
		this.m_eTarget.setStyle( { position: 'relative', overflow:'hidden'} );
		this.m_eLoading = null;

		g_eTransition = this;		
	
		while( this.m_eTarget.hasChildNodes() )
			this.m_eTarget.removeChild( this.m_eTarget.firstChild );

		var eImage = document.createElement( 'img' );
		eImage.setAttribute( 'src', p_sImage );

        var imgleft = '0px';
        var imgtop = '0px';
		
        $(eImage).setStyle( { position: 'absolute', left: imgleft, top: imgtop, opacity: '0' } );

		this.m_eTarget.appendChild( eImage );		
		this.m_eCurrent = eImage;
		new Effect.Appear( this.m_eCurrent, { duration: 0.5, from: 0.0, to: 1.0 } );

		$$('a').each( function( eAnchor ) {
			var sRel = String( eAnchor.getAttribute( 'rel' ) );			
			if ( eAnchor.getAttribute( 'href' ) && ( sRel.toLowerCase().match( 'transition' ) ) ) {
				eAnchor.m_eRef = this;
				eAnchor.onclick = function () { g_eTransition.loadImage(this); return false; }
			}
		});
	},

	loadImage: function( p_eAnchor ) {
	
		var sImage = p_eAnchor.getAttribute( 'href' );
        var eImage = document.createElement( 'img' );
        eImage.setAttribute( 'src', sImage );

		var imgleft = '0px';
		var imgtop = '0px';

		$(eImage).setStyle( { position: 'absolute', left: imgleft, top: imgtop, opacity: '0' } );

		this.m_eTarget.appendChild( eImage );
		if(!eImage.isLoaded()) {
			/* The image is not yet loaded, so fix the loading div */
			this.m_eLoading = document.createElement( 'div' );
			$( this.m_eLoading ).setStyle( { position: 'absolute', left: '5px',  bottom: '5px', color: '#FFF' } );
			//this.m_eLoading.appendChild( document.createTextNode( 'cargando...' ) );
			this.m_eTarget.appendChild( this.m_eLoading );
			Event.observe( eImage, 'load', this._onLoad.bindAsEventListener( null, this, eImage ) );
		} else {
			/* The image is already loaded*/
			this.m_eLoading = null;
			this._transImage(eImage);
		}
	},
	
	_onLoad: function( p_eEvent, p_oRef, p_eImage ) {
		p_oRef._transImage( p_eImage );
	},

	_transImage : function(eImage) {
		if(this.m_eLoading != null) this.m_eLoading.remove();

		new Effect.Appear( eImage, { duration: 0.2, from: 0.0, to: 1.0 } );
		new Effect.Appear( this.m_eCurrent, { duration: 1.5, from: 1.0, to: 0.0, afterFinish: this._removeImage } );
		this.m_eCurrent = eImage;
	},

	_removeImage: function( p_oObj ) { 
		p_oObj.element.remove();
	}
}