//
// Data
//
var Specifier;
var SurfaceNames;
var AppliedProducts = new Array();
var CurrentSurface = "";
var CurrentLayer = "";

var RoofProductPage = 1;
var WallProductPage = 1;
var TrimProductPage = 1;
var CurrentSortOrder = 1;
var FilterCost = 0;
var FilterType = 0;
var bRoof = false;
var bWalls = false;
var bTrim = false;
var bRenderPending = false;
var baseelementname = "zibaseelement";
var baseimagename = "zoomableimage";
var bPanning = false;
var Region = "East";
var Lang = "eng";
//
// Methods
//
function GetProductPageURL() 
{
    if (CurrentSurface == "Roof") 
    {
        if (bRoof == true)
            return;
        bRoof = true;

        return "BPProductSelect.aspx?Specifier=" + Specifier + "&SurfaceName=" + CurrentSurface + "&SortOrder=" + CurrentSortOrder + "&Page=" + RoofProductPage + "&FilterCost=" + FilterCost + "&Region=" + Region + "&Language=" + Lang;
    }
    else {
        var ProductPage = 1;
        if (CurrentSurface == "Walls") {
            if (bWalls == true)
                return;
            bWalls = true;
            ProductPage = WallProductPage;
        }
        if (CurrentSurface == "Trim") {
            if (bTrim == true)
                return;
            bTrim = true;
            ProductPage = TrimProductPage;
        }
        return "ProductSelect.aspx?Specifier=" + Specifier + "&SurfaceName=" + CurrentSurface + "&SortOrder=" + CurrentSortOrder + "&Page=" + ProductPage + "&FilterType=" + FilterType + "&Language=" + Lang;
    }
}

function GetMeridianProductPageURL() 
{
    var ProductPage = 1;

    return "MeridianProductSelect.aspx?Specifier=" + Specifier + "&SurfaceName=" + CurrentSurface + "&SortOrder=" + CurrentSortOrder + "&Page=" + ProductPage + "&Language=" + Lang;
}

function GetCostFilteredProduct() 
{
    RoofProductPage = 1;
    FilterCost = document.getElementById("DropDownListCost").selectedIndex;
    ProductSliderURL = GetProductPageURL();
    var acDiv = "Content_" + CurrentSurface;
    bRoof = false;
    AJAXReplace(acDiv, GetProductPageURL());
}

function GetTypeFilteredProduct() {
    FilterType = document.getElementById("DropDownListType").selectedIndex;
    ProductSliderURL = GetProductPageURL();
    var acDiv = "Content_" + CurrentSurface;
    if (CurrentSurface == "Walls") {
        bWalls = false;
        WallProductPage = 1;
    }
    if (CurrentSurface == "Trim") {
        bTrim = false;
        TrimProductPage = 1;
    }
    AJAXReplace(acDiv, GetProductPageURL());
}

function ShowProductSelect(SurfaceName, sortOrder)
{
    CurrentSurface = SurfaceName;
    CurrentSortOrder = sortOrder;
    var acDiv = "Content_" + SurfaceName;
    var url = GetProductPageURL();
    if (url != null) {
        AJAXReplaceWithMessage(acDiv, url, 'Loading, please wait...');
    }
}

function ShowMeridianSelect(LayerName) {
    CurrentSurface = "Roof";
    CurrentLayer = LayerName;
    CurrentSortOrder = 1;
    var acDiv = "Content_" + LayerName;

    Specifier = Specifier.split("_")[0] + "_" + Specifier.split("_")[1] + "_" + Specifier.split("_")[2] + "_" + LayerName;
        
    var url = GetMeridianProductPageURL();
    if (url != null) {
        AJAXReplaceWithMessage(acDiv, url, 'Loading, please wait...');
    }
}

function ShowNextProductPage() 
{
    if (CurrentSurface == "Roof") {
        RoofProductPage++;
        bRoof = false;
    }
    else if (CurrentSurface == "Walls") {
        WallProductPage++;
        bWalls = false;
    }
    else if (CurrentSurface == "Trim") {
        TrimProductPage++;
        bTrim = false;
    }
    var acDiv = "Content_" + CurrentSurface;
    var url = GetProductPageURL();
    if (url != null) {
        AJAXReplaceWithMessage(acDiv, url, 'Loading, please wait...');
    }
    document.getElementById(acDiv).scrollTop = 0;
}

function ShowPreviousProductPage()
{
    if (CurrentSurface == "Roof") {
        RoofProductPage--;
        if (RoofProductPage < 1) {
            RoofProductPage = 1;
        }
        bRoof = false;
    }
    else if (CurrentSurface == "Walls") {
        WallProductPage--;
        if (WallProductPage < 1) {
            WallProductPage = 1;
        }
        bWalls = false;
    }
    else if (CurrentSurface == "Trim") {
        TrimProductPage--;
        if (TrimProductPage < 1) {
            TrimProductPage = 1;
        }
        bTrim = false;
    }
    var acDiv = "Content_" + CurrentSurface;
    var url = GetProductPageURL();
    if (url != null) {
        AJAXReplaceWithMessage(acDiv, url, 'Loading, please wait...');
    }
    document.getElementById(acDiv).scrollTop = 0;
}

// Returns an int given a pixel measurement i.e. str=5px returns 5
function PBMtoInt(str)
{ 
    return parseInt(str.replace(/([^0-9\.\-])+/,"")!=""?str.replace(/([^0-9\.\-])+/,""):"0");
}

