/*
Class: CoolPopup

Arguments:
	options - see Options below

Options:
	name - name of the box for use different style
	zIndex - integer, zindex of the box
	onReturn - return value when box is closed. defaults to false
	onReturnFunction - a function to fire when return box value
	BoxStyles - stylesheets of the box
	OverlayStyles - stylesheets of overlay
	showDuration - duration of the box transition when showing (defaults to 200 ms)
	showEffect - transitions, to be used when showing
	closeDuration - Duration of the box transition when closing (defaults to 100 ms)
	closeEffect - transitions, to be used when closing
	onShowStart - a function to fire when box start to showing
	onCloseStart - a function to fire when box start to closing
	onShowComplete - a function to fire when box done showing
	onCloseComplete - a function to fire when box done closing
*/

var CoolPopup = new Class({
    Implements: [Chain, Options],

	getOptions: function() {
	    return {
		name: 'CoolPopup',
		zIndex: 450,
		onReturn: false,
		onReturnFunction : $empty,
		BoxStyles: {
		    'width': 100
		},
		OverlayStyles: {
		    'background-color': '#000',
		    'opacity': 0.2
		},
		showDuration: 200,
		showEffect: Fx.Transitions.linear,
		closeDuration: 100,
		closeEffect: Fx.Transitions.linear,
		moveDuration: 500,
		moveEffect: Fx.Transitions.Back.easeOut,
		onShowStart : $empty,
		onShowComplete : $empty,
		onCloseStart : $empty,
		onCloseComplete : function(properties) {
		    this.options.onReturnFunction(this.options.onReturn);
		}.bind(this)
	    };
	},


	initialize: function(options) {
	    this.i=0;
	    this.setOptions(this.getOptions(), options);


	    this.Overlay = new Element('div', {
		'id': 'PopUpOverlay',
		'styles': {
		    'display': 'none',
		    'z-index': this.options.zIndex,
		    'position': 'absolute',
		    'top': '0',
		    'left': '0',
		    'background-color': this.options.OverlayStyles['background-color'],
		    'opacity': 0,
		    'height': window.getScrollHeight() + 'px',
		    'width': window.getScrollWidth() + 'px'
		}
	    });

/* *********************** */
	    this.table = new Element('table', { 'class' : 'CoolPopup-table' } );
	    var tb  = new Element('tbody');
	    this.table.appendChild(tb);

	    var tr1 = new Element('tr');
	    tb.appendChild(tr1);
	    var tr2 = new Element('tr');
	    tb.appendChild(tr2);
	    var tr3 = new Element('tr');
	    tb.appendChild(tr3);

	    var td  = new Element('td', { 'class' : 'CoolPopup-topleft'  }); td.set('html',' '); tr1.appendChild(td);
	    var td  = new Element('td', { 'class' : 'CoolPopup-border' }); td.set('html',' '); tr1.appendChild(td);
	    var td  = new Element('td', { 'class' : 'CoolPopup-topright' }); td.set('html',' '); tr1.appendChild(td);
	    var td  = new Element('td', { 'class' : 'CoolPopup-border' }); td.set('html',' '); tr2.appendChild(td);

	    this.Content = new Element('td', {
		'class': 'CoolPopup-content'
	    });
	    this.Content.set('html',''); 
    	    tr2.appendChild(this.Content);

	    var td  = new Element('td', { 'class' : 'CoolPopup-border' }); td.set('html',' '); tr2.appendChild(td);
	    var td  = new Element('td', { 'class' : 'CoolPopup-bottomleft' }); td.set('html',' '); tr3.appendChild(td);
	    var td  = new Element('td', { 'class' : 'CoolPopup-border' }); td.set('html',' '); tr3.appendChild(td);
	    var td  = new Element('td', { 'class' : 'CoolPopup-bottomright' }); td.set('html',' '); tr3.appendChild(td);

/* *********************** */

	    this.Box = new Element('div', {
		'id': this.options.name + '-Box',
		'styles': {
		    'display': 'none',
		    'z-index': this.options.zIndex + 2,
		    'position': 'absolute',
		    'padding': '10px',
		    'top': '0',
		    'width' : 'auto',
//		    'width': this.options.BoxStyles['width'] + 'px',
		    'left': '0'
		}
	    }).adopt(this.table);

	    this.Overlay.injectInside(document.body);
	    this.Box.injectInside(document.body);
	    this.preloadImages();

	    window.addEvent('resize', function() {
	    	if(this.options.display == 1) {
		    this.Overlay.setStyles({
			'height': window.getScrollHeight() + 'px',
			'width': window.getScrollWidth() + 'px'
		    });
		    this.centerBox();
		}
	    }.bind(this));

	    window.addEvent('scroll', this.centerBox.bind(this));
	},

    preloadImages: function() {
	var img = new Array(2);
	img[0] = new Image();
	img[1] = new Image();
	img[2] = new Image();
//	img[0].src = this.Box.getStyle('background-image').replace(new RegExp("url\\('?([^']*)'?\\)", 'gi'), "$1");
//	img[1].src = this.InBox.getStyle('background-image').replace(new RegExp("url\\('?([^']*)'?\\)", 'gi'), "$1");
//	img[2].src = this.Contenedor.getStyle('background-image').replace(new RegExp("url\\('?([^']*)'?\\)", 'gi'), "$1");
    },

    isChildOf: function(ancestor, node) {
	var mynode = node;
	while ( mynode ) {
	    if ( mynode == ancestor )
		return 1;
	    mynode = mynode.parentNode;
	}
    },
    
    /*
    Property: display
    	Show or close the box
    Argument:
	option - integer, 1 to Show box and 0 to close box (with a transition).
    */
    display: function(option) {

	if(this.Transition)
	    this.Transition.cancel();				

	// Show Box	
	if(this.options.display == 0 && option != 0 || option == 1) {

	    var elements = $$('select', 'object', 'embed');
    		$each(elements, 
		    function(node) { 
			if ( !this.isChildOf(this.Box,node) )
			    node.style.visibility = 'hidden';
		    }
		    ,this );

	    this.Overlay.setStyle('display', 'block');
	    this.options.display = 1;
	    this.fireEvent('onShowStart', [this.Overlay]);
	    this.Transition = new Fx.Tween(this.Overlay,
		{
        	    property: 'opacity',
		    duration: this.options.showDuration,
		    transition: this.options.showEffect,
		    onComplete: function() {
			sizes = window.getSize();
			scrollito = window.getScroll();

			var box_size = this.Box.getSize();

			this.Box.setStyles({
			    'display': 'block',
//			    'left': (scrollito.x + (sizes.x - box_size.x) / 2).toInt()
			    'left': (scrollito.x + (sizes.x - this.options.BoxStyles['width']) / 2).toInt()
			});
			this.centerBox();
			this.fireEvent('onShowComplete', [this.Overlay]);
		    }.bind(this)
		}).start(this.options.OverlayStyles['opacity']);
	} 
	else { // Close Box

	    var elements = $$('select', 'object', 'embed');
    		$each(elements, 
		    function(node) { 
			if ( !this.isChildOf(this.Box,node) )
			    node.style.visibility = 'visible';
		    }
		    ,this );

    	    this.queue.delay(500,this);
	    this.Box.setStyles({
		'display': 'none',
		'top': 0
	    });
	    this.Content.empty();
	    this.options.display = 0;
	    this.fireEvent('onCloseStart', [this.Overlay]);

	    if(this.i==1) {
    		this.Transition = new Fx.Tween(this.Overlay,
        	{
        	    property: 'opacity',
        	    duration: this.options.closeDuration,
        	    transition: this.options.closeEffect,
        	    onComplete: function() {
            		this.fireEvent('onCloseComplete', [this.Overlay]);
        	    }.bind(this)
        	}
		).start(0);
    	    }

	}
    },


    /*
	Property: centerBox
	    Move Box to screen center when brower is resized or scrolled
    */
    centerBox: function() {
	if(this.options.display == 1) {
	    sizes = window.getSize();
	    scrollito = window.getScroll();

	    if(this.MoveBox)
	    	this.MoveBox.cancel();


	    var box_size = this.Box.getSize();
//alert(box_size.x+'*'+box_size.y);

	    this.MoveBox = new Fx.Morph(this.Box, {
	    	duration: this.options.moveDuration,
		transition: this.options.moveEffect
	    }).start({
//		'left': (scrollito.x + (sizes.x - this.options.BoxStyles['width']) / 2).toInt(),
		'left': (scrollito.x + (sizes.x - box_size.x) / 2).toInt(),
		'top': (scrollito.y + (sizes.y - this.Box.offsetHeight) / 2).toInt()
	    });
	}
    },

    /*
	Property: queue
	    mah
    */
    queue: function() {
    	this.i--;
    	this.callChain();
    },

    /*
	Property: setContent
	    shows the box...
	Argument:
		message - text to show in the box
		properties - see Options below
	Options:
		onComplete - a function to fire when return box value
    */	
    setContent: function( message, properties ) {
	this.chain(function () {
	    properties = $extend({
    		'onComplete': $empty
    	    }, properties || {});

	    this.options.onReturnFunction = properties.onComplete;
	    this.Content.set('html',message);
    	    this.display(1);
	});
	this.i++;
	if(this.i==1) 
	    this.callChain();
    },

    /*
	Property: hide
	    hides the box
    */		
    hide: function(){
	this.display(0);
    },

    /*
	Property: show
	    Displays the box
	Argument:
		message    - the content
		properties - see Options in messageBox
    */		
    show: function(message, properties){
	this.setContent(message, properties);
    }

});

CoolPopup.implement(new Events, new Options);

var gcp;