$(document).ready(function(){
        $("span.popularTerms").click(function(){

            var left = $("div.searchBox").position().left;
            var top = $("div.searchBox").position().top;

            var clone = $("div.searchBox").clone();

            $(clone).addClass("searchBoxClone").appendTo("div.navContainer");

            $(clone).find("#search").find("span.popularTerms").bind('click',function(){
                hideClone();
            });

            $(clone).find("div.popularSearchTerms").css({
                height : 160
            });

            $(clone).css({
                position:"absolute",
                top:top,
                left:left,
                zIndex:500
            })
            .animate({
                height:350
            },400,function(){
                getPopularTerms(formatResults,"searchBox");
            });
        });

        function hideClone(){
            $("div.searchBoxClone")
            .animate({
                height:100
            },function(){
                $("div.searchBoxClone ").remove();
            });
        }

        function formatResults(terms){
            terms = terms.results;

            var output = "<div style='font-size:200%;'>";

            for (var i=0;i<5;i++){
                output += "<a href='http://www.wesleyowen.com/search/product/productPowerSearch.jhtml?source=popularTerms&instance=purpleBox&keywords=" +terms[i].searchTerm.replace(/'/g,"%27")+ "' style='padding:0px 5px;color:#FB0;'>" + terms[i].searchTerm + "</a>";
            }

            output += "</div><div style='font-size:180%;'>";

            for (var i=5;i<10;i++){
                output += "<a href='http://www.wesleyowen.com/search/product/productPowerSearch.jhtml?source=popularTerms&instance=purpleBox&keywords=" +terms[i].searchTerm.replace(/'/g,"%27")+ "' style='padding:0px 5px;color:#D90;'>" + terms[i].searchTerm + "</a>";
            }

            output += "</div><div style='font-size:160%;'>";

            for (var i=10;i<15;i++){
                output += "<a href='http://www.wesleyowen.com/search/product/productPowerSearch.jhtml?source=popularTerms&instance=purpleBox&keywords=" +terms[i].searchTerm.replace(/'/g,"%27")+ "' style='padding:0px 5px;color:#B70;'>" + terms[i].searchTerm + "</a>";
            }

            output += "</div><div style='font-size:140%;'>";

            for (var i=15;i<20;i++){
                output += "<a href='http://www.wesleyowen.com/search/product/productPowerSearch.jhtml?source=popularTerms&instance=purpleBox&keywords=" +terms[i].searchTerm.replace(/'/g,"%27")+ "' style='padding:0px 5px;color:#B70;'>" + terms[i].searchTerm + "</a>";
            }

            output += "</div>";

            $("div.searchBoxClone div.popularSearchTerms").append(output).append("<div class='closePopularTerms bright_text clear' style='text-align:right;width:100%;font-size:120%;margin-top:10px;'>close</div>");

            $("div.closePopularTerms").bind('click',function(){
                hideClone();
            });

            $("div.searchBoxClone span.popularTerms").fadeOut(100,function(){
                $("div.searchBoxClone span.popularTerms").find("span").html("hide popular search terms");
                popTermsShown = 1;
                $("div.searchBoxClone span.popularTerms").fadeIn(100);
            });

        }
    });