//##########################################################################################################
function Typical31_Views_InitializeDragandDrop(){

    var record = null;
    var code = null;
    
    //Drag & Drop
    Ext.override(Ext.dd.DragSource, {
        onBeforeDrag : function(data, e) {
        
            var dragEl = Ext.get(this.getDragEl());
            dragEl.applyStyles({border:'','z-index':2000});
            var el = Ext.get(this.getEl());
        
            record = data.selections[0]
            code = record.get("Code")
            
            var imagePath = record.get("Image")
            dragEl.update("<img id='DragImage' src='" + imagePath + "' alt=''/>");
        },
        
        onDrag: function(e){
            isIconDrag = true;
            
            var element = Ext.get("renderArea").getXY()
            var widthFromOrigin = element[0]
            var heightFromOrigin = element[1]

            var mousepx = e.getXY(); //with respect to page
            var X1px = mousepx[0] - widthFromOrigin;
            var Y1px = mousepx[1] - heightFromOrigin;
            
            //Outside the rendered image
            DisplayPNG(document.getElementById('layerImg'), "Graphics/x.gif");
            if(X1px >= 0 && X1px <= 800 && Y1px >= 0 && Y1px <= 500)
            {
                if(code == "Steel")
                {
                    DisplayPNG(document.getElementById('layerImg'), "Typicals/Typical" + currentTypical + "/View" + currentView + "/Masks/Global.png");
                }
                else if(code == "Fabric")
                {   
                    //Check if the drag element is a finish or component
                    if(AllZonesRadio.getValue() == true)
                    {
                        DisplayPNG(document.getElementById('layerImg'), "Typicals/Typical" + currentTypical + "/View" + currentView + "/Masks/Zones.png");
                    }
                    else if(SelectedZoneRadio.getValue()  == true)
                    {
                        if(isTypical31Object(currentView, "Zone1", X1px, Y1px))
                        {
                            DisplayPNG(document.getElementById('layerImg'), "Typicals/Typical" + currentTypical + "/View" + currentView + "/Masks/Zone1.png");
                        }
                        else if(isTypical31Object(currentView, "Zone2", X1px, Y1px))
                        {
                            DisplayPNG(document.getElementById('layerImg'), "Typicals/Typical" + currentTypical + "/View" + currentView + "/Masks/Zone2.png");
                        }
                    }
                }
                else if(code == "Laminate")
                {
                    DisplayPNG(document.getElementById('layerImg'), "Typicals/Typical" + currentTypical + "/View" + currentView + "/Masks/Worksurface.png");
                }
                else if(code == "Trim")
                {
                    DisplayPNG(document.getElementById('layerImg'), "Typicals/Typical" + currentTypical + "/View" + currentView + "/Masks/Global.png");
                }
                else if(code == "Accessories")
                {
                }
                else if(code == "Chair")
                {
                }
                else if(code == "Modesty_Panel")
                {
                    DisplayPNG(document.getElementById('layerImg'), "Typicals/Typical" + currentTypical + "/View" + currentView + "/Masks/Modesty_Panels.png");
                }
                else if(code == "Stackable_Fabric_Panel")
                {
                    DisplayPNG(document.getElementById('layerImg'), "Typicals/Typical" + currentTypical + "/View" + currentView + "/Masks/Stackable_Fabric_Panels.png");
                }
                else if(code == "Below_Surface_Storage")
                {
                    var code1 = record.get("Code1")
                    if(AllSectionsRadio.getValue()  == true)
                    {
                        if(isTypical31Object(currentView, "LS_AllViews", X1px, Y1px))
                        {
                            if(code1 == "A" || code1 == "B" || code1 == "C" || code1 == "D" || code1 == "E")
                            {
                                //Storage 1
                                DisplayPNG(document.getElementById('layerImg'), "Typicals/Typical" + currentTypical + "/View" + currentView + "/Masks/LS_AllViews.png");
                            }
                        }
                        else  if(isTypical31Object(currentView, "CS_AllViews", X1px, Y1px))
                        {
                            if(code1 == "A" || code1 == "B" || code1 == "C" || code1 == "D" || code1 == "E")
                            {
                                //Storage 2
                                DisplayPNG(document.getElementById('layerImg'), "Typicals/Typical" + currentTypical + "/View" + currentView + "/Masks/CS_AllViews.png");
                            }
                        }
                    }
                    else if(code == "Below_Surface_Storage")
                    {
                        var code1 = record.get("Code1")
                        if(AllSectionsRadio.getValue() == true)
                        {
                            if(isTypical31Object(currentView, "LS_AllViews", X1px, Y1px))
                            {
                                //Storage 1
                                if(code1 == "A" || code1 == "B" || code1 == "C" || code1 == "D" || code1 == "E")
                                {
                                    DisplayPNG(document.getElementById('layerImg'), "Typicals/Typical" + currentTypical + "/View" + currentView + "/Masks/LS_AllViews.png");
                                }
                            }
                            else if(isTypical31Object(currentView, "CS_AllViews", X1px, Y1px))
                            {
                                //Storage 2
                                if(code1 == "A" || code1 == "B" || code1 == "C" || code1 == "D" || code1 == "E")
                                {
                                    DisplayPNG(document.getElementById('layerImg'), "Typicals/Typical" + currentTypical + "/View" + currentView + "/Masks/CS_AllViews.png");
                                }
                            }
                        }
                        else if(SelectedSectionRadio.getValue()  == true)
                        {
                            if(isTypical31Object(currentView, "LS_SelectedView", X1px, Y1px))
                            {
                                //Storage 1 -- Selected View
                                if(code1 == "A" || code1 == "B" || code1 == "C" || code1 == "D" || code1 == "E")
                                {
                                    DisplayPNG(document.getElementById('layerImg'), "Typicals/Typical" + currentTypical + "/View" + currentView + "/Masks/LS_SelectedView.png");
                                }
                            }
                            else if(isTypical31Object(currentView, "CS_SelectedView", X1px, Y1px))
                            {
                                //Storage 2 -- Selected View
                                if(code1 == "A" || code1 == "B" || code1 == "C" || code1 == "D" || code1 == "E")
                                {
                                    DisplayPNG(document.getElementById('layerImg'), "Typicals/Typical" + currentTypical + "/View" + currentView + "/Masks/CS_SelectedView.png");
                                }
                            }
                        }
                    }
                }
            }
        },
        
        onMouseUp: function(e){
            isIconDrag = false;
        
            var element = Ext.get("renderArea").getXY()
            var widthFromOrigin = element[0]
            var heightFromOrigin = element[1]

            var mousepx = e.getXY(); //with respect to page
            var X1px = mousepx[0] - widthFromOrigin;
            var Y1px = mousepx[1] - heightFromOrigin;
            
            //Within the rendered image
            if(X1px >= 0 && X1px <= 800 && Y1px >= 0 && Y1px <= 500)
            {
                if(code == "Steel")
                {
                    var rgb = record.get("RGB");
                    paintColor = rgb;
                    
                    RenderTypical31Image();
                }
                else if(code == "Fabric")
                {
                    //dataIndex: Image, FinishName, DisplayName, Family, FabricCategory, UpCharge, Code
                    var finishName = record.get("FinishName")
                    fName = finishName;
                    var FabricUpCharge = record.get("UpCharge");
                    
                    //Check if the drag element is a finish or component
                    if(AllZonesRadio.getValue() == true)
                    {
                        zone1Mat = fName;
                        zone1T31MatUpCharge = FabricUpCharge;
                        zone2Mat = fName;
                        zone2T31MatUpCharge = FabricUpCharge;
                        
                        RenderTypical31Image();
                    }
                    else if(SelectedZoneRadio.getValue()  == true)
                    {
                        if(isTypical31Object(currentView, "Zone1", X1px, Y1px))
                        {
                            //Zone1
                            zone1Mat = fName;
                            zone1T31MatUpCharge = FabricUpCharge;
                            RenderTypical31Image();
                        }
                        else if(isTypical31Object(currentView, "Zone2", X1px, Y1px))
                        {
                            //Zone2
                            zone2Mat = fName;
                            zone2T31MatUpCharge = FabricUpCharge;
                            RenderTypical31Image();
                        }
                    }
                }
                else if(code == "Laminate")
                {
                    var finishName = record.get("FinishName")
                    worksurfaceFinish = finishName;
                    
                    RenderTypical31Image();
                }
                else if(code == "Trim")
                {
                    var rgb = record.get("RGB");
                    trimColor = rgb;
                    
                    RenderTypical31Image();
                }
                else if(code == "Accessories")
                {
                    alert('Not yet implemented');
                }
                else if(code == "Chair")
                {
                    alert('Not yet implemented');
                }
                else if(code == "Modesty_Panel")
                {
                    var code1 = record.get("Code1")
                    if(code1 == "1")
                    {
                       if(isT31ModestyPanel == true)
                        {
                            T31S1Storage1 = parseInt(T31S1Storage1) + 1;
                            T31S1Storage2 = parseInt(T31S1Storage2) + 1;
                            T31S2Storage1 = parseInt(T31S2Storage1) + 1;
                            T31S2Storage2 = parseInt(T31S2Storage2) + 1;
                            
                            isT31ModestyPanel = false;
                            RebuildTypical31BelowSurfaceStorage();
                        }
                    }
                    else if(code1 = "2")
                    {
                        if(isT31ModestyPanel == false)
                        {
                            T31S1Storage1 = parseInt(T31S1Storage1) - 1;
                            T31S1Storage2 = parseInt(T31S1Storage2) - 1;
                            T31S2Storage1 = parseInt(T31S2Storage1) - 1;
                            T31S2Storage2 = parseInt(T31S2Storage2) - 1;
                            
                            isT31ModestyPanel = true;
                            RebuildTypical31BelowSurfaceStorage();
                        }
                    }
                }
                else if(code == "Stackable_Fabric_Panel")
                {
                    //dataIndex: Image, DisplayName, Category, Code, Code1
                    var code1 = record.get("Code1")
                    var configNo = "";
                    if(code1 == "1")
                    {
                        S1_E = "000";
                        S2_E = "000";
                        
                        isT31PrivacyPanel = false;
                        RenderTypical31Image();
                    }
                    else if(code1 == "2")
                    {
                        S1_E = "006";
                        S2_E = "006";
                        
                        isT31PrivacyPanel = true;
                        RenderTypical31Image();
                    }
                    else if(code1 == "3")
                    {
                        S1_E = "005";
                        S2_E = "005";
                        
                        isT31PrivacyPanel = true;
                        RenderTypical31Image();
                    }
                    else if(code1 == "4")
                    {
                        S1_E = "004";
                        S2_E = "004";
                        
                        isT31PrivacyPanel = true;
                        RenderTypical31Image();
                    }
                    else if(code1 == "5")
                    {
                        S1_E = "003";
                        S2_E = "003";
                        
                        isT31PrivacyPanel = true;
                        RenderTypical31Image();
                    }
                    else if(code1 == "6")
                    {
                        S1_E = "002";
                        S2_E = "002";
                        
                        isT31PrivacyPanel = true;
                        RenderTypical31Image();
                    }
                    else if(code1 == "7")
                    {
                        S1_E = "001";
                        S2_E = "001";
                        
                        isT31PrivacyPanel = true;
                        RenderTypical31Image();
                    }
                }
                else if(code == "Below_Surface_Storage")
                {
                    var code1 = record.get("Code1");
                    
                    if(AllSectionsRadio.getValue()  == true)
                    {
                        if(isTypical31Object(currentView, "LS_AllViews", X1px, Y1px))
                        {
                            //Storage 1
                            if(code1 == "A" || code1 == "B" || code1 == "C" || code1 == "D" || code1 == "E")
                            {
                                var temp = -1;
                                if(isT31ModestyPanel == true)
                                {
                                    if(code1 == "A")
                                        temp = "53";
                                    else if(code1 == "B")
                                        temp = "55";
                                    else if(code1 == "C")
                                        temp = "57";
                                    else if(code1 == "D")
                                        temp = "59";
                                    else if(code1 == "E")
                                        temp = "61";
                                }
                                else if(isT31ModestyPanel == false)
                                {
                                    if(code1 == "A")
                                        temp = "54";
                                    else if(code1 == "B")
                                        temp = "56";
                                    else if(code1 == "C")
                                        temp = "58";
                                    else if(code1 == "D")
                                        temp = "60";
                                    else if(code1 == "E")
                                        temp = "62";
                                }
                                
                                T31S1Storage1 = temp;
                                T31S2Storage1 = temp;
                                RebuildTypical31BelowSurfaceStorage();
                            }
                        }
                        else if(isTypical31Object(currentView, "CS_AllViews", X1px, Y1px))
                        {
                            //Storage 2
                            var temp = -1;
                            if(code1 == "A" || code1 == "B" || code1 == "C" || code1 == "D" || code1 == "E")
                            {
                                if(isT31ModestyPanel == true)
                                {
                                    if(code1 == "A")
                                        temp = "3";
                                    else if(code1 == "B")
                                        temp = "5";
                                    else if(code1 == "C")
                                        temp = "7";
                                    else if(code1 == "D")
                                        temp = "9";
                                    else if(code1 == "E")
                                        temp = "11";
                                }
                                else if(isT31ModestyPanel == false)
                                {
                                    if(code1 == "A")
                                        temp = "4";
                                    else if(code1 == "B")
                                        temp = "6";
                                    else if(code1 == "C")
                                        temp = "8";
                                    else if(code1 == "D")
                                        temp = "10";
                                    else if(code1 == "E")
                                        temp = "12";
                                }
                                
                                T31S1Storage2 = temp;
                                T31S2Storage2 = temp;
                                RebuildTypical31BelowSurfaceStorage();
                            }
                        }
                    }
                    else if(SelectedSectionRadio.getValue()  == true)
                    {
                        if(isTypical31Object(currentView, "LS_SelectedView", X1px, Y1px))
                        {
                            //Storage 1 -- Selected View
                            if(code1 == "A" || code1 == "B" || code1 == "C" || code1 == "D" || code1 == "E")
                            {
                                var temp = -1;
                                if(isT31ModestyPanel == true)
                                {
                                    if(code1 == "A")
                                        temp = "53";
                                    else if(code1 == "B")
                                        temp = "55";
                                    else if(code1 == "C")
                                        temp = "57";
                                    else if(code1 == "D")
                                        temp = "59";
                                    else if(code1 == "E")
                                        temp = "61";
                                }
                                else if(isT31ModestyPanel == false)
                                {
                                    if(code1 == "A")
                                        temp = "54";
                                    else if(code1 == "B")
                                        temp = "56";
                                    else if(code1 == "C")
                                        temp = "58";
                                    else if(code1 == "D")
                                        temp = "60";
                                    else if(code1 == "E")
                                        temp = "62";
                                }
                                
                                //Change for Current View
                                if(currentView == "1")
                                    T31S1Storage1 = temp;
                                else if(currentView == "2")
                                    T31S2Storage1 = temp;
                                    
                                RebuildTypical31BelowSurfaceStorage();
                            }
                        }
                        else if(isTypical31Object(currentView, "CS_SelectedView", X1px, Y1px))
                        {
                            //Storage 2 -- Selected View
                            if(code1 == "A" || code1 == "B" || code1 == "C" || code1 == "D" || code1 == "E")
                            {
                                var temp = -1;
                                if(isT31ModestyPanel == true)
                                {
                                    if(code1 == "A")
                                        temp = "3";
                                    else if(code1 == "B")
                                        temp = "5";
                                    else if(code1 == "C")
                                        temp = "7";
                                    else if(code1 == "D")
                                        temp = "9";
                                    else if(code1 == "E")
                                        temp = "11";
                                }
                                else if(isT31ModestyPanel == false)
                                {
                                    if(code1 == "A")
                                        temp = "4";
                                    else if(code1 == "B")
                                        temp = "6";
                                    else if(code1 == "C")
                                        temp = "8";
                                    else if(code1 == "D")
                                        temp = "10";
                                    else if(code1 == "E")
                                        temp = "12";
                                }
                                
                                //Change for Current View
                                if(currentView == "1")
                                    T31S1Storage2 = temp;
                                else if(currentView == "2")
                                    T31S2Storage2 = temp;
                                    
                                RebuildTypical31BelowSurfaceStorage();
                            }
                        }
                    }
                }
            }
            DisplayPNG(document.getElementById('layerImg'), "Graphics/x.gif");
        }
    });
}
//##########################################################################################################

