/** 
 * 	Class for all Listing item behaviour
 */
var ListingItem = new Class({
    initialize: function(el, index){
			this.id 							= index + 1;
			this.el 							= el;
			this.imageTop 				= staticRoot+'/img/bg_itemlisttop.gif';
			this.imageTopOver 		= staticRoot+'/img/bg_itemlisttop_over.gif';
			this.imageBottom			= null;
			this.imageBottomOver	= staticRoot+'/img/bg_itemlistbot_over.gif';
			var self = this;
			
			self.el.addEvent('mouseenter', function (){
				self.changebackground('div.listItemInner', 'mouseenter');
			});
			
			self.el.addEvent('mouseleave', function (){
				self.changebackground('div.listItemInner', 'mouseleave');
			});
    },		

		changebackground: function(subel, e) {
			if (this.el.imageBottom == undefined || this.el.imageBottom == null) {
				this.el.imageBottom = 'none';
			}
	
			if (this.el.imageBottomOver == undefined || this.el.imageBottomOver == null) {
				this.el.imageBottomOver = 'none';
			}
			switch(e) {
				case 'mouseenter':				
					if (subel != null || subel != '') {
						document.getElement(subel, this.el).setStyles({
							backgroundImage: 'url('+this.imageTopOver+')',
							backgroundPosition: 'left top',
							backgroundRepeat: 'no-repeat',
							backgroundColor: this.el.colour	
						});
					}	
					$(this.el).setStyles({
						backgroundImage: 'url('+this.imageBottomOver+')',
						backgroundPosition: 'left bottom',
						backgroundRepeat: 'no-repeat'
					});						
					break;
				
				case 'mouseleave':							
					if (subel != null || subel != '') {
						document.getElement(subel, this.el).setStyles({
							backgroundImage: 'url('+this.imageTop+')',
							backgroundPosition: 'left top',
							backgroundRepeat: 'no-repeat',
							backgroundColor: this.el.colour
		
						});
					}	
					$(this.el).setStyles({
						backgroundImage: 'url('+this.imageBottom+')',
						backgroundPosition: 'left bottom',
						backgroundRepeat: 'no-repeat'
					});					
					break;
			}			
		}
});

window.addEvent('domready', function(){
	var listItemsArray = [];
	$$('.listItem').each(function(el, i) {
		
		listItemsArray[i] = new ListingItem(el, i);
		
	});
	
});

