/*
    依附于 Bootstrap 的Javascript 布局
*/
define(['extends'], function(ext) {
    /*布局系统抽象类*/
    var Layout = function() {
        this.children = [];
        this.element = null;
    }

    Layout.prototype.init = function() {
        throw new Error('Function Undefined!!')
    };

    Layout.prototype.appendHtml = function(htmlText) {
        //console.log('添加HTML到:' + htmlText)
        var innerHTML = this.element.innerHTML;
        this.element.innerHTML = innerHTML + htmlText; /*不可信的HtmlText*/
        return this;
    }

    Layout.prototype.inner = function() {
        var ele = arguments || [];
        for (var i = 0; i < ele.length; i++) {
            if (typeof ele[i] === 'string') {
                this.appendHtml(ele[i]);
                continue;
            }
            this.children.push(ele[i]);
            this.element.appendChild(ele[i].element);
        }

        return this;
    };

    /*
     *  Style 是字典{'hei':'200px'}
     */
    Layout.prototype.style = function(style) {
        if (typeof style === 'undefined') return this.element.style; //注意这个通常不可取
        for (var i in style) {
            this.element.style[i] = style[i].toString();
        }
        return this;
    }

    /*
     * 容器Container
     */
    var LayoutContainer = function(id, parent, className) {
        Layout.call(this);
        this.id = id || '';
        this.className = className || 'Layout-Container';
        this.parent = parent || document.body;
        this.init();
    }

    ext.inheritPrototype(LayoutContainer, Layout);/*寄生继承*/

    LayoutContainer.prototype.init = function() {
        this.element = document.createElement('div');
        this.element.id = this.id;
        this.element.className = this.className;
    };

    LayoutContainer.prototype.show = function() {
        this.parent.appendChild(this.element);
    }

    /*
     * 抽象的项目模板类
     * 
     */
    var AbcItem = function(eleName, id, className) {
        Layout.call(this);
        this.id = id || '';
        this.className = className || '';
        this.eleName = eleName || 'div';
        this.init();
    }

    ext.inheritPrototype(AbcItem, Layout);/*寄生继承*/

    AbcItem.prototype.init = function() {
        this.element = document.createElement(this.eleName);
        this.element.id = this.id;
        this.element.className = this.className;
    };

    /*项目生成工厂*/
    var instanceItem = function(eleName, className, id) {
        //安全工厂
        return new AbcItem(eleName, id, className || '');
    }

    /*
     * 定义一组外部使用的时候的外观表面，方便使用  颗粒化函数
     */
    var facadeFunc = function(eleName, classNameMust, id) {

        /*返回给外界使用的函数 new La.row('id','addClass ww sd').some... */
        return function(addClassNamec, idc) {

            var instanceEle = new instanceItem(eleName, classNameMust, id);
            var idz = idc || '';
            var addClassName = addClassNamec || '';
            instanceEle.element.id = idz;
            instanceEle.element.className += ' ' + addClassName
            return instanceEle;
        }
    }

    /*
     *  常用部件开始定义 
     * */
    return {

        /*最高布局抽象类，所有组件/容器必须寄生基础于此*/
        Layout: Layout,

        /*布局系统 总容器*/
        LayoutContainer: LayoutContainer,

        /* 如果没有您需要的Bootstrap组件，请自己利用instanceItem工厂生成一个*/
        instanceItem: instanceItem,

        /*您可以继承此类，从而自定义任何组件*/
        AbcItem: AbcItem,

        /*普通容器*/
        container: facadeFunc('div', 'container', ''),

        /* 满 容器container_fluid*/
        container_fluid: facadeFunc('div', 'container_fluid', ''),

        /* 行 */
        row: facadeFunc('div', 'row', ''),

        button: facadeFunc('button', 'btn', ''),

        form_group: facadeFunc('div', 'form-group', ''),

        label: facadeFunc('label', '', ''),

        //<input type="password" class="form-control border-1" id="passwd" placeholder="密码">
        input: function(className, type, placeholder, id) {
            var obj = new instanceItem('input', className, id);
            obj.element.setAttribute('type', type);
            obj.element.setAttribute('placeholder', placeholder);
            return obj;
        },

        /*
         *  列 定位，
         *  sizeClassName 是lg md sm xs 其中之一  
         *  size 是 1 ~ 12
         */
        col: function(sizeClassName, size, id) {
            var className = 'col-' + sizeClassName.toString() + '-' + size.toString(); // col-md-5 如
            return new instanceItem('div', className, id);
        }


    };
});
