//JavaScript Document
//Place functions within this document
//Call functions within the dom ready in the html page

//////////////////////////////////////////////////////////////////

//this is the function we use on mouse enter, tweens width to 700px
var enterFunction = function() {
	this.start('width', '420px');
}
 
//this is the function we use on mouse leave, tweens width back to 300px
var leaveFunction = function() {
	this.start('width', '200px');
}
function addFunc(el){
	// get div to tween
	var div = el.get('id').replace('boxprod_','box_')
	quadIn = new Fx.Tween(div, {
	link: 'cancel',
	duration: 500,
	transition: Fx.Transitions.Quad.easeOut,
	onStart: function(passes_tween_element){
		passes_tween_element.fade(0.8);
	},
	onComplete: function(passes_tween_element){
		//passes_tween_element.highlight('#00ff00');
	}	
    });
	
	
	
	el.addEvents({
        //first, you say what kind of event, place event type inside 'single quotes'
        //then place a :
        //finally you state your function
        //in this case, its a function that binds to the tween
        'mouseenter': enterFunction.bind(quadIn),
        'mouseleave': leaveFunction.bind(quadIn)
    })

	return;
}