Fx.backPos = new Class({

	Extends: Fx.CSS,
	initialize: function(element, options){
		this.element = this.subject = document.id(element);
		// gets the direction : 
		
		this.direction = options.direction ? (options.direction.test(/x|horizontal/i) ? "x" : "y") : "x";
		
		this.other = options.other ? options.other : 0 ;
		this.parent(options);
		this.options.property = "background-position";
	},
	prepare: function(element, property, values){
		values = $splat(values);
		var values1 = values[1];
		if (!$chk(values1)){
			values[1] = values[0];
			values[0] = element.getStyle(property);
		}
		
		var parsed = [values[0].split(' ')[this.direction == "x" ? 0 : 1 ].toInt(),
		              values[1]].map(this.parse);
        
		return {from: parsed[0], to: parsed[1]};
	},
	set: function(property, now){
		if (arguments.length == 1){
			now = property;
			property = this.property || this.options.property;
		}
		now.value = this.other
		
		this.render(this.element, property, now, this.options.unit);
		return this;
	},
    render: function(element, property, value, unit){
        var xdir = this.direction == "x";
		element.setStyle(property, (xdir ? value[0].value : this.other) + (unit ? unit :  "px") + " "+ (!xdir ? value[0].value : this.other) + (unit ? unit :  "px"));
	},
	start: function(property, from, to){
		if (!this.check(property, from, to)) return this;
		var args = Array.flatten(arguments);
		this.property = this.options.property || args.shift();
		var parsed = this.prepare(this.element, this.property, args);
		return this.parent(parsed.from, parsed.to);
	}

});

var backSlide = new Class ({
    Binds: ["_slideBack"],
    positions : {
        init : 10,
        active : -25
    },
    initialize : function() {
        [$("contentMenu").getElements("a"), $("container").getElements("div.subsubmenuWarp a")].flatten().each(function (aElt) {
            if(!aElt.hasClass("active")) {
                aElt.setStyle("background-repeat", "repeat-x");
                
                aElt.setStyle("background-position", "0px "+this.positions.init+"px");
                aElt.addEvent("mouseover", this._slideBack.pass([true, aElt]));
                aElt.addEvent("mouseout", this._slideBack.pass([false, aElt]));
            } else {
                aElt.setStyle("background-position", "0px "+this.positions.active+"px");
            }
        },this);
    },
    _slideBack : function(bool, elt) {
        if(!elt.retrieve("tweener")) elt.store("tweener", new Fx.backPos(elt, {"other" : "0", "direction" : "y", duration : 300}));
        if(bool)
            elt.retrieve("tweener").cancel().start(this.positions.active);
        else 
            elt.retrieve("tweener").cancel().start(this.positions.init);
    }
});