//Global variables -- All Typicals
var AllZonesRadio = null;
var SelectedZoneRadio = null;
var AllSectionsRadio = null;
var SelectedSectionRadio = null;
var isComponentsPanelExpanded = false;

var isIconDrag = false;

//Components Unique Per Typical
var ComponentsReader = null;
var componentsData = null;
var ComponentsStore = null;
var ComponentsGridView = null;

//Price List
var TotalPrice = null;

//----------------------------------------------------------------------------------------------------------
//Renderer
function thumbnailRenderer(cellVal)
{
    if(cellVal != null)
    {
        var thumbnailPath = cellVal;
        var previewPath = thumbnailPath.replace("Thumbnail", "Preview");
        
        return '<img src="' + thumbnailPath +'" width="30" height="30" ext:qtip="<img src=' + previewPath + ' width=150 height=150 />" />';
    }
}

function upChargeRenderer(cellVal)
{
    if(cellVal != null)
    {
        if(cellVal == "0")
            return "";
        else
            return "$" + cellVal + "/ panel";
    }
}

function isAddedRenderer(cellVal)
{
    if(cellVal != null)
    {
        return '<img src="' + cellVal +'" width="30" height="30" />';
    }
}

//Local functions

//----------------------------------------------------------------------------------------------------------
function BuildInterface()
{   
    //------------------------------------------------------------------------------------------------------
    //MAIN-WEST-NORTH
    var OverviewPanel = new Ext.Panel({
        id : 'OverviewPanel',
        border: false,
        html: '<img src="Graphics/Intro-1.gif" /> <br /> <br />'
    });
    //------------------------------------------------------------------------------------------------------
    
    //------------------------------------------------------------------------------------------------------
    //MAIN-WEST-CENTER
    //HEADER
    var BeginConfigHeader = new Ext.Panel({
        id : 'BeginConfigHeader',
        border: false,
        height: 42,
        html: '<br /> <img src="Graphics/Intro-2.gif" />'
    });
    
    //SELECT CONFIGURATION
	var TypicalsReader = new Ext.data.ArrayReader({}, [
		{name: 'thumbnail'},
		{name: 'type'}
	]);
	
	var TypicalsData = [
		['<img src="Graphics/multi_user.gif" width="100" height="80" />','Multi User'],
		['<img src="Graphics/private_office.gif" width="100" height="80" />','Private Office']
	];
	
	var TypicalsStore = new Ext.data.GroupingStore({
        reader: TypicalsReader,
        data: TypicalsData,
        header: false
    })

	var TypicalsCustomGridView = new Ext.grid.EditorGridPanel({
        id: 'TypicalsCustomGridView',
        border: false,
        width: 360,
        autoHeight: true,
        header:false,
        enableColumnResize: false,
        enableDragDrop: false,
        sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
        view: new Ext.grid.GridView({
            getRowClass : function (row, index) {
                return 'pCursor'; 
            }
        }),
		columns: [
			{width: 125, height:80, dataIndex: 'thumbnail'},
			{width: 230, dataIndex: 'type'}
		],
		store: TypicalsStore
	});
	
    var TypicalsPanel = new Ext.Panel({
        id : 'TypicalsPanel',
        title: 'Select Configuration',
        border: false,
        collapsed: false,
        collapsible: true,
        titleCollapse: true,
        hideCollapseTool: true,
        iconCls: 'stepOne',
        items: [TypicalsCustomGridView]
    });
    //------------------------------------------------------------------------------------------------------
    
    //------------------------------------------------------------------------------------------------------
    //CUSTOMIZE STATION
    AllSectionsRadio = new Ext.form.Radio({
        id: 'AllSectionsRadio',
        boxLabel: 'All Views',
        width: 70,
        checked: true,
        name: 'view'
    });
    
    SelectedSectionRadio = new Ext.form.Radio({
        id: 'SelectedSectionRadio',
        boxLabel: 'Selected View',
        width: 100,
        checked: false,
        name: 'view'
    });
    
    ComponentsReader = new Ext.data.ArrayReader({id: 0}, [
		{name: 'ID'},
		{name: 'Image'},
		{name: 'DisplayName'},
		{name: 'Category'},
		{name: 'Code'},
		{name: 'Code1'},
		{name: 'isAdded'}
	]);
    
	componentsData = [
	    //Initially nothing -- each typical loads its own typical
	];

	ComponentsStore = new Ext.data.GroupingStore({
        reader: ComponentsReader,
        data: componentsData,
        remoteGroup:true,
        groupField:'Category'
    })

    ComponentsGroupingView = new Ext.grid.GroupingView({
        startCollapsed: true,
        forceFit: true,
        //groupTextTpl: '{group} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})',
        groupTextTpl: '{group}',
        getRowClass: function(){return 'pCursor';},
        interceptMouse : function(e){
            var hd = e.getTarget('.x-grid-group-hd', this.mainBody);
            if(hd){
                e.stopEvent();
                
                var groups = this.getGroups();
                for(var i = 0, len = groups.length; i < len; i++)
                {    
                    if(groups[i].id == hd.parentNode.id)
                        this.toggleGroup(hd.parentNode);
                    else
                        this.toggleGroup(groups[i], false);
                }
            }
        }
    })

    ComponentsGridView = new Ext.grid.EditorGridPanel({
        id: 'ComponentsGridView',
        border: false,
        width: 360,
        autoHeight: true,
        enableColumnResize: false,
        enableDragDrop: true,
        sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
        columns: [
            {dataIndex: 'ID', hidden: true},
            {width: 50, dataIndex: 'Image', renderer: thumbnailRenderer},
            {width: 255, dataIndex: 'DisplayName'},
            {dataIndex: 'Category', hidden: true},
            {dataIndex: 'Code', hidden: true},
            {dataIndex: 'Code1', hidden: true},
            {width: 50, dataIndex: 'isAdded', renderer: isAddedRenderer}
        ],
        store: ComponentsStore,
        view: ComponentsGroupingView
    });	

    var ComponentsPanel = new Ext.Panel({
        id : 'ComponentsPanel',
        title: 'Customize Station',
        border: false,
        collapsed: true,
        collapsible: true,
        titleCollapse: true,
        hideCollapseTool: true,
        iconCls: 'stepTwo',
        tbar: [AllSectionsRadio, SelectedSectionRadio],
        items: [ComponentsGridView]
    });
    //------------------------------------------------------------------------------------------------------
    
    //------------------------------------------------------------------------------------------------------
    //APPLY FINISHES
    //&&&&&&&&&&&&&&&&   STEEL TAB &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
	var SteelReader = new Ext.data.JsonReader(
        {root: 'rows'},
        Ext.data.Record.create([
            {name: 'Image'},
		    {name: 'FinishName'},
		    {name: 'DisplayName'},
		    {name: 'RGB'},
		    {name: 'Code'}
        ])
    );
    
 	var SteelStore = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy(
            {url: 'Finishes.aspx', method: 'POST'}),
        baseParams:{task: "getSteel"},
        reader: SteelReader
    })
    
    var SteelCustomGridView = new Ext.grid.EditorGridPanel({
        id: 'SteelCustomGridView',
        border: false,
        width: 360,
        autoHeight: true,
        enableColumnResize: false,
        enableDragDrop: true,
        sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
        view: new Ext.grid.GridView({
            getRowClass : function (row, index) {
                return 'pCursor'; 
            }
        }),
        columns: [
            {width: 75, dataIndex: 'Image', renderer: thumbnailRenderer},
            {dataIndex: 'FinishName', hidden: true},
            {width: 250, dataIndex: 'DisplayName'},
            {dataIndex: 'RGB', hidden: true},
            {dataIndex: 'Code', hidden: true}
        ],
        store: SteelStore
    });
    //&&&&&&&&&&&&&&&&   STEEL TAB &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&

    
    //&&&&&&&&&&&&&&&&   FABRIC TAB &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
    var SelectedFabricCategory = "a";
    var FabricCategory = [
        ['a', 'All'],
        ['b', 'Standard Fabrics'],
        ['c', 'Premium Fabrics']
    ];
    var FabricPriceRangeComboBox = new Ext.form.ComboBox({
        id : 'FabricPriceRangeComboBox',
        border: false,
        width: 120,
        listWidth: 120,
        readOnly: true,
        value: "All",
        store: new Ext.data.SimpleStore({
            fields: ['value', 'display'],
            data: FabricCategory
        }),
        valueField: 'value',
        displayField: 'display',
        triggerAction: 'all',
        mode: 'local'
    });
    FabricPriceRangeComboBox.on("select", function(combo, record, index){
        FabricStore.reload({params: {FabricCategorySelected: combo.getValue()}});
    });
    
    AllZonesRadio = new Ext.form.Radio({
        id: 'AllZonesRadio',
        boxLabel: 'All Panels',
        width: 70,
        checked: true,
        name: 'zone'
    });
    
    SelectedZoneRadio = new Ext.form.Radio({
        id: 'SelectedZoneRadio',
        boxLabel: 'Selected Panel',
        width: 100,
        checked: false,
        name: 'zone'
    });

    var FabricReader = new Ext.data.JsonReader(
        {root: 'rows'},
        Ext.data.Record.create([
            {name: 'Image'},
		    {name: 'FinishName'},
		    {name: 'DisplayName'},
		    {name: 'Family'},
		    {name: 'FabricCategory'},
		    {name: 'UpCharge'},
		    {name: 'Code'}
        ])
    );
    
    var FabricGroupingView = new Ext.grid.GroupingView({
        startCollapsed: true,
        forceFit: true,
        //groupTextTpl: '<img src="Finishes/Fabric/Family/{gvalue}.gif" width=30px height=30px /> {gvalue} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})',
        //groupTextTpl: '<img src="Finishes/Fabric/Family/{gvalue}.gif" width=30px height=30px /> {gvalue}',
        groupTextTpl: '{gvalue}',
        getRowClass: function(){return 'pCursor';},
        interceptMouse : function(e){
            var hd = e.getTarget('.x-grid-group-hd', this.mainBody);
            if(hd){
                e.stopEvent();
                
                var groups = this.getGroups();
                for(var i = 0, len = groups.length; i < len; i++)
                {    
                    if(groups[i].id == hd.parentNode.id)
                        this.toggleGroup(hd.parentNode);
                    else
                        this.toggleGroup(groups[i], false);
                }
            }
        }
    })

 	var FabricStore = new Ext.data.GroupingStore({
        id: 'FabricStore',
        proxy: new Ext.data.HttpProxy(
            {url: 'Finishes.aspx', method: 'POST'}),
        baseParams:{task: "getFabric", InitialFabricCategory: "a"},
        reader: FabricReader,
        sortInfo:{field: 'Family'},
        groupField:'Family'
    })


    var FabricCustomGridView = new Ext.grid.EditorGridPanel({
        id: 'FabricCustomGridView',
        border: false,
        width: 360,
        autoHeight: true,
        enableColumnResize: false,
        enableDragDrop: true,
        sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
        columns: [
            {width: 50, dataIndex: 'Image', renderer: thumbnailRenderer},
            {dataIndex: 'FinishName', hidden: true},
            {width: 175, dataIndex: 'DisplayName'},
            {dataIndex: 'Family', hidden: true},
            {dataIndex: 'FabricCategory', hidden: true},
            {width: 100, dataIndex: 'UpCharge', renderer: upChargeRenderer},
            {dataIndex: 'Code', hidden: true}
        ],
        store: FabricStore,
        view: FabricGroupingView
    });
    //&&&&&&&&&&&&&&&&   FABRIC TAB &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&


    //&&&&&&&&&&&&&&&&   LAMINATE TAB &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
    var LaminateCategory = [
        ['a', 'Corporate Colors'],
        ['b', 'Nevamar'],
        ['c', 'WilsonArt']
    ];
    
    var LaminatePriceRangeComboBox = new Ext.form.ComboBox({
        id : 'LaminatePriceRangeComboBox',
        border: false,
        width: 120,
        listWidth: 120,
        readOnly: true,
        value: "Corporate Colors",
        store: new Ext.data.SimpleStore({
            fields: ['value', 'display'],
            data: LaminateCategory
        }),
        valueField: 'value',
        displayField: 'display',
        triggerAction: 'all',
        mode: 'local'
    });
    LaminatePriceRangeComboBox.on("select", function(combo, record, index){
        LaminateStore.reload({params: {LaminateCategorySelected: combo.getValue()}});
    });
    
    var LaminateReader = new Ext.data.JsonReader(
        {root: 'rows'},
        Ext.data.Record.create([
            {name: 'Image'},
		    {name: 'FinishName'},
		    {name: 'DisplayName'},
		    {name: 'Family'},
		    {name: 'LaminateCategory'},
		    {name: 'UpCharge'},
		    {name: 'Code'}
        ])
    );
    
    var LaminateGroupingView = new Ext.grid.GroupingView({
        startCollapsed: true,
        forceFit: true,
        //groupTextTpl: '<img src="Finishes/Laminate/Family/{gvalue}.gif" width=30px height=30px /> {gvalue} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})',
        //groupTextTpl: '<img src="Finishes/Laminate/Family/{gvalue}.gif" width=30px height=30px /> {gvalue}',
        groupTextTpl: '{gvalue}',
        getRowClass: function(){return 'pCursor';},
        interceptMouse : function(e){
            var hd = e.getTarget('.x-grid-group-hd', this.mainBody);
            if(hd){
                e.stopEvent();
                
                var groups = this.getGroups();
                for(var i = 0, len = groups.length; i < len; i++)
                {    
                    if(groups[i].id == hd.parentNode.id)
                        this.toggleGroup(hd.parentNode);
                    else
                        this.toggleGroup(groups[i], false);
                }
            }
        }
    })

 	var LaminateStore = new Ext.data.GroupingStore({
        id: 'LaminateStore',
        proxy: new Ext.data.HttpProxy(
            {url: 'Finishes.aspx', method: 'POST'}),
        baseParams:{task: "getLaminate", InitialLaminateCategory: "a"},
        reader: LaminateReader,
        sortInfo:{field: 'Family'},
        groupField:'Family'
    })

    var LaminateCustomGridView = new Ext.grid.EditorGridPanel({
        id: 'LaminateCustomGridView',
        border: false,
        width: 360,
        autoHeight: true,
        enableColumnResize: false,
        enableDragDrop: true,
        sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
        columns: [
            {width: 50, dataIndex: 'Image', renderer: thumbnailRenderer},
            {dataIndex: 'FinishName', hidden: true},
            {width: 175, dataIndex: 'DisplayName'},
            {dataIndex: 'Family', hidden: true},
            {dataIndex: 'LaminateCategory', hidden: true},
            {width: 100, dataIndex: 'UpCharge', renderer: upChargeRenderer},
            {dataIndex: 'Code', hidden: true}
        ],
        store: LaminateStore,
        view: LaminateGroupingView
    });
    //&&&&&&&&&&&&&&&&   LAMINATE TAB &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&

    //&&&&&&&&&&&&&&&&   TRIM TAB &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
    var TrimReader = new Ext.data.JsonReader(
        {root: 'rows'},
        Ext.data.Record.create([
            {name: 'Image'},
		    {name: 'FinishName'},
		    {name: 'DisplayName'},
		    {name: 'RGB'},
		    {name: 'Code'}
        ])
    );
    
 	var TrimStore = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy(
            {url: 'Finishes.aspx', method: 'POST'}),
        baseParams:{task: "getTrim"},
        reader: TrimReader
    })
    
    var TrimCustomGridView = new Ext.grid.EditorGridPanel({
        id: 'TrimCustomGridView',
        border: false,
        width: 360,
        autoHeight: true,
        enableColumnResize: false,
        enableDragDrop: true,
        sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
        view: new Ext.grid.GridView({
            getRowClass : function (row, index) {
                return 'pCursor'; 
            }
        }),
        columns: [
            {width: 75, dataIndex: 'Image', renderer: thumbnailRenderer},
            {dataIndex: 'FinishName', hidden: true},
            {width: 250, dataIndex: 'DisplayName'},
            {dataIndex: 'RGB', hidden: true},
            {dataIndex: 'Code', hidden: true}
        ],
        store: TrimStore
    });
    //&&&&&&&&&&&&&&&&   TRIM TAB &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&

    var FinishesTabs = new Ext.TabPanel({
        id: 'FinishesTabs',
        activeTab: 0,
        deferredRender: true,
        layoutOnTabChange: true,
        border: false,
        autoScroll: false,
        items: [{
            title: 'Steel',
            border: false,
            autoScroll:true,
            layout: 'fit',
            autoHeight: true,
            items: [SteelCustomGridView]
        },{
            title: 'Fabrics',
            border: false,
            autoScroll:true,
            layout: 'fit',
            autoHeight: true,
            tbar: [AllZonesRadio, SelectedZoneRadio, FabricPriceRangeComboBox],
            items: [FabricCustomGridView]
        },{
            title: 'Laminates',
            border: false,
            autoScroll:true,
            layout: 'fit',
            autoHeight: true,
            tbar: [LaminatePriceRangeComboBox],
            items: [LaminateCustomGridView]
        },{
            title: 'Trim',
            border: false,
            autoScroll:true,
            layout: 'fit',
            autoHeight: true,
            items: [TrimCustomGridView]
        }]
    });
    
    var isSteelLoaded = false;
    var isFabricsLoaded = false;
    var isLaminatesLoaded = false;
    var isTrimLoaded = false;
    
    //var loadMask = new Ext.LoadMask(Ext.getBody(), {removeMask:true});
    FinishesTabs.on('tabchange', function(tp, newTab){
        if(newTab.title == "Steel" && isSteelLoaded == false)
        {
            SteelStore.load();
            isSteelLoaded = true;
        }
        else if(newTab.title == "Fabrics" && isFabricsLoaded == false)
        {
            //loadMask.msg = "Loading Fabrics..."
            //loadMask.show();
            
            ShowWindow();
            FabricStore.load();
            FabricStore.on("load", function(){
                //loadMask.hide();
                HideWindow();
                isFabricsLoaded = true;
            });
            
        }
        else if(newTab.title == "Laminates" && isLaminatesLoaded == false)
        {
            //loadMask.msg = "Loading Laminates..."
            //loadMask.show();
            ShowWindow();
            LaminateStore.load();
            LaminateStore.on("load", function(){
                //loadMask.hide();
                HideWindow();
                isLaminatesLoaded = true;
            });
        }
        else if(newTab.title == "Trim" && isTrimLoaded == false)
        {
            //loadMask.msg = "Loading Trim..."
            //loadMask.show();
            ShowWindow();
            TrimStore.load();
            TrimStore.on("load", function(){
                //loadMask.hide();
                HideWindow();
                isTrimLoaded = true;
            });
        }
    });
    

    var FinishesPanel = new Ext.Panel({
        id : 'FinishesPanel',
        title: 'Apply Finishes',
        border: false,
        collapsed: true,
        collapsible: true,
        titleCollapse: true,
        hideCollapseTool: true,
        iconCls: 'stepThree',
        items: [FinishesTabs]
    });
    //------------------------------------------------------------------------------------------------------
    
    //------------------------------------------------------------------------------------------------------
    //FINALIZE YOUR PRESENTATION
    var findadealerButton = new Ext.Button({
        id: 'findadealerButton',
        text: 'Find a Dealer',
        cls: 'dealerInfo-text-icon',
        handler: function(){
            window.open("http://www.mayline.com/dealers/index.html", "dealer");
        }
    });
    
    findadealerButton.on("mouseover", function(){
        findadealerButton.removeClass("dealerInfo-text-icon");
        findadealerButton.addClass("dealerInfomOver-text-icon");
    });
    findadealerButton.on("mouseout", function(){
        findadealerButton.removeClass("dealerInfomOver-text-icon");
        findadealerButton.addClass("dealerInfo-text-icon");
    });
    
    
    var endUser = new Ext.FormPanel({
        id: 'endUser',
        height: 180,
        labelWidth: 90,
        frame:true,
        bodyStyle:'padding:5px 5px 0',
        defaultType: 'textfield',
        items: [{
                id: 'endUserFName',
                width: 165,
                fieldLabel: 'First Name',
                selectOnFocus: true,
                value: ''
            },{
                id: 'endUserLName',
                width: 165,
                fieldLabel: 'Last Name',
                selectOnFocus: true,
                value: ''
            },{
                id: 'endUserCompany',
                width: 165,
                fieldLabel: 'Company',
                selectOnFocus: true,
                value: ''
            },{
                id: 'endUserTelephone',
                width: 165,
                fieldLabel: 'Telephone',
                selectOnFocus: true,
                value: ''
            },{
                id: 'endUserEmail',
                width: 165,
                fieldLabel: 'Email',
                selectOnFocus: true,
                value: ''
            }
        ]
    });
    

    var dealerInfo = new Ext.FormPanel(
    {
        id: 'dealerInfo',
        frame:true,
        bodyStyle:'padding:5px 5px 0',
        labelWidth: 150,
        layout: 'table',
        layoutConfig: {
          columns: 2,
          valign: 'top'
        },
        items: 
        [
            {
                layout: 'form',
                width: 320,
                autoHeight: true,
                items:
                [
                    {
                        id: 'dealerFName',
                        xtype: 'textfield',
                        width: 165,
                        fieldLabel: 'First Name',
                        selectOnFocus: true,
                        value: ''
                    }
                ]
            },
            {
                autoWidth: true,
                autoHeight: true,
                html: '<span style="padding:7px;"><img src="Graphics/x.gif" /></span>'
            },
            {
                layout: 'form',
                width: 320,
                autoHeight: true,
                items:
                [
                    {
                        id: 'dealerLName',
                        xtype: 'textfield',
                        width: 165,
                        fieldLabel: 'Last Name',
                        selectOnFocus: true,
                        value: ''
                    }
                ]
            },
            {
                autoWidth: true,
                autoHeight: true,
                html: '<span style="padding:7px;"><img src="Graphics/x.gif" /></span>'
            },
            {
                layout: 'form',
                width: 320,
                autoHeight: true,
                items:
                [
                    {
                        id: 'dealerCompany',
                        xtype: 'textfield',
                        width: 165,
                        fieldLabel: 'Company',
                        selectOnFocus: true,
                        value: ''
                    }
                ]
            },
            {
                autoWidth: true,
                autoHeight: true,
                html: '<span style="padding:7px;"><img src="Graphics/x.gif" /></span>'
            },
            {
                layout: 'form',
                width: 320,
                autoHeight: true,
                items:
                [
                    {
                        id: 'dealerTelephone',
                        xtype: 'textfield',
                        width: 165,
                        fieldLabel: 'Telephone',
                        selectOnFocus: true,
                        value: ''
                    }
                ]
            },
            {
                autoWidth: true,
                autoHeight: true,
                html: '<span style="padding:7px;"><img src="Graphics/x.gif" /></span>'
            },
            {
                layout: 'form',
                width: 320,
                autoHeight: true,
                items:
                [
                    {
                        id: 'dealerEmail',
                        xtype: 'textfield',
                        width: 165,
                        fieldLabel: 'Email',
                        selectOnFocus: true,
                        value: ''
                    }
                ]
            },
            {
                autoWidth: true,
                autoHeight: true,
                html: '<span style="padding:7px;"><img src="Graphics/x.gif" /></span>'
            },
            {
                layout: 'form',
                width: 320,
                autoHeight: true,
                items:
                [
                    {
                        id: 'whiteGloveService',
                        xtype: 'checkbox',
                        fieldLabel: 'White Glove Service',
                        selectOnFonscus: true,
                        enableKeyEvents: true
                    }
                ]
            },
            {
                id: 'whiteGloveServiceInfo',
                xtype: 'button',
                icon: 'Graphics/info_ico.gif',
                cls: 'info-text-icon'
            },
            {
                layout: 'form',
                width: 320,
                autoHeight: true,
                items:
                [
                    {
                        id: 'freightCharges',
                        xtype: 'textfield',
                        width: 165,
                        fieldLabel: 'Freight Charges',
                        selectOnFocus: true,
                        enableKeyEvents: true,
                        value: ''
                    }
                ]
            },
            {
                id: 'freightChargesInfo',
                xtype: 'button',
                icon: 'Graphics/info_ico.gif',
                cls: 'info-text-icon'
            },
            {
                layout: 'form',
                width: 320,
                autoHeight: true,
                items:
                [
                    {
                        id: 'installationCharge',
                        xtype: 'textfield',
                        width: 165,
                        fieldLabel: 'Dealer Installation Charges',
                        selectOnFocus: true,
                        enableKeyEvents: true,
                        value: ''
                    }
                ]
            },
            {
                autoWidth: true,
                autoHeight: true,
                html: '<span style="padding:7px;"><img src="Graphics/x.gif" /></span>'
            },
            {
                layout: 'form',
                width: 320,
                autoHeight: true,
                items:
                [
                    {
                        id: 'dealerDiscount',
                        xtype: 'textfield',
                        width: 165,
                        fieldLabel: 'Apply Discount (% of List price)',
                        selectOnFocus: true,
                        enableKeyEvents: true,
                        value: ''
                    }
                ]
            },
            {
                autoWidth: true,
                autoHeight: true,
                html: '<span style="padding:7px;"><img src="Graphics/x.gif" /></span>'
            }
        ]
    });
    
    Ext.getCmp('whiteGloveServiceInfo').on("click", function(){
        var wgsWin = new Ext.Window({
            id: 'wgsWin',
            title: 'White Glove Service Information',
            border: true,
            modal: true,
            draggable: true,
            closable:  true,
            resizable: false,
            width:615,
            height:419,
            html: "<img src='Graphics/White_Glove_Text_Info.gif' alt=''/>"
        });
        wgsWin.show();
    });
    
    Ext.getCmp('freightChargesInfo').on("click", function(){
        var fWin = new Ext.Window({
            id: 'fWin',
            title: 'Freight Charges Information',
            border: true,
            modal: true,
            draggable: true,
            closable:  true,
            resizable: false,
            width:605,
            height:474,
            html: "<img src='Graphics/Shipping_Info.gif' alt=''/>"
        });
        fWin.show();
    });
    
    //White Glove Service Calculations
    Ext.getCmp('whiteGloveService').on("check", function(obj, checked){
        if(checked)
        {
            Ext.getCmp('freightCharges').setValue("");
            Ext.getCmp('freightCharges').setDisabled(true);
            Ext.getCmp('installationCharge').setValue("");
            Ext.getCmp('installationCharge').setDisabled(true);
        }
        else
        {
            Ext.getCmp('freightCharges').setValue(gFreightCharges);
            Ext.getCmp('freightCharges').setDisabled(false);
            Ext.getCmp('installationCharge').setDisabled(false);
        }
    });
    
    var PresentationTabs = new Ext.TabPanel({
        id: 'PresentationTabs',
        activeTab: 0,
        deferredRender:false,
        border: false,
        autoScroll: false,
        items: [{
            title: 'End User',
            border: false,
            autoScroll:true,
            layout: 'fit',
            autoHeight: true,
            tbar: [findadealerButton],
            items: [endUser]
        },{
            title: 'Dealer Info',
            border: false,
            autoScroll:true,
            layout: 'fit',
            autoHeight: true,
            items: [dealerInfo]
        }]
    });
    
    function CheckForUserDealerInfoErrors()
    {
        var _installationCharge = Ext.getCmp('installationCharge').getValue() + '';
        _installationCharge = _installationCharge.replace(/ /g, ""); //Remove white spaces
        Ext.getCmp('installationCharge').setValue(_installationCharge);
        
        var _freightCharges = Ext.getCmp('freightCharges').getValue() + '';
        _freightCharges = _freightCharges.replace(/ /g, ""); //Remove white spaces
        Ext.getCmp('freightCharges').setValue(_freightCharges);
        
        var _dealerDiscount = Ext.getCmp('dealerDiscount').getValue() + '';
        _dealerDiscount = _dealerDiscount.replace(/ /g, ""); //Remove white spaces
        Ext.getCmp('dealerDiscount').setValue(_dealerDiscount);
        
        if(!validateNumber(_installationCharge))//validate installation charges
        {
             Ext.Msg.show({
                   title: "Installation Charges",
                   msg: "Please enter (0..9) and/or '.'",
                   icon: Ext.MessageBox.ERROR,
                   buttons: Ext.MessageBox.OK
            });
            
            return false;
        }
        else if(!validateNumber(_freightCharges))//validate freight charges
        {
             Ext.Msg.show({
                   title: "Freight Charges",
                   msg: "Please enter (0..9) and/or '.'",
                   icon: Ext.MessageBox.ERROR,
                   buttons: Ext.MessageBox.OK
            });
            
            return false;
        }
        else if(!validateNumber(_dealerDiscount))//validate dealer's discount
        {
             Ext.Msg.show({
                   title: "Dealer's Discount",
                   msg: "Please enter (0..9) and/or '.'",
                   icon: Ext.MessageBox.ERROR,
                   buttons: Ext.MessageBox.OK
            });
            
            return false;
        }
        else
        {
           return true;
        }
    }
    
    var savePDFButton = new Ext.Button({
        id: 'savePDFButton',
        text: 'Preview PDF',
        handler: function()
        {
            if(CheckForUserDealerInfoErrors())
            {
                CallServerAndRenderPDF();
                /*
                Ext.Msg.confirm('Confirm', 'It may take ~10 seconds to prepare a PDF. Click Yes to confirm or No to Cancel?', function(btn){
                    if (btn == 'yes'){
                        
                    }
                });
                */
            }
        }
    });
    
    var emailPDFButton = new Ext.Button({
        id: 'emailPDFButton',
        text: 'Email PDF',
        handler: function()
        {
            if(CheckForUserDealerInfoErrors())
            {
                var win = new Ext.Window({
                    id: 'EmailWin',
                    title: 'Email PDF',
                    modal: true, 
                    resizable: false,
                    closable:true,
                    width:400,
                    height:200,
                    items: [Info()]
                });
                win.show();
                /*
                Ext.Msg.confirm('Confirm', 'It may take ~10 seconds to prepare a PDF and Email. Click Yes to confirm or No to Cancel?', function(btn)
                {
                    if (btn == 'yes'){
                         
                    }
                });
                */
            }
        }
    });
    
    function Info(){
        return new Ext.FormPanel({
            title: 'Please enter the email address of the client you would like to reach, then press send. You will receive an acknowledgement when the email has been sent.',
            height: 150,
            labelWidth: 50,
            frame:true,
            bodyStyle:'padding:5px 5px 0',
            defaultType: 'textfield',
            items: [{
                    id: 'PDFEmailAdd',
                    fieldLabel: 'Email',
                    name: 'Email',
                    value: '',
                    width: 300
            }],
            buttonAlign: 'center',
            buttons:[{
                text:'Send',
                handler: function(){
                    //To Email Address
                    var _emailAddress = Ext.getCmp('PDFEmailAdd').getValue();
                    if(validateEmail(_emailAddress))
                        CallServerAndRenderEmailPDF();
                    else
                        Ext.Msg.alert('Invalid Email Address', 'Please provide a valid email address');
                }
             },{
                text:'Clear',
                handler: function(){
                    Ext.getCmp('PDFEmailAdd').setValue('');
                }
             }
            ]
        });
    }
    
    var PresentationsPanel = new Ext.Panel({
        id : 'PresentationsPanel',
        title: 'Finalize Your Presentation',
        border: false,
        collapsed: true,
        collapsible: true,
        titleCollapse: true,
        hideCollapseTool: true,
        iconCls: 'stepFour',
        items: [PresentationTabs],
        bbar: [savePDFButton, emailPDFButton]
    });    
    
    var OptionsPanel = new Ext.Panel({
        id : 'OptionsPanel',
        region: 'south',
        border: false,
        overflow:'scroll',
        autoScroll: true,
        scrollbar: 'visible',
        items: [BeginConfigHeader, TypicalsPanel, ComponentsPanel, FinishesPanel, PresentationsPanel]
    });
    //------------------------------------------------------------------------------------------
    
    
    //------------------------------------------------------------------------------------------------------
    //MAIN-WEST-SOUTH
    var PricingPanel = new Ext.Panel({
        id : 'PricingPanel',
        border: false,
        height: 42,
        html: '<br /> <table border="0" cellpadding ="0" cellspacing="0" style="background-image:url(Graphics/ListPrice_Header.jpg)"><tr><td id="TotalPrice" align="right" style="width:396px; height:28px; font-size: 18px; color: White;">&nbsp;&nbsp;</td><td align="right" style="width:10px;"><img src="Graphics/x.gif" /></td></tr></table>'
    });
    
    //------------------------------------------------------------------------------------------------------
    
    var WestArea = new Ext.Panel({
        id : 'WestArea',
        border: true,
        layout: 'border',
        width: 400,
        height: 600,
        items:
            [{
                id: 'HeaderSpot',
                region: 'north',
                border: true,
			    height: 181,
			    maxHeight: 181,
			    split: true,
			    collapsible: true,
			    collapseMode: 'mini',
			    collapsed: false,
			    items: [OverviewPanel]
		     },{
		        region: 'center',
                border: true,
			    layout: 'fit',
			    items: [OptionsPanel]
            }
		     ,{
		        id: 'PriceListSpot',
		        region: 'south',
                border: true,
			    height: 85,
			    maxHeight: 85,
			    split: true,
			    collapsible: true,
			    collapseMode: 'mini',
			    collapsed: true,
			    autoScroll: true, 
			    items: [PricingPanel]
            }]
    });
    
    //------------------------------------------------------------------------------------------------------
    //Only one panel open at a time
    TypicalsPanel.on("expand", function(p){
        ComponentsPanel.collapse(true);
        FinishesPanel.collapse(true);
        PresentationsPanel.collapse(true);
        
        isComponentsPanelExpanded = false;
        if(isStationSelected == true)
        {
            if(isMultiUser == true && isPrivateOffice == false)
            {
                DisplayAvailableConfigurations(0)
            }
            else if(isMultiUser == false && isPrivateOffice == true)
            {
                DisplayAvailableConfigurations(1)
            }
        }
    });
    ComponentsPanel.on("beforeexpand", StationNotSelected);
    ComponentsPanel.on("expand", function(p){
        TypicalsPanel.collapse(true);
        FinishesPanel.collapse(true);
        PresentationsPanel.collapse(true);
        
        isComponentsPanelExpanded = true;
        DisplayConfiguredTypical();
    });
    
    FinishesPanel.on("beforeexpand", StationNotSelected);
    FinishesPanel.on("expand", function(p){
        TypicalsPanel.collapse(true);
        ComponentsPanel.collapse(true);
        PresentationsPanel.collapse(true);
        
        isComponentsPanelExpanded = false;
        DisplayConfiguredTypical();
    });
    
    PresentationsPanel.on("beforeexpand", StationNotSelected); 
    PresentationsPanel.on("expand", function(p){
        TypicalsPanel.collapse(true);
        ComponentsPanel.collapse(true);
        FinishesPanel.collapse(true);
        
        isComponentsPanelExpanded = false;
        DisplayConfiguredTypical();
    });
    function DisplayConfiguredTypical()
    {
        AllZonesRadio.setValue(true);
        SelectedZoneRadio.setValue(false);
        AllSectionsRadio.setValue(true);
        SelectedSectionRadio.setValue(false);
    
        document.getElementById("ScreenResPanel").style.display = "block"
        
        document.getElementById("1").style.display = "none";
        document.getElementById("2").style.display = "none";
        document.getElementById("3").style.display = "block";
    }
    var isAnimation = false;
    function StationNotSelected()
    {
        if(isStationSelected == false)
        {
            TypicalsPanel.expand(true);
            if(document.getElementById("1").style.display == "block")
            {
                if(document.getElementById("1").style.display = "block")
                {
                    isAnimation = true;
                    document.getElementById("1").style.display = "none"
                }
            }
            else
                isAnimation = false;
            
            Ext.Msg.show({
               title: 'Station',
               msg: 'Please select a station',
               icon: Ext.MessageBox.ERROR,
               buttons: Ext.MessageBox.OK,
               fn: showResultText
            });
            return false;
        }
        else
            return true;
    }
    function showResultText(btn, text)
    {
        if(btn == 'ok'){
            if(isAnimation == true)
                document.getElementById("1").style.display = "block"
        }
    };
    
    //------------------------------------------------------------------------------------------------------
    var Main = new Ext.Viewport({
        id : 'Main',
	    border: false,
	    layout: 'border',
        items:
            [{
                region: 'north',
                border: false,
			    width: 1000,
			    height: 100,
			    items: [
			        {
			            id : 'Header',
			            xtype: 'panel',
			            border: false,
			            html: '<img src="Graphics/TitleBar.jpg" />'}]
                    },
                    {
                        region: 'west',
                        border: false,
                        width: 400,
                        layout: 'fit',
                        items: [WestArea]
                    },
                    {
                        region: 'center',
                        border: false,
                        width: 800,
                        height: 500,
                        items: [
                            {
                                id: 'ScreenResPanel',
                                xtype: 'panel',
                                border: false,
                                html: '<img id="ScreenResInfo" class="pCursor" src="Graphics/Customized-Station-Bar.gif" width="800px" height="18px" />'
                            },
                            {
                                id : 'CenterArea',
                                xtype: 'panel',
                                border: false,
                                contentEl: 'renderArea'
                            }
                        ]
                    }
                ]
        });
        
        //Screen Resolution
        document.getElementById("ScreenResPanel").style.display = "none"
        Ext.get('ScreenResPanel').on("mouseover", function(){
            document.getElementById('ScreenResInfo').src = 'Graphics/Customized-Station-Bar_MouseOver.gif'
        });
        Ext.get('ScreenResPanel').on("mouseout", function(){
            document.getElementById('ScreenResInfo').src = 'Graphics/Customized-Station-Bar.gif'
        });
        Ext.get('ScreenResPanel').on("click", function(){
            
            var ScreenResPanel = new Ext.Window({
                id: "screenRes",
                title: "Screen Resolution",
                border: false,
                modal: true,
                draggable: true,
                closable:  true,
                resizable: false,
                width:415,
                //height:100,
                autoHeight: true,
                buttonAlign: "center" ,
                buttons: [
                    {
                        text: 'OK',
                        handler: function(){
                            ScreenResPanel.close();
                        }
                    },
                    {
                        text: 'Changing Your Resolution',
                        handler: function(){
                            ScreenResPanel.close();
                            var screnResInfo = new Ext.Window({
                                id: 'screnResInfo',
                                title: 'Screen Resolution',
                                border: true,
                                modal: true,
                                draggable: true,
                                closable: true,
                                resizable: false,
                                width:835,
                                height:550,
                                autoScroll: true, 
                                html: "<img src='Graphics/CSII_Screen_Resolution_Info.jpg' alt=''/>"
                            });
                            screnResInfo.show();
                        }
                    }
                ],
                html: "<div>The application is best viewed in screen resolution 1152 x 864 and above. Adjust the screen resolution of your monitor accordingly.</div>"
            });
            ScreenResPanel.show();
        });
    //-------------------------------------------------------------------------------------------------
    //EVENTS
    //When either multi user or private office is selected
    TypicalsCustomGridView.addListener('rowclick', function(grid, index, e)
    {
        DisplayAvailableConfigurations(index);
    });
    
    function DisplayAvailableConfigurations(index)
    {
        document.getElementById("1").style.display = "none";
        document.getElementById("2").style.display = "block";
        document.getElementById("3").style.display = "none";
        
        document.getElementById("ScreenResPanel").style.display = "none"
        if(index == 0)
        {
            document.getElementById('multi_user').style.display = "block";
            document.getElementById('private_user').style.display = "none";
            isMultiUser = true;
            isPrivateOffice = false;
        }
        else if(index == 1)
        {
            document.getElementById('multi_user').style.display = "none";
            document.getElementById('private_user').style.display = "block";
            isMultiUser = false;
            isPrivateOffice = true;
        }
    }
}