/**
 * jQuery based megamenu by Alex Tretyakov
 *
 */
 
jQuery.fn.megamenu = function(options) {
    options = $.extend({
        boundary: $('body')
    }, options);
    
    
    // Get all items and process
    var items = $(this).children('li:has(div)');
    var controls = items.children('a');
    var containers = items.children('div');
    
    init();
    
    function init() {
        bindGlobalEvents(controls, containers);
    
        items.each(function(){
            var control = $(this).children('a').first();
            var container = $(this).children('div').first();

            container.show(0);
            resizeContainer(container);
            positionContainer(control, container, options.boundary);
            bindPairEvents(control, container);
            container.hide(0);
        });
    }
    
    function resizeContainer(container) {
        var width = 0;
        $(container).children('div').each(function(){
            if ($(this).hasClass('tick')) return;
            width = width + $(this).outerWidth(true);
        });
        $(container).width(width);
    }
    
    function positionContainer(control, container, boundary) {
        // First try to place container "centered" by control
        // On page load the container left side will have the same x offset as control has
        $(container).css({
            left: $(container).position().left - ($(container).outerWidth() - $(control).outerWidth()) / 2
        });
        // If the container is outside the boundary, move it accordingly
        // Check container is smaller then boundary
        var disposition = 0; // Contains numer of pixels container was moved to right
        // console.log(
        //             $(container).outerWidth(true),
        //             $(boundary).innerWidth(), 
        //             $(container).offset().left, 
        //             $(boundary).offset().left, 
        //             $(container).offset().left + $(container).outerWidth(true), 
        //             $(boundary).offset().left + $(boundary).innerWidth()
        //             );
        //         720, 985, 427.5, 140, 1147.5, 1125
        
        if ($(container).outerWidth(true) < $(boundary).innerWidth()) {
            if ($(container).offset().left < $(boundary).offset().left) {
                // Move right
                disposition = $(boundary).offset().left - $(container).offset().left;
            } else if ($(container).offset().left + $(container).outerWidth(true) > $(boundary).offset().left + $(boundary).innerWidth()) {
                // Move left
                disposition = $(boundary).offset().left + $(boundary).innerWidth() - ($(container).offset().left + $(container).outerWidth(true));
            }
        } else {
            disposition = ($(container).outerWidth(true) - $(boundary).innerWidth()) / 2;
        }
        $(container).css({
            left: $(container).position().left + disposition
        });
        // Move the tick
        var tick = $(container).find('.tick');
        tick.css({
            left: ($(container).innerWidth() - tick.width()) / 2
        });
        tick.css({
            left: tick.position().left - disposition
        });
    }
    
    function bindPairEvents(control, container) {
        var hideTimer = false;
        control.hover(function(){
            showContainer(container);
            // Cancel hiding timer
            clearTimeout(hideTimer);
        }, function(){
            hideTimer = setTimeout(function(){
                hideContainer(container);
            }, 500);
        });
        container.hover(function(){
            // Cancel hiding timer
            clearTimeout(hideTimer);
        }, function(){
            hideTimer = setTimeout(function(){
                hideContainer(container);
            }, 500);
        });
    }
    
    function bindGlobalEvents(controls, containers) {
        controls.hover(function(){
            containers.each(function(){
                hideContainer($(this));
            });
        }, function(){
            
        });
    }
    
    function showContainer(container) {
        if (container.hasClass('expanded')) return;
        container.addClass('expanded');
        container.fadeIn(0);
        // Attach class to item
        container.closest('li').addClass('expanded');
    }
    
    function hideContainer(container) {
        container.removeClass('expanded');
        container.fadeOut(0);
        // Attach class to item
        container.closest('li').removeClass('expanded');
    }
}