/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
var teamovercrest = teamovercrest ? teamovercrest : {};

(function($)
{
    /**
     * Initializes that little gray box which indicates the currently selected category
     */
    $.fn.initFilterHighlighter = function()
    {
        return $(this).each(function()
        {

            var highlighter = $(this);
            var selector = highlighter.parent(); //The whole category selector

            highlighter.css({
                "position" : "absolute",
                "left" : "0px",
                "top" : "0px",
                "margin-left" : "4px",
                "margin-top" : "4px",
                "width" : (selector.width()-8)+'px',
                "height" : (selector.height()-8)+'px'
            });

            $.fn.highlightCategory = function() //Calling category.highlightCategory() seems fun
            {
                return $(this).each(function()
                {
                    var category = $(this);
                    var newPosition = category.position();

                    var targetWidth =
                        $.browser.msie ?
                            (category.outerWidth({margin:true})-4) + "px" :
                            (category.outerWidth({margin:true})-8) + "px";

                    if( newPosition.left == highlighter.position().left &&
                        targetWidth == highlighter.css("width")) return;

                    highlighter.animate({
                        "width" : targetWidth,
                        "left" : newPosition.left+"px",
                        "top" : newPosition.top+"px"
                    }, 1000, "easeOutExpo");
                });
            }

            $.fn.resetHighlighter = function()
            {
                highlighter.animate({
                    "width" : (selector.width()-8)+'px',
                    "left" : "0px",
                    "top" : "0px"
                }, 1000, "easeOutExpo");
            }
        });
    };

    $.fn.initFilterSelector = function()
    {
         /**
         * Highlights the category
         */
        var projectLinkBringToTop = function(link, callback)
        {
            var filterCategory = link.parent();

            if(link.is(":first-child"))
            {
                if(callback) callback();
                return;
            }

            var otherProjectLinks = link.prevAll(".filterProjectLink");

            var delta = link.outerHeight({margin:true});
            var cummHeight = 0;
            otherProjectLinks.each(function()
            {
                cummHeight += $(this).outerHeight({margin:true});
                $(this).animate({"top" : "+="+delta+"px"}, 500, "easeInOutExpo");
            });

            link.animate({"top" : "-="+cummHeight+"px"}, 500, "easeInOutExpo", function()
            {
                link.detach().prependTo(filterCategory).css("top", "0px");
                otherProjectLinks.css("top", "0px");

                if(callback) callback();
            });
        };

        return $(this).each(function()
        {
            var filteringInProgress = false; //Indicates that a process is currently taking place and new ones should be ignored
            var nextFilter = false;
            var selector = $(this);
            var highlighter = $("<div class='filterHighlight'></div>");
//            var label = $("<span class='filterSelectorLabel'>filter our projects</span>");
            var removeFilterLink = $("<a class='filterRemoveLink' href='javascript:void(0)'>show all our projects</a>").hide();


            var registerFilter = function(filter)
            {
                if(filteringInProgress)
                {
                    nextFilter = filter;
                    return; //Ignore event if we're already animating something
                }

                processFilter(filter);
            }
            
            var processFilter = function(filter)
            {
                filteringInProgress = true;

                var filterHandledCallback = function()
                {
                    if(nextFilter==false) filteringInProgress = false;
                    else
                    {
                        filter = nextFilter;
                        setTimeout(function(){processFilter(filter);}, 0); //Tail recursion
                        nextFilter = false;
                    }
                };

                switch(filter.type)
                {
                    case "link":
                        showRemoveFilterLink();
                        var link = filter.value;
                        var category = link.parents(".filterCategory");
                        var categoryName = category.children(".filterTitle").text();

                        link.parents("#filterSelector").find(".filterProjectLink:contains('"+link.text()+"')").each(function()
                        {
                            projectLinkBringToTop($(this));
                        });

                        category.highlightCategory();

                        teamovercrest.projectList.bringToTop(link.text(), function()
                        {
                            teamovercrest.projectList.filter(categoryName, filterHandledCallback);
                        });
                        break;
                    case "category":
                        showRemoveFilterLink();
                        var category = filter.value;
                        var categoryName = category.children(".filterTitle").text();
                        category.highlightCategory();
                        teamovercrest.projectList.filter(categoryName, filterHandledCallback);
                        break;
                    case "noFilter":
                        hideRemoveFilterLink();
                        highlighter.resetHighlighter();
                        teamovercrest.projectList.filter("project", filterHandledCallback); //Effectively shows all projects
                    break;
                }
            }
 
            var hideRemoveFilterLink = function()
            {
                if(!removeFilterLink.is(":visible")) return;
                removeFilterLink.animate({"left": "500px"}, 500, "easeInOutExpo", function()
                {
                    removeFilterLink.hide();
                });
            }

            var showRemoveFilterLink = function()
            {
                if(removeFilterLink.is(":visible")) return;

                var targetLeft = -($(".filterArea").outerWidth() - selector.outerWidth({margin:true}))/2;

                removeFilterLink.css("left", "500px").show();
                removeFilterLink.animate({"left": targetLeft+"px"}, 500, "easeInOutExpo");
            }

            /**
             * Whatcha gonna do, whatcha gonna do when they click on you?
             */
            var suppressCategoryClick = false;
            var projectLinkOnClick = function()
            {
                suppressCategoryClick = true;
                registerFilter({type: "link", value : $(this)});
            }

            var categoryOnClick = function()
            {
                if(suppressCategoryClick)
                {
                    suppressCategoryClick = false;
                    return;
                }
                registerFilter({type: "category", value : $(this)});
            }

            var removeFilterLinkOnClick = function()
            {
                registerFilter({type: "noFilter"});
            }
 
            selector.removeClass("filterHighlight");

            if($.browser.msie)
            {
                selector.removeCorners();
                var options = {
                    tl: {radius: 6},
                    tr: {radius: 6},
                    bl: {radius: 6},
                    br: {radius: 6},
                    antiAlias: true};
                selector.css("border", "1px solid #ddd");
                selector.corner(options);
            }
            
            selector.prepend(highlighter);
            //selector.parent().prepend(label);
            selector.parent().prepend(removeFilterLink);

            highlighter.initFilterHighlighter();

            removeFilterLink.click(removeFilterLinkOnClick);

            selector.find(".filterCategory").mousedown(categoryOnClick);
            selector.find(".filterProjectLink").attr("href", "javascript:void(0);");
            selector.find(".filterProjectLink").mousedown(projectLinkOnClick);
        });
    }
})(jQuery);