/*
    
*/

///var popup = {};
var popup = function(obj, options){
    this.html = '';
    
    if(typeof(options) == 'string') {
        this.html = options;
    }
    
    
    this.options = {
        queue: { position: 'end' },
        duration: 0.3,
        hideInterval: 500,
        position: 'bottom',
        showOn: 'mouseover',
        arrLeft: 0,
        balloonLeft: 0,
        animation: true,
        
        width: 'auto',
        height: 'auto',
        maxWidth: 'auto'
    };
    
    
    this.showed = false;
    this.ajax = false;
    
    this.setOptions = function(options) {
	    if(options != undefined) {
    	    if(options.html != undefined) {
    		    this.html = options.html;
    		}
    		if(options.duration != undefined) {
    		    this.options.duration = options.duration;
    		}
    		if(options.position != undefined) {
    		    this.options.position = options.position;
    		}
    		if(options.duration != undefined) {
    		    this.options.duration = options.duration;
    		}
    		if(options.timeout != undefined) {
    		    this.options.hideInterval = options.timeout;
    		}
    		if(options.arrLeft != undefined) {
    		    this.options.arrLeft = options.arrLeft;
    		}
    		if(options.balloonLeft != undefined) {
    		    this.options.balloonLeft = options.balloonLeft;
    		}
    		if(options.ajax != undefined) {
    		    this.ajax = options.ajax;
    		}
    		if(options.showOn != undefined) {
    		    this.options.showOn = options.showOn;
    		}
    		if(options.width != undefined) {
    		    this.options.width = options.width;
    		}
    		if(options.height != undefined) {
    		    this.options.height = options.height; 
    		}
    		if(options.maxWidth != undefined) {
    		    this.options.maxWidth = parseInt(options.maxWidth); 
    		}
    		
    		if(options.animation != undefined) {
    		    this.options.animation = options.animation; 
    		}
    		
	    }
	    return this;
	};
	
	this.update = function(html) {
	    this.setOptions({html: html});
	    return this;
	};
	
	this.show = function() {
	    
	    if(!this.showed) {
    	    try
			{
				popup.animation.cancel();
				clearInterval(popup.hideTimeout);
				
				if (popup.currentBalloon)
					popup.currentBalloon._hide();
    	    }
    	    catch(e) { }
    	    if(this.ajax != false) {
    	        this._ajax(this.ajax.url, this.ajax.params, this.ajax.callback);
    	        return;
    	    }

    	    if(this.html == '') {
    	        return ;
    	    }
    	    
    	    popup.currentBalloon = this;
    	    
    	    try {
        	    $(popup.balloonContent.parentNode).setStyle({'height': '', 'width':''});
        	    popup.balloonContent.setStyle({'height': this.options.height, 'width':this.options.width});
        	    popup.balloon.setStyle({'top': '-9999px', 'left': '-9999px'});
        	    
        	    popup.balloonContent.update(this.html);
        	    this.showArr();
        	    
        	    var position = this.getPosition();
        
                popup.balloon.setStyle({'top': position.position.top + 'px', 'left': position.position.left + 'px'});
    
        	    if(this.options.animation) {
        	        popup.balloonContent.setStyle({'height': position.size.height + 'px', 'width': position.size.width + 'px'});
        	        $(popup.balloonContent.parentNode).setStyle({ 'height': '1px', 'width': '26px'});
            	    popup.animation = new Effect.Morph(popup.balloonContent.parentNode, { 
            	        style: {'height': position.size.height + 'px', 'width': position.size.width + 'px'},
            	        duration: this.options.duration
            	    });
        	    }
        	    else {
        	        $(popup.balloonContent.parentNode).setStyle({'height': 'auto', 'width': 'auto'});
        	    }
        	    this.showed = true;
    	    }
    	    catch(e) { }
	    }
	    return this;
	};
	
	this.hide = function()
	{
	    popup.hideTimeout = setTimeout((function()
		{
			if (popup.currentBalloon) 
	        	popup.currentBalloon._hide();
	    }).bind(this), this.options.hideInterval);
	    return this;
	};
	
	this._hide = function() {
	    this.showed = false;
	    if(popup.balloonContent)
	       popup.balloonContent.update('');
	    try {
	       popup.animation.cancel();
	    }
	    catch(e) {
	        
	    }
	    popup.balloon.setStyle({'top': '-9999px', 'left': '-9999px'});
	    
	    popup.balloon.select('.balloon_arr_top, .balloon_arr_bottom, .balloon_arr_left, .balloon_arr_right').each(function(i) { 
	        $(i).remove();
	    });
	    
	    popup.currentBalloon = null;
	};
	
	this.getPosition = function() {
	    var copy = new Element('div').addClassName('balloon').update(popup.balloon.innerHTML).setStyle({'top': '-9999px', 'left': '-9999px'});
	    
	    $$('body')[0].appendChild(copy);
	    var pos = {size: {}, position: {}};

	    pos.size.height = copy.select('.balloon_content_w')[0].getHeight();
	    pos.size.width = copy.select('.balloon_content_w')[0].getWidth();

	    copy.remove();

	    if(this.options.maxWidth != 'auto' && this.options.maxWidth < pos.size.width) {
	        pos.size.width = this.options.maxWidth;
            popup.balloon.setStyle({width: pos.size.width + 36  + 'px'});
	        var copy1 = new Element('div').addClassName('balloon').update(popup.balloon.innerHTML).setStyle({'top': '-9999px', 'left': '-9999px', width: pos.size.width + 36  + 'px'});
	        $$('body')[0].appendChild(copy1);
	        pos.size.height = copy1.select('.balloon_content_w')[0].getHeight();
            copy1.remove();
	    }
        else {
            popup.balloon.setStyle({width: 'auto'});
        }
	    
	    var position = Position.cumulativeOffset(this.object);
	    
	    pos.position.top = position[1];
	    pos.position.left = position[0] + parseInt(this.options.balloonLeft);
	    
	    
	    
	    if(this.options.position == 'top') {
	        pos.position.top = parseInt(pos.position.top) - parseInt(pos.size.height+37);
	    }
	    else if(this.options.position == 'bottom') {
	        pos.position.top = parseInt(pos.position.top) + parseInt($(this.object).getHeight());
	    }
	    else if(this.options.position == 'left') {
	        pos.position.left = parseInt(pos.position.left) - parseInt($(popup.balloon).getWidth());
	        pos.position.top = parseInt(pos.position.top) - parseInt($(popup.balloon).getHeight()/2)+10;
	    }
	    else if(this.options.position == 'right') {
	        pos.position.left = parseInt(pos.position.left) + parseInt($(this.object).getWidth());
	        pos.position.top = parseInt(pos.position.top) - parseInt($(popup.balloon).getHeight()/2)+10;
	    }
	    
	    if(pos.position.top < 0) {
	        pos.position.top = 0;
	    }
	    if(pos.position.left < 0) {
	        pos.position.left = 0;
	    }
	    
	    pos.position.bottom = pos.position.top+$(popup.balloon).getHeight();
	    pos.position.right = pos.position.left+$(popup.balloon).getWidth();
	    
	    if(pos.position.right > $$('body')[0].getWidth()) {
	        pos.position.right = $$('body')[0].getWidth();
	        pos.position.left = pos.position.right - $(popup.balloon).getWidth();
	    }


	    return pos;
	};
	
	this.showArr = function() {
	    var arr = new Element('div').addClassName('balloon_arr_'+this.options.position).setStyle({left: this.options.arrLeft + 'px'}); 
	    if(this.options.position == 'bottom') {
	        $$('.balloons-t')[0].update(arr);
	    }
	    if(this.options.position == 'left') {
	        $$('.balloons-r')[0].update(arr);
	    }
	    if(this.options.position == 'top') {
	        $$('.balloons-b')[0].update(arr);
	    }
	    if(this.options.position == 'right') {
	        $$('.balloons-l')[0].update(arr);
	    }
	};
	
	this._ajax = function(url, params, callback) {
	    this.ajax = false;
	    new Ajax.Request(url, {
           parameters: params,
           onComplete: ((function(t) {
               if(callback != undefined) {
                   callback(t);
               }
               this.update(t.responseText); 
               this.show();
           }).bind(this))
	    });
	};
	
	
	this.setOptions(options);
    
    this.object = $(obj);
    
    if(this.options.showOn != 'click') {
        this.object.observe('mouseout', (function() {
            this.hide();
        }).bind(this));
    }
    else {
        Event.observe($$('body')[0], 'click', (function(e) {
            //e.stop();
            this._hide();
        }).bind(this));
    };
    
    this.object.observe(this.options.showOn, (function(e) {
        
        clearInterval(popup.hideTimeout);
        this.show();
        this.object.fire('b:'+this.options.showOn);
        e.stop();
    }).bind(this));
    
    
	
	return this;
}


