var firstFilter = true;
var filterCount = 0;
var filterLevel = 1;
var lastFilterClicked = "";

var loading = "1"
function AnimateHide(obj, filter) {

    var cls = jQuery(obj).attr('class');
    jQuery(obj).toggleClass('lbl_Disabled');
    jQuery(obj).removeClass(cls);
    jQuery(obj).unbind('click');
}

function clearFilters() {

    jQuery(".filterSelected").removeClass("filterSelected");
    jQuery("div[itemid]").removeAttr("PriFilter");
    jQuery("div[itemid]").removeAttr("SecFilter");
    hasSecondaryFilter = false;
    hasPrimaryFilter = false;
    jQuery("div[itemid]").fadeIn();
    jQuery("div[itemidbar]").show();
    jQuery("#divPrimaryFiltersHeader").html(jQuery("#f1").html());
    jQuery("#divSecondaryFiltersHeader").html(jQuery("#f2").html());
    jQuery(":checkbox").attr("checked", "checked");
    jQuery("#divPrimaryFilters").hide();
    jQuery("#divSecondaryFilters").hide();
	jQuery("#divSecondaryFiltersHeader").show();
}

function switchLoading() {
    jQuery("#divPrimaryFilters").hide();
    jQuery("#divSecondaryFilters").hide();

    if (loading == "1") {
        jQuery("div[itemid]").each(function() {

            var TintStyle = jQuery(this).attr("TintStyle");

            var id = jQuery(this).attr("id");

            var barTintStyle = jQuery("#bar" + id).attr("TintStyle");

            jQuery("#bar" + id).find(".colorSample").attr("style", barTintStyle);
            jQuery("#bar" + id).fadeIn();

            jQuery(this).attr("style", TintStyle);
            jQuery(this).fadeIn();

        });
        loading = "2";

    } else {

        jQuery("div[itemid]").each(function() {

            var MassStyle = jQuery(this).attr("MassStyle");

            var id = jQuery(this).attr("id");

            var barMassStyle = jQuery("#bar" + id).attr("MassStyle");

            jQuery("#bar" + id).find(".colorSample").attr("style", barMassStyle)
            jQuery("#bar" + id).fadeIn();

            jQuery(this).attr("style", MassStyle);
            jQuery(this).fadeIn();

        });
        loading = "1";
    }


}


function initializeFilters() {
    jQuery("#divSecondaryFiltersHeader").show();
    var f1 = jQuery("#f1").html();
    var f2 = jQuery("#f2").html();
    jQuery("#divPrimaryFiltersHeader").html(f1);
    jQuery("#divSecondaryFiltersHeader").html(f2);

    jQuery("#btnAlternateLoading").click(function() {
        clearFilters();
        switchLoading();
    });

    jQuery("#divClearFilters").click(function() {
        clearFilters();
    });

    jQuery("#divPrimaryFiltersHeader").click(function() {
		jQuery("#divSecondaryFiltersHeader").hide();											  
        jQuery("#divSecondaryFilters").hide();
        jQuery("#divPrimaryFilters").css({ 'z-index': '50000' });
        jQuery("#divPrimaryFilters").slideDown('fast');
    });

    jQuery("#divSecondaryFiltersHeader").click(function() {
        jQuery("#divPrimaryFilters").hide();
        jQuery("#divSecondaryFilters").css({ 'z-index': '50000' });
        jQuery("#divSecondaryFilters").slideDown('fast');
    });

    jQuery("#divPrimaryFilters > div").click(function() {
        onFilterClick(this, "Primary");
        jQuery("#divPrimaryFiltersHeader").html(jQuery(this).html());
        jQuery("#divPrimaryFilters").slideUp('fast');
    });

    jQuery("#divSecondaryFilters > div").click(function() {
        onFilterClick(this, "Secondary");
        jQuery("#divSecondaryFiltersHeader").html(jQuery(this).html());
        jQuery("#divSecondaryFilters").slideUp('fast');
    });
}


