var Popin = function(element) {
    this.contentElement = jQuery(element);
    this.initialize();
};

Popin.prototype = {

    center: function() {
        this.contentElement.css(
            {
                'display': 'block',
                'position': 'absolute',
                'margin-left': ((jQuery(window).width() - this.contentElement.outerWidth()) / 2) + 'px',
                'margin-top': ((jQuery(window).height() - this.contentElement.outerHeight()) / 2) + 'px',
                'z-index': 9999,
                'overflow':'visible'
            }
        );
    },

    initialize: function() {
        var self = this;
        this.popinWrapper = jQuery(document.createElement('div'));
        this.popinWrapper.css(
            {
                'background-image': 'url(http://localhost:9071/Toinou/App_Themes/Theme_Default/images/popin_background.png)',
                'position': 'fixed',
                'top': 0,
                'left': 0,
                'width': '100%',
                'height': '100%',
                'z-index': 9998,
                'display': 'none'
            }
        );
        this.popinWrapper.attr('id', 'popin_' + this.contentElement.context.id);
        this.contentElement.wrap(this.popinWrapper);
        jQuery(window).bind(
            'resize',
            function() { self.center(); }
        );
    }
};

var showPopin = function(id) {
    jQuery('#popin_' + id).show();
    jQuery(window).trigger('resize');
};

var hidePopin = function(id){
    jQuery('#popin_' + id).css(
        {
            'display': 'none'
        }
    );
    jQuery('#popin_' + id).hide();
}

jQuery(document).ready(
    function() {
var popins = jQuery('.popin');
        for (var i=0; i < popins.length; i++) { new Popin(popins[i]); }
    }
);