/**
 * @author jim
 */


/*
 *  HoverImg class
 * 
 *  HTML: 
 *  	<img id="hovertest" src="images/hovertest_1.gif" />
 * 
 *  JS:
 * 		hoverThing = new HoverImg('hovertest', 'images/hovertest_2.gif' );
 *  
 *  	hoverThing.lockOn();
 *  	hoverThing.lockOff();
 *  	hoverThing.unlock();  
 */

var HoverImg = new Class({
	
    initialize: function(elementId, hoverImg){
		
			this.element = $(elementId);
			this.defaultImgSrc = this.element.getProperty('src');
			this.hoverImgSrc = hoverImg;
			this.bLocked = false;
			this.bHovered = false;
	
			var bob = this;
	
			this.element.addEvents({
				mouseenter: this.hoverOn.bindWithEvent(this),
				mouseleave: this.hoverOff.bindWithEvent(this)
			});				

    },
	
	hoverOn: function()
	{
		if (!this.bLocked)
		{
			this.element.setProperty('src', this.hoverImgSrc);		
		}	
		this.bHovered = true;
	},

	hoverOff: function()
	{
		if (!this.bLocked)
			this.element.setProperty('src', this.defaultImgSrc);
		this.isHovered = false;
	},
	
	lockOn: function()
	{
		this.element.setProperty('src', this.hoverImgSrc);
		this.bLocked = true;	
	},
	
	lockOff: function()
	{
		this.element.setProperty('src', this.defaultImgSrc);
		this.bLocked = true;	
	},	
	
	unlock: function()
	{
		this.bLocked = false;
		
		if (this.bHovered)	
			this.element.setProperty('src', this.hoverImgSrc);
		else	
			this.element.setProperty('src', this.defaultImgSrc);				
	}

});

/*
 *  Menu class
 *  
 */

/*
 * Not a class or anything, but all I need for now...
 */

function setHoverClasses(selector, offClass, onClass)
{
	$$(selector).addEvents( {
		mouseenter: function (e) {
			this.removeClass(offClass);					
			this.addClass(onClass);		
		},
		mouseleave: function (e) {
			this.removeClass(onClass);					
			this.addClass(offClass);	
		}
	});		
}
 
/*
 * A class to handle menu-like attribure transistions on mouse entry and exit
 * 
 */
 
var BftMenu = new Class({
	
    initialize: function(contentElemSelector, onAttr, offAttr, timeMs){
		
        elems = $$(contentElemSelector);
		
		time = timeMs / 10;
		
		elems.each(function(element) {
 
 			element.setStyles(offAttr);
 
			var fx = new Fx.Styles(element, {duration: time, wait: false, transition:Fx.Transitions.Quad.easeInOut});
 
			element.addEvent('mouseenter', function(){
				fx.start(onAttr);
			});
 
			element.addEvent('mouseleave', function(){
				fx.start(offAttr);
			});
 
		});
	
	}
});