<%@ page import="ro.emid.common.constants.AppConstants" %>

<style type="text/css">
    @import url('<%=AppConstants.WEB_RESOURCE_PATH%>/scripts/ext/resources/css/ext-all.css');

    fieldset{
        width:100%;
        padding: 15px 10px 10px;
    }
</style>

<script type="text/javascript" src="<%=AppConstants.WEB_RESOURCE_PATH%>/scripts/jquery/jquery.js"></script>
<script type="text/javascript" src="<%=AppConstants.WEB_RESOURCE_PATH%>/scripts/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=AppConstants.WEB_RESOURCE_PATH%>/scripts/ext/ext-all.js"></script>
<script type="text/javascript" src="<%=AppConstants.WEB_RESOURCE_PATH%>/scripts/ext/ux/treegrid/TreeGridSorter.js"></script>
<script type="text/javascript" src="<%=AppConstants.WEB_RESOURCE_PATH%>/scripts/ext/ux/treegrid/TreeGridColumnResizer.js"></script>
<script type="text/javascript" src="<%=AppConstants.WEB_RESOURCE_PATH%>/scripts/ext/ux/treegrid/TreeGridNodeUI.js"></script>
<script type="text/javascript" src="<%=AppConstants.WEB_RESOURCE_PATH%>/scripts/ext/ux/treegrid/TreeGridLoader.js"></script>
<script type="text/javascript" src="<%=AppConstants.WEB_RESOURCE_PATH%>/scripts/ext/ux/treegrid/TreeGridColumns.js"></script>
<script type="text/javascript" src="<%=AppConstants.WEB_RESOURCE_PATH%>/scripts/ext/ux/treegrid/TreeGrid.js"></script>

<script type="text/javascript">


    //overwrite decode method
    Ext.decode = function (respPage) {
        var json = "";
        var index1 = -1;
        var index2 = -1;

        if( respPage && ( index1 = respPage.indexOf("<respmesg>")) > 0 && (index2 = respPage.indexOf("</respmesg>")) > 0 ) {
            json = respPage.substring( index1 + 10, index2);
        }

        return Ext.util.JSON.decode( json);
    };


    // Path to the blank image must point to a valid location on your server
    Ext.BLANK_IMAGE_URL = '<%=AppConstants.WEB_RESOURCE_PATH + "/scripts"%>/ext/resources/images/default/s.gif';

    var detaliiPanel = null;

    var selectedFrame = null;

    // Main application entry point
    Ext.onReady(function() {

        new Ext.Viewport({
            layout: 'border',
            items: [
                new Ext.BoxComponent({
                    region: 'north',
                    height: 32, // give north and south regions a height
                    autoEl: {
                        tag: 'div',
                        html:'<div style="font-size: 1.4rem; padding: 5px;">Selecție instalații afectate:</div>'
                    },
                    margins: '5 5 0 5'
                }),

                {
                    region: 'west',
                    collapsible: false,
                    //                        title: 'Browse Instalatii',
                    autoScroll: true,
                    split: true,
                    width: "60%",
                    margins: '0 0 0 5',
                    minSize: 300,
                    maxSize: 1000,
                    layout: 'fit', // specify layout manager for items
                    items:            // this TabPanel is wrapped by another Panel so the title will be applied
                            new Ext.TabPanel({
                                border: false, // already wrapped so don't add another border
                                activeTab: 0, // second tab initially active
                                tabPosition: 'top',
                                //bodyStyle : "overflow:none",
                                items: [
                                    {
                                        html: "<iframe id='treeModeFrame' src='' frameborder='0' width='100%' height='100%' style='padding: 0px; background-color: #ffffff'></iframe>",
                                        title: 'Mod Browse',
                                        autoScroll: false,
                                        listeners: { activate: function(){
                                            selectedFrame = document.getElementById("treeModeFrame");
                                            selectedFrame.src = "<%=AppConstants.APP_NAME%>?action=browseTree";
                                        }}
                                    }
                                    , {
                                        html: "<iframe id='searchModeFrame' src='' frameborder='0' width='100%' height='100%'></iframe>",
                                        title: 'Mod Selecţie',
                                        autoScroll: false,
                                        listeners: { activate: function(){
                                            selectedFrame = document.getElementById("searchModeFrame");
                                            selectedFrame.src = "<%=AppConstants.APP_NAME%>?action=browseSearch";
                                        }}
                                    }]
                            })
                },

                detaliiPanel = new Ext.Panel({
                    region : 'center',
                    cls: "detaliiLF",
                    title: 'Detalii Instalatie',
                    //                        html : "<iframe id='detaliiLF' width='100%' height='100%' src='' frameborder='0'></iframe>",
                    margins : '0 5 0 0',
                    autoScroll: true,
                    bodyStyle : "padding: 10px",
                    minSize: 300
                }),

                new Ext.BoxComponent({
                    region : 'south',
                    height : 30, // give north and south regions a height
                    margins : '7 5 5 5',
                    html :
                            "<div><button onclick='BrowseWindow.onSave()'>Salvează</button>&nbsp;&nbsp;<button onclick='BrowseWindow.onRenunta()'>Renunţă</button></div>"
                })
            ]
        });
    });

    var BrowseWindow = {

        onSave : function(){
            selectedFrame.contentWindow.save();
        },

        onRenunta : function (){
            window.close();
        },

        prevCodInstalatie : null,

        showDetaliiInstalatie : function ( codInstalatie, an){

            if ( this.prevCodInstalatie != codInstalatie){
                this.prevCodInstalatie = codInstalatie;
                detaliiPanel.load("<%=AppConstants.APP_NAME%>?action=getDetaliiInstalatie&codLF="+codInstalatie + "&an=" + an);
            }
        }
    }

</script>
