
$jq.fn.insitenav = function (op) {

    var ins = $jq.fn.insitenav;
    ins.o = [];
    ins.op = {};
    ins.c = {
        menuClass: 'ins-js-enabled',
        isParent: 'ins-parent',
        arrowClass: 'ins-arrow'
    };
    if ($jq.easing.easeOutOvershoot) { //set default easing
        insiteEasingShow = 'easeOutOvershoot';
    } else {
        insiteEasingShow = 'linear';
    };
    if ($jq.easing.easeInTurbo) {
        insiteEasingHide = 'easeInTurbo';
    } else {
        insiteEasingHide = 'linear';
    };
    ins.defaults = {
        multiColumn: true,
        header4: false,
        dualColumn: 12, //if a submenu has at least this many items it will be divided in 2 columns
        tripleColumn: 18, //if a submenu has at least this many items it will be divided in 3 columns
        quadColumn: 16, //if a submenu has at least this many items it will be divided in 3 columns
        hoverClass: 'sfHover',
        delay: 100, //make sure menus only disappear when intended, 500ms is advised by Jacob Nielsen
        animationShow: { opacity: 'show' },
        speedShow: 0,
        easingShow: insiteEasingShow,
        animationHide: { width: 'hide', opacity: 'hide' },
        speedHide: 0,
        easingHide: insiteEasingHide,
        autoArrows: true, //Adds span elements to parent li elements, projecting arrow images on these items to indicate submenus. I added an alternative image file with white arrows.
        onShow: function () { }, //callback after showing menu
        onHide: function () { } //callback after hiding menu
    };
    var listMargins = parseInt($jq("ul.ftd-list li").css("margin-right")) + parseInt($jq("ul.ftd-list li").css("margin-left"));
    //alert ("listMargins ="+listMargins);


    //Merge default settings with o function parameter
    var o = $jq.extend({}, ins.defaults, op);
	
	if (o.header4) {
		  if (!o.insitenavWidth) {
			o.insitenavWidth = $jq('ul:first li:first', this).width() + listMargins; //if no width is set in options try to read it from DOM
			//alert ("o.insitenavWidth ="+o.insitenavWidth);
		} else {
			$jq('ul li', this).width(o.insitenavWidth)  //if width is set in invocation make sure this width is true for all submenus
		}
	}
	
  else if (!o.header4) { 
  if (!o.insitenavWidth) {
        o.insitenavWidth = $jq('ul:first li:first', this).width(); //if no width is set in options try to read it from DOM
        //alert ("o.insitenavWidth ="+o.insitenavWidth);
    } else {
        $jq('ul li', this).width(o.insitenavWidth)  //if width is set in invocation make sure this width is true for all submenus
    }
	}

    this.each(function () {

        //Check dom for submenus
        var parentLi = $jq('li:has(ul)', this);
        parentLi.each(function () {
            if (o.autoArrows) { //Add autoArrows if requested
                $jq('>a', this).append('<span class="' + ins.c.arrowClass + '"></span>');
            }
            $jq(this).addClass(ins.c.isParent);
        });

        $jq('ul:not(.ftd-list)', this).css({ left: 'auto', display: 'none' }); //The script needs to use display:none to make the hiding animation possible

        //Divide menu in columns
        //Set width override

        if (o.header4) {
            var uls = $jq('ul', this);
            uls.each(function () {
                //totalCount is essentially the amount of blocks of realestate we need on the menu
                //top categories take up 2 blocks while child categories take up only 1
                var topCatCount = $jq('li.subcat1', this).length;
                var childCatCount = $jq('li.subcat2', this).length;
                var totalCount = childCatCount + (topCatCount * 2);
                //colsize will be the amount of 'blocks' within each column. If there is a remainder 
                //remember what it is because we will need it when building the menu.
                var colsize = Math.floor(totalCount / 4);
                var remainder = totalCount % 4;

                if (totalCount >= o.quadColumn) {
                    $jq(this).width(4 * o.insitenavWidth).addClass('multicolumn quadcolumn');
                }

                //loop through the list items and stick them into column divs.
                var lis = $jq('li:not(.ftd-li)', this);
                if (lis.length > 0) {
                    var colCounter = 1;
                    var loopSize = colsize + ((colCounter <= remainder) ? 1 : 0);
                    var liCounter = 0;
                    var html = '<div class="column">';
                    lis.each(function (index) {
                        var rememberClass = $jq(this).attr('class');
                        if (rememberClass == 'subcat1')
                            liCounter = liCounter + 2;
                        else
                            liCounter++;
                        html += '<li class="' + rememberClass + '">' + $jq(this).html() + '</li>';
                        if ((liCounter % loopSize == 0 || liCounter > loopSize) && lis.length != index + 1) {
                            html += '</div><div class="column">';                            
                            colCounter++;
                            loopSize = colsize + ((colCounter <= remainder) ? 1 : 0);
                            liCounter = 0;
                        }
                    });
                    html += '</div>';
                    $jq('.main-wrapper', this).html(html);
                }
            });
        }

        else if (o.multiColumn) {
            var uls = $jq('ul', this);
            uls.each(function () {
                var ulsize = $jq('>li:not(.ins-parent)', this).length; //Skip list items added by Lavalamp plugin
                if (ulsize >= o.dualColumn) {
                    if (ulsize >= o.tripleColumn) {
                        $jq(this).width(3 * o.insitenavWidth).addClass('multicolumn triplecolumn');
                    } if (ulsize >= o.quadColumn) {
                        $jq(this).width(4 * o.insitenavWidth).addClass('multicolumn quadcolumn');
                    } else {
                        $jq(this).width(2 * o.insitenavWidth).addClass('multicolumn dualcolumn');
                    }
                }
            });
        }



        var root = this, zIndex = 1000;

        function getSubmenu(ele) {
            if (ele.nodeName.toLowerCase() == 'li') {
                var submenu = $jq('> ul', ele);
                return submenu.length ? submenu[0] : null;
            } else {
                return ele;
            }
        }

        function getActuator(ele) {
            if (ele.nodeName.toLowerCase() == 'ul') {
                return $jq(ele).parents('li')[0];
            } else {
                return ele;
            }
        }

        function hideinsitenavUl() {
            var submenu = getSubmenu(this);
            if (!submenu) return;
            $jq.data(submenu, 'cancelHide', false);
            setTimeout(function () {
                if (!$jq.data(submenu, 'cancelHide')) {
                    $jq(submenu).animate(o.animationHide, o.speedHide, o.easingHide, function () { o.onHide.call(submenu); });
                }
            }, o.delay);
        }

        function showinsitenavUl() {
            var submenu = getSubmenu(this);
            if (!submenu) return;
            $jq.data(submenu, 'cancelHide', true);
            $jq(submenu).css({ zIndex: zIndex++ }).animate(o.animationShow, o.speedShow, o.easingShow, function () { o.onShow.call(submenu); });
            if (this.nodeName.toLowerCase() == 'ul') {
                var li = getActuator(this);
                $jq(li).addClass('hover');
                $jq('> a', li).addClass('hover');
            }
        }

        // Bind Events.
        $jq('li', this).unbind().hover(showinsitenavUl, hideinsitenavUl);

    });

};
 $jq(document).ready(function() {
      $jq('ul.dropNav>li>ul').insitenav();	
    });

