var Popup = {
    
    element: null, // popup element
    containerElement: null, // popup container element
    rootElement: null, // top level element to append to
    jQuery: null, // jQuery library instance to use
    
    defaults: {
        containerAppendTo: 'body', // selector to append elements to
        containerId: 'popup', // popup container ID
        blackoutOpacity: 0.4, // blackout screen fade opacity 
        topOffset: 100, // offset in pixels from top of screen
        blackoutId: 'blackout', // blackout screen ID attribute
        closeButtonClassName: 'popup-close'
    },
    options: {}, // user options
    
    // element: jQuery element or html popup contents
    // options: user defined options
    // jQuery: jQuery instance for use in script
    init: function(element, options, jQuery) {
        Popup.jQuery = jQuery;
        
        // merge user supplied options with defaults
        Popup.options = Popup.jQuery.extend({}, Popup.defaults, options);
        
        Popup.rootElement = Popup.jQuery(Popup.options['containerAppendTo']);
        
        // build blackout element
        Popup.blackoutElement = Popup.jQuery(document.createElement('div'));
        Popup.blackoutElement.click(function() {
            Popup.hide();
        });
        Popup.blackoutElement.attr('id', Popup.options['blackoutId']);
                        
        // build container
        Popup.containerElement = Popup.jQuery(document.createElement('div')).attr('id', Popup.options['containerId']).hide();
        
        if (element) {
            Popup.element = Popup.jQuery(element);
            Popup.element.wrap(Popup.containerElement);
            Popup.setContent(Popup.element);
        }
        
        // add close button 
        Popup.closeButton = Popup.jQuery(document.createElement('div'))
                                 .addClass(Popup.options['closeButtonClassName'])
                                 .text('close')
                                 .click(Popup.hide);
        
        Popup.containerElement.prependTo(Popup.rootElement);
        Popup.blackoutElement.appendTo(Popup.rootElement);
        Popup.closeButton.prependTo(Popup.containerElement.find('#productmore'));

    },
    
    // element: popup element or html
    setContent: function(element) {
        var element = Popup.jQuery(element);
        Popup.containerElement.empty();
        Popup.containerElement.append(element);
        Popup.element = element;
    },
    
    show: function() {
        Popup._toggleBlackout();
        Popup._centreElement(Popup.containerElement);
        Popup.containerElement.show();
        Popup.containerElement.focus();
    },
    
    hide: function() {
        Popup._toggleBlackout();
        Popup.containerElement.hide();
    },
    
    _centreElement: function(element) {
        var element = Popup.jQuery(element);
        var documentElement = $(document);
        
        var documentWidth = parseInt(documentElement.width() / 2, 10);
        var elementWidth = parseInt(element.width() / 2, 10);
        
        element.css({
            left: (documentWidth - elementWidth),
            top: ($(document).scrollTop() + Popup.options.topOffset)
        });
    },
    
    _toggleBlackout: function() {
        if (Popup.blackoutElement.is(':hidden')) {
            Popup._positionBlackout();
            $(window).resize(Popup._positionBlackout).scroll(Popup._positionBlackout);
            Popup.blackoutElement.show();
            Popup.blackoutElement.fadeTo(500, Popup.options['blackoutOpacity']);
        } else {
            Popup.blackoutElement.fadeTo(500, 0, function() {
                Popup.blackoutElement.hide();
                $(window).unbind('resize');
                $(window).unbind('scroll');
            });
        }
    },
    
    // position blackout to span screen
    _positionBlackout: function() {
        var documentElement = $(window);
        Popup.blackoutElement.width(documentElement.width()).height(documentElement.height());
        Popup.blackoutElement.css({
            top: documentElement.scrollTop(),
            left: documentElement.scrollLeft()
        });
    }
    
};