var menu_x;
var menu_width;
var menu_height;
var column_number;

/*************** ONLOAD FUNCTION *******************/
$(document).ready(function() {
    $("div#subnav_items").hide();
    $("div#menuContainer").hover(
            function() { },
          function() {
              $("div#subnav_items").hide();
              $("li.CLICKED > a.over").removeClass("over");
              $("li.CLICKED").removeClass("CLICKED");
          });
    getMenuPositionWidth();
    setNdxClasses();
    $("ul.rootGroup li.item").mouseover(
      function() { 
	    ExpandSubmenu(this); 
      }
    );
//    $("ul.rootGroup li.item").mouseout(function() {
//        $(this).fadeOut();
//    }
//    );
});

function reformatProducts() {
    var el = $("table#table_1 td.td_4");
    var el2 = $('#table_1 td.td_3');
    el2.append(el.html());
    el2.addClass('Last');
    //el.remove();
}

/* startup function getting the width of the menu and x-offset of  elements */
function getMenuPositionWidth() {
    var mx = "div.additionalMenuItems > ul.menux li";
    menu_x = $(mx);

    var mw = "div.additionalMenuItems > ul.menuwidth li";
    menu_width = $(mw);

    var mh = "div.additionalMenuItems > ul.menuheight li";
    menu_height = $(mh);


    var cn = "div.additionalMenuItems > ul.colnumber li";
    column_number = $(cn);


}

function setNdxClasses() {
    var topItems = $("ul.rootGroup > li.item");
    for (i = 0; i < topItems.size(); i++) {
        var x = topItems.eq(i);
        x.addClass("ndx_" + i);


    }

}

/* cencels the default onclick behaviour */
function cancelEvent(sender, eventArgs) {
    eventArgs.set_cancel(true);
}

function CcancelEvent()
{ }

/* THIS IS THE MAIN FUNCTION THAT SHOWS THE SUBNAV */
function ExpandSubmenu(eventArgs) {

    var clickedNode = $("li.CLICKED")

    $("li.CLICKED > a.over").removeClass("over");
    clickedNode.removeClass("CLICKED");

    eventArgs.className = eventArgs.className + " CLICKED"; //set clicked node
    $("li.CLICKED > a").addClass("over");

    var node = $("li.CLICKED").eq(0);
    var nodeNumber = node.prevAll().size(); // find the node number

    var nodeSlide = $("li.CLICKED > div"); // this is the subnav contant of the clicked item
    var nodeSlideContent = nodeSlide[0];
    if (nodeSlideContent != null) {
        $("#subnav_items > .main_content")[0].innerHTML = nodeSlideContent.innerHTML;


        // the number of columns if there is no 2nd level content
        var col_num = parseInt(column_number.eq(nodeNumber).text());
        var w = parseInt(menu_width.eq(nodeNumber).text());

        if (!checkThird(nodeNumber, 3, w)) // check if it's the case of the submenu without second level items and if so rewrite it accordingly
        {
            checkSecond(nodeNumber, w);
        }
        //          additionalInfo(eventArgs, nodeNumber); // check if there is any additoonal html that are not int the site map

        // get and set the width and offset

        $("#subnav_items").eq(0).width(w);
        var x = parseInt(menu_x.eq(nodeNumber).text());
        $("#subnav_items").eq(0).css("left", x);

        var h = parseInt(menu_height.eq(nodeNumber).text());
        // $("#subnav_items").eq(0).height(h);

        //$("#subnav_items").show();
        $("#subnav_items").fadeIn();
    }
    else {
         $("#subnav_items").hide();
        //$("#subnav_items").fadeOut();
    }
}

// renders all of the additional html that is not in in the sitemap..images.. spiffs etc.

function getAdditionalInfo(nodeNumber) {

    var posStr = "div.additionalMenuItems > ul." + nodeNumber + " li.position";
    var contentStr = "div.additionalMenuItems > ul." + nodeNumber + " li.content";   //gets content
    var position = $(posStr).eq(0).html();
    var content = $(contentStr).eq(0).html();

    var retArray = [position, content];



    return retArray;


}


function checkThird(nodeNumber, col_num, table_width) {

    var arrPositionContent = getAdditionalInfo(nodeNumber);
    var content = arrPositionContent[1];
    var position = parseInt(arrPositionContent[0]);

    var size = $("#subnav_items  li.hiddenTopLi").size();

    if (size > 0) // if it is 3rd level without 2nd level scenario
    {// we are going to dump all the content into a table in the first element of the list
        var html = "<table class=\"noSecondLevel\"  id=\"table_" + nodeNumber + "\" width=\"" + (table_width - 24) + "px \" >";
        var currentRow = 0; // iterator for rows
        var k = 0;  //iterator for columns
        var addClass = "";
        var columns = ($("#subnav_items li.hiddenTopLi .slide ul")).eq(0).children();
        // ---------------------------------------------------- render table
        for (k = 0; k < columns.size(); k++) {
            if (k % col_num == 0) {
                // if it's a new row

                // if it's not the first row  - put a separator
                if (currentRow > 0)
                    html = html + "<tr><td class=\"separator last\" colspan=\"" + col_num + "\">&nbsp;</td></tr>";
                html = html + "<tr class=\"tr_" + currentRow + "\">";

            }
            if ((k == (columns.size() - 1) || ((k + 1) % col_num == 0)))
                addClass = " last";
            else
                addClass = "";
            html = html + "<td class=\" " + addClass + " td_" + k + "\">" + columns.eq(k).html() + "</td>";
            if ((k + 1) % col_num == 0) {
                html = html + "</tr>";
            }

            currentRow = currentRow + 1;
        }

        html = html + "</tr>";
        // ---------------------------------------------------- end of render table

        if (position == 1) // if there is more content on the bottom
        {

            html = html + "<tr><td class=\"callout_bottom\" colspan=\"" + col_num + "\">" + content + "</td></tr>";

        }


        html = html + "</table>";

        $("#subnav_items > .main_content ")[0].innerHTML = html;
        return true;
    }
    else
        return false;
}


function checkSecond(nodeNumber, table_width) {


    var arrPositionContent = getAdditionalInfo(nodeNumber);
    var content = arrPositionContent[1];
    var position = parseInt(arrPositionContent[0]);

    // end of add content

    var size = $("#subnav_items  .level1 .item").size();

    if (size > 0) // if it is 3rd level without 2nd level scenario
    {// we are going to dump all the content into a table in the first element of the list
        var html = "<table class=\"secondLevel\" width=\"100%\" id=\"table_" + nodeNumber + "\">";
        var i = 0; // iterator for rows
        var k = 0;  //iterator for columns
        var addClass = "";
        var rows = $("#subnav_items ul");

        html = html + "<tr class=\"tr_" + i + "\">";

        for (k = 0; k < rows.eq(i).children().size(); k++) //and render rows
        {
            if (k == (rows.eq(0).children().size() - 1) && position != 2) // if it's a last column
            {
                addClass = " last";

            }
            else
                addClass = "";
            html = html + "<td class=\" " + addClass + " td_" + k + "\">" + rows.eq(i).children().eq(k).html() + "</td>";
        }

        if (position == 2) // if there is more content on the right
        {
            html = html + "<td class=\"last extra td_" + k + 1 + "\">" + content + "</td>";
        }
        html = html + "</tr></table>";
        $("#subnav_items > .main_content ")[0].innerHTML = html;
    }
}