//participating products page functionality

///<reference path="lib/jquery-1.2.6-vsdoc.js" />

$(function() {

    $("img[title='Click to see product list.']").css({ "cursor": "pointer" })
        .hover(function() { $(this).stop().fadeTo("normal", .4); }, function() { $(this).stop().fadeTo("slow", 1); })
        .click(function() {
            var brand = $(this).attr("id");
            //create page fade illusion
            $("body").prepend("<div id='screen'></div>");
            $("#screen").css({
                "height": $(document).height(),
                "width": $(document).width()
            }).fadeIn("fast");

            //create pop-up window
            window.scrollTo(0,0);
            $("body").prepend("<div id='list'><div id='greentop'><img id='srf' src='partners/participatingProducts/images/SRF.gif' alt='ShopRite Family'/></div><span class='exit'>Close</span></div>").show("slow");
            $("#list").css({ "left": ($(window).width() / 2) - 170 })
            $(".exit:first").after("<img id='brand' src='partners/participatingProducts/images/" + brand + ".gif' alt=" + brand + "/>");

            //ajax call
            $.get("partners/participatingProducts/productList.xml", function(xml, textStatus) {
                var list;
                if (textStatus == "success") {
                    list = "<ul id='products'>";
                    $(xml).find("brand[id='" + brand + "']>products>product")//find products
                            .each(function() {//populate list
                                list += "<li>" + $(this).text() + "</li>";
                            });
                    list += "</ul>";
                } else { list = "There was an error retrieving products, please try again later."; }

                //append product list
                $("#list").append(list + "<span class='exit'>Close</span>");

                //show list
                $("#list").slideDown("slow", function() {

                    //make sure that list doesnt extend past screen
                    if ($("#list").height() > 800) {
                        $("#screen").css({ "height": ($("#screen").height() + ($("#list").height() - 780)) });
                    }

                    //gotta give the user a way out...
                    $(".exit").click(function() {
                        $("#list").slideUp("normal", function() {
                            $("#screen").fadeOut("normal", function() { $("#screen, #list").remove(); });                         
                        });
                        $(window).unbind("resize");
                    });
                });
            }, "xml");

            //ensure proper display of elements if window is resized
            $(window).bind("resize", function() {
                $("#screen").css({ "height": $(document).height(), "width": $(document).width() });
                $("#list").css({ "left": ($(window).width() / 2) - 170 });
            });
        });
});