var Tabs = new Class({
    initialize: function(element) {
        this.container = $(element);
        var tabTransition = new Fx.Transition(Fx.Transitions.Expo);
        this.active = null;
        $$("#" + this.container.id + " .tab").each(function(item){
            if (this.active == null)
            {
                this.active = item;
                item.setStyle("margin-top", 0);
            }
            var self = this;
            item.fx = new Fx.Tween(item, {
                transition: tabTransition.easeOut,
                duration: 300
            });
            item.contentPanel = $(item.id + "-content");
            if (this.active != item)
                item.contentPanel.setStyle("opacity", 0);
            else
                item.contentPanel.setStyle("opacity", 1);
            item.contentPanel.set('tween', {
                transition: tabTransition.easeIn,
                duration: 300
            });
            item.addEvent("mouseover", function(){
                if (self.active == item)
                    return;
                item.fx.cancel();
                item.fx.start("margin-top", 0);
            });
            item.addEvent("mouseout", function(){
                if (self.active == item)
                    return;
                item.fx.cancel();
                item.fx.start("margin-top", 7);
            });
            item.addEvent("click", function(){
                if (self.active != null)
                {
                    self.active.contentPanel.fade("out");
                    self.active.contentPanel.hide();
                    self.active.fx.cancel();
                    self.active.removeClass("tab-active");
                    self.active.fx.start("margin-top", 7);
                }
                self.active = item;
                item.contentPanel.show();
                item.contentPanel.fade("in");
                item.fx.cancel();
                item.addClass("tab-active");
                item.setStyle("margin-top", 0);
            });
        });
    }
});

window.addEvent("domready", function(){
    $$(".clear-on-focus").each(function(item){
        item.addEvent("focus", function(){
            if (!$chk(item.firstValue))
            {
                item.firstValue = item.value;
            }
            if (item.value == item.firstValue)
            {
                item.value = "";
            }
        });
        item.addEvent("blur", function(){
            if (item.value == "")
                item.value = item.firstValue;
        });
    });    
});