var hasPrimaryFilter;
var hasSecondaryFilter;

function onFilterClick(filter_obj, FilterType) {
    var parent = jQuery(filter_obj).parent();
    var filter = jQuery(parent).attr("filter");

	jQuery("#divSecondaryFiltersHeader").show();
	
    if (jQuery(filter_obj).hasClass("filterSelected")) return;

    jQuery(filter_obj).parent().find(".filterSelected").removeClass("filterSelected");
    jQuery(filter_obj).toggleClass("filterSelected");

    jQuery("div[itemid]").hide();
    jQuery(".productBar").hide();

    if (FilterType == "Primary") {
        hasPrimaryFilter = true;
        jQuery("div[itemid]").removeAttr("PriFilter");

        jQuery(filter_obj).find(".pi").each(function() {
            var id = jQuery(this).text();
            jQuery("#" + id).attr("PriFilter", 1);
        });

        if (hasSecondaryFilter) {

            jQuery(filter_obj).find(".pi").each(function() {
                var id = jQuery(this).text();

                if (jQuery("#" + id).attr("SecFilter")) {
                    jQuery("#" + id).fadeIn();
                    jQuery("#bar" + id).show();
                }
            });

        } else {

            jQuery(filter_obj).find(".pi").each(function() {
                var id = jQuery(this).text();

                jQuery("#" + id).fadeIn();
                jQuery("#bar" + id).show();
            });
        }

    } else {
        hasSecondaryFilter = true;
        jQuery("div[itemid]").removeAttr("SecFilter");

        jQuery(filter_obj).find(".pi").each(function() {
            var id = jQuery(this).text();
            jQuery("#" + id).attr("SecFilter", 1);
        });

        if (hasPrimaryFilter) {

            jQuery(filter_obj).find(".pi").each(function() {
                var id = jQuery(this).text();

                if (jQuery("#" + id).attr("PriFilter")) {
                    jQuery("#" + id).fadeIn();
                    jQuery("#bar" + id).show();
                }
            });

        } else {

            jQuery(filter_obj).find(".pi").each(function() {
                var id = jQuery(this).text();

                jQuery("#" + id).fadeIn();
                jQuery("#bar" + id).show();
            });

        }

    }
    jQuery(":checkbox").attr("checked", "checked");
}



var p;
var i;

var w;
var h;
var iw = 24;
var ih = 24;

var edge_pad = 10;
var border_offset_x;
var border_offset_y;
var grid_width;
var grid_height;

var productSelected = false;

jQuery(document).ready(function() {

    w = jQuery("#divGrid").width();
    h = jQuery("#divGrid").height();

    grid_width = w - (edge_pad * 2);
    grid_height = h - (edge_pad * 2);

    jQuery("#divColorChart").block({
        message: jQuery("#divLoading"),
        centerY: 0,
        centerX: 0,
        css: { backgroundColor: '', top: '10px', left: '5px', border: ''},
        overlayCSS: { backgroundColor: '#fff', left: '0px', height:'680px'}
    });

    GetProducts()

});

function initializeButtons() {
    //divRequestSample
    //divTechData
    //divMSDS         "techds/MSDSViewer.aspx?item="BL0030C527
    //divRegAppr
    //    

}

function ShowProducts() {
    initializeFilters();
    initializeButtons();
    jQuery("div[itemid][visible=" + true + "]").show();
    jQuery("div[itemidbar][visible=" + true + "]").show();
    jQuery("#divColorChart").unblock();
    ActivateColorChart();
}