//##########################################################################################################
function Typical31_RemoveComponentsMOver(X1px, Y1px)
{
    if(isComponentsPanelExpanded == true && isIconDrag == false)
    {
        DisplayPNG(document.getElementById('layerImg'), "Graphics/x.gif");
        if(X1px >= 0 && X1px <= 800 && Y1px >= 0 && Y1px <= 500)
        {
            if(AllSectionsRadio.getValue() == true)
            {
                if(isTypical31Object(currentView, "LS_AllViews", X1px, Y1px))//Lower Storage
                {
                    DisplayPNG(document.getElementById('layerImg'), "Typicals/Typical" + currentTypical + "/View" + currentView + "/Masks/LS_AllViews_R.png");
                }
                else if(isTypical31Object(currentView, "CS_AllViews", X1px, Y1px)) //Extended Mask Storage
                {
                    DisplayPNG(document.getElementById('layerImg'), "Typicals/Typical" + currentTypical + "/View" + currentView + "/Masks/CS_AllViews_R.png");
                }
            }
            else if (SelectedSectionRadio.getValue() == true)
            {
                if(isTypical31Object(currentView, "LS_SelectedView", X1px, Y1px))//Lower Storage
                {
                    DisplayPNG(document.getElementById('layerImg'), "Typicals/Typical" + currentTypical + "/View" + currentView + "/Masks/LS_SelectedView_R.png");
                }
                else if(isTypical31Object(currentView, "CS_SelectedView", X1px, Y1px))//Mask Extended Storage
                {
                    DisplayPNG(document.getElementById('layerImg'), "Typicals/Typical" + currentTypical + "/View" + currentView + "/Masks/CS_SelectedView_R.png");
                }
            }
        }
    }
}
function Typical31_RemoveComponentsClick(X1px, Y1px)
{
    if(isComponentsPanelExpanded == true && isIconDrag == false)
    {
        DisplayPNG(document.getElementById('layerImg'), "Graphics/x.gif");
        if(X1px >= 0 && X1px <= 800 && Y1px >= 0 && Y1px <= 500)
        {
            if(AllSectionsRadio.getValue()  == true)
            {
                if(isTypical31Object(currentView, "LS_AllViews", X1px, Y1px))
                {
                    //Storage 1
                    var temp = -1;
                    if(isT31ModestyPanel == true)
                        temp = "51";
                    else if(isT31ModestyPanel == false)
                        temp = "52";

                    T31S1Storage1 = temp;
                    T31S2Storage1 = temp;
                    RebuildTypical31BelowSurfaceStorage();
                }
                else if(isTypical31Object(currentView, "CS_AllViews", X1px, Y1px))
                {
                    //Storage 2
                    var temp = -1;
                    if(isT31ModestyPanel == true)
                        temp = "1";
                    else if(isT31ModestyPanel == false)
                        temp = "2";
                        
                    T31S1Storage2 = temp;
                    T31S2Storage2 = temp;
                    RebuildTypical31BelowSurfaceStorage();
                }
            }
            else if(SelectedSectionRadio.getValue()  == true)
            {
                if(isTypical31Object(currentView, "LS_SelectedView", X1px, Y1px))
                {
                    //Storage 1 -- Selected View
                    var temp = -1;
                    if(isT31ModestyPanel == true)
                        temp = "51";
                    else if(isT31ModestyPanel == false)
                        temp = "52";
                    
                    //Change for Current View
                    if(currentView == "1")
                        T31S1Storage1 = temp;
                    else if(currentView == "2")
                        T31S2Storage1 = temp;
                    RebuildTypical31BelowSurfaceStorage();
                }
                else if(isTypical31Object(currentView, "CS_SelectedView", X1px, Y1px))
                {
                    //Storage 2 -- Selected View
                    var temp = -1;
                    if(isT31ModestyPanel == true)   //Lower Storage
                        temp = "1";
                    else if(isT31ModestyPanel == false)
                        temp = "2";
                    
                    //Change for Current View
                    if(currentView == "1")
                        T31S1Storage2 = temp;
                    else if(currentView == "2")
                        T31S2Storage2 = temp;
                    RebuildTypical31BelowSurfaceStorage();
                }
            }
        }
    }
}
//##########################################################################################################