var tileWidgets = [];

function addTileWidgets() {
    var content = $('pageContent');

    $$('.icontile div.tilewidget').each(function(i){
        
        var a = i.getParent();
        i.content = content;
        i.a = a;
        
        i.inject(content, 'bottom');
        tileWidgets.push(i);

        i.setStyles({
            'margin': 0,
            'position': 'absolute'
        });

        var show = (function(){
            var wasHidden = (this.getStyle('display') != 'block');
            if (!wasHidden) {
                $clear(this.hide);
                return;
            }

            tileWidgets.each(function(i){
                i.setStyle('display', 'none');
            });


            var a = this.a;
            var pos = a.getCoordinates(this.content);
            
            var h = this.getStyle('height').toInt() + this.getStyle('padding-top').toInt() + this.getStyle('padding-bottom').toInt();
            var w = this.getStyle('width').toInt() + this.getStyle('padding-left').toInt() + this.getStyle('padding-right').toInt();

            this.setStyles({
                'top': pos.top - h,
                'left': pos.left - (w + pos.left - pos.right)/2
            });

            this.setStyle('display', 'block');

            if (wasHidden) {
                OverText.update();
            }
        }).bind(i);

        var hide = (function(){
            var focused = false;
            this.getElements('input').each(function(i){
                if (i.hasFocus) {
                    focused = true;
                }
            });

            if (focused) {
                $clear(this.hide);
                return;
            }


            this.hide = (function(){
                this.setStyle('display', 'none');
            }).bind(this).delay(200);
        }).bind(i);

        a.addEvent('mouseover', show);
        i.addEvent('mouseover', show);

        a.addEvent('mouseout', hide);
        i.addEvent('mouseout', hide);



        i.getElements('input').each(function(i){
            this.hasFocus = false;

            i.addEvents({
                'focus': (function(e){
                    if (e) {
                        this.hasFocus = true;
                        show.call();
                    }
                }).bind(i),
                'blur': (function(e){
                    if (e) {
                        this.hasFocus = false;
                        hide.delay(200);
                    }
                }).bind(i),
                'keydown': (function(event) {
                    var e = new Event(event);
                    switch (e.key) {
                        case 'esc':
                            i.hasFocus = false;
                            hide.call();
                    }
                }).bind(i)
            });
        });


    });
}


window.addEvent('domready', function() {
        addTileWidgets();
});

window.addEvent('ajaxready', function() {
        addTileWidgets();
});