function GetProducts() {

    var brand = window.location.pathname;

    var url = "";
    var data = "";

    brand = brand.substring(10, brand.length);

    var slashpos = brand.indexOf("/");
    if (slashpos == -1 || brand.indexOf("Regulatory-Approval") > -1 || brand.indexOf("CIPigments") > -1) {
        url = "GetProducts";
    } else {
        url = "GetProductsByBrand"
        brand = brand.substring(0, slashpos);
        data = "'brand':'" + brand + "'";
    }

    GetProductsStart();

    var xxx = {
        type: "POST",
        url: "/WebServices/Products.asmx/" + url,
        data: "{" + data + "}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(msg) {
            if (msg.d) {
                CreateProducts(msg.d);
                GetColorChartFilters();
            }
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert('Error occured!');
        }
    }

    jQuery.ajax(xxx);
}

function ActivateColorChart() {
    jQuery("#divColorChart").find(".disabled").removeClass("disabled");
}

function ActivateProductInfo() {
    jQuery(".disabled").removeClass("disabled");
}

function GetColorChartFilters() {
    jQuery("#divFilterPlaceHolder").load("Filters.aspx", null, ShowProducts);
}

function GetProductsStart() {
    jQuery("#divLoading").fadeIn();
    jQuery("#divLoadingText").html("Retrieving product data...");

}

function CreateProducts(Products) {

    jQuery("#divLoadingText").html("Creating product tables...");

    if (!Products) return;

    for (i = 0; i < Products.length; i++) {
        p = Products[i];

        CreateProductDIV(p);
    }
}

function CreateClassAttIdDIV(name, value, id) {
    return "<div class='" + name + "' " + name + "='" + value + "' id='" + id + "'>";
}

function CreateClassAttDIV(name, value) {
    return "<div class='" + name + "' " + name + "='" + value + "'>";
}

function CreateClassDIV(value) {
    return "<div class='" + value + "'>"
}

function CreateCloseDIV() {
    return "</div>"
}

function CreateProductDIV(p) {
    if (!p) return;
    if (!p.Itm) return;

    var MassStyle = 'display: none; z-index: 1300; width:' + iw + 'px;height: ' + ih + 'px; left:' + FixX(p.M_A, iw) + 'px; top: ' + FixY(p.M_B, ih) + 'px; position: absolute; background-color: ' + p.HM;
    var TintStyle = 'display: none; z-index: 1300; width:' + iw + 'px;height: ' + ih + 'px; left:' + FixX(p.T1_A, iw) + 'px; top: ' + FixY(p.T1_B, ih) + 'px; position: absolute; background-color: ' + p.HT;

    var newDiv;

    newDiv = CreateClassAttIdDIV("itemid", p.Itm, p.Itm);

    newDiv += CreateClassDIV("label");
    newDiv += p.Lbl;
    newDiv += CreateCloseDIV();

    newDiv += CreateClassDIV("description");
    newDiv += p.Desc;
    newDiv += CreateCloseDIV();

    newDiv += CreateClassAttDIV("cipigment", p.CIP);
    newDiv += p.CIPLabel;
    newDiv += CreateCloseDIV();

    newDiv += CreateClassAttDIV("shade", p.GName);
    newDiv += p.GNameLabel;
    newDiv += CreateCloseDIV();

    newDiv += CreateRequirementsDIV(p);
    newDiv += CreateAppGroupsDIV(p);

    newDiv += CreateCloseDIV();

    jQuery("#divGrid").append(newDiv);
    jQuery("#" + p.Itm).attr("MassStyle", MassStyle);
    jQuery("#" + p.Itm).attr('TintStyle', TintStyle);
    jQuery("#" + p.Itm).attr('M_L', p.M_L);
    jQuery("#" + p.Itm).attr('M_A', p.M_A);
    jQuery("#" + p.Itm).attr('M_B', p.M_B);
    jQuery("#" + p.Itm).attr('T1_L', p.T1_L);
    jQuery("#" + p.Itm).attr('T1_A', p.T1_A);
    jQuery("#" + p.Itm).attr('T1_B', p.T1_B);
    jQuery("#" + p.Itm).attr('style', MassStyle);
    jQuery("#" + p.Itm).attr('active', true);
    jQuery("#" + p.Itm).attr('visible', true);

    jQuery("#" + p.Itm).hover(function() { HoverInItem(this) }, function() { HoverOutItem(this) });

    CreateColorBarProduct(p);

    return;
}

