namespace('App');

App.ModalForm = newClass(null,{
    mask: null,
    window: null,

    onHide: function(){},

    constructor: function(zIndex){
        this.showed = false;
        var _this = this;
        this.mask = $('<div></div>').css({
            position: 'absolute',
            'z-index': zIndex || 10000,
            display: 'none',
            background: '#000',
            left: 0,
            top: 0
        });
        this.window = $('<div>загрузка...</div>').css({
            position:'absolute',
            'z-index': zIndex ? zIndex + 1 : 10001,
            background: '#F0F2F3',
            padding: '10px',
            border: '1px solid #cf2436',
            width: 400,
            height: 300,
            display:'none'
        });
        $(document.body).append(this.mask).append(this.window);      

        $(window).resize(function(){_this.setCenter();}).scroll(function(){_this.setCenter();});
        this.mask.bind('click', function(){_this.hide();});
    },

    show: function(){
        this.showed = true;
        this.mask.fadeTo('slow', 0.4);
        this.window.show();
        this.setCenter();
    },

    hide: function(){
        this.showed = false;
        this.mask.hide();
        this.window.hide();
        this.onHide();
    },
    
    setCenter: function(){
        if(!this.showed) return;
        var maskHeight = $(document).height();
        var maskWidth = Math.max($('#body').width(), $(window).width());

        this.mask.css({'width':maskWidth,'height':maskHeight});

        //Set the popup window to center
        this.window.css('top',  $(window).height() / 2 - this.window.height() / 2 + $(window).scrollTop());
        this.window.css('left', $(window).width() / 2 - this.window.width() / 2);
    },

    setSize: function(width, height){
        this.window.width(width).height(height);
        this.setCenter();
    }
});

App.superModalForm = newClass(null,{

    maskTop: null,
    maskLeft: null,
    maskBottom: null,
    maskRight: null,

    visible: false,

    borders: null,

    masksContainer: null,
    window: null,
    body: null,
    container: null,
    width: null,
    height: null,

    constructor : function(){

        var _this = this;

        var div = "<div></div>";

        this.container = $(div);
        this.container.css({
            position: 'absolute',
            'z-index': 10000,
            display: 'none',
            left: 0,
            top: 0
        });

        var createMask = function(){
            return $(div).css({
                position: 'absolute',
                background: 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAFoEvQfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA1JREFUeNpj0DcyawAAAkMBGFQH8O8AAAAASUVORK5CYII=)'
                //opacity:0.5
            });
        }

        this.maskTop = createMask();
        this.maskLeft = createMask();
        this.maskRight = createMask();
        this.maskBottom = createMask();

        this.maskContainer = $(div)
            .css({
                position:'absolute',
                width:'100%',
                height:'100%',
                overflow:'hidden'
            })
            .append(this.maskTop)
            .append(this.maskLeft)
            .append(this.maskBottom)
            .append(this.maskRight);

        this.window = $(div).css({
            position:'absolute',
            background:'#dde6d0'
        });

        var createCorner = function(){
            return $(div).css({
                'position':'absolute',
                width: '10px',
                height: '10px',
                background: 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAkNJREFUeNpi0Dcya7j+4PQ3EM148uK+JyKiQtIMQMCUllgxhwEKAAKIASQNkmW8++zCf7A0TAYggBhBUuu2zKpnQAJMHb2VQQxoACCAwIYsWzv/EMiMgNCQXrCdMANhYOG8NcswBFFsRBF89+7DC2SBqJDcFoAAAjuJhYWFcdWGaXXYdN26ef9yRXH7Osa8krw5+UVJyQwEAOPVeye/cnCwcxFSyJSVUj2RkKLfv37/ZPrw4dOvIJ+0xvfvPr7CpqiqtHNieFB2B0AAgT0DElBUluOtrMkKB0XQr1+/v58+eeFkb+fsgygRAQp3NXVFXWwmgoLmx4+ff5m8fJ2UcCkCgWVrJteAaOaFy6esI+SZz5+/PsYaX+gAFFNMDEQAfj5eEaIU3r376DoT0EffCCnsaJ66hSkppqQPnyJghLwGRQrIxL+g0MemCBRbQIOmgdgAAQaPGRAAJbfs/DhrG1tTe2YWZhZ8Nv398/fPkcOnD06duOjonz9//qPEIIhR31zgqW+oZcZABrhy+ebZusreLfAsM2tBRxq5hoGAjq668dxF3ZlgF65Yv/Cwqbm+DQMVwIVzV08yXrl74jMnJwcPNQwEJQWmXz9//2SgEvj9+88Ppj27Dh+kloFHD50+zvzq1WctGVkJBjl5aQVKDDt5/PzhSX3zjzJLSEo7HD967uGVSzcvW1gaarGysbKTYtC3r98/tzZNmb1u9fZrGAkbBIAlH3NyeoSZlY2xFa7I+vL564eTJy6cmjtzxSlQDkKWAwBQXAIzFa1XdQAAAABJRU5ErkJggg==)'
                //
            });
        }

        this.borders = {};
        this.borders['tl'] = createCorner().css({
            'background-position':'top left',
            top: -10,
            left: -10
        });
        this.borders['tr'] = createCorner().css({
            'background-position':'top right',
            top: -10,
            right: -10
        });
        this.borders['bl'] = createCorner().css({
            'background-position':'bottom left',
            bottom: -10,
            left: -10
        });
        this.borders['br'] = createCorner().css({
            'background-position':'bottom right',
            bottom: -10,
            right: -10
        });

        //Заплатка
        var createZapl = function(){
            return $(div).css({
                position:'absolute',
                background:'#dde6d0'
            });
        }

        this.borders['t'] = createZapl().css({
            top:'-10px',
            width:'100%',
            height:10
        });

        this.borders['r'] = createZapl().css({
            right:'-10px',
            height:'100%',
            width:10
        });

        this.borders['b'] = createZapl().css({
            bottom:'-10px',
            width:'100%',
            height:10
        });

        this.borders['l'] = createZapl().css({
            left:'-10px',
            height:'100%',
            width:10
        });

        for(var i in this.borders){
            this.window.append(this.borders[i]);
        }

        var closeLink = $("<a href='#'></a>").css({
            display:'block',
            position:'absolute',
            width:'18px',
            height:'18px',
            top:'0px',
            right:'0px',
            background:'url(/application/views/img/redCross.png)'
        });

        closeLink.click(function(){
           _this.hide();
           return false;
        });

        this.body = $(div);

        this.window.append(this.body);
        this.window.append(closeLink);

        this.container.append(this.maskContainer);
        this.container.append(this.window);

        $(document.body).append(this.container);

        $(window).resize(function(){_this.resetSizes();}).scroll(function(){_this.resetSizes();});

    },

    setSize: function(width, height){
        this.width = width;
        this.height = height;
        this.resetSizes();
    },

    resetSizes: function(){

        if(!this.visible) return;

        this.window.width(this.width);

        if(this.height == null){
            this.height = this.body.height();
            this.window.height(this.height);
        } else {
            this.window.height(this.height);
        }

        //this.window.width(this.width).height(this.height);

        var documentHeight = $(document).height() - 1;
        var documentWidth = $(document.body).width() - 1;

        this.container.width(documentWidth);
        this.container.height(documentHeight);

        var topMargin = Math.round($(window).height() / 2 + $(window).scrollTop() - this.height / 2);
        var leftMargin = Math.round(documentWidth / 2 - this.width / 2);
        var rightMargin = documentWidth - leftMargin - this.width;
        var bottomMargin = documentHeight - topMargin - this.height;


        this.maskTop.css({
            top: 0,
            left:0,
            width:documentWidth,
            height:topMargin - 10
        });
        this.maskLeft.css({
            top: topMargin - 10,
            left:0,
            width:leftMargin -10,
            height:this.height + 20
        });
        this.maskBottom.css({
            top: topMargin + this.height + 10,
            left: 0,
            width:documentWidth,
            height:bottomMargin - 10
        });
        this.maskRight.css({
            top: topMargin - 10,
            left:leftMargin+ this.width + 10,
            width:rightMargin - 10,
            height:this.height + 20
        });

        this.window.css('left',leftMargin);
        this.window.css('top', topMargin);
    },

    show: function(){
        this.container.show();
        this.visible = true;
        this.resetSizes();
    },

    hide: function(){
        this.container.hide();
        this.visible = false;
    }

});

App.ImageModalForm = newClass(App.ModalForm,{

    constuctor: function(zIndex){
        this.constructor.prototype.constructor.call(this, zIndex);
        this.window.css('background','white url(/src/loading.gif) no-repeat 50% 50%');
    },
    
    show: function(src){
        var _this = this;
        var image = $("<img/>")
        image.load(function(){
            _this.setSize(image.width(), image.height());
        });
        image.attr('src', src).click(function(){_this.hide();});
        this.window.empty().append(image);
        return this.constructor.prototype.show.call(this);
    }

});