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

// A couple methods not defined in Ext Core 3.1.0:

if (!Ext.Element.getAttribute) {
    Ext.override(Ext.Element, {
        getAttribute: function (name) {
                          return this.dom.getAttribute(name);
                      }
    });
}

if (!Ext.Element.setAttribute) {
    Ext.override(Ext.Element, {
        setAttribute: function (name, value) {
                          return this.dom.setAttribute(name, value);
                      }
    });
}

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

AAI = function () {

    // Number of available images for page bottom corner background.
    // Files must be named "/images/bg_<num>.jpg", where <num> is a
    // number from 0 to (numBackgroundFiles-1).
    //
    var numBackgroundFiles = 6;

    var poppedImageContainer = null;
    var poppedImage          = null;
    var poppedImageSrc       = null;

    var isLocalFile = false;

    var imageUrlPrefix = '/images/';

    return {

        init: function () {

            isLocalFile = /^file/i.test(window.location.protocol);
            if (isLocalFile) {
                imageUrlPrefix = 'images/';
            }

            //Ext.onReady(
            //    function () {
                    this.initializePopupImages();
            //    },
            //    this    // scope
            //);
        },

        initializePopupImages: function () {

            var el = Ext.get('content');
            if (!el) return;

            // Set title on popup images:
            //
            Ext.each(
                Ext.fly('content').select('a.popimage img').elements,
                function (el) {
                     if (!el.getAttribute('title')) {
                         el.setAttribute('title', 'Click to Enlarge');
                     }
                }
            );

            // Initialize to catch clicks on popup images,
            // or hide popup image if anything else is clicked:
            //
            Ext.fly(document.body).on('click',
                function (ev) {

                    var target = ev.getTarget('a.popimage');
                    if (target) {
                        ev.preventDefault();
                        this.showPopupImage(target);
                    }
                    else {
                        this.hidePopupImage();
                    }
                },
                this    // scope
            );
        },

        loadBackground: function () {
            var num = Math.floor(Math.random() * numBackgroundFiles);
            var img = imageUrlPrefix + 'bg_' + num + '.jpg';
            Ext.fly(document.body).setStyle(
                {
                    'background-image':      'url(' + img + ')',
                    'background-repeat':     'no-repeat',
                    'background-position':   'bottom right',
                    'background-attachment': 'fixed'
                }
            );
        },

        hidePopupImage: function () {
            if (poppedImageContainer && poppedImageContainer.isVisible()) {
                poppedImageContainer.fadeOut();
            }
        },

        showPopupImage: function (a) {

            var href = a.getAttribute('href');

            if (poppedImageContainer) {

                // Check if requested image is already visible:
                //
                if (   poppedImageSrc == href
                    && poppedImageContainer.isVisible()
                   ) {
                    poppedImageContainer.frame();    // ripple effect
                    return;
                }
            }
            else {
                Ext.DomHelper.append(document.body,
                    {
                        id:    'popup-image',
                        tag:   'div',
                        style: {
                                   position: 'absolute',
                                   zIndex:   10,
                                   'top':    100,
                                   left:     100,
                                   padding:  '10px',
                                   display:  'none'
                               },
                        cn:    [
                                   {
                                       tag:  'div',
                                       id:   'image-popup-close',
                                       html: '[click anywhere to close]',
                                       style: {
                                                  position:    'absolute',
                                                  zIndex:      20,
                                                  'top':       0,
                                                  right:       0,
                                                  padding:    '2px',
                                                  color:      '#999999',
                                                  background: 'white'
                                              }
                                   },
                                   {
                                       tag: 'img'
                                   }
                               ]
                    }
                );

                poppedImageContainer = Ext.get('popup-image');
                poppedImage          = poppedImageContainer.child('img');
            }

            poppedImageSrc = href;

            // Create an image and give it time to load, so we know
            // its width and height before we position the popup div:
            //
            var preload = new Image();
            Ext.get(preload).on('load',
                function () {
                    this._showPopupImage(preload);
                },
                this    // scope
            );
            preload.src = poppedImageSrc;    // this triggers image load
        },

        _showPopupImage: function (image) {

            // After image loads, point <img> inside popup at it:
            //
            poppedImage.setAttribute('src', poppedImageSrc);

            var popup_height = image.height + 20;    // allow for padding
            var popup_width  = image.width  + 20;    // allow for padding

            var scroll = Ext.fly(document).getScroll();
            var ELD    = Ext.lib.Dom;
            var div_top  = scroll.top
                           + ((ELD.getViewHeight() - popup_height) / 2);
            var div_left = scroll.left
                           + ((ELD.getViewWidth()  - popup_width)  / 2);
            if (div_top  < 0) div_top  = 0;
            if (div_left < 0) div_left = 0;
            poppedImageContainer.setStyle({'top': div_top, left: div_left});

            poppedImageContainer.fadeIn();
        },

        _dummy_last_element: null    // do not remove
    };

}();

Ext.onReady(AAI.init, AAI);

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

function getPageWidth () {
    return window.innerWidth != null
        ? window.innerWidth
        : document.documentElement && document.documentElement.clientWidth
            ? document.documentElement.clientWidth
            : document.body != null
                ? document.body.clientWidth
                : null;
}


function getPageHeight () {
    return window.innerHeight != null
        ? window.innerHeight
        : document.documentElement && document.documentElement.clientHeight
            ? document.documentElement.clientHeight
            : document.body != null
                ? document.body.clientHeight
                : null;
}