function CreateColorBarProduct(p) {

    jQuery("#divCatalog").append('<div id="bar' + p.Itm + '" itemidbar="' + p.Itm + '" visible=' + true + ' active=' + true + ' class="productBar"><div class="productToggle"><input type="checkbox" id="chk' + p.Itm + '" checked="checked" /></div><div class="productSample"></div><div class="productLabel">' + p.Lbl + '</div></div>');

    var MassStyle = 'background-color: ' + p.HM;
    var TintStyle = 'background-color: ' + p.HT;

    jQuery("#bar" + p.Itm).attr("MassStyle", MassStyle)
    jQuery("#bar" + p.Itm).attr("TintStyle", TintStyle)
    jQuery("#bar" + p.Itm).find(".productSample").attr("style", MassStyle)
    jQuery("#bar" + p.Itm).hover(function() { HoverInItem("#" + p.Itm) }, function() { HoverOutItem("#" + p.Itm) });
    jQuery("#bar" + p.Itm).click(function() { SelectProduct(p) });
    jQuery("#bar" + p.Itm).dblclick(function() { addSampleToBasket(p.Itm, p.Lbl, p.HM, p.HT); });
    jQuery("#chk" + p.Itm).click(function() { OnColorBarClick(p.Itm) });
    jQuery("#" + p.Itm).click(function() { SelectProduct(p) });
    jQuery("#" + p.Itm).dblclick(function() { addSampleToBasket(p.Itm, p.Lbl, p.HM, p.HT); });
}

function CreateAppGroupsDIV(x) {
    if (!x) return;

    var div = CreateClassDIV("cAppGroup");

    for (q = 0; q < x.AppGroups.length; q++) {
        div += CreateClassAttDIV("AppGroup", x.AppGroups[q].Name);

        for (v = 0; v < x.AppGroups[q].Apps.length; v++) {

            div += CreateClassAttDIV("App", x.AppGroups[q].Apps[v].Name);

            for (p = 0; p < x.AppGroups[q].Apps[v].Loadings.length; p++) {
                div += CreateClassAttDIV("Loading", x.AppGroups[q].Apps[v].Loadings[p].Name);
                div += x.AppGroups[q].Apps[v].Loadings[p].Label;
                div += CreateCloseDIV();
            }
            div += CreateCloseDIV();
        }
        div += CreateCloseDIV();
    }
    div += CreateCloseDIV();

    return div;
}

function CreateRequirementsDIV(x) {
    if (!x) return;

    var div = CreateClassDIV("cReq");

    for (b = 0; b < x.Reqs.length; b++) {

        div += CreateClassAttDIV("Req", x.Reqs[b].Name);
        div += x.Reqs[b].Label;
        div += CreateCloseDIV();

    }

    div += CreateCloseDIV();

    return div
}


function HoverInItem(I) {
    var x = parseInt(jQuery(I).attr("M_A"));
    var y = parseInt(jQuery(I).attr("M_B"));

    jQuery(I).toggleClass("itemidHover");
    jQuery(I).css({ 'z-index': '1500' });
}


function HoverOutItem(I) {
    var MassStyle = jQuery(this).attr("MassStyle");
    var TintStyle = jQuery(this).attr("TintStyle");
    var x = parseInt(jQuery(I).attr("M_A"));
    var y = parseInt(jQuery(I).attr("M_B"));

    jQuery(I).removeClass("itemidHover");
    jQuery(I).css({ 'z-index': '1300' });

}

function OnColorBarClick(Item) {
    var checked = jQuery("#chk" + Item).attr("checked");

    if (checked)
        jQuery("#" + Item).fadeIn();
    else
        jQuery("#" + Item).fadeOut();
}

