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

(function($)
{
    $.fn.initProjectThumbnail = function()
    {
        return $(this).each(function()
        {
            $(this).addClass("topLeft").addClass("nivoZoom");

//            var projectWebsiteLink = $(this).parents(".project").find(".projectWebsiteUrl a");
//            if(projectWebsiteLink.length > 0)
//            {
//                var url = projectWebsiteLink.text();
//                $(this).append($("<div class='nivoCaption'><a href='"+url+"'>Project website</a></div>"));
//            }
        });
    }

    $.fn.initProjectReadMoreLink = function()
    {
        return $(this).each(function()
        {
            var readMoreLink = $(this).children(".readMoreLink");
            var project = $(this).parents(".project");

            var container = $("<div class='moreContainer'></div>").hide();
            project.append(container);

            var loadingBox = $("<span class='loadingBox' style='display:inline'></span>").hide();
            loadingBox.insertBefore(readMoreLink);

            var closeLink = $("<a class='closeLink'>hide</a>").hide();
            closeLink.click(function()
            {
                teamovercrest.projectList.changeProjectHeight(project, -container.outerHeight());
                container.animate({"height":"toggle"}, 1000, "easeInOutExpo");
                closeLink.fadeOut(500, function(){readMoreLink.fadeIn(500)});
            });
            closeLink.insertAfter(readMoreLink);

            readMoreLink.click(function()
            {
                var sourceUrl = this.href + "&bare=1";

                var fillContainer = function(data)
                {
                    container.html(data);
                    teamovercrest.projectList.changeProjectHeight(project, container.outerHeight());
                    container.animate({"height":"toggle"}, 1000, "easeInOutExpo");
                    readMoreLink.fadeOut(500, function(){closeLink.fadeIn(500);});
                };

                var callback = function(htmlData)
                {
                    loadingBox.fadeOut(500);

                    if(container.is(":visible")) //Does this even happen?
                    {
                        teamovercrest.projectList.changeProjectHeight(project, -container.outerHeight());
                        container.animate({"height":"toggle"}, 1000, "easeInOutExpo", function(){fillContainer(htmlData);});
                    }
                    else fillContainer(htmlData);
                }

                loadingBox.fadeIn(300, function() {$.get(sourceUrl, null, callback, "html");});

                this.blur(); //Defocus the link
                return false;
            });
        });
    };

    $.fn.initProjectList = function()
    {
        return $(this).each(function()
        {
            var cummHeight = 0;
            $(".project").each(function()
            {
                var height = $(this).outerHeight({margin:true});
                $(this).css({
                    "position" : "absolute",
                    "top" : cummHeight+"px",
                    "height" : height+"px"
                });
                cummHeight += height;
            });
            $(this).css("height", cummHeight+"px");

            $(".projectData .readMore").initProjectReadMoreLink();
            $("#filterSelector").initFilterSelector();
            $(".thumbnailLink").initProjectThumbnail();
            $('body').nivoZoom();
        });
    }

    teamovercrest.projectList = {
        filter : function(categoryName, callback)
        {
            var projects = $(".project");
            var projectList = $("#projectList");
            var matchedProjects = projects.filter("."+categoryName);
            var missingProjects = projects.filter("."+categoryName).not(":visible");
            var unmatchedProjects = projects.not("."+categoryName).filter(":visible");

            if(missingProjects.length+unmatchedProjects.length == 0) //In case there's nothing new to filter
            {
                if(callback) callback();
                return; //Category stays the same
            }

            var processedProjectsCount = 0;
            var checkAllDone = function()
            {
                processedProjectsCount++;
                if(processedProjectsCount<missingProjects.length+unmatchedProjects.length) return;
                if(callback) callback();
            }

            var delay = 0;

            //Slide out all the unmatched projects
            unmatchedProjects.each(function()
            {
                delay+=50;
                if(isScrolledIntoView($(this))) $(this).delay(delay).animate({"left" : "-=1000px"}, 300, "easeInExpo", function()
                {
                    $(this).hide();
                    checkAllDone()
                });
                else
                {
                    $(this).css("left", "-1000px").hide();
                    checkAllDone();
                }
            });

            //Reorganize all the matching projects
            delay=300;
            var cummHeight = 0;
            var offset = $("#projectList").offset().top;
            matchedProjects.each(function()
            {
                if(isScrolledIntoView($(this)) || isScrolledIntoView($(this), cummHeight + offset))
                    $(this).delay(delay).animate({"top" : cummHeight+"px"}, 300, "easeOutExpo"); //Place it on the appropriate height
                else
                    $(this).css("top", cummHeight+"px");

                cummHeight += $(this).outerHeight({margin:true});
            });

            var newBottom = projectList.offset().top + cummHeight;
            if(isInOrAboveViewport(newBottom))
                $.scrollTo({top:(newBottom-$(window).height())+"px", left:"+=0px"}, 300, {easing:"easeOutExpo"});
            projectList.delay(delay).animate({"height" : cummHeight+"px"}, 300, "easeOutExpo"); //Shrink or expand the project list

            //Slide in all the new projects
            delay = 0;
            missingProjects.each(function()
            {
                delay+=100;
                $(this).show();
                if(isScrolledIntoView($(this))) $(this).delay(delay).css("left", "1000px").animate({"left" : "0px"}, 300, "easeOutExpo", checkAllDone);
                else
                {
                    $(this).css("left", "0px");
                    checkAllDone();
                }
            });
        },

        bringToTop : function(projectName, callback)
        {
            var project = $("#projectDescription_"+escape(projectName));
            var projectList = $("#projectList");
//            var cummHeight = 0;
            if(!project.is(":visible"))
            {
                projectList.animate({"height" : "+="+project.outerHeight({margin:true})+"px"}, 300, "easeInOutExpo");
                project.detach().appendTo(projectList);
            }

            if(project.prevAll(".project:visible").length == 0)
            {
                    if(callback) callback();
                    return;
            }
            var otherProjects = project.prevAll(".project:visible");
            var delta = project.outerHeight({margin:true});
            var offset = projectList.offset().top;

            var delay = isScrolledIntoView(project) ? 300 : 0;

            otherProjects.each(function()
            {
                if(isScrolledIntoView($(this)) || isScrolledIntoView($(this), offset + $(this).position().top + delta))
                    $(this).delay(delay).animate({"top" : "+="+delta+"px"}, 300, "easeInOutExpo");
                else
                    $(this).css({"top" : function(i, val) {return parseFloat(val)+delta;}});

//                cummHeight += $(this).outerHeight({margin:true});
            });

            project.animate({"left" : "-=1000px"}, 300, "easeInExpo", function()
            {
                project.detach().prependTo(projectList);
                project.css({"left": "1000px", "top":"0px"}).show().delay(delay).animate({"left" : "0px"}, 300, "easeOutExpo", callback);
            });
        },

        changeProjectHeight : function(project, delta)
        {
            var projectList = $("#projectList");
            var newBottom = projectList.offset().top + projectList.height() + delta;
            if(delta < 0 && isInOrAboveViewport(newBottom))
                $.scrollTo({top:(newBottom-$(window).height())+"px", left:"+=0px"}, 1000, {easing:"easeInOutExpo"});
            
            project.animate({"height": "+="+delta+"px"}, 1000, "easeInOutExpo");
            projectList.animate({"height": "+="+delta+"px"}, 1000, "easeInOutExpo");

            project.nextAll(":visible").each(function()
            {
                var targetTop = $(this).offset().top + delta;
                if(isScrolledIntoView($(this)) || isScrolledIntoView($(this), targetTop)) $(this).animate({"top": "+="+delta+"px"}, 1000, "easeInOutExpo");
                else $(this).css({"top" : function(i, val) {return parseFloat(val)+delta;}});
            });
        }
    };
})(jQuery);