
function addItem(id,title,path) {
    return {
        title: title,
        closable: false,
        height: 250,
        layout: 'fit',
        id: id,
        items: [
             {
                 xtype: "component",
                 border: false,
                 id: 'iframe_' + id,
                 autoEl: {
                     tag: "iframe",
                     src: path
                 }
             }
        ],
        listeners: {
            render: function (p) {
                //console.log("_height=" + Ext.util.Cookies.get(p.getId() + "_height"));
                if (Ext.util.Cookies.get(p.getId() + "_height")) p.setHeight(parseInt(Ext.util.Cookies.get(p.getId() + "_height")));

                Ext.create('Ext.resizer.Resizer', {
                    target: p,
                    duration: '.6',
                    easing: 'backIn',
                    pinned: true,
                    dynamic: true,
                    handles: 's',
                    listeners: {
                        'beforeresize': function () {
                            var iframes = Ext.query('iframe');

                            Ext.Array.each(iframes, function (item) {
                                Ext.get(item).hide();
                            });
                        },
                        'resize': function () {
                            var iframes = Ext.query('iframe');

                            Ext.Array.each(iframes, function (item) {
                                Ext.get(item).setVisible(true);
                            });

                            Ext.util.Cookies.set(p.getId() + "_height", p.getHeight());
                            //console.log("_height=" + Ext.util.Cookies.get(p.getId() + "_height"));
                        }
                    }
                });

            }
        }
    };
}

var panel1 = {
    id: 'panel1',
    items: [
        addItem("portal_device_status", DeviceOnlineCheck, "/Apps/DeviceSystem/DeviceStatus.aspx?forPortlet=Y"),
        addItem("portal_alarm_top20", AlarmEventTop20, "/Apps/AlarmSystem/Log/Main.aspx?forPortlet=Y")
        //{
        //    title: '設備斷線監控',
        //    closable: false,
        //    height:250,
        //    layout: 'fit',
        //    id:'portal_device_status',
        //    items: [
        //         {
        //             xtype: "component",
        //             border: false,
        //             id: 'iframe1',
        //             autoEl: {
        //                 tag: "iframe",
        //                 src: "/Apps/DeviceSystem/DeviceStatus.aspx?forPortlet=Y"
        //             }
        //         }
        //    ],
        //    listeners: {
        //        render: function (p) {
        //            //console.log("_height=" + Ext.util.Cookies.get(p.getId() + "_height"));
        //            if (Ext.util.Cookies.get(p.getId() + "_height")) p.setHeight(parseInt(Ext.util.Cookies.get(p.getId() + "_height")));

        //            Ext.create('Ext.resizer.Resizer', {
        //                target: p,
        //                duration: '.6',
        //                easing: 'backIn',
        //                pinned: true,
        //                dynamic: true,
        //                handles: 's',
        //                listeners: {
        //                    'beforeresize': function () {
        //                        var iframes = Ext.query('iframe');

        //                        Ext.Array.each(iframes, function (item) {
        //                            Ext.get(item).hide();
        //                        });
        //                    },
        //                    'resize': function () {
        //                        var iframes = Ext.query('iframe');

        //                        Ext.Array.each(iframes, function (item) {
        //                            Ext.get(item).setVisible(true);
        //                        });

        //                        Ext.util.Cookies.set(p.getId() + "_height", p.getHeight());
        //                        //console.log("_height=" + Ext.util.Cookies.get(p.getId() + "_height"));
        //                    }
        //                }
        //            });

        //        }
        //    }
        //},
//    {
//        //id: 'portlet-4',
//        title: '最新20筆報警事件',
//        closable: false,
//        height: 250,
//        items: [
//             {
//                 region: 'center',
//                 xtype: "component",
//                 border: false,
//                 autoEl: {
//                     tag: "iframe",
//                     src: "/Apps/AlarmSystem/Log/Main.aspx?forPortlet=Y"
//                 }
//             }
//        ],
//        listeners: {
//            'close': Ext.bind(this.onPortletClose, this)
//        }
//}
]
};

/*
var panel2 = {
    //id: 'col-2',
    items: [
        {
            title: '設備斷線監控',
            closable: false,
            height: 250,
            items: [
                 {
                     region: 'center',
                     xtype: "component",
                     border: false,
                     id: 'iframe1',
                     autoEl: {
                         tag: "iframe",
                         src: "/Apps/DeviceSystem/DeviceStatus.aspx?forPortlet=Y"
                     }
                 }
            ],
            listeners: {
                'close': Ext.bind(this.onPortletClose, this)
            }
        }, {
            title: '系統活動監控',
            closable: false,
            height: 250,
            items: [
                 {
                     region: 'center',
                     xtype: "component",
                     border: false,
                     id: 'iframe2',
                     autoEl: {
                         tag: "iframe",
                         src: "/Common/SystemAdmin/Utility/WinServiceLog.aspx?forPortlet=Y"
                     }
                 }
            ],
            listeners: {
                'close': Ext.bind(this.onPortletClose, this)
            }
        }]
};
*/


Ext.define('Ext.app.Portal', {

    extend: 'Ext.container.Viewport',
    requires: ['Ext.app.PortalPanel', 'Ext.app.PortalColumn', 'Ext.app.GridPortlet', 'Ext.app.ChartPortlet'],

    getTools: function () {
        return [{
            xtype: 'tool',
            type: 'gear',
            handler: function (e, target, header, tool) {
                var portlet = header.ownerCt;
                portlet.setLoading('Loading...');
                Ext.defer(function () {
                    portlet.setLoading(false);
                }, 2000);
            }
        }];
    },



    initComponent: function () {
        var content = '<div class="portlet-content"></div>';

        Ext.apply(this, {
            id: 'app-viewport',
            layout: {
                type: 'border'
            },
            items: [{
                xtype: 'container',
                region: 'center',
                layout: 'border',
                items: [{
                    id: 'app-portal',
                    xtype: 'portalpanel',
                    region: 'center',
                    items: [panel1],
                    listeners: {
                        'beforedragover': function () {
                            var iframes = Ext.query('iframe');

                            Ext.Array.each(iframes, function (item) {
                                Ext.get(item).hide();
                            });
                           
                        },
                        'drop': function () {

                            var iframes = Ext.query('iframe');

                            Ext.Array.each(iframes, function (item) {
                                Ext.get(item).setVisible(true);
                            });

           
                            Ext.getCmp("panel1").items.each(function (p) {
                                console.log(p);
                            });
                        }
                        //,
                        //'render': function () {

                        //    setTimeout(function () {
                        //        var iframes = Ext.query('iframe');

                        //        var cnt = 1;
                        //        Ext.Array.each(iframes, function (item) {

                        //            setTimeout(function () {
                        //                try {
                        //                    Ext.getDom(Ext.get(item).id).contentWindow.loadData();
                        //                } catch (e) {

                        //                }

                        //            }, 100 * cnt);


                        //            cnt++;
                        //        });
                        //    }, 500);

                        //}
                    }
                }]
            }]
        });
        this.callParent(arguments);
    },

    onPortletClose: function (portlet) {
        //Close
    }
});