function ApplyProduct(sortOrder, productID)
{
    // Subtracting one because sort orders on the server start at one, while JS arrays start at zero
    AppliedProducts[sortOrder - 1] = productID;

    // Allow one render request at a time - FF acts funny if you do multiple
    if (bRenderPending == false) 
    {
        bRenderPending = true;
        // Make sure we don't have any old background images laying around
        var oldbkg = document.getElementById("background");
        if (oldbkg != null)
        {
            oldbkg.parentNode.removeChild(oldbkg);
        }

        // get our elements
        var border = document.getElementById("border");
        var renderarea = document.getElementById("renderArea");
        var backdiv = document.createElement("div");
        var rimg = document.getElementById("zoomableimage");
        var replacementImage = rimg.cloneNode(true);
        
        rimg.parentNode.style.visibility = "hidden";

        baseimagename = "bkzoomableimage";
        replacementImage.id = baseimagename;
        baseelementname = "background";
        backdiv.id = baseelementname;
        backdiv.style.overflow = "hidden";
        backdiv.style.position = "relative";
        backdiv.style.height = renderarea.style.height;
        backdiv.style.width = renderarea.style.width;
        backdiv.style.top = -1 * PBMtoInt(renderarea.style.height) + 10 + "px";
        backdiv.style.left = "10px";

        //    backdiv.style.top = PBMtoInt(rimg.style.top) - rimg.height / rimg.ZIZoomLevel + 10 + "px";
        //    backdiv.style.left = PBMtoInt(rimg.style.left) + 10 + "px";
        //    replacementImage.style.top = "10px";
        //    replacementImage.style.left = "10px";

        backdiv.appendChild(replacementImage);
        border.appendChild(backdiv);
        backdiv.style.zIndex = "-1";

        RenderImage();

        var sel = AppliedProducts.toString();
        AJAXReplace("Products", "GetAppliedProducts.aspx?Specifier=" + Specifier + "&Sel=" + sel + "&Language=" + Lang + "&r=" + Math.random().toString());

        // if we are zoomed allow panning
//        if (rimg.ZIZoomLevel > 1) 
//        {
//            try {
//                backdiv.addEventListener("mousedown", ZIStartPanning, false);
//            }
//            catch (err) {
//                backdiv.attachEvent("onmousedown", ZIStartPanning);
//                backdiv.ondrag = function() { return false; };
//            }
//        }
    }
}

function ApplyMeridianProducts(sortOrder, productID, ridgeID)
{
    // Subtracting one because sort orders on the server start at one, while JS arrays start at zero
    AppliedProducts[sortOrder - 1] = productID;
    AppliedProducts[sortOrder] = ridgeID;

    // Allow one render request at a time - FF acts funny if you do multiple
    if (bRenderPending == false)
    {
        bRenderPending = true;
        // Make sure we don't have any old background images laying around
        var oldbkg = document.getElementById("background");
        if (oldbkg != null)
        {
            oldbkg.parentNode.removeChild(oldbkg);
        }

        // get our elements
        var border = document.getElementById("border");
        var renderarea = document.getElementById("renderArea");
        var backdiv = document.createElement("div");
        var rimg = document.getElementById("zoomableimage");
        var replacementImage = rimg.cloneNode(true);

        rimg.parentNode.style.visibility = "hidden";

        baseimagename = "bkzoomableimage";
        replacementImage.id = baseimagename;
        baseelementname = "background";
        backdiv.id = baseelementname;
        backdiv.style.overflow = "hidden";
        backdiv.style.position = "relative";
        backdiv.style.height = renderarea.style.height;
        backdiv.style.width = renderarea.style.width;
        backdiv.style.top = -1 * PBMtoInt(renderarea.style.height) + 10 + "px";
        backdiv.style.left = "10px";

        //    backdiv.style.top = PBMtoInt(rimg.style.top) - rimg.height / rimg.ZIZoomLevel + 10 + "px";
        //    backdiv.style.left = PBMtoInt(rimg.style.left) + 10 + "px";
        //    replacementImage.style.top = "10px";
        //    replacementImage.style.left = "10px";

        backdiv.appendChild(replacementImage);
        border.appendChild(backdiv);
        backdiv.style.zIndex = "-1";

        RenderImage();

        var sel = AppliedProducts.toString();
        AJAXReplace("Products", "GetAppliedProducts.aspx?Specifier=" + Specifier + "&Sel=" + sel + "&Language=" + Lang + "&r=" + Math.random().toString());
    }
}

function RenderImage()
{
    var sel = AppliedProducts.toString();
    AJAXReplace("RenderImage", "ShowImage.aspx?Specifier=" + Specifier + "&Sel=" + sel + "&Language=" + Lang);
    AJAXReplace("Products", "GetAppliedProducts.aspx?Specifier=" + Specifier + "&Sel=" + sel + "&Language=" + Lang + "&r=" + Math.random().toString());
}

function ShowEnlarge()
{
    var sel = AppliedProducts.toString();
    window.open("EnlargePopup.aspx?Specifier=" + Specifier + "&sel=" + sel + "&Language=" + Lang, 'Enlarge', 'width=1040,scrollbars=yes,location=yes,status=yes,toolbar=yes,resizable=yes');
}