var Navigation = new Class({
    Implements: Options,
    
    option: {
        type: "navigation"
    },
    
    initialize: function(selector, options) {
        this.setOptions(options);
        this.elements = $$(selector);
        
        this.elements.each(function(element) {
            var image = $(new Image());
            image.alt = element.get('text');
            
            image.addEvent("load", this.imageLoaded.bind(this, [image, element]));
            
            var extra = "";
            if (this.options.type == "subnavigation") {
                extra = "_active";
            }
            
            image.src = "/pmg/images/" + this.options.type + "/" + element.get('text').split(' ').join('_').toLowerCase().replace(",", "") + extra + ".gif";
        }.bind(this));
    },
    
    imageLoaded: function(image, element) {
        element.set('text', '');
        image.inject(element);
                
        var top = 1;        
        
        if (!element.getParent().hasClass("active")) {
            if (this.options.type == "subnavigation") {
                var oldImage = image;
                var src = oldImage.src;
                oldImage.dispose();
                oldImage.removeEvents("load");
                
                var image = $(new Image());
                image.alt = element.get('text');
                image.src = src.replace("active", "normal");
                image.inject(element);
                
                image.getParent().addEvent("mouseenter", function() { this.setOpacity(1); }.bind(image));
                image.getParent().addEvent("mouseleave", function() { this.setOpacity(1); }.bind(image));
            } else {
                image.setOpacity(0.7);

                image.getParent().addEvent("mouseenter", function() { this.setOpacity(1); }.bind(image));
                image.getParent().addEvent("mouseleave", function() { this.setOpacity(0.7); }.bind(image));                
            }
        } else {
            if (this.options.type == "subnavigation") top = 0;
        }
        
        element.getParent().setStyle('display', 'inline');
        
        image.setStyles({ position: "relative", top: top });
    }
});

window.addEvent("domready", function() {
    new Navigation("div#navigation ul li a", { type: "navigation" });
    new Navigation("div#subnavigation ul li a",  { type: "subnavigation" });
});