//
// Manage search.
//
// @author Tom Ryder <tom@prodev.co.nz>
// @copyright 2009 Professional Development
//

// ES5 pragma.
"use strict";

// Declarations.
var search;

// Define search setup function.
search = function () {
    var advanced, choose, effect, fields, form, jobCategory, more, none, panel, 
        region, salary, select, swap, text, toggle, types;

    // Define elements, search types, and effect.
    form     = $("search");
    advanced = $("search-advanced");
    more     = $("search-more");
    panel    = $("search-panel");
    region   = $("search-region");
    select   = $("search-type");
    text     = $("search-text");

    none        = $("search-none");
    choose      = $("search-choose");
    salary      = $("search-salary");
    jobCategory = $("search-job-category");
    fields = [none, choose, salary, jobCategory];

    types = new Hash({"choose":    [choose],
                      "sale":      [none],
                      "directory": [none],
                      "jobs":      [salary, jobCategory],
                      "chatta":    [none],
                      "events":    [none],
                      "news":      [none],
                      "shop":      [none],
                      "gallery":   [none],
                      "unified":   [none]});
    effect = new Fx.Slide(panel);

    // Keep faded grey text in the search box when empty.
    (function () {
        var message = "(Enter your search terms here)",
            active = {"color": "#000000"},
            inactive = {"color": "#bbbbbb"},
            empty = "";
        text.addEvents({
            "focus": function () {
                this.setStyles(active);
                if (this.get("value") === message) {
                    this.set("value", empty);
                }
            },
            "blur": function () {
                if (this.get("value") === empty || this.get("value") === message) {
                    this.setStyles(inactive);
                    this.set("value", message);
                }
            }
        });
        text.fireEvent("blur");
        form.addEvent("submit", function () {
            if (text.get("value") === message) {
                text.set("value", empty);
            }
        });
    }());

    // Define swap function, which makes sure only relevant fields are within the switch.
    swap = function () {
        var selected, shows;

        selected = select.getProperty("value");
        shows = types.get(selected);

        if (shows.every(function (show) {
            return (show === none || show === choose);
        })) {
            more.setStyle("display", "none");
        } else {
            more.setStyle("display", "inline");
        }

        fields.each(function (field) {
            if (shows.contains(field)) {
                field.setStyle("display", "block");
            } else {
                field.setStyle("display", "none");
            }
        });
    };

    // Define toggle function, which slides the advanced panel up and down.
    toggle = function () {
        if (effect.open) {
            effect.slideOut();
            advanced.set("value", "0");
            more.setProperty("html", "More Options");
        } else {
            panel.setStyle("display", "block");
            effect.slideIn();
            advanced.set("value", "1");
            more.setProperty("html", "Fewer Options");
        }
    };

    // Run the swap function when the dropdown is changed.
    select.addEvent("change", function () {
        swap();
        return true;
    });

    // Run the toggle function when the more link is clicked.
    more.addEvent("click", function () {
        toggle();
        return false;
    });

    // Start by having the slideout start hidden, and show it if appropriate.
    (function () {
        if (advanced.get("value") === "1") {
            panel.setStyle("display", "block");
        } else {
            effect.slideOut();
        }

        $("search-area-note").setStyles({
            opacity: 0,
            display: "block"
        }).addEvent("show", function () {
            this.fade("in");
        }).addEvent("hide", function () {
            this.fade("out");
        });

        $("search-go").addEvent("click", function () {
            if ($("search-type").get("value") === "choose") {
                $("search-area-note").fireEvent("show").fireEvent("hide", null, 3000);
                return false;
            } else {
                return true;
            }
        });
    }());

    // Select an appropriate search area.
    (function () {
        select.getElements("option").each(function (option) {
            if (option.get("value") === searchArea) {
                option.setProperty("selected", "selected");
            } else {
                option.setProperty("selected", "");
            }
        });
    }());

    // Run the swap function on startup.
    (function () {
        swap();
    }());

};

// Run search setup as soon as the DOM is ready.
$(window).addEvent("load", function () {
    search();
});