﻿/*
    Navigational parsing using jQuery, JS, and JSON. Creates the flyouts for the left-hand nav.
    KEY: <li> elements in the lefthand nav that have flyouts will have an ID which serves as a pointer for the call to the webservice.
*/
var flyOut = '';
var panel = '';
var subLength = '16';                                                        // For submenus, we need two columns if the list is too long.

$(document).ready(function() {
    $('ul.hasResults li').hover(function() {                                 // If we mouse over a left-side menu item.
        if ($(this).attr('id')) {                                            // Look for the existence of an ID (else do nothing).
            loc = this;                                                      // We have to pass the vector to a subvar; inheritance is a pain.
            grab = $(this).attr('id');                                       // Split by underscore and create 'grab' array. Key: 0=Directory, 1=Nodeset
            //if ($("ul#menuFlyout").length == 0) {
            $(loc).prepend('<div id="menuPanel"><div id="flyout"></div><div id="submenu" style="display: none"></div></div>').html();
            $.ajax({
                type: "post",
                url: "/WebServices/CategoryService.asmx/NavConstruct",
                data: "{ 'menu':'" + grab + "' }",
                dataType: "json",
                cache: true,
                contentType: "application/json; charset=utf-8",
                success: function(json) {
                    flyOut = '';
                    var jObj = jQuery.parseJSON(json.d);                  // Native jQuery parses JSON into proper objects.
                    if (jObj[1].length > 0) {
                        var path = jObj[0][0].AbsPath;
                        var menu = jObj[1];
                        i = 0;
                        $(menu).each(function() {
                            mID = menu[i].CategoryName.replace(/ /g, "-");
                            mID = mID.replace("-&-", "-and-")
                            if (menu[i].Children.length <= 1 || menu[i].Children == null) {
                                path = "allproducts";
                            } else {
                                path = "product-type";
                            }

                            flyOut += "<li id=" + mID + "><a href=\"/" + path + "/" + menu[i].TargetUrl + ".aspx\">" + menu[i].CategoryName + "</a></li>";

                            if (menu[i].Children.length > 0) buildPanel(menu[i].Children, path, i, menu[i].CategoryName);
                            i++;
                        });
                        buildMenu(flyOut, loc);
                    } else {
                        alert("No items found.");
                    }
                },
                error: function(response) {
                    alert("JSON Error Response:\r\n" + response.responseText);
                }
            });
            //}
            $("div#menuPanel").show();
        }
    }, function() {
        $("div#menuPanel").remove();
    });

    $('div#menuPanel').hover(function() {
        $("div#menuPanel").show();
    }, function() {
        $("div#menuPanel").hide();
    });

    $('ul#menuFlyout li').live('hover', function(e) {
        if (e && $(this).attr('id')) {
            $("div#submenu div").hide();
            $('.' + $(this).attr('id')).show();
            $('div#submenu').show();
        } else {
            $('.' + $(this).attr('id')).hide();
        }
    });

    function buildMenu(menu, loc) {
        $("div#flyout").html('<ul id=\"menuFlyout\">' + menu + '</ul>');
    }

    function buildPanel(sub, path, j, catName) {
        j = 0;
        var subFly = [];
        var subColLeft = '';
        var subColRight = '';
        var divPattern = '';
        $(sub).each(function() {
            if (sub[j].CategoryName == "Energy") {
                path = "product-type";
            } else if (sub[j].Children.length <= 1 || sub[j].Children == null) {
                path = "allproducts";
            } else {
                path = "product-type";
            }
            /*if (sub[j].TargetUrl == "home-and-office-coffee--tea") {
            subFly[j] = "<a href=\"http://www.blackanddeckerappliances.com/c-2-coffee-tea.aspx\" target=\"_blank\">" + sub[j].CategoryName + "</a>";
            } else if (sub[j].TargetUrl == "home-and-office-food-preparation") {
            subFly[j] = "<a href=\"http://www.blackanddeckerappliances.com/c-16-food-preparation.aspx\" target=\"_blank\">" + sub[j].CategoryName + "</a>";
            } else if (sub[j].TargetUrl == "appliances-small-kitchen-appliances") {
            subFly[j] = "<a href=\"http://www.blackanddeckerappliances.com/default.aspx\" target=\"_blank\">" + sub[j].CategoryName + "</a>";
            } else if (sub[j].TargetUrl == "appliances-clothing--garment-care") {
            subFly[j] = "<a href=\"http://www.blackanddeckerappliances.com/c-29-irons.aspx\" target=\"_blank\">" + sub[j].CategoryName + "</a>";
            } else {
            subFly[j] = "<a href=\"/" + path + "/" + sub[j].TargetUrl + ".aspx\">" + sub[j].CategoryName + "</a>";
            }*/
            if (sub[j].TargetUrl == "appliances-small-kitchen-appliances") {
                subFly[j] = "<a href=\"http://www.blackanddeckerappliances.com/default.aspx\" target=\"_blank\">" + sub[j].CategoryName + "</a>";
            } else if (sub[j].TargetUrl == "appliances-clothing--garment-care") {
                subFly[j] = "<a href=\"http://www.blackanddeckerappliances.com/c-29-irons.aspx\" target=\"_blank\">" + sub[j].CategoryName + "</a>";
            } else if (sub[j].TargetUrl == "home-and-office-clothing--garment-care") {
                subFly[j] = "<a href=\"http://www.blackanddeckerappliances.com/c-29-irons.aspx\" target=\"_blank\">" + sub[j].CategoryName + "</a>";
            } else if (sub[j].TargetUrl == "home-and-office-food-preparation") {
                subFly[j] = "";
            } else if (sub[j].TargetUrl == "home-and-office-cooking") {
                subFly[j] = "";
            } else if (sub[j].TargetUrl == "home-and-office-coffee--tea") {
                subFly[j] = "";
            } else {
                subFly[j] = "<a href=\"/" + path + "/" + sub[j].TargetUrl + ".aspx\">" + sub[j].CategoryName + "</a>";
            }
            j++;
        });
        if (catName) mClass = catName.replace(/ /g, '-');
        mClass = mClass.replace("-&-", "-and-");
        k = 0;
        $(subFly).each(function() {
            if (k < subLength) {
                subColLeft += subFly[k];
            } else {
                subColRight += subFly[k];
            }
            k++;
        });
        divPattern = "<div class='" + mClass + " title'><h1>" + catName + "</h1></div>";
        if (subColLeft.length > 0 && subColRight.length <= 0) {
            divPattern += "<div class='" + mClass + " leftwide'>" + subColLeft + "</div>";
        } else if (subColLeft.length > 0) {
            divPattern += "<div class='" + mClass + " left'>" + subColLeft + "</div>";
        }
        if (subColRight.length > 0) {
            divPattern += "<div class='" + mClass + " right'>" + subColRight + "</div>";
        }
        var checkClassname = "." + mClass + ".title";
        if ($(checkClassname).length <= 0) {
            $("div#submenu").append(divPattern);
        }

    }
});

