/*	==========================================================

	Class: 		Callout Content Slider - Product listing page on Magento
	Use:		Allows a sliding panel at the bottom of the product image 
				on Magento category view page				
	Version:	v1
	By:			Dan Smith (based on Fader v1 by Dave Calvert)

========================================================	*/

var CalloutSlide = Class.create();
CalloutSlide.prototype = {
	
	initialize: function () {
	
		if( $$('.products-grid li.item') != '' ) {
			$$('.products-grid li.item').each(this.setup.bind(this));
		} else {
			return false;
		}
	
	},
	
	setup: function (k,v) {

		if ( $(k).id == '' ) {
			$(k).identify()
		}
		//console.log(k);
		//console.log(v);
		Event.observe($(k),'mouseenter',this.slideUp.bindAsEventListener(this));
		Event.observe($(k),'mouseleave',this.slideDown.bindAsEventListener(this));	
	},
		
	slideUp: function (e) {
		
		// Get element
		el = this.getElementFromEvent(e);
		
		// Check for the ID of the Element
		while(!el.hasClassName('item')) {
			el = el.up(0);
		}
		
		// Set the queue name
		queueName = this.setQueueName(el.id)

		// Empty the queue
		this.emptyQueue(queueName);
				
		// Run effect
		new Effect.Move(el.childElements()[1], { x: 0, y: -23, mode: 'absolute',duration:'0.5',queue:{scope:queueName,position: 'front' }});
	},
	
	slideDown: function (e) {
		
		// Get element
		el = this.getElementFromEvent(e);

		// Check for the ID of the Element
		while(!el.hasClassName('item')) {
			el = el.up(0);
		}

		// Set the queue name
		queueName = this.setQueueName(el.id)

		// Empty the queue
		this.emptyQueue(queueName);
		
		// Run effect
		new Effect.Move(el.childElements()[1], { x: 0, y: 0, mode: 'absolute',duration:'0.5',queue:{scope:queueName,position: 'front' }});
	},
	
	emptyQueue: function (queueName) {
	
		Effect.Queues.get(queueName).invoke('cancel');
	
	},
	
	getElementFromEvent: function (evt) {
		return Event.element(evt);
		
	},
	
	setQueueName: function (str) {
	
		return str.toString();
	
	}
}