/**
 * Several interesting effects that can be applied to 
 * DIV and other blocks 
 */
Lifetype.Effects = function() {}

/**
 * Events thrown by these classes
 */
Lifetype.Effects.Events = function() {}

/**
 * Events thrown by the fold and unfold methods
 */
Lifetype.Effects.Events.foldStart = new YAHOO.util.CustomEvent('foldStart');
Lifetype.Effects.Events.foldEnd = new YAHOO.util.CustomEvent('foldEnd');
Lifetype.Effects.Events.unfoldStart = new YAHOO.util.CustomEvent('unfoldStart');
Lifetype.Effects.Events.unfoldEnd = new YAHOO.util.CustomEvent('unfoldEnd');

/**
 * Unfolds a block to its full size, given its string id
 *
 * @param id The id of the element to unfold
 */
Lifetype.Effects.unfold = function( id )
{
	var el = Lifetype.Dom.$(id);
	var properties = { height: {fom: 0, to:el.scrollHeight, by:1 }};
	var a = new YAHOO.util.Anim( id, properties, 0.3 );
	a.onStart.subscribe( function(e) { Lifetype.Effects.Events.unfoldStart.fire(e); });
	a.onComplete.subscribe( function(e) { Lifetype.Effects.Events.unfoldEnd.fire(e); });	
	a.animate();
	return(false);	
}

/**
 * Folds a block to a size of 0 pixels, given its string id
 *
 * @param id The id of the element to fold
 */
Lifetype.Effects.fold = function( id )
{	
	var el = Lifetype.Dom.$(id)
	var properties = { height: {fom: el.offsetHeight, to:0, by:1 }};
	var a = new YAHOO.util.Anim( id, properties, 0.3 );
	a.onStart.subscribe( function(e) { Lifetype.Effects.Events.foldStart.fire(e); });
	a.onComplete.subscribe( function(e) { Lifetype.Effects.Events.foldEnd.fire(e); });	
	a.animate();
	return(false);		
}

/**
 * Given an element id, perform a fold-unfold sequence
 *
 * @param id The id of the element to fold and unfold
 */
Lifetype.Effects.toggleFolding = function( id )
{
	var el = Lifetype.Dom.$(id)	
	if( el.offsetHeight == 0 ) {
		// unfold
		this.unfold( id );
	}
	else {
		// fold
		this.fold( id );
	}
	
	return( false );
}

/**
 * TableEffects class
 *
 * @param id The id of the table to which we'd like to apply the effects. If no id is provided (i.e. the constructor
 * is called without parameters), then all tables in the page will be processed
 */
Lifetype.Effects.Table = function( id )
{
	this.id = id;
	this.table = document.getElementById( id );	
}

/**
 * Given a table id, use stripes for its rows
 *
 * @param cssClass CSS class to be applied to odd rows. If none is provided, a class called
 * "odd" will be used.
 */
Lifetype.Effects.Table.prototype.stripe = function( cssClass )
{
	if( this.table ) 
		var tbodies = this.table.getElementsByTagName("tbody");
	else
		var tbodies = document.getElementsByTagName("tbody");
		
	if( !cssClass ) 
		cssClass = "odd";
		
	for (var i=0; i<tbodies.length; i++) {
		var odd = true;
		var rows = tbodies[i].getElementsByTagName("tr");
		for (var j=0; j<rows.length; j++) {
			if (odd == false) {
				odd = true;
			} 
			else {
				YAHOO.util.Dom.addClass( rows[j], cssClass );
				odd = false;
			}
		}
	}
}

/**
 * Highlights the row where the mouse is
 *
 * @param cssClass The name of the CSS cssClass to be applied to highlighted rows. If none is provided,
 * a class called "highlightClass" will be used
 */
Lifetype.Effects.Table.prototype.highlightRows = function( cssClass )
{
	if(!document.getElementsByTagName) 
		return false;
	
	if( !cssClass )
		cssClass = "highlightClass";
	
	if( this.table )
		var tbodies = this.table.getElementsByTagName("tbody");
	else
		var tbodies = document.getElementsByTagName("tbody");
	
	for (var j=0; j<tbodies.length; j++) {
		var rows = tbodies[j].getElementsByTagName("tr");
	  	for (var i=0; i<rows.length; i++) {
			rows[i].onmouseover = function() {				
				YAHOO.util.Dom.addClass( this, cssClass );
			}
			rows[i].onmouseout = function() {
				YAHOO.util.Dom.removeClass( this, cssClass );
			}
		}
	}
}

/**
 * Toggles the visibility of a block element
 *
 * @param e The HTML element. It can be an element id or an HTML object
 */
Lifetype.Effects.toggle = function( e )
{
	e = (e && e.tagName) ? e : Lifetype.Dom.$( e );
	if( e.style.display == 'none' )
		e.style.display = 'block';
	else
		e.style.display = 'none';
}

/**
 * Show a red "Loading in progress" box in top right corner.
 *
 */

Lifetype.Effects.Form = new YAHOO.widget.Overlay();

Lifetype.Effects.Form.showPanel = function() {
	var panelWidth = 140;
	var panelX = YAHOO.util.Dom.getViewportWidth()-panelWidth-12;
	var panelY = YAHOO.util.Dom.getDocumentScrollTop();
	
	Lifetype.Effects.Form.init( "loadingEffect",   
	{ 
		x:panelX,
		y:panelY,
		width:panelWidth,
		underlay:"none",
		close:false,
		draggable:false,
		zIndex:20000,
		visible:false 
	});

    var myHeader = '<div class="loading_effect"><img src="imgs/admin/circle_small.gif" alt="Spinner" />&nbsp;';
    var myFooter = '</div>';
    var myBody = myHeader+tr('loading_in_progress')+myFooter;

	Lifetype.Effects.Form.setBody( myBody ); 
	Lifetype.Effects.Form.render( document.body );
	Lifetype.Effects.Form.show();
}

Lifetype.Effects.Form.hidePanel = function() {
	Lifetype.Effects.Form.hide();
	Lifetype.Effects.Form.destroy();
}
