(function($) {

    $.droppanel = function (data, options) {
		return $.droppanel.impl.init(data, options);
	};

    $.fn.droppanel = function(options){
	    $.droppanel.impl.init(this, options);

	    function clickHandler(event){
            event.preventDefault();
            $.droppanel.impl.load(this);
	        $.droppanel.impl.fill_from_href(this);

        	return false;
	    }
	
	    return this.click(clickHandler);
    };

    $.droppanel.defaults = {        
        droppanelHtml  : '\
            <div id="droppanel" style="display:none;"> \
			  <div class="droppanel-popup"> \
			    <table><tbody><tr class="row-header"> \
			        <td class="b"><div class="title"><a href="#" class="close"></a></div></td> \
			        <td class="body"><div class="content"></div></td> \
			        </tr> \
			      </tbody> \
			    </table> \
			  </div> \
			</div>'
    };

    $.droppanel.impl = {
	    opts: null,
	
	    inited: false,
	
	    zIndex: 0,

	    init : function (data, options){
	        if (this.inited){
		        return true;
	        } else {
		        this.inited = true;
	        }

	        this.opts = $.extend({}, $.droppanel.defaults, options);
	        this.zIndex = this.opts.zIndex;
	        
	        $('body').append(this.opts.droppanelHtml)

	        $('#droppanel .close').click(this.close);
	    },

	    fill_from_href : function(element){
	        // div
	        if (element.href.match(/#/)){
		        var url = window.location.href.split('#')[0]
		        var target = element.href.replace(url,'')
		
		        this.reveal($(element).html(), $(target).clone().show());
	        } 
	        // ajax
	        else {
		        this.fill_from_ajax(element);
	        }
	    },

	    fill_from_ajax: function(element){
			var self = this;
	        $.get(element.href, function(data){
		        self.reveal($(element).html(), data);
	        });
	    },

        load: function(element) {            
            if ($('#droppanel .loading').length == 1) {
                return true;
            }

            $('#droppanel .content').empty();
            $('#droppanel .title a').html($(element).html());
            $('#droppanel .body').children().hide().end().
                append('<div class="loading">loading</div>');

            $('#droppanel').css({
                top:	$(element).offset().top,
                left:	$(element).offset().left - 20
            }).show();

            $(document).trigger('loading.droppanel');
        },

        reveal: function(title, data){
            $('#droppanel .content').append(data).show();
            $('#droppanel .loading').remove();
            $('#droppanel .body').children().fadeIn('normal');
            $('#droppanel .title a').html(title);            
            $(document).trigger('afterReveal.droppanel');
        },

        close: function() {
            $(document).trigger('close.droppanel');
            return false;
        }
    };

    $(document).bind('close.droppanel', function() {
        $('#droppanel').fadeOut(function() {
            $('#droppanel .content').removeClass().addClass('content');
            $('#droppanel .loading').remove();
        })
    });
})(jQuery);