function SelectProduct(p) {
    jQuery("#divPrimaryFilters").hide();
    jQuery("#divSecondaryFilters").hide();

    if (!productSelected) {
        jQuery("#productSample").css({ 'border': 'solid 1px black' });
        jQuery("#productSampleAlt").css({ 'border': 'solid 1px black' });
        jQuery("#loadingSample").css({ 'border': 'solid 1px black' });
        jQuery("#loadingSampleAlt").css({ 'border': 'solid 1px black' });

        jQuery("#divSampleRequest").removeClass("disabled");
        jQuery("#divTechData").removeClass("disabled");
        jQuery("#divMSDS").removeClass("disabled");
        jQuery("#divRegAppr").removeClass("disabled");

        jQuery("#divSampleRequest").toggleClass("button");
        jQuery("#divTechData").toggleClass("button");
        jQuery("#divMSDS").toggleClass("button");
        jQuery("#divRegAppr").toggleClass("button");
        
        jQuery("#divRegAppr").click(function() {
            window.open("/Products/Regulatory.aspx?item=" + p.Itm);
        });
        
        productSelected = true;
    }
  

    jQuery("#divSampleRequest").unbind('click');
    jQuery("#divSampleRequest").click(function() {
        addSampleToBasket(p.Itm, p.Lbl, p.HM, p.HT);
        showSampleBasket();
    });
    
    jQuery("#divTechData").unbind('click');
    jQuery("#divTechData").click(function() {
    window.open("/TechData/" + p.Itm + ".html", "ProductInfo", "menubar=0,status=0,toolbar=0,scrollbars=1,width=820,height=640");
    });
    jQuery("#divMSDS").unbind('click');
    jQuery("#divMSDS").click(function() {
            window.open("/MSDS/" + p.Itm + "_ENG.html");
    });
    jQuery("#divRegAppr").unbind('click');
    jQuery("#divRegAppr").click(function() {
    window.open("/Products/Regulatory.aspx?item=" + p.Itm, "ProductInfo", "menubar=0,status=0,toolbar=0,scrollbars=1,width=980,height=640");
    });

    if (!p.AlternateLoading) {
        jQuery("#loadingSample").hide();
        jQuery("#primaryLoading").hide();
        jQuery("#alternateLoading").html(p.PrimaryLoading);
        jQuery("#productSampleAlt").css({ 'background-color': p.HM });
        jQuery("#loadingSampleAlt").css({ 'background-color': p.HM });
    } else {
        jQuery("#loadingSample").show();
        jQuery("#primaryLoading").show();
        jQuery("#primaryLoading").html(p.PrimaryLoading);
        jQuery("#alternateLoading").html(p.AlternateLoading);
        jQuery("#productSample").css({ 'background-color': p.HM });
        jQuery("#loadingSample").css({ 'background-color': p.HM });
        jQuery("#productSampleAlt").css({ 'background-color': p.HT });
        jQuery("#loadingSampleAlt").css({ 'background-color': p.HT });
    }
    
    jQuery("#productName").html(p.Lbl);
    jQuery("#productID").html(p.Itm);
    jQuery("#productDesc").html(p.Desc);
    
}

function ScaleLAB_x(value) {
    return ((((value + 129) / 257) * 2) - 1) * 3.2
}

function ScaleLAB_y(value) {
    return ((((value + 129) / 257) * 2) - 1) * 2
}

function FixX(ox, iw) {
    ox = ScaleLAB_x(ox);

    border_offset_x = edge_pad - ((iw) / 2);

    var nx = ((grid_width) / 2) + (ox * ((grid_width) / 2)) + border_offset_x + 1;
    return nx;
}

function FixY(oy, ih) {
    oy = ScaleLAB_y(oy);

    border_offset_y = edge_pad - ((ih) / 2);

    var ny = ((grid_height) / 2) + ((oy * ((grid_height) / 2)) * -1) + border_offset_y + 1;
    return ny;
}