popup.currentBalloon = null;
popup.hideTimeout = null;
popup.balloon = null;
popup.balloonContent = null;
popup.animation = null;

popup.init = function() {
    var body = '<table class="balloons">' +
			'<tr><td class="balloons-tl"></td><td class="balloons-t"></td><td class="balloons-tr"></td></tr>' +
			'<tr><td class="balloons-l"></td><td class="balloon_content_td"><div class="balloon_content_w"><div class="balloon_content"></div></div></td><td class="balloons-r"></td></tr>' +
			'<tr><td class="balloons-bl"></td><td class="balloons-b"></td><td class="balloons-br"></td></tr>' +
            '</table>';

    var wrapper = new Element('div', { 'id': 'balloon' }).addClassName('balloon').update(body);
	$$('body')[0].appendChild(wrapper);
	popup.balloon = $('balloon');
    popup.balloonContent = popup.balloon.select('.balloon_content')[0];
    
    popup.balloon.observe('mouseover', function() {
        clearInterval(popup.hideTimeout);
    });
    popup.balloon.observe('mouseout', function()
	{
		if (popup.currentBalloon)
        	popup.currentBalloon.hide();
    });
}

if(isMegaSuxx()) {
    Event.observe(window, 'load', function() { popup.init(); });
}
else {
    document.observe("dom:loaded", function() { popup.init(); } );
}