var SimpleBox = new MK111.Class({
    options: {
        width: 300,
        height: 200,
        paddingleft: 1,
        paddingtop: 1,
        opacity: '0.8',
        btnTitle: "Ok",
        closeBtn: null,
        boxTitle: "messageBox",
        boxClass: 'mainBox',
        id: 'myID',
        fadeSpeed: 500,
        box: null,
        addContentID: null,
        addContent: null,
        boxTxtColor: '#000',
        isVisible: false,
        isDrag: true,
        position: 'c'
    },
    initialize: function (options) {
        this.isVisible = false;
        if (options['isDrag']) this.isDrag = options['isDrag'];
        if (options['width']) this.width = options['width'];
        if (options['height']) this.height = options['height'];
        if (options['paddingleft']) this.paddingleft = options['paddingleft'];
        if (options['paddingtop']) this.paddingtop = options['paddingtop'];
        if (options['opacity']) this.opacity = options['opacity'];
        if (options['btnTitle']) this.btnTitle = options['btnTitle'];
        if (options['boxTitle']) this.boxTitle = options['boxTitle'];
        if (options['boxClass']) this.boxClass = options['boxClass'];
        if (options['boxTxtColor']) this.boxTxtColor = options['boxTxtColor'];
        if (options['fadeSpeed']) this.fadeSpeed = options['fadeSpeed'];
        if (options['id']) this.id = options['id'];
        if (options['closeBtn']) this.closeBtn = MK111.$(options['closeBtn']);
        if (options['addContentID']) this.addContentID = options['addContentID'];
        if (options['position']) this.position = options['position'];
        if (options['addContentID']) {
            this.addContent = MK111.$(this.addContentID).innerHTML;
            MK111.$(this.addContentID).setStyle('visibility', 'hidden');
            MK111.$(this.addContentID).remove();
        };
        this.createBox();
    },
    createBox: function () {
        this.box = new MK111.Element('div');
        this.box.addClass(this.boxClass);
    },
    clickClose: function () {
        MK111.$(this.box).effect('opacity', {
            wait: true,
            duration: this.fadeSpeed,
            transition: MK111.Fx.Transitions.linear
        }).chain(function () {}).start(this.opacity, 0);
        this.isVisible = false;
    },
    fadeOut: function () {
        if (this.isVisible) {
            MK111.$(this.box).effect('opacity', {
                wait: true,
                duration: this.fadeSpeed,
                transition: MK111.Fx.Transitions.linear
            }).chain(function () {}).start(this.opacity, 0);
            this.isVisible = false;
        }
    },
    fadeIn: function () {
        if (document.documentElement && document.documentElement.clientWidth) {
            theWidth = document.documentElement.clientWidth;
        } else if (document.body) {
            theWidth = document.body.clientWidth;
        };
        if (window.innerHeight) {
            theHeight = window.innerHeight;
        } else if (document.documentElement && document.documentElement.clientHeight) {
            theHeight = document.documentElement.clientHeight;
        } else if (document.body) {
            theHeight = document.body.clientHeight;
        };
        var top = window.getScrollTop();
        if (this.position == 'tl') {
            var boxTop = 0;
            var boxLeft = 0;
        } else if (this.position == 'tc') {
            var boxTop = 0;
            var boxLeft = (theWidth - this.width) / 2;
        } else if (this.position == 'tr') {
            var boxTop = 0;
            var boxLeft = (theWidth - this.width - 25);
        } else if (this.position == 'l') {
            var boxTop = (theHeight - this.height) / 2;
            boxTop = (boxTop + top);
            var boxLeft = 0;
        } else if (this.position == 'c') {
            var boxTop = (theHeight - this.height) / 2;
            boxTop = (boxTop + top);
            var boxLeft = (theWidth - this.width) / 2;
        } else if (this.position == 'r') {
            var boxTop = (theHeight - this.height) / 2;
            boxTop = (boxTop + top);
            var boxLeft = (theWidth - this.width - 25);
        } else if (this.position == 'bl') {
            var boxTop = (theHeight - this.height);
            boxTop = (boxTop + top);
            var boxLeft = 0;
        } else if (this.position == 'bc') {
            var boxTop = (theHeight - this.height);
            boxTop = (boxTop + top);
            var boxLeft = (theWidth - this.width) / 2;
        } else if (this.position == 'br') {
            var boxTop = (theHeight - this.height);
            boxTop = (boxTop + top);
            var boxLeft = (theWidth - this.width - 25);
        } else {
            var boxTop = (theHeight - this.height) / 2;
            boxTop = (boxTop + top);
            var boxLeft = (theWidth - this.width) / 2;
        };
        this.box.setStyle('top', boxTop + this.paddingtop);
        this.box.setStyle('left', boxLeft + this.paddingleft);
        this.box.setStyle('position', 'absolute');
        this.box.setStyle('width', this.width);
        this.box.setStyle('height', this.height);
        this.box.setStyle('opacity', this.opacity);
        this.box.setStyle('cursor', 'move');
        this.box.setStyle('z-index', '999990000');
        this.box.setAttribute('id', this.id);
        this.box.setStyle('visibility', 'hidden');
        this.box.injectInside(document.body);
        if (this.isVisible == false) {
            this.box.effect('opacity', {
                wait: true,
                duration: this.fadeSpeed,
                transition: MK111.Fx.Transitions.linear
            }).start(0, this.opacity);
            this.addHT();
            this.isVisible = true;
        }
    },
    
    addHT: function () {
        this.closeBtn = new MK111.Element('button', {
            styles: {'border': 'none'}	
        });
        this.closeBtn.addClass('closebnt');
        var width = this.width.toInt() + 5;
        if (window.ie) {
            var titleBar = new MK111.Element('div', {
                styles: {'width': width}
            })
            titleBar.addClass('titleBarIE');
        } else {
            var titleBar = new MK111.Element('div', {
                styles: {'width': width}
            })
            titleBar.addClass('titleBar');
        };
        MK111.$(titleBar).innerHTML = this.boxTitle;
        var insideDiv = new MK111.Element('div', {
            styles: {
                'padding': '10px'
            }
        });
        insideDiv.setAttribute('id', 'myContent');
        this.box.innerHTML = "";
        insideDiv.injectInside(this.box);
        insideDiv.innerHTML = this.addContent;
        //this.closeBtn.innerHTML = this.btnTitle;
        MK111.$(this.closeBtn).addEvent('click', this.clickClose.bindWithEvent(this));
        titleBar.injectInside(this.box);
        this.closeBtn.injectInside(this.box);
        if (this.isDrag == 'true') {
            this.box.makeDraggable();
        }
    }
});
SimpleBox.implement(new MK111.Options, new MK111.Events);
SimpleBoxControler = {
    _instance: [],
    run: function ($data) {
        if (typeof($data) != 'object') return;
        if (!this._instance[$data['id']]) {
            this._instance[$data['id']] = new SimpleBox({
                width: $data['width'],
                height: $data['height'],
                paddingleft: $data['paddingleft'] + 1,
                paddingtop: $data['paddingtop'] + 1,
                btnTitle: $data['btnTitle'],
                closeBtn: 'myBtn',
                boxClass: $data['boxClass'],
                id: '376',
                fadeSpeed: $data['fadeSpeed'],
                opacity: $data['opacity'],
                addContentID: $data['id'],
                boxTitle: $data['boxTitle'],
                position: $data['position'],
                isDrag: String($data['isDrag'])
            });
        };
        if (!this._instance[$data['id']].isVisible) this._instance[$data['id']].fadeIn();
    },
    close: function ($id) {
        if (this._instance[$id]) this._instance[$id].clickClose();
    }
}