//additional properties for jQuery object
$(document).ready(function(){
    //align element in the middle of the screen
    $.fn.alignCenter = function(obj) {
        obj = obj || window;
        //get margin left
        var marginLeft = Math.max(40, parseInt($(obj).width()/2 - $(this).width()/2)) + 'px';
        //get margin top
        var marginTop = Math.max(40, parseInt($(obj).height()/2 - $(this).height()/2)) + 'px';
        //return updated element
        return $(this).css({'margin-left':marginLeft, 'margin-top':marginTop});
    };

    $('#mystone').click(function(e){
        e.preventDefault();
        $('<div/>')
            .attr('id', 'mystone-popup-back')
            .width( $(document).width() )
            .height( $(document).height() )
            .css({
                top:        0
                ,left:      0
                ,opacity:   0.75
                ,position:  'absolute'
                ,'z-index': 10000
                ,background:'#000'
            })
            .click(function(){ $('#mystone-popup-close').click() })
            .appendTo('body');

        $('<div/>')
            .attr('id', 'mystone-popup')
            .width(880)
            .height(400)
            .css({
                top:        0
                ,left:      0
                ,position:  'fixed'
                ,'z-index': 10001
                ,background:'#000'
            })
            .alignCenter()
            .appendTo('body')
            .append(
                $('<iframe/>')
                    .attr('src', $(this).attr('href'))
                    .css({
                         width:     '100%'
                        ,height:    '100%'
                        ,border:    0
                        ,background:'#333'
                    })
            )
            .append(
                $('<a/>')
                    .text('\u0437\u0430\u043a\u0440\u044b\u0442\u044c')
                    .attr('id', 'mystone-popup-close')
                    .attr('href', '#')
                    .click(function(e){
                        e.preventDefault();
                        $('#mystone-popup, #mystone-popup-back, #mystone-popup-close').remove();
                    })
                    .css({
                         top:               20
                        ,right:             20
                        ,position:          'absolute'
                        ,'text-transform':  'capitalize'
                        ,'text-decoration': 'none'
                    })
            );
    });
});