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

	Class: 		Fader - For the product listing page
	Use:		Performs operations on the product grid
	Version:	v1
	By:			Dave Calvert

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

var subCategoryMenu = Class.create();
subCategoryMenu.prototype = {
	
	initialize: function (myId) {
		
		// Set the queue name
		this.queueName = myId;
		
		
		if ( $$('#'+myId+' ul li') != '' ) {
			
			$$('#'+myId+' ul li').each(this.setup.bind(this));
			
			// Give all images an id
			$$('#banners .sub-category-img-container img').each( function (k,v) {
				
				// Set the opacity to zero
				$(k).setStyle({opacity:0});
				
				// Set the first one to one
				if ( v == 0 ) {
			
					new Effect.Opacity($(k), { from: 0, to: 1, duration: 1, queue:{ scope:'sub-category-menu-fadein' } } );
					this.currentImage = $(k);
					
				}
				
			}.bind(this) ) ;
			
		} else {
		
			return false;
		
		}
	
	},
	
	setup: function (k,v) {
		// Attach observers
		Event.observe($(k),'mouseenter',this.swap.bindAsEventListener(this, v));

	},
	
	swap: function (e, v) {
		try {
			// Get the new image
			el = this.getElementFromEvent(e);
					
			// find the images
			newImage = $(this.queueName+'-'+v);
			
			// If we are over the current image do nothing
			if (newImage != this.currentImage) { 
				// Fade out existing one
				this.fadeout(this.currentImage, newImage);
				
			}
		} catch(exception) {
		}
		
	},
	
	setCurrentImage: function (img) {
		
		// Set the new image to current one
		this.currentImage = img;
	
	},
	
	fadein: function (img) {
		
		// Empty Queue
		this.emptyQueue('sub-category-menu-fadein');
		new Effect.Opacity($(img), { 
							 		from: 0, 
									to: 1,
									duration: 0.2, 
									queue:{ scope:'sub-category-menu-fadein' },
									afterFinish:this.setCurrentImage(img)
									} );
		
	},
	
	fadeout: function (img, newImage) {

		new Effect.Opacity($(img), { 
							 		from: 1, 
									to: 0, 
									duration: 0.2, 
									queue:{ scope:'sub-category-menu-fadeout' },
									afterFinish:this.fadein(newImage)	
									} );
		
	},
	
	emptyQueue: function (queueName) {
	
		Effect.Queues.get(queueName).invoke('cancel');
	
	},
	
	getElementFromEvent: function (evt) {
		
		return Event.element(evt);
		
	},
	
	setQueueName: function (str) {
	
		return str.toString();
	
	}
	
};