$(document).ready(function () {
    // var img_loading = new Image();
    // var img_loading_dark = new Image();
    var img_loading_light = new Image();
    // var img_corners = new Image();
    // var img_infobox_peak = new Image();
    // var img_infobox_top = new Image();
    // var img_infobox_right = new Image();
    // var img_infobox_bottom = new Image();
    // var img_infobox_left = new Image();

    // img_loading.src = "static/css/images/loading.gif";
    // img_loading_dark.src = "static/css/images/loading-blue.gif";
    img_loading_light.src = "static/css/images/loading-light.gif";
    // img_infobox_top.src = "static/css/images/infobox-top.png";
    // img_infobox_right.src = "static/css/images/infobox-right.png";
    // img_infobox_bottom.src = "static/css/images/infobox-bottom.png";
    // img_infobox_left.src = "static/css/images/infobox-left.png";
});

//this.infobox.find('.infobox-commands').css('top', parseInt(this.content.css('top')) + this.content.outerHeight(true) + "px");


$.widget("ui.infobox", {
    _init: function() {
        this.element.addClass('infobox');
        
        this.overlay = $('<div class="layer overlay" />');
        this.layer = $('<div class="layer" />').append(
            this.infobox = $(
            '   <div class="infobox-outer">' +
            //'       <div class="infobox-topleft"></div>' +
            //'       <div class="infobox-top"></div>' +
            //'       <div class="infobox-topright"></div>' +
            //'       <div class="infobox-left"></div>' +
            '       <div class="infobox-actions"></div>' +
            '       <div class="infobox-content"></div>' +
            '       <div class="infobox-commands"></div>' +
            //'       <div class="infobox-right"></div>' +
            //'       <div class="infobox-bottomleft"></div>' +
            //'       <div class="infobox-bottom"></div>' +
            //'       <div class="infobox-bottomright"></div>' +
            //'       <div class="infobox-peak"></div>' +
            '   </div>').filter('*'));

        this.content = this.infobox.find('.infobox-content');
        this.content.css({ minWidth: this.options.minWidth, minHeight: this.options.minHeight });
        this.content.append(this.element);
        
        $('body').append(this.overlay);
        $('body').append(this.layer);
        
        this.actions = this.infobox.find('.infobox-actions');
        //this.content.css('top', parseInt(this.content.css('top')) + this.actions.outerHeight(true) + "px");

        if(this.options.title) {
            this.title = $('<div class="infobox-title" />');
            this.content.before(this.title);
            this.title.append(this.options.title);
        }
        
        var self = this;
        $.each(this.options.actions, function (label, fn) {
            self.actions.prepend($('<a />').action(label, fn, label.toLowerCase()));
        });
        
        this.commands = this.infobox.find('.infobox-commands');
        if (isEmptyObject(this.options.commands)) {
            $(this.commands).hide();
            this.content.css({ bottom: '1px' })
        } else {
            var self = this;
            $.each(this.options.commands, function (label, fn) {
                self.commands.prepend($('<a />').action(label, fn, label.toLowerCase()));
            });            
        }

        this.overlay.css({ opacity: this.options.opacity });
        this.overlay.hide();
        this.layer.hide();
    },
    
    _resize: function () {
        if (!isEmptyObject(this.options.commands)) {
            var commandsHeight = 36;
        } else { var commandsHeight = 0; }
        
        var new_width = Math.max(this.element.outerWidth(true), this.options.minWidth) + 2;
        var new_height = Math.max(this.element.outerHeight(true), this.options.minHeight) + this.actions.outerHeight(true) + 2 + commandsHeight;
        
        return { marginTop: Math.max(5, Math.min(53, ($(window).height() - new_height) / 2)),
                 width: new_width,
                 height: new_height };
    },
    
    show: function () {
        this.overlay.fadeIn('fast');        
        this.layer.fadeIn('fast');

        var new_size;
        if (this.element.is(':hidden')) {
            this.element.show();
            new_size = this._resize();
            this.element.hide();
        } else {
            new_size = this._resize();
        }

        var self = this;
        this.infobox.stop().animate(new_size, 'normal', function ()  {
                if (!self.content.hasClass(self.options.loading)) {
                    self.element.stop().fadeIn('fast');
                }
            });
    },
    
    hide: function () {
        this.overlay.fadeOut('fast');
        this.layer.fadeOut('fast');
    },
    
    refresh: function (fn) {
        var self = this;
        this.element.fadeOut('fast', function () {
                    if (fn) { fn(); }
                    self.show();
                });
    },
    
    refit: function (toShow, toHide, fn) {
        if (toShow) { toShow = toShow.filter(':hidden').show(); }
        if (toHide) { toHide = toHide.filter(':visible').hide(); }
        
        if (toShow || toHide) { this.infobox.animate(this._resize(), 'normal', fn); }
        
        if (toShow) { toShow.hide().animate({ opacity: 'show', height: 'show' }, 'normal'); }
        if (toHide) { toHide.show().animate({ opacity: 'hide', height: 'hide' }, 'normal'); }
    },
    
    start_loading: function () {
        this.content.addClass(this.options.loading);
        if (this.element.is(':visible')) {
            this.element.stop().fadeOut('fast');
        } else {
            this.element.hide();
        }
    },
    
    finish_loading: function () {
        this.content.removeClass(this.options.loading);
        this.show();
    },
    
    destroy: function() {
        if (!this.destroying) {
            var self = this;
            this.destroying = true;
            this.overlay.fadeOut("fast");
            this.layer.fadeOut("fast", function () {
                self.overlay.remove();
                self.layer.remove();
                $.widget.prototype.destroy.apply(self, ['destroy']);
            });
        }
    }
});

$.extend($.ui.infobox, {
    defaults: {
        minWidth: 150,
        minHeight: 30,
        opacity: 0.5,
        loading: 'loading-light',
        actions: {},
        commands: {}
    }
});