/**
// Eddy @ e-Learning & Devleopment Team @ Infocan System Limited
// Mar 2011
// 
// To hanlde the top menu and bottom menu effects
// 
// The pulgin will auto apply the class .top-menu and .bottom-menu
// .menuitem  :  
// .menuitem.selected  :  
// .menu-pointer  :
**/

;(function () {
    // # Top Menu
    var TopMenu = function (target, params) {
        if (target == null) {
            params = target;
            target = $(".top-menu");
        }

        for (var i in params)
            this[i] = params[i];

        // # Show Hide Pointer Action
        target.bind("showPointer", function(e) {
            var isFirstRun = false;
            var pointer = null;
            if (target.data("menu-pointer")==null) {
                isFirstRun = true;
                pointer = target.find(".menu-pointer:first");
                target.data("menu-pointer", pointer);
            }
            else {
                pointer = target.data("menu-pointer");
            }

            pointer.stop().animate({opacity:1}, 500);
        }).bind("hidePointer", function(e) {
            var isFirstRun = false;
            var pointer = null;
            if (target.data("menu-pointer")==null) {
                isFirstRun = true;
                pointer = target.find(".menu-pointer:first");
                target.data("menu-pointer", pointer);
            }
            else {
                pointer = target.data("menu-pointer");
            }

            pointer.stop().animate({opacity:0}, 500);
        });

        target.prepend($("<div class=\"menu-pointer\"><div></div></div>"))
        .find(".menu-pointer").show().bind("mouseenter mouseover", function(e) {
            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();
            return false;
        });

        target.find(".menuitem").bind("mouseenter touchstart", function (e) {
            //if (e.isPropagationStopped() || e.isImmediatePropagationStopped()) return false;

            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();
            $(this).select();

        }).bind("mouseleave touchend", function (e) {
            if (e.isPropagationStopped() || e.isImmediatePropagationStopped()) {
                return false;
            }

            
            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();

            var targetElement = target.find(".menuitem.selected");
            if (targetElement==null||targetElement.length<=0) {
                target.trigger("hidePointer");
                return false;
            }
            
            $(targetElement).select();

        }).bind("select", function(e) {
            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();

            var targetElement = $(this);
            
            var isFirstRun = false;
            var pointer = null;

            if (target.data("menu-pointer")==null) {
                isFirstRun = true;
                pointer = target.find(".menu-pointer:first");
                target.data("menu-pointer", pointer);
            }
            else {
                pointer = target.data("menu-pointer");
            }


            if (pointer==null||pointer.length<=0) {
                target.trigger("hidePointer");
                return;
            }
            //target.trigger("showPointer");

            pointer.stop().animate({
                opacity : 1
                //left: targetElement.offset().left + (targetElement.outerWidth() / 2) - (pointer.outerWidth()/2)
                //,left: targetElement.position().left - targetElement.parent(".top-menu").offset().left + (targetElement.outerWidth() / 2) - (pointer.outerWidth()/2)
                ,left: targetElement.position().left - target.offset().left + (targetElement.outerWidth() / 2) - (pointer.outerWidth()/2)
                
            }, 500);

            if (isFirstRun) pointer.stop(true, true);
        });

        var selectedItem = target.find(".menuitem.selected");
        
        if (selectedItem.length<=0)
            target.trigger("hidePointer");
        else
            selectedItem.select();

        return target;
    }


    // # Bottom Menu
    var BottomMenu = function (target, params) {
        var defaultClass = ".bottom-menu";

        if (target == null) {
            params = target;
            target = $(defaultClass);
        }

        for (var i in params)
            this[i] = params[i];
        

        // # Show Hide Pointer Action
        target.bind("mouseenter", function(e) {
           $(this).find(".bottom-menu-background").stop().animate({
               opacity : 0.4
           }, 800);
        }).bind("mouseleave", function(e) {
           $(this).find(".bottom-menu-background").stop().animate({
               opacity : 0 
           }, 800);
        }).bind("showPointer", function(e) {
            var isFirstRun = false;
            var pointer = null;
            if (target.data("menu-pointer")==null) {
                isFirstRun = true;
                pointer = target.find(".menu-pointer:first");
                target.data("menu-pointer", pointer);
            }
            else {
                pointer = target.data("menu-pointer");
            }

            pointer.stop().animate({opacity:1}, 500);
        }).bind("hidePointer", function(e) {
            var isFirstRun = false;
            var pointer = null;
            if (target.data("menu-pointer")==null) {
                isFirstRun = true;
                pointer = target.find(".menu-pointer:first");
                target.data("menu-pointer", pointer);
            }
            else {
                pointer = target.data("menu-pointer");
            }

            pointer.stop().animate({opacity:0}, 500);
        });

        var menuItems = target.find(".menuitem");
        menuItems.wrapInner('<div class="text" />').css({'opacity':'0.8'});
        menuItems.append('<div class="background" />');


        target.append($("<div class=\"menu-pointer\" />"))
        .find(".menu-pointer").bind("mouseenter", function(e) {
            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();
            return false;
        });

        menuItems.bind("mouseenter touchstart", function (e) {
            if (e.isPropagationStopped() || e.isImmediatePropagationStopped()) return false;

            //var targetElement = $(this).stop().animate({'background-position-y':['-50px','linear']}, 500);
            var targetElement = $(this);
            targetElement.find(".background").stop().animate({'top':['-35px', 'linear']}, 500);

            targetElement.select();

        }).bind("mouseleave touchend", function (e) {
            if (e.isPropagationStopped() || e.isImmediatePropagationStopped()) return false;

            //$(this).stop().animate({
            //    'background-position-y' : '80px'
            //}, 500, function() {
            //    //$(this).css({'background-position-y' : '0px 100px'});
            //});

            $(this).find(".background").stop().animate({'top':['35px', 'linear']}, 500);
            
            var targetElement = target.find(".menuitem.selected");
            if (targetElement==null||targetElement.length<=0) return false;

            targetElement.select();

        }).bind("select", function(e) {
            var targetElement = $(this);
            
            var isFirstRun = false;
            var pointer = null;

            if (target.data("menu-pointer")==null) {
                isFirstRun = true;
                pointer = target.find(".menu-pointer:first");
                target.data("menu-pointer", pointer);
            }
            else {
                pointer = target.data("menu-pointer");
            }

            if (pointer==null||pointer.length<=0) return;


            pointer.stop().animate({
                //left: targetElement.offset().left + (targetElement.outerWidth() / 2) - (pointer.outerWidth()/2)
                left: targetElement.offset().left - targetElement.parent(defaultClass).offset().left + (targetElement.outerWidth() / 2) - (pointer.outerWidth()/2)
            }, 500, function() {
                $(this).show();
            });


            if (isFirstRun) pointer.stop(true, true);

        });

        //alert(target.find(".menuitem.selected").length);
        target.trigger("mouseenter");
        target.find(".menuitem.selected").select();

        return target;
    }


    // # Mount Function to jQuery
    $.fn.TopMenu = TopMenu;
    $.fn.BottomMenu = BottomMenu;

    // # Init
    $(function() {
        $.fn.TopMenu();
        $.fn.BottomMenu();

        $(".gradient").prepend("<span></span>");